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

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

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

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

На экране — строки развёртки, живой шум на canvas, бегущая полоса трекинга, хроматический экранный текст и дрожание кадра; слова выскакивают с пружинной отдачей, а при переходе между страницами изображение схлопывается в помехи с индикатором FF или REW. Сайт написан на чистых HTML, CSS и JavaScript с GSAP, ScrollTrigger и Lenis; формы звонка работают в демо-режиме и ничего не отправляют.

Концепт — это 7 готовых страниц на английском. 22 сентября 2026 года я проверил 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 МБ из-⁠за видео.