Это не абстрактная «красивая анимация». Это рабочий прототип hero-блока: шесть состояний одной сцены, которые человек проходит за 14 секунд и без единого абзаца текста понимает механику вашего бренда — от полки магазина до конкретного адреса помощи. Прототип на этой странице живой: его можно ставить на паузу, перематывать по точкам, крутить скроллом.
Круг. Буквальная окружность на экране — и буквальный цикл: покупка отдаёт долю, доля становится помощью, помощь возвращает человека к покупке. Метафора считывается раньше, чем прочитан первый заголовок.
Тёмная сцена, один тёплый акцент, тонкая линия. Ни одного стокового элемента: банка, кольцо, капли — векторные, перекрашиваются под ваш брендбук за минуту.
Медленное движение по кольцу, резкий акцент в момент «доля отделилась». Ритм 2–3 секунды на состояние: успеваешь прочитать, не успеваешь заскучать.
Та же сцена, колонкой. Ничего не отрезается и не подменяется картинкой — на телефоне анимация та же, просто перестроена сетка.
Страница, которую вы сейчас смотрите, — это и есть ответ. Никакого видеофайла в hero-блоке: всё нарисовано вектором и анимировано браузером.
| Что | Зачем | Если нет |
|---|---|---|
| Логотип в векторе (SVG/AI/PDF) | логотип живёт внутри анимации, растр в движении рассыпается | отрисую по растру, +1 день |
| Брендбук или просто цвета и шрифт | чтобы сцена была «ваша», а не демо-палитра | возьму цвета с текущего сайта |
| Видео главной вкладки, о котором вы пишете | привязать анимацию к тому, что уже есть на странице | — |
| Изображение банки (рендер, фото или 3D-модель) | узнаваемый продукт вместо условной формы | оставлю стилизованную, как в прототипе |
| Цифра доли и 3–5 направлений помощи | конкретика вместо «часть прибыли» | покажу механику без чисел |
| 1–2 референса, которые вам нравятся | приёмка становится сверкой с образцом, а не спором о вкусе | предложу свои |