# ARTEFAKT: 3D-лендинг по подробному промпту

> Как связать WebGL-товар, прокрутку и раскрытие материалов в одном HTML. Полный исходный промпт, локальный пример и честные границы проверки.

Тип: **guide**. Рубрика: **Сайты и дизайн / Анимации**. Дата: **06.10.2026**.
Статус: **draft — локальная реализация; visual/runtime QA и публикация не подтверждены**.

## Материалы

- [Открыть интерактивный пример](/experiments/artefakt/index.html).
- [Оформленный гайд и кнопки скачивания](/experiments/artefakt/guide.html).
- [Полный оригинальный промпт TXT](/experiments/artefakt/sources/original-prompt.txt).
- [Раздел анимаций](/animations.html#artefakt-experiment).

Источник — текст пользователя «Recreate this site as a single HTML file: ARTEFAKT», полученный 06.10.2026. Дата публикации и автор исходной спецификации не установлены. Исходный файл скопирован без изменения байтов. SHA-256: `2c36511895c14829038f43d7980217b0b5a3bd08774e461adc5b6aca8f34b837`.

Текст описывает интерфейс, а не даёт доказательства производительности, готовности магазина или прав на внешние ассеты. Код написан для локального примера в Codex; Claude Code не подключался.

## Модуль 1. Сначала — структура и смысл

### Урок 1. Разделить страницу и эффекты

Шесть секций: первый экран, характеристики, коллекции, технология, вопросы и ответы, подвал. Текст, форма, ссылки и клавиатурная навигация не зависят от готовности WebGL. По просьбе пользователя весь интерфейс переведён на русский: меню, карточки, описания, скрытые подписи, загрузка и ошибки. Название ARTEFAKT сохранено. Исходный английский промпт хранится отдельно без изменений.

На широком landscape-экране используется артборд 1440 × 800 с корневым `min(1.111111vw, 2lvh)`. При ширине ниже 1024 px или портретном соотношении сторон — отдельная потоковая компоновка, а не уменьшенная настольная версия.

### Урок 2. Не обещать несуществующее действие

Меню и CTA переходят к реальным секциям. Покупка, корзина, юридические и социальные ссылки открывают пояснение о демонстрационном режиме. Форма проверяет email и согласие, но не отправляет и не сохраняет данные; успешная валидация не называется подпиской. CSP запрещает отправку формы.

## Модуль 2. Движение и графика

### Урок 3. Один цикл на всю страницу

Общий ticker обслуживает Lenis, декодирование текста, пружины карточек, WebGL и покадровую сцену. Скрытая вкладка останавливает rAF. Сцены вне области просмотра не рендерятся. Пружины костей рассчитываются с фиксированным шагом 60 Гц и максимум четырьмя шагами догоняющего расчёта.

Главная модель использует один canvas на hero и характеристики. Второй контекст FAQ создаётся лениво только в desktop-компоновке, а при переходе к flow освобождается. Адаптивный pixel ratio ограничивает нагрузку, но не доказывает 60 FPS.

### Урок 4. Покадровая технология

На широком экране выбирается 61 WebP-кадр 768 × 768, иначе 41 кадр 512 × 512. Шесть параллельных загрузчиков запускаются рядом с секцией. Если нужный кадр ещё не готов, используется ближайший загруженный. Соседние изображения с альфой смешиваются через `lighter`, чтобы не получить затемнение от двойной композиции `source-over`.

Полностью декодированный набор может занимать около 137 MiB или 41 MiB соответственно, без накладных расходов браузера. Сетевой размер WebP — другое число; реальный вес файлов пока не измерен. Для массового мобильного использования нужен отдельный замер памяти.

### Урок 5. Доступность и остановка

Постоянный текст для скринридеров отделён от случайных декоративных символов. Есть видимый фокус, меню с `aria-expanded`, Escape, системный `prefers-reduced-motion` с обработкой изменения настройки и кнопка паузы. На touch-экране drag не перехватывает вертикальную прокрутку.

`?reduce=1` включает уменьшенное движение; `?t=1.5` фиксирует фазу 3D для ручной проверки. Это не запись всей страницы и не доказательство идентичности кадров исходному сайту.

## Модуль 3. Запуск и приёмка

### Урок 6. Один HTML с внешними зависимостями

CSS и JavaScript находятся внутри `web/experiments/artefakt/index.html`. Версии из промпта: Three.js 0.185.0, Lenis 1.3.26; декодер Draco из той же версии Three.js. Модель, иконки и кадры запрашиваются у `https://storage.getlayers.ai/assets/artefakt-5f7a0c9962/`. Русская версия использует системный моноширинный шрифт с кириллицей вместо внешнего IBM 3270; алфавит декодирования текста тоже русский. Это не автономная офлайн-страница.

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

### Урок 7. Что проверить в браузере

1. Desktop 1440 × 800 и 1920 × 1080: модель, непрерывный переход между hero и характеристиками, отсутствие перекрытия текста.
2. Портрет 1024 × 1366 и телефон 320/390 px: flow-режим, меню, drag, отсутствие горизонтального скролла.
3. Прокрутка технологии: последовательность кадров, указатель слоя, прозрачность; частичная загрузка и offline.
4. Tab / Escape, форма без отправки данных, режим `?reduce=1`, пауза, переключение настройки ОС.
5. Профиль производительности и память: CPU throttling, длительный скролл, скрытая вкладка, слабый GPU.

06.10.2026: попытки HTTP HEAD из рабочей среды для модели, шрифта, первого кадра и двух JS-файлов завершились тайм-аутами. Это не доказательство, что файлы удалены. Инструмент встроенного браузера завершился ошибкой среды `permission path cannot be represented losslessly` до получения страницы. Скриншоты, реальный рендер модели и FPS пока не проверены. Альтернативный браузер не запускался.

## Где применить

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

Внедрение в эти продукты не выполнялось. Сначала заменить бренд/ассеты на собственные, проверить права и нужный пользовательский сценарий. Не превращать форму-пустышку в сбор персональных данных без отдельной задачи и серверной реализации.

## Отличия и открытые пункты

Реализация следует композиции и основной механике спецификации, но не заявляется пиксельно точной копией: нет контрольных изображений оригинала, внешние ассеты не проверены в рантайме. Тонкая настройка exit-lag, всех задержек декодирования и микротипографических связок из промпта остаётся частью визуальной приёмки. Добавлены полезные якоря, кнопки библиотеки, пауза и честный демонстрационный режим вместо фиктивных покупок/подписки.

Открытая лицензия исходной спецификации, модели, логотипа, шрифта и изображений не установлена. Сохранение переданного пользователем текста локально не означает разрешения на коммерческое переиспользование внешних материалов. Публикация ARTEFAKT этой задачей не выполнена.

## История

- 06.10.2026 — исходник сохранён побайтово; создана локальная страница, оформленный гайд и вход через «Анимации». Начальная статическая/программная проверка; browser QA заблокирован средой. Социальных публикаций нет.