ARTEFAKT.
Вещь в движении.

Сохранён без сокращений

Полный английский документ — отдельный TXT рядом с примером. Это не пересказ: сохранены разметка, параметры, названия файлов, исходные формулировки и даже опечатки. Русский гайд объясняет, как с ним работать в Codex. Сам интерактивный пример полностью переведён на русский по просьбе пользователя; название ARTEFAKT и исходные цены сохранены.

SHA-256 оригинала и копии совпадает:

2c36511895c14829038f43d7980217b0b5a3bd08774e461adc5b6aca8f34b837

Прочитать полный промпт в браузере →

Один объект связывает два экрана

В первом экране куртка по центру. При прокрутке она увеличивается, поворачивается и смещается в блок характеристик. Используется один canvas, а не два похожих объекта с заметным стыком. В FAQ отдельная сцена создаётся только на широком экране и при приближении к секции.

Один файл — не значит офлайн

Весь авторский код находится в index.html. Из внешних источников загружаются Three.js 0.185.0, Lenis 1.3.26, декодер Draco, модель и изображения. В русской версии используется системный моноширинный шрифт с кириллицей вместо внешнего IBM 3270. Версии зафиксированы по промпту, не объявлены «проверенными и безопасными навсегда».

Можно открыть скачанный HTML в современном браузере с интернетом; надёжнее — через локальный HTTP-сервер. Сам гайд и TXT нужны только для навигации по комплекту, рендерер от них не зависит.

Windows PowerShell, из папки со скачанным HTML:
python -m http.server 4188 --bind 127.0.0.1

Затем открыть http://127.0.0.1:4188/artefakt.html
Остановка сервера: Ctrl+C

Если модель или CDN недоступны, баннер покажет адрес проблемного файла. Кнопка «Повторить загрузку страницы» запускает новую попытку. Прелоадер не удерживает страницу дольше восьми секунд и не выдаёт тайм-аут за успешную загрузку.

Движение — необязательный слой

• Мышь: поворот куртки, клетчатая подсветка и небольшая глубина товарных карточек.
• Телефон: горизонтальное перетаскивание куртки; вертикальный жест остаётся прокруткой.
• Клавиатура: меню, Escape, все ссылки; в мобильной области модели — ←, → и Home.
• «Остановить»: прекращает декоративное движение. Системное уменьшение движения применяется сразу, без перезагрузки.
• Режим без лишнего движения и фиксированная фаза 3D для проверки.

Числа прелоадера отражают этапы готовности, не процент скачанных байтов. Текст для скринридеров не меняется вместе со случайными символами.

Что нельзя обещать по одному промпту

• Точное совпадение с исходным сайтом: предоставлен текст, но нет контрольных скриншотов живого оригинала.
• Стабильные 60 FPS: это нужно измерять на реальном устройстве; canvas и WebGL не являются исключительно композиторной CSS-анимацией.
• Открытую лицензию: автор и условия использования внешней модели, шрифта, логотипа и картинок в переданном документе не установлены. Перед публичным или коммерческим использованием проверить права.
• Рабочий магазин: корзина, покупка, социальные ссылки и юридические разделы явно демонстрационные. Email не сохраняется и не отправляется.

Намеренные адаптации: полезные якоря вместо одинаковых href="#", панель возврата в библиотеку и паузы, честные статусы ошибок. Для цветов нет дополнительных фотографий, поэтому переключатели обозначены как образцы, а не выдуманные варианты товара.

Куда переносить механику

Eclipse Library / Animation Lab: учебный пример единого цикла анимации и отказоустойчивой загрузки. Eclipse Forge: демонстрации устройства физических продуктов и материалов. Eclipse Media: независимый прототип покадрового объяснения процесса.

Переносить стоит механику, а не чужое название и товарные обещания. Замените модель и графику на собственные, оставьте одно главное действие и проверяйте контент без WebGL. В другие проекты код в этой задаче не переносился.

Канонический гайд Markdown · Все интерактивные примеры