WARM UP: концепт сайта ретро-телешоу, которое учит дизайну

WARM UP — вымышленное ретро-телешоу для тех, кто начинает в дизайне. Его идея в том, что творческие навыки работают как мышцы, поэтому каждый урок оформлен как кассета VHS с тренировкой. VITON¹³ сделал сайт как концепт, чтобы показать игровой сайт в эстетике телеэфира, где обучение держится на одной метафоре и её анимации.

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

Семь страниц: главная, кассета, студия, горячая линия, политика конфиденциальности, условия и 404. Кассет VHS четыре — Idea Stretch, Portfolio Pump, Critique Cardio и Pitch Cool-Down, в программе каждой по 5 упражнений, а на главной стоит телевизор с 5 каналами.

Главная начинается с загрузочного экрана VHS: PLAY, счётчик ленты, трекинг. Дальше — телевизор на пять каналов, которые переключаются стрелками на экране или с клавиатуры, с помехами и титрами-плашками, объёмный ретро-заголовок и бегущая строка. Кассеты показаны как 3D-коробки VHS, собранные на CSS: они поворачиваются при прокрутке и проигрывают превью при наведении. На странице кассеты — видео в рамке телевизора, программа из пяти упражнений с повторами, совет тренера, типичные травмы, домашнее задание и следующая кассета. Страница студии знакомит с тренерами и недельным расписанием эфиров; на горячей линии — форма звонка и FAQ.

Типичный путь — с главной на кассету и дальше на горячую линию. На экране — строки развёртки, живой шум на canvas, бегущая полоса трекинга, хроматический экранный текст и дрожание кадра; слова выскакивают с пружинной отдачей, а бегущая строка ускоряется при прокрутке. При переходе между страницами изображение схлопывается в помехи с индикатором FF или REW.

Сайт написан на чистых HTML, CSS и JavaScript без сборки. Шапка, подвал и оверлеи рендерятся одним общим скриптом, поэтому на всех страницах они одинаковы. Анимации — GSAP со ScrollTrigger и плавная прокрутка Lenis. Формы звонка работают в демо-режиме: состояние хранится в localStorage браузера, и никуда ничего не отправляется. Видео — лицензионный сток с Pexels, подключённый прямыми ссылками на CDN.

Концепт существует как 7 готовых страниц на английском. 22 сентября 2026 года VITON¹³ проверил 6 из них, отрисованных в Chrome, без страницы 404: у всех 6 уникальные title и ровно один H1, язык объявлен, вёрстка на 390 px обходится без горизонтальной прокрутки, битых внутренних ссылок нет.

Lighthouse на главной. На мобильном: производительность 88, доступность 95, рекомендации 77, SEO 100, LCP 2,7 с, CLS 0,048, TBT 0 мс, 9,8 МБ за 21 запрос. На десктопе: производительность 73 при LCP 0,9 с и TBT 0 мс, но CLS 0,577 — блок с каналом и заголовком сдвигается, пока грузятся шрифты и видео; десктопная главная весит 13,4 МБ из-за видео.

WARM UP — концепт, а не заказной проект и не настоящее шоу. Шоу, тренеры, кассеты, расписание и номер телефона вымышлены, видео — лицензионный сток с Pexels. У сайта нет домена, аудитории, поискового трафика и звонков на горячую линию, поэтому кейс ничего не говорит о том, сколько людей стали бы его смотреть и учиться по нему.

Цифры Lighthouse — лабораторный замер одной страницы в один день. Сдвиг вёрстки на десктопе (CLS 0,577) — реальный дефект, который в этой версии не исправлен, а SEO 100 покрывает только базовые вещи: канонических URL, Open Graph, JSON-LD, sitemap.xml и robots.txt пока нет.

Как проверить портфолио веб-студии →