Apple продаёт технику на страницах, где продукт стоит в центре экрана, а рассказ с каждой прокруткой переходит к новой главе. Vireal Aero — такая страница для солнцезащитных очков, которых не существует. Её сделали, чтобы показать, что нужно для такого сайта и что он всё равно может быстро открываться на телефоне.
На странице пять глав. На первом экране крупный заголовок и очки, которые поворачиваются к вам; на компьютере они слегка наклоняются вслед за курсором. В главе «Линзы» по одной появляются три короткие строки, а оттенок зеркальных линз меняется при прокрутке. В главе «Дизайн» оправа разбирается: линзы, ободок, шарниры и дужки расходятся, на мгновение замирают рядом с тремя характеристиками и собираются обратно.
В главе «Цвета» вы выбираете оправу (серебро, графит или золото) и покрытие линз (ирис, океан или янтарь), и модель сразу меняет материал. Последняя глава — сетка характеристик: цифры один раз отсчитываются вверх, когда появляются на экране.
Если у устройства нет видеокарты или WebGL (технология 3D в браузере) не запускается, страница всё равно работает: на том же месте показывается картинка очков, а 3D-библиотека не скачивается вовсе. При включённом «Уменьшении движения» ничего не закрепляется и не двигается с прокруткой: модель стоит под одним удачным углом, а текст появляется без сдвига. Тема и язык выбираются до первой отрисовки, поэтому страница не мигает.
Как сделано: сцену рисует three.js, GSAP ScrollTrigger привязывает каждую главу к прокрутке, а Lenis сглаживает колёсико мыши на компьютере; на телефонах прокрутка остаётся родной. Модель — образец Sunglasses Khronos от Khronos Group (Eric Chadwick, Darmstadt Graphics Group), лицензия CC BY 4.0. Логотипы на дужках заменены знаком Vireal, материалы изменены; ссылка на авторов есть в подвале демо.
Сцена рисует новый кадр, только когда что-то движется (прокрутка, анимация или курсор), а в скрытой вкладке не рисует ничего. Если кадры начинают отрисовываться слишком долго, картинка сама становится чуть менее чёткой. В дизайне один шрифт, Inter, и один фиолетовый акцент, взятый с линзы. Всё демо — 22 файла и 1,5 МБ вместе с библиотеками и моделью.
Замеры от 1 октября 2026 года. Lighthouse в мобильном профиле: скорость 98, главный блок появляется за 2,3 с. У проверяющей машины нет видеокарты, поэтому она, как и PageSpeed Insights, получает картинку вместо 3D. Когда грузится 3D-сцена, оценка 90. На компьютере: 100. На записи экрана с полной прокруткой Chrome на Mac (Apple M1) показал около 57 кадров в секунду в размерах компьютера и телефона. Размер телефона имитировался на Mac, на настоящем телефоне замера не было.
В настоящем проекте: 3D-модель вашего продукта (из CAD-чертежа или готового 3D-файла), ваши тексты и фирменный стиль и те главы, которые нужны вашему продукту. Ежемесячная поддержка от 250 USD: обновление текстов и цен, новые разделы, проверка в новых браузерах и на новых телефонах, контроль скорости и небольшие улучшения.