Так Apple и сильные технологические стартапы показывают свои устройства: живой 3D-объект движется вслед за прокруткой, и продумана каждая деталь. Трудность в том, чтобы такая страница оставалась быстрой и понятной на телефоне.
Вся страница построена на одной идее: тихая коробка со светом внутри. На первом экране рядом с заголовком стоит стеклянный корпус в алюминиевой рамке. Янтарное ядро внутри медленно «дышит», а на компьютере модель слегка поворачивается вслед за курсором. В главе «Внутри» страница останавливается, и корпус раскрывается на четыре слоя: стеклянная оболочка, ядро, плата и медное охлаждение. Текущий слой выходит вперёд вместе с подписью, остальные притушены, а в конце коробка собирается обратно. Всё остальное спокойное: один шрифт, один акцентный цвет, много воздуха.
Числа один раз пробегают от нуля до своего значения, когда появляются на экране. Форма брони проверяет поля и объясняет ошибки словами на обоих языках, а её подтверждение честное: «Это демо, поэтому ничего не отправлено». Русский и английский, день и ночь: оба переключателя в шапке, выбор запоминается, а освещение 3D-сцены меняется вместе с темой.
Запасные режимы. Если в настройках включено «Уменьшение движения» или у устройства нет видеокарты, страница показывает неподвижные картинки модели, целой и раскрытой, а глава становится обычным списком. Всё остальное работает как на обычном сайте.
Как это устроено: сцену рисует three.js, прокруткой управляют GSAP ScrollTrigger и Lenis. Модель собрана в коде из простых форм, без файлов моделей. Кадр рисуется, только когда что-то меняется. Пока сцену закрывают другие разделы, не рисуется ничего, а если кадры начинают запаздывать, чёткость сама снижается. Шрифты и библиотеки загружаются с самого сайта.
Замер 1 октября 2026 года в Chrome на Mac (Apple M1) с его видеокартой: 60 кадров в секунду на ширине компьютера и на ширине iPhone, без медленных кадров. Ширину iPhone я мерила в режиме телефона на Mac, на настоящем телефоне не проверяла. Lighthouse: 100/100/100/100 на компьютере. В проверке для телефона скорость 96 в трёх прогонах из четырёх (один прогон дал 87), основное содержимое появляется за 2,1–2,3 с, доступность, надёжность кода и SEO по 100. Логику раскрытия проверяют 14 автоматических тестов.
В настоящем проекте: модель вашего продукта (из CAD-чертежа или 3D-файла), ваши тексты и фирменный стиль, а если нужно, то и админка, чтобы вы сами меняли тексты. Ежемесячная поддержка от 250 USD: обновление текстов и цифр, новые разделы, проверка в новых браузерах и на новых телефонах, контроль скорости и небольшие улучшения.