Сайт киношколы MOSHKA: первый экран, который учит смотреть кадр
Платформа видеообразования по подписке. Первый экран объясняет язык кино прямо на предмете в кадре, а дальше — библиотека курсов, кураторы из индустрии и один тариф.
Школа продаёт подписку на курсы по режиссуре, съёмке и монтажу. Точкой входа была презентация — сайт нужно было собрать с нуля и сразу под продажу подписки.
Главное требование: за первые пять секунд показать, чему здесь учат. Не текстом про «профессиональные навыки», а демонстрацией — на экране должно быть видно, что меняет свет, фокус и композиция.
Каталог из 13 курсов, девять кураторов с именами из индустрии и десятки видеофрагментов должны читаться как продукт, а не как список ссылок.
4
приёма съёмки в одном интерактивном кадре
13
курсов со своим визуалом и превью
36
облегчённых видео для мобильных
150+
уроков в одной подписке
Первый экран: банан вместо человека
В кадре один предмет и четыре точки — камера, композиция, фокус, цвет. Наводишь на точку, и кадр меняется по-настоящему: появляется сетка третей и предмет разворачивается, камера наезжает, а грейд перекрашивает весь экран — в чёрно-белый, жёсткий контраст или кислотный лайм.
Это и есть обещание школы, показанное вместо описания: язык кино объясняется на банане за пять секунд, без единого слова теории.
Творческая среда: две встречные ленты
Второй экран — тёмный блок, который наезжает поверх первого: две ленты превью едут навстречу друг другу, пауза по наведению, клик открывает трейлер со звуком в попапе.
Превью — короткие немые фрагменты по четыре секунды, полные версии подгружаются только по клику: лента крутится, а канал не забит.
Направления: пять треков и живой пример к каждому
Сценарий, режиссура, блог, ИИ-инструменты и мобильная съёмка. Раскрытая строка показывает не иконку, а рабочий кадр: страницу сценария с репликами, разбор режиссёрской сцены, монтажную полосу из трёх дублей.
Материал для этих визуалов брали из реальных занятий школы — так направление объясняется тем же языком, которому учат.
Библиотека курсов: 13 карточек, и ни одной одинаковой
Каталог собран на шестиколоночной сетке с рваным ритмом: карточки разной ширины, внутри каждой — фрагмент из курса и собственный SVG-визуал: колёса цветокоррекции, монтажный нож, поле промпта, раскадровка.
Фрагменты нарезаны из материалов школы так, чтобы в кадр не попадали титры и субтитры, — каждый показывает ремесло, а не заставку.
Кураторы: стена из карточек и видео посередине
Доказательство уровня школы — люди. По бокам двенадцать статичных карточек кураторов с ролью, стажем и направлениями, а между ними едет закреплённое видео с рассказом о платформе.
Ниже — бегущая строка постеров проектов, в которых кураторы работали: сериалы, полный метр, визуальные эффекты. Регалии показаны обложками, а не списком в тексте.
12 карточек кураторов с ролями и стажем
Закреплённое видео едет между колонками
Бегущая строка из 15 постеров проектов
Наведение подсвечивает карточку фирменным лаймом
Структура обучения: три шага и живые дашборды
Как устроено обучение, объясняют не буллеты, а интерфейс: три шага сами сменяют друг друга, показывая прогресс, календарь эфиров и личный дашборд ученика.
Все три экрана лежат слоями в одной ячейке сетки, поэтому при переключении страница не прыгает — высота блока постоянная.
Тариф, отзывы и вопросы
Один тариф вместо матрицы: 19 € в месяц против 120 € за отдельный курс — сравнение вынесено в оффер и повторено в шапке.
Перед формой оплаты — эмоции учеников и блок вопросов: что входит в подписку, можно ли отменить, нужен ли опыт.
Мобильная версия: интерактив остаётся
На телефоне первый экран сохраняет ту же механику, а тяжёлые блоки перестраиваются: стена кураторов складывается в две колонки, видео кураторов уезжает наверх, ленты замедляются.
Видео: 36 отдельных копий для телефонов
Сайт почти целиком состоит из видео, поэтому у каждого автозапускаемого превью есть облегчённая мобильная копия: 320 пикселей по ширине для вертикальных роликов и 512 — для горизонтальных.
Браузер выбирает нужный файл сам по media-условию, поэтому на мобильном интернете страница не тянет десктопные исходники.
36
мобильных копий видео рядом с основными
~4 с
длина превью — дальше только по клику
13 + 8
фрагментов курсов и трейлеров кураторов
Next.js 16
React 19
GSAP + ScrollTrigger
Lenis
CSS Modules
ffmpeg
Спрашивают чаще всего
Сколько времени занимает такой сайт?
Сайт с интерактивным первым экраном, каталогом курсов и видеоблоками мы собираем за 5–8 недель. Больше всего времени уходит не на код, а на подготовку видео: нарезку фрагментов, кодирование и мобильные копии.
Столько видео не замедляет страницу?
Нет, если готовить их правильно: превью короткие и немые, полные версии — только по клику, для телефонов лежат отдельные лёгкие копии, а вне экрана ролики не проигрываются.
Можно ли заменить «героя» первого экрана?
Да. Механика не привязана к предмету: вместо банана может быть продукт, инструмент или человек — меняется картинка и настройки трансформаций, разметка остаётся прежней.
Интерактив работает на телефоне?
Да, на мобильных те же состояния кадра, но подобраны свои значения поворота и масштаба — на узком экране предмет не должен уезжать под меню.
Живые сайты, а не картинки в презентации
Команда Reut Art
сегодня
Здравствуйте, я владелец компании
производим входные двери
хотел обратиться за редизайном
Здравствуйте, Евгений!
Конечно, наша команда займется этим
Начнем обсуждение вашего лучшего проекта?
Подписаться на рассылку
Согласен получать письма о новых работах и статьях и на обработку персональных данных
Reut Art
ReutArt © 2026
ИП Реут Артём Юрьевич · ИНН 910402081314 · ОГРНИП 320911200026247