FIFTY: концепт-сайт дизайн-студии, построенный вокруг первых пятидесяти миллисекунд

FIFTY — вымышленная студия цифрового дизайна с офисами в Лиссабоне и Берлине. VITON¹³ построил концепт вокруг одной мысли: о сайте судят примерно за пятьдесят миллисекунд, поэтому сайт студии должен высказаться раньше, чем посетитель прочтёт первое слово.

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

7 страниц: главная, Work, страница проекта, Studio, Contact с конструктором брифа, правовая информация и страница 404. Главная открывается прелоадером, который считает от 00 до 50 мс; затем появляются заголовок-манифест на живом фоне WebGL и информационная сетка с часами обеих студий, услугами, контактами и сведениями о том, когда студия свободна. Шоурил открывается в полноэкранном плеере.

Каталог показывает 8 проектов списком, где за курсором следует видеопревью, или сеткой, с фильтрами по категориям. На странице проекта — полноэкранное видео, обзор, который подсвечивается при прокрутке, задача и подход, результаты и ссылка на следующий проект. Панель студии выезжает справа, а страница контактов собирает бриф из услуг, бюджета, сроков и деталей и показывает подтверждение.

Ключевой путь — Работы → Проект → Контакты: посетитель просматривает каталог, открывает кейс и сразу переходит к конструктору брифа. Каждая внутренняя ссылка закрывает страницу чёрной панелью, которая отсчитывает до 50 мс; заголовки появляются по буквам, абзацы подсвечиваются при прокрутке, медиа раскрываются через clip-path, видео движется с параллаксом, а курсор с режимом наложения и подписями и «магнитная» навигация следуют за указателем.

Фон — шейдер WebGL, написанный для этого сайта: фрактальный шум с искажением пространства в тонах тлеющих углей, который тянется к курсору; для браузеров без WebGL есть запасной вариант на CSS. Остальное — чистые HTML, CSS и JavaScript без сборки: шапка, подвал и оверлеи выводятся одним общим скриптом, анимацию и прокрутку ведут GSAP со ScrollTrigger и Lenis, демо-данные остаются в localStorage браузера, и ничего никуда не отправляется. Фото и видео — лицензированные стоковые фотографии и видео с Unsplash и Pexels.

Концепт существует как 7 страниц с 8 проектами и часами двух студий. Lighthouse измерил главную 22 сентября 2026 года. На мобильном, со стандартным замедлением: производительность 89, доступность 94, рекомендации 77 и SEO 100, LCP 2,7 с и CLS 0. На десктопе: производительность 100, доступность 94, рекомендации 77 и SEO 100, LCP 0,5 с. Страница весит 2,1 МБ и делает 13 запросов; это лучшие показатели производительности среди концепт-сайтов, которые VITON¹³ измерил в тот день.

Проверка 6 страниц, отрисованных в Chrome (без страницы 404), показала: у каждой страницы уникальный title и ровно один H1, атрибут lang равен en, вёрстка помещается в экран шириной 390 px без горизонтальной прокрутки, alt есть у 100% изображений, битых внутренних ссылок — 0. Canonical, Open Graph и структурированных данных нет ни на одной из 6 страниц (0/6), файлов sitemap.xml и robots.txt тоже нет.

FIFTY — концепт, который VITON¹³ сделал, чтобы показать диапазон своих работ; это не заказной проект. Студия, её люди, проекты и адреса вымышлены. У сайта нет домена, посетителей, поискового трафика и заявок: конструктор брифа ничего не отправляет. Фото и видео — лицензированные стоковые фотографии и видео с Unsplash и Pexels, а не работы студии.

Оценки Lighthouse — лабораторные замеры главной страницы в один день, а не данные реальных посетителей; страницы проектов с полноэкранным видео не измерялись. SEO 100 покрывает только базовые вещи. Пятьдесят миллисекунд — тема сайта: кейс не измеряет, как быстро реальные посетители составляют мнение, и не доказывает, что сайт принёс бы студии заказы.