Кейс
Сайт киношколы MOSHKA: первый экран, который учит смотреть кадр
Платформа видеообразования по подписке. Первый экран объясняет язык кино прямо на предмете в кадре, а дальше — библиотека курсов, кураторы из индустрии и один тариф.
Клиент
MOSHKA, школа кино и видеопроизводства
Год
2026
Роль
Дизайн и арт-дирекция, Фронтенд-разработка, Интерактив и анимация, Подготовка видео
Сайт
—
Задача
4
приёма съёмки в одном интерактивном кадре
13
курсов со своим визуалом и превью
36
облегчённых видео для мобильных
150+
уроков в одной подписке
Технологии
Next.js 16
React 19
GSAP + ScrollTrigger
Lenis
CSS Modules
ffmpeg
01
Первый экран: банан вместо человека
В кадре один предмет и четыре точки — камера, композиция, фокус, цвет. Наводишь на точку, и кадр меняется по-настоящему: появляется сетка третей и предмет разворачивается, камера наезжает, а грейд перекрашивает весь экран — в чёрно-белый, жёсткий контраст или кислотный лайм.
Это и есть обещание школы, показанное вместо описания: язык кино объясняется на банане за пять секунд, без единого слова теории.
Четыре приёма съёмки — четыре состояния одного кадра
02
Творческая среда: две встречные ленты
Второй экран — тёмный блок, который наезжает поверх первого: две ленты превью едут навстречу друг другу, пауза по наведению, клик открывает трейлер со звуком в попапе.
Превью — короткие немые фрагменты по четыре секунды, полные версии подгружаются только по клику: лента крутится, а канал не забит.
Превью крутятся без звука, полное видео — по клику
03
Направления: пять треков и живой пример к каждому
Сценарий, режиссура, блог, ИИ-инструменты и мобильная съёмка. Раскрытая строка показывает не иконку, а рабочий кадр: страницу сценария с репликами, разбор режиссёрской сцены, монтажную полосу из трёх дублей.
Материал для этих визуалов брали из реальных занятий школы — так направление объясняется тем же языком, которому учат.
Каждое направление раскрывается своим видеопримером
04
Библиотека курсов: 13 карточек, и ни одной одинаковой
Каталог собран на шестиколоночной сетке с рваным ритмом: карточки разной ширины, внутри каждой — фрагмент из курса и собственный SVG-визуал: колёса цветокоррекции, монтажный нож, поле промпта, раскадровка.
Фрагменты нарезаны из материалов школы так, чтобы в кадр не попадали титры и субтитры, — каждый показывает ремесло, а не заставку.
05
Кураторы: стена из карточек и видео посередине
Доказательство уровня школы — люди. По бокам двенадцать статичных карточек кураторов с ролью, стажем и направлениями, а между ними едет закреплённое видео с рассказом о платформе.
Ниже — бегущая строка постеров проектов, в которых кураторы работали: сериалы, полный метр, визуальные эффекты. Регалии показаны обложками, а не списком в тексте.
12 карточек кураторов с ролями и стажем
Закреплённое видео едет между колонками
Бегущая строка из 15 постеров проектов
Наведение подсвечивает карточку фирменным лаймом
06
Структура обучения: три шага и живые дашборды
Как устроено обучение, объясняют не буллеты, а интерфейс: три шага сами сменяют друг друга, показывая прогресс, календарь эфиров и личный дашборд ученика.
Все три экрана лежат слоями в одной ячейке сетки, поэтому при переключении страница не прыгает — высота блока постоянная.
Шаги переключаются сами каждые пять секунд
07
Тариф, отзывы и вопросы
Один тариф вместо матрицы: 19 € в месяц против 120 € за отдельный курс — сравнение вынесено в оффер и повторено в шапке.
Перед формой оплаты — эмоции учеников и блок вопросов: что входит в подписку, можно ли отменить, нужен ли опыт.
08
Мобильная версия: интерактив остаётся
На телефоне первый экран сохраняет ту же механику, а тяжёлые блоки перестраиваются: стена кураторов складывается в две колонки, видео кураторов уезжает наверх, ленты замедляются.
09
Видео: 36 отдельных копий для телефонов
Сайт почти целиком состоит из видео, поэтому у каждого автозапускаемого превью есть облегчённая мобильная копия: 320 пикселей по ширине для вертикальных роликов и 512 — для горизонтальных.
Браузер выбирает нужный файл сам по media-условию, поэтому на мобильном интернете страница не тянет десктопные исходники.
36
мобильных копий видео рядом с основными
~4 с
длина превью — дальше только по клику
13 + 8
фрагментов курсов и трейлеров кураторов
Вопросы
Что обычно спрашивают о таких проектах
Нужен такой же сайт для вашего бренда?
Расскажите о продукте — предложим решение, сроки и стоимость.
Подписаться на рассылку
Reut Art
Cookies
Мы используем файлы cookie для улучшения работы сайта, анализа трафика и персонализации контента. Нажимая «Принять», вы соглашаетесь с Cookie-политикой и обработкой данных согласно Политике конфиденциальности.