Анимация логотипа
Sting на 2-4 с. Короткая и длинная версии для начала Reels, интро на YouTube, обложки презентации и подписи в письмах.
УСЛУГА · МОУШН · УДАЛЁННО
Моушн-дизайн
Моушн-дизайн
и анимация логотипа
Трёхсекундная подпись для логотипа, беззвучный луп на главном экране сайта, кинетическая типографика для Reels. Всё это я проектирую в коде и рендерю в видео: шрифт и цвета точно как у бренда, правки занимают минуты.
~230
КБ AV1 ШОУРИЛ
30
FPS РЕНДЕР
3
ФОРМАТА ИЗ ОДНОГО ИСХОДНИКА
ШОУРИЛ · 11 С
Интро этого сайта
Этот ролик отрендерен из HTML-композиции, написанной для emrekazak.com: HUD видоискателя, заголовок Neue Haas Grotesk и фосфорная акцентная линия. Если браузер поддерживает AV1, он загрузил файл примерно 230 КБ.
Шоурил Emre Kazak: 11-секундное интро бренда, где имя, строка услуг и метка emrekazak.com появляются в рамке видоискателя.
ЧТО МОУШН ДАЁТ БРЕНДУ
Движение работает как голос бренда: один раз настроили, и оно повторяется везде
Статичный логотип это подпись, анимированный это появление. Когда одно и то же движение длиной 2-3 секунды повторяется в первую секунду Reels, в начале видео на YouTube и на обложке презентации, зритель узнаёт бренд раньше, чем успевает прочитать название. Такое повторение живёт дольше любого разового рекламного ролика.
На сайте моушн работает тише. Короткий луп на главном экране сразу показывает, что делает продукт: как открывается панель, сколько шагов в оформлении заказа. Заголовки и тексты остаются на странице в HTML, видео служит только декором и демо, поэтому SEO и доступность не страдают.
В соцсетях кинетическая типографика это самый быстрый формат без съёмки. Отзыв клиента, объявление о цене или совет из трёх пунктов превращаются в Reels 9:16 с фирменным шрифтом и ритмичным монтажом. Один и тот же шаблон каждую неделю рендерится с новым текстом.
ОБЪЕМ РАБОТ · ЧТО Я СОЗДАЮ
Что входит в пакет моушн-дизайна?
От подписи логотипа до лупа на сайте: всё строится из одной системы бренда.
Reels с кинетической типографикой
Текстовые видео 9:16: анонсы, отзывы, советы, цены. Шаблон, который каждую неделю рендерится с новым текстом.
Луп для главного экрана
Беззвучный бесшовный луп на 6-12 с. AV1 + WebM + MP4 и постер, общий бюджет меньше 600 КБ.
Демо продукта / интерфейса
Короткий луп, который показывает панель, приложение или оформление заказа с курсором и выносками.
Набор 9:16 для соцсетей
Та же композиция, перестроенная под Reels, TikTok и Stories с учётом безопасных зон.
Прозрачный оверлей
Плашки с титрами, имена, карты или счётчики поверх отснятого видео; WebM / MOV с альфа-каналом.
КАК Я ЭТО ДЕЛАЮ
Проектирую в коде, сдаю в видео
Анимацию я пишу на HTML и GSAP как веб-страницу, а не на таймлайне After Effects. Браузерный движок покадрово рендерит композицию в MP4. В итоге используются настоящий шрифт бренда и точные коды цветов, а сменить заголовок или сократить длительность с 8 до 6 секунд можно за минуты.
Для веба каждый ролик сжимается в трёх кодеках. Современный браузер выбирает AV1, остальные берут WebM или MP4, для мобильных есть отдельная версия 720 px. Видео играет только когда видно на экране, не запускается у пользователей с настройкой 'уменьшить движение' и вместо этого показывает постер.
| Формат | Размер | Применение |
|---|---|---|
| GIF (640 px, 128 цветов) | 25,3 МБ | Только письма и README. На сайте не использую. |
| Анимированный WebP | 1,1 МБ | Только если обязателен <img>. |
| H.264 MP4 | 1,2 МБ | Универсальный запасной вариант, загрузка в соцсети. |
| VP9 WebM | ~500 КБ | Chrome, Firefox, Android. |
| AV1 MP4 | ~230 КБ | Safari 17+ и современные браузеры. Первый выбор. |
ЛУПЫ, КОТОРЫЕ МЫ ИСПОЛЬЗУЕМ НА САЙТЕ
Примеры прямо с этого сайта
Лупы ниже работают на страницах emrekazak.com. Все они подключены одним и тем же компонентом и играют только когда видны.
ПРОЦЕСС
4 шага от брифа до сдачи
-
01 / BRIEF
Система бренда + площадка
Файл логотипа (SVG), шрифты, коды цветов и где будет играть видео. Сайт, Reels или презентация?
-
02 / STORYBOARD
Ключевые кадры
3-5 статичных кадров, задающих движение. До утверждения ничего не рендерится.
-
03 / АНИМАЦИЯ
Код + превью
Композиция HTML + GSAP, ссылка на превью и промежуточные рендеры. Правки в тот же день.
-
04 / СДАЧА
Мастер + веб + соцсети
Мастер 1080p/4K, AV1/WebM/MP4 + постер для веба, версии 9:16 и код для встраивания.
ЧТО ВЫ ПОЛУЧАЕТЕ
Файлы на руках в конце проекта
- Мастер MP4 1080p или 4K (H.264, высокий битрейт)
- Веб-набор: AV1 + WebM + MP4, мобильная версия 720 px и постер WebP
- Версии 9:16 и 1:1 для соцсетей с учётом безопасных зон
- При необходимости оверлей WebM с альфой / ProRes 4444
- Готовый код встраивания (ленивое воспроизведение, поддержка reduced-motion)
- Исходная композиция: шаблон для повторного рендера с новым текстом
ПАКЕТЫ
Точный расчет по объему
Работаю над отдельной анимацией логотипа, лупом для главного экрана, демо-лупом продукта или ежемесячным набором Reels с кинетической типографикой. Когда понятны длительность, количество сцен и форматы сдачи, присылаю расчет с фиксированной ценой.
Запросить цену →
ЧАСТЫЕ ВОПРОСЫ
О моушн-дизайне
Что использовать: GIF или видео?+
На сайте видео. Один и тот же ролик на 11 секунд весит 25 МБ в GIF и около 230 КБ в AV1; к тому же GIF ограничен 256 цветами, и градиенты идут полосами. GIF я советую только там, где видео не воспроизводится: в email-рассылках или README на GitHub.
Не замедлит ли это мой сайт?+
При правильном встраивании нет. Видео подключается с preload="none", при загрузке страницы скачивается только постер на 20-40 КБ. Воспроизведение начинается, когда на экране видна хотя бы четверть видео, и останавливается, когда оно уходит из вида или вкладка в фоне. У пользователей с настройкой 'уменьшить движение' видео не играет вообще.
Сдаёте в формате Instagram Reels?+
Да. Для Reels и TikTok сдаю 1080x1920 (9:16), 30 fps, H.264 MP4. Заголовки и логотипы стоят в безопасной зоне, вне верхней и нижней областей, которые перекрывает интерфейс приложения. Из той же композиции можно сделать версии 1:1 и 4:5 для ленты.
Какой срок сдачи?+
Анимация логотипа 3-5 рабочих дней, луп для главного экрана 4-7, демо-луп продукта или интерфейса 5-10. Когда шаблон Reels с кинетической типографикой настроен, каждое новое видео обычно готово за 1 рабочий день. Чем быстрее утверждается сториборд, тем короче срок.
Что нужно прислать для анимации логотипа?+
Векторный файл логотипа (SVG, AI или PDF), файлы или названия фирменных шрифтов и коды цветов. Если вектора нет, перерисовку логотипа можно добавить в пакет.
Смогу ли я потом сам обновлять видео?+
Для смены текста просто напишите мне: композиция собрана в коде, поэтому повторный рендер с новым текстом занимает минуты. По желанию передаю и исходную композицию, тогда любой, кто знает HTML, сможет менять текст и цвета.
СВЯЗАННЫЕ УСЛУГИ