ИИ-агент для моушн-графики

RU

Открыть beta

Simple Motion

Глянцевый ролик о запуске приложения в ритме 120 bpm

Тёмный глянцевый 15-секундный ролик о запуске приложения: набранный промпт схлопывается в ссылку, клик роняет бит, затем глобус, карточка, сеть, слова и финал.

Опубликован 10 ноября 2026 г.

Использовать промпт

Промпт откроется в приложении: добавьте свои материалы, и агент соберёт видео.

Пожаловаться на промпт

Замысел

Сделай 15-секундный ролик о запуске моего приложения (15,07 с), только моушн-графика, горизонтальный формат 1920x1080, 60 кадров/с, смонтированный строго под бит 120 bpm: бит каждые 0,5 с от нуля, такт каждые 2 с. Идея — одна непрерывная цепочка, где каждый объект превращается в следующий. Длинный набранный промпт схлопывается в точку, точка становится короткой ссылкой, а клик по ней роняет бит. Затем идут глобус, карточка продукта, сеть, восемь карточек со словами и финальная карточка. Должно ощущаться как премиальная презентация продукта: тёмный и глянцевый стиль почти всё время и яркая финальная карточка в конце. Ничего не снимается на камеру. Название моего продукта, мой адрес, мой знак и мои собственные строки заменяют все приведённые ниже примеры в кавычках (замени на свои). Избегай съёмки и стоковых видео, названий и заявлений других брендов и неточного тайминга: каждое изменение попадает в сетку бита.

Структура

0–1,5 с, длинный промпт. На тёмной странице мигает розовый курсор, а заголовок «DESCRIBE YOUR IDEA · 02» (ОПИШИТЕ СВОЮ ИДЕЮ · 02) проявляется на 0,2 с.
Предложение, намного длиннее экрана, печатается шрифтом Geist Mono 46 px: «Скажи чату, что показать. Агент создаст анимацию. Не нужно искать ключевые кадры. Скажи, что должно измениться...». Печать начинается медленно, в середине идёт взрывом (сотни символов в секунду) и мягко завершается на 1,0 с. Ключевые слова белые, остальные приглушённые.
Курсор доходит примерно до 82% ширины, затем останавливается, а строка прокручивается влево под ним, левый край гаснет через маску.
С 1,05 с строка размазывается в стороны (размытие только по горизонтали) и тускнеет. На 1,38 с она сплющивается в светящуюся розово-белую линию толщиной 4 px, концы которой за пять кадров смыкаются в точку в центре.
1,5–2,3 с, короткая ссылка. Один плоский серо-фиолетовый кадр-вспышка гаснет за 0,2 с. Из точки рождается тёмная плашка с тонкой светлой рамкой: мой знак и «[ваш бренд]» белым с розовым «.app», Manrope полужирный.
Буквы печатаются, каждая появляется из размытия, пока камера приближается примерно до 1,2x и возвращается обратно.
Белый указатель влетает снизу справа и кликает ровно на 2,0 с (дроп). При клике:

плашка вжимается до 0,96 и на два кадра становится ярче;
страница вспыхивает тёмно-розовым и гаснет за 0,12 с;
от клика растут светлое кольцо и два розовых кольца с power4.out;
примерно семьдесят розовых и белых искр разлетаются с торможением.

2,0–4,4 с, глобус. Тёмный глобус (радиус 780 px) поднимается снизу и медленно вращается. У него розовое свечение внутри края, белые точки вместо суши и едва заметные меридианы.
Плашка уменьшается примерно вдвое и поднимается наверх. Под ней стоит «● LIVE PREVIEW» (ПРЕВЬЮ ВЖИВУЮ) розовым моно-шрифтом, затем огромная моно-надпись «IDEAS IN MOTION» (ИДЕИ В ДВИЖЕНИИ) размером 154 px, которая прокручивается как одометр:

по одной обрезанной колонке на букву, каждая прокручивает случайные буквы;
колонки останавливаются слева направо по кривой power4.out за 2,5 с;
колонки, которые ещё не остановились, остаются тусклого призрачного цвета.
Розовые кометы летят дугой от плашки к глобусу и оставляют пульсирующее кольцо в месте приземления.

4,4–7,5 с, карточка продукта. Размытое растворение (4,41–4,52 с) ведёт к тёмной скруглённой карточке в лёгкой 3D-перспективе, которая выходит из сильного наклона и продолжает дрейфовать.
Вверху: плашка со значком ссылки и «[ваш бренд].app», плашка «Live preview» (Живое превью) и мой знак справа вверху.
Три показателя в ряд с подписями «Pick a template» (Выберите шаблон), «Describe your idea» (Опишите свою идею) и «Refine in words, then export» (Доработайте словами и экспортируйте), значения отсчитываются до «01», «02» и «03».
Активный показатель лежит на слабой панели со светящимся подчёркиванием. Панель перепрыгивает к следующему показателю на 5,5 с и 6,0 с, а подчёркивание становится фиолетовым, затем розовым, затем бирюзовым.
Плоскостная диаграмма со светящейся линией прорисовывается, затем на каждом прыжке перетекает в новую кривую и цвет.
С 6,3 с ползунок с маленькой подсказкой идёт по линии. Подсказка читает «Edit in words» (Редактируй словами) / «Bigger» (Больше), затем «Slower» (Медленнее).
Четыре уведомления въезжают справа и сдвигают стопку вверх:

«Describe your idea» (Опишите свою идею) / «Tell the chat what to show.» (Скажите чату, что показать.)
«No keyframes» (Без ключевых кадров) / «Say what should change.» (Скажите, что должно измениться.)
«Live preview» (Живое превью) / «The preview updates as you talk.» (Превью обновляется по ходу разговора.)
«MP4 export» (Экспорт в MP4) / «Vertical, horizontal or square» (Вертикально, горизонтально или квадрат)
На 7,25 с карточка в 3D уносится прочь, размывается и исчезает к 7,48 с.

7,5–10,5 с, сеть. Белый диск с моим знаком выскакивает из темноты внутри фиолетового свечения, перелетает до 1,12x и успокаивается к 7,9 с.
Заголовок «Edit in words.» (Редактируй словами.) поднимается по словам из собственной строки вверху, слово «words.» в градиенте фиолетовый–розовый–оранжевый.
Вокруг диска примерно 37 круглых аватаров (простые лица-заглушки в цветных кольцах) выскакивают кольцо за кольцом вдоль двух пунктирных эллипсов. Тонкие фиолетовые линии соединяют их с центром, и они медленно вращаются.
Бирюзовые искры бегут по линиям. Каждое кольцо, до которого они добрались, становится бирюзовым и светится, а рядом выскакивает маленькая бирюзовая плашка с функцией: «+Type», «+Shapes», «+3D», «+Sound», «+Music», «+Fonts», «+Photos», «+Logos» (+Шрифт, +Фигуры, +3D, +Звук, +Музыка, +Шрифты, +Фото, +Логотипы). Ни одна плашка не перекрывает другую.
Внизу «[ваш бренд].app» выкатывается по буквам бирюзовым моно-шрифтом, под ним «YOUR AI MOTION DESIGNER» (ТВОЙ ИИ-МОУШН-ДИЗАЙНЕР). С 9,8 с камера дрейфует влево.
10,5–12,5 с, восемь карточек со словами, по одной каждые 0,25 с на восьмых долях. Первая влетает от правого края и резко тормозит, заголовок смазан движением. Каждая карточка — один заголовок Manrope ExtraBold 240 px:

«Kinetic type.» (Кинетическая типографика.) тёмными чернилами на светлой странице;
«Shapes.» (Фигуры.) белым на почти чёрном, тёмно-розовые квадраты включаются;
«3D effects.» (3D-эффекты.) тёмными чернилами на розовом, буквы поднимаются по одной;
«Sound effects.» (Звуковые эффекты.) белым контурным шрифтом на почти чёрном;
«Another colour.» (Другой цвет.) на медленно вращающемся коническом градиенте из акцентных цветов;
«Your footage.» (Твои съёмки.) фиолетовым на светлой странице;
«Music.» (Музыка.) светящимся бирюзовым над падающими нотами;
мой знак с «[ваш бренд].» белым на почти чёрном.
В углах стоит мелкий моно-текст:
слева вверху: мой знак и адрес;
справа вверху: «0N / 08»;
слева внизу: тег раздела вроде «[ NO KEYFRAMES ]» ([ БЕЗ КЛЮЧЕВЫХ КАДРОВ ]);
справа внизу: линия прогресса, заполняющаяся на одну восьмую с каждой карточкой.

12,5–15,07 с, финальная карточка. Один бледный кадр, затем светлая страница раскрывается кругом из центра поверх серо-фиолетовой страницы.
С 12,5 до 13,0 с мой знак уменьшается примерно с 3x, выпрямляясь и переходя от блёкло-серого к полному цвету.
Пастельное облако (розовый, фиолетовый, персиковый, мятный, масляный) набухает снизу и дрейфует.
На 13,15 с знак уезжает влево, а название «[ваш бренд]» выходит из-за него в центрированный логотип-локап: тёмные чернила, Manrope 600, около 170 px.
Строка «Your idea is ready to move.» (Твоя идея готова двигаться.) поднимается по словам с 13,46 с, с интервалом 0,05 с. «move.» (двигаться.) розовое, а розовое подчёркивание рисуется под ним на 14,06 с.
Две кнопки выскакивают с эффектом back: тёмная «Try it free →» (Попробуй бесплатно →) на 14,16 с и белая моно «[ваш бренд].app» на 14,25 с. Держи до конца.

Композиция

Палитра:

почти чёрный фон #0D0B1E;
тёмные чернила #1C0B5D для тёмного шрифта на светлых страницах;
светлая страница #FAF9FF и мягкая лаванда #F0EDFF;
приглушённый текст #6B6385 и более светлый приглушённый #8F89A8 на тёмном;
линии #E9E4F2;
белый #FFFFFF.
Акценты: розовый #FB2D89 главный (курсор, ссылки, кольца, акцентное слово), оранжевый #FE9117 второй. Фиолетовый #7C6CF2, бирюзовый #2DD4B0 и жёлтый #FFD23F появляются только там, где нужно различать три цвета.
Шрифты: Manrope (700–800) для заголовков и интерфейса, Geist Mono для набираемого текста, подписей, счётчиков и адресов. Мелкие подписи — моно 24 px, заглавные, с широким трекингом (около 0,23 em).
Слабая сетка 96 px цвета линий лежит под радиальной маской: 5% на тёмных страницах, 3,5% на светлой финальной карточке.
Мой знак, скруглённая квадратная иконка приложения, появляется в плашке-ссылке, на карточке продукта, в центре сети, в углу карточек со словами и на финальной карточке.

Техники

Каждая сцена передаёт свой объект следующей: линия схлопывается в точку, точка вырастает в плашку, плашка поднимается над глобусом, глобус растворяется в карточку, карточка уносится в сеть, а сеть влетает в карточки со словами.
Срезы и удары используют одиночные плоские кадры-вспышки, быстро гаснущие: серо-фиолетовый за 0,2 с на 1,5 с, тёмно-розовый за 0,12 с на клике, приглушённый фиолетовый, сходящий за три кадра на каждом срезе карточек, бледный на финальной карточке.
Кривые:

power4.out для колец и посадки одометра;
овершут для появления диска сети;
back для кнопок финальной карточки;
резкое торможение для рывка первой карточки со словом.
Размытие и маски: размытие только по горизонтали для смаза и рывка, подъём из размытия на каждой набранной букве, размытое растворение в карточку, размытие на её 3D-выходе и затухание масок на прокручиваемых краях.
Камера дышит всё время: наезд на плашку, медленный 3D-дрейф карточки, вращающиеся аватары и дрейф влево в сети. Свечение лежит на линиях, ободках, кольцах и активном подчёркивании, а искры летят с торможением.

Музыка

Инструментальный электронный synthwave, 120 bpm, до минор, тёмный и глянцевый, ровно по длине видео.

Тихое фильтрованное вступление раскрывается, нарастая первые две секунды, с райзером.
Дроп приходится точно на клик на 2,0 с, в напористый бит: бочка на каждую долю, хэты на слабые доли, пульсирующий бас, яркое арпеджио.
Ровный драйв идёт до финальной карточки.
Всё обрывается на 12,5 с одним большим ударом и ярким аккордом до минора, длинный хвост реверберации которого затихает к концу.
Громкость около −14 LUFS, true peak ниже −1 dBTP.

Звук

Звуковые эффекты ложатся на картинку и никогда не дублируют барабаны музыки:

тихие тики под печать;
короткий вуш и стеклянный тик, когда линия схлопывается и вспыхивает;
клик, бум и удар на дропе на 2,0 с;
вуш в карточку на 4,45 с;
маленькие блипы на два прыжка по вкладкам и на каждое из четырёх уведомлений;
вуш, когда карточка уносится;
мягкий глухой удар, когда выскакивает знак на 7,55 с;
быстрый вуш на рывке на 10,5 с;
тик на каждом срезе карточек со словами;
короткий райзер в финальную карточку;
бум и мягкий всплеск на 12,5 с;
лёгкий вуш, когда раскрывается лого-локап;
два блипа для кнопок.
Закадрового голоса нет.

Референсы

Премиальный SaaS-ролик о запуске в стиле отполированного моушн-дизайна для презентации продуктов: тёмный глянцевый интерфейс, светящиеся линии, кинетическая типографика, счётчики-одометры, 3D-карточки дашборда и быстрые заголовочные карточки из одного слова на бит, завершающиеся пастельным воздушным брендовым лого-локапом.

Что подготовить

Знак моего приложения в виде квадратной или скруглённо-квадратной иконки, показывается в плашке-ссылке, на карточке продукта, в центре сети, в углах карточек со словами и на финальной карточке.
Необязательно: небольшие квадратные портретные фото, чтобы заменить лица-заглушки в аватарах сети.

Приёмы моушн-дизайна, из которых собрано видео. У каждого есть самостоятельный код: откройте его в браузере или передайте своему агенту.

Превью техники «Длинная строка на S-кривой под неподвижным курсором» — На 0:00 в видео

Типографика

Длинная строка на S-кривой под неподвижным курсором

Предложение, намного длиннее кадра, печатается моноширинным шрифтом: число символов следует кривой «медленно-быстро-медленно» (несколько символов, всплеск около 600 в секунду, затем мягкая посадка за 0,75 с). Курсор движется до остановки на 82% ширины и замирает, а строка прокручивается влево под ним; маска гасит левый край строки, поэтому старые слова растворяются по мере появления новых. Ключевые слова яркие, остальные приглушены, как при подсветке синтаксиса.

Когда использовать Чтобы показать «много ввода» или длинный промпт, ссылку или команду, которая в следующем такте схлопывается во что-то короткое.

Показать код

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Длинная строка на S-кривой под неподвижным курсором</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;700&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; }
#head { position: absolute; left: 0; right: 0; top: 381px; text-align: center; font: 400 24px/26px "Geist Mono", monospace; letter-spacing: 5.4px; color: #6B6385; }
#head b { font-weight: 400; color: #FB2D89; }
#wrap { position: absolute; left: 0; top: 486px; width: 1920px; height: 68px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 90px, #000 600px); mask-image: linear-gradient(90deg, transparent 90px, #000 600px); }
#line { position: absolute; left: 254px; top: 0; height: 68px; line-height: 68px; font: 400 45.9px/68px "Geist Mono", monospace; white-space: pre; }
#line .k { color: #FFFFFF; } #line .v { color: #8F89A8; }
#cursor { position: absolute; left: 254px; top: 493px; width: 4px; height: 54px; background: #FB2D89; box-shadow: 0 0 10px rgba(251,45,137,.8); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <div id="head" class="clip" data-start="0" data-duration="3">DESCRIBE YOUR IDEA <b>· 02</b></div>
  <div id="wrap" class="clip" data-start="0" data-duration="3"><div id="line"></div></div>
  <div id="cursor" class="clip" data-start="0" data-duration="3"></div>
</div>
<script>
// the text: [bright?, words] pairs; replace with your own long line
const PARTS = [[1, "Tell the chat"], [0, " what to show. "], [1, "The agent"], [0, " builds the animation. "], [1, "No keyframes"], [0, " to hunt for. "], [1, "Say what should change."], [0, " The preview updates as you talk."]];
const X0 = 254;          // where the line starts
const STOP = 1566;       // where the cursor parks and the line starts to scroll
const ADV = 27.54;       // one character of Geist Mono at 45.9 px (0.6 em)
const T_START = 0.21, T_END = 0.97; // the typing window, seconds
// share of the line typed against the share of the window: slow start, burst, soft landing
const CURVE = [[0, 0], [0.1, 0.02], [0.2, 0.05], [0.3, 0.12], [0.38, 0.22], [0.43, 0.31], [0.48, 0.43], [0.53, 0.57], [0.57, 0.69], [0.62, 0.78], [0.66, 0.84], [0.71, 0.88], [0.79, 0.94], [0.88, 0.98], [1, 1]];
const line = document.getElementById("line"), cursor = document.getElementById("cursor");
const chars = [];
PARTS.forEach(([k, s]) => { for (const ch of s) chars.push([k, ch]); });
line.innerHTML = chars.map(([k, ch]) => `<span class="${k ? "k" : "v"}" style="visibility:hidden">${ch === " " ? "&nbsp;" : ch}</span>`).join("");
const spans = [...line.children];
const curve = (u) => { for (let i = 1; i < CURVE.length; i++) if (u <= CURVE[i][0]) { const a = CURVE[i - 1], b = CURVE[i]; return a[1] + (b[1] - a[1]) * (u - a[0]) / (b[0] - a[0]); } return 1; };
function draw(t) {
  const u = Math.max(0, Math.min(1, (t - T_START) / (T_END - T_START)));
  const n = Math.floor(curve(u) * chars.length);
  spans.forEach((s, i) => { s.style.visibility = i < n ? "visible" : "hidden"; });
  const end = X0 + n * ADV;
  line.style.transform = `translateX(${Math.min(0, STOP - 2 - end)}px)`;
  cursor.style.transform = `translateX(${Math.min(STOP, end + 2) - X0}px)`;
  cursor.style.opacity = t < 0.21 && Math.floor(t / 0.08) % 2 ? 0 : 1; // blink while it waits
}
const tl = gsap.timeline({ paused: true });
tl.fromTo("#head", { opacity: 0 }, { opacity: 1, duration: 0.06, ease: "none" }, 0.19);
tl.to({}, { duration: 3 });
tl.eventCallback("onUpdate", () => draw(tl.time()));
draw(0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Превью техники «Смаз, сжатие в световую линию, схлопывание в точку, вспышка» — На 0:01 в видео

Переход

Смаз, сжатие в световую линию, схлопывание в точку, вспышка

Строка текста получает размытие только по горизонтали (SVG feGaussianBlur со stdDeviation «x 0», анимируется от 0 до 7 за 0,33 с, power2.in) и тускнеет; затем её заменяет светящаяся линия толщиной 4 px (белое ядро, акцентные концы, акцентное свечение), края которой смыкаются каждые два кадра (ширина 1468, 1300, 1060, 530, 140, 24 px), пока она не станет точкой в центре. Через кадр вся страница вспыхивает средне-серым и затухает с power1.out за 0,2 с, а из этой точки рождается следующий объект.

Когда использовать Чтобы превратить что-то длинное в короткое или передать одну сцену следующей через единственную точку.

Показать код

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Смаз, сжатие в световую линию, схлопывание в точку, вспышка</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;700&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; }
#flash { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 70% 70% at 50% 48%, #5a5470, #3d3952); }
#text { position: absolute; left: 100px; width: 1468px; top: 486px; height: 68px; font: 400 45.9px/68px "Geist Mono", monospace; color: #FFFFFF; white-space: nowrap; filter: url(#smear); }
#beam { position: absolute; left: 100px; top: 518px; width: 1468px; height: 4px; border-radius: 2px; opacity: 0; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(251,45,137,0), #ff5aa5 18%, #ffe0ef 50%, #ff5aa5 82%, rgba(251,45,137,0)); box-shadow: 0 0 14px 4px rgba(251,45,137,.55); }
#pill { position: absolute; left: 760px; top: 480px; width: 400px; height: 80px; border-radius: 40px; background: #120f26; border: 2px solid rgba(233,228,242,.16);
  color: #FFFFFF; font: 700 44px/76px "Geist Mono", monospace; text-align: center; opacity: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <svg width="0" height="0" style="position:absolute"><filter id="smear" x="-5%" y="-50%" width="110%" height="200%"><feGaussianBlur id="smearblur" stdDeviation="0 0" /></filter></svg>
  <div id="flash" class="clip" data-start="0" data-duration="2"></div>
  <div id="text" class="clip" data-start="0" data-duration="2">"No keyframes to hunt for. Say what should change."</div>
  <div id="beam" class="clip" data-start="0" data-duration="2"></div>
  <div id="pill" class="clip" data-start="0" data-duration="2">"your.app"</div>
</div>
<script>
const T0 = 0.1;                      // when the smear starts
const EDGES = [[220, 1300], [380, 1060], [690, 530], [890, 140], [948, 24]]; // [left, width] of the line, every two frames at 60 fps
const tl = gsap.timeline({ paused: true });
tl.to("#smearblur", { attr: { stdDeviation: "7 0" }, duration: 0.33, ease: "power2.in" }, T0);
tl.to("#text", { opacity: 0.55, duration: 0.3, ease: "power1.in" }, T0 + 0.03);
tl.to("#text", { opacity: 0, duration: 0.05, ease: "none" }, T0 + 0.33);
tl.fromTo("#beam", { opacity: 0 }, { opacity: 1, duration: 0.04, ease: "none" }, T0 + 0.31);
tl.fromTo("#beam", { x: 0, scaleX: 1 }, { keyframes: EDGES.map(([l, w], i) => ({ x: l - 100, scaleX: w / 1468, duration: i === 4 ? 0.017 : 0.03 })), ease: "none" }, T0 + 0.33);
tl.to("#beam", { opacity: 0, duration: 0.02, ease: "none" }, T0 + 0.465);
// the flash: one frame full, then a quick decay while the new object grows out of the point
tl.set("#flash", { opacity: 1 }, T0 + 0.458);
tl.to("#flash", { opacity: 0, duration: 0.2, ease: "power1.out" }, T0 + 0.467);
tl.fromTo("#pill", { opacity: 0, scale: 0.12 }, { opacity: 1, scale: 1, duration: 0.24, ease: "power2.out" }, T0 + 0.458);
tl.to({}, { duration: 2 }, 0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Превью техники «Клик с нажатием и волнами: вспышка, кольца с задержкой, искры» — На 0:02 в видео

Частицы

Клик с нажатием и волнами: вспышка, кольца с задержкой, искры

Указатель плавно подъезжает и кликает по пилюле: пилюля нажимается до 0,96 и на два кадра светлеет, страница вспыхивает тёмным акцентным цветом, который затухает примерно за 0,12 с, а от точки клика расходятся три тонких кольца с power4.out (светлое на 0 с до r 890, акцентные на +0,08 с и +0,17 с до r 740 и 560), угасающие через 0,3 с. Семьдесят искр с фиксированным seed разлетаются из той же точки с экспоненциальным торможением: 30% белых, остальные акцентного цвета.

Когда использовать Чтобы один клик ощущался как запуск чего-то масштабного.

Показать код

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Клик с нажатием и волнами: вспышка, кольца с задержкой, искры</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;700&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; }
#flash { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 60% 60% at 50% 50%, #4a0f2f, #2b081c); }
#fx, #rings { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }
#pill { position: absolute; left: 610px; top: 460px; width: 700px; height: 160px; border-radius: 80px; background: linear-gradient(#1d1934, #120f26); border: 2px solid rgba(233,228,242,.16);
  color: #FFFFFF; font: 700 80px/156px "Geist Mono", monospace; text-align: center; box-shadow: 0 0 60px 6px rgba(251,45,137,.42); }
#arrow { position: absolute; left: 0; top: 0; width: 30px; height: 44px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.5" data-width="1920" data-height="1080">
  <div id="flash" class="clip" data-start="0" data-duration="2.5"></div>
  <canvas id="fx" class="clip" data-start="0" data-duration="2.5" width="1920" height="1080"></canvas>
  <svg id="rings" class="clip" data-start="0" data-duration="2.5" viewBox="0 0 1920 1080">
    <circle id="r0" cx="1150" cy="540" r="0" fill="none" stroke="#E9E4F2" stroke-width="3" />
    <circle id="r1" cx="1150" cy="540" r="0" fill="none" stroke="#FB2D89" stroke-width="3" />
    <circle id="r2" cx="1150" cy="540" r="0" fill="none" stroke="#FB2D89" stroke-width="3" />
  </svg>
  <div id="pill" class="clip" data-start="0" data-duration="2.5">"your.app"</div>
  <svg id="arrow" class="clip" data-start="0" data-duration="2.5" viewBox="0 0 30 44"><path d="M2 2 L2 34 L10 26 L16 40 L21 38 L15 24 L26 24 Z" fill="#fff" stroke="#000" stroke-width="2" stroke-linejoin="round" /></svg>
</div>
<script>
const CLICK = 0.5, P = [1150, 540];   // when and where the click lands
const rng = (seed) => () => { seed |= 0; seed = (seed + 0x6d2b79f5) | 0; let t = Math.imul(seed ^ (seed >>> 15), 1 | seed); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; };
const r = rng(11), sparks = [];
for (let i = 0; i < 70; i++) sparks.push({ a: r() * Math.PI * 2, sp: 120 + r() * 650, life: 0.7 + r() * 1.8, size: 1.5 + r() * 2.8, white: r() < 0.3, delay: r() * 0.08 });
const ctx = document.getElementById("fx").getContext("2d");
function draw(t) {
  ctx.clearRect(0, 0, 1920, 1080);
  for (const s of sparks) {
    const dt = t - CLICK - s.delay; if (dt < 0 || dt > s.life) continue;
    const dist = s.sp * (1 - Math.exp(-2.2 * dt)) / 2.2, a = 1 - dt / s.life;
    ctx.fillStyle = s.white ? `rgba(255,255,255,${a})` : `rgba(251,45,137,${a})`;
    ctx.beginPath(); ctx.arc(P[0] + Math.cos(s.a) * dist, P[1] + Math.sin(s.a) * dist, s.size / 2, 0, Math.PI * 2); ctx.fill();
  }
}
const tl = gsap.timeline({ paused: true });
tl.fromTo("#arrow", { x: 1600, y: 1060, opacity: 0 }, { x: P[0] + 10, y: P[1] + 10, opacity: 1, duration: 0.45, ease: "power3.out" }, 0.03);
tl.to("#arrow", { scale: 0.88, duration: 0.03, yoyo: true, repeat: 1 }, CLICK - 0.02);
tl.to("#pill", { keyframes: [{ scale: 0.96, filter: "brightness(1.45)", duration: 0.03 }, { scale: 0.955, filter: "brightness(1)", duration: 0.06 }, { scale: 1, duration: 0.1 }], ease: "power1.out" }, CLICK - 0.01);
tl.fromTo("#flash", { opacity: 0 }, { keyframes: [{ opacity: 1, duration: 0.01 }, { opacity: 0.58, duration: 0.017 }, { opacity: 0.39, duration: 0.033 }, { opacity: 0.13, duration: 0.033 }, { opacity: 0, duration: 0.034 }], ease: "none" }, CLICK - 0.01);
[["#r0", 0, 890, 0.5, 0.9], ["#r1", 0.08, 740, 0.57, 0.9], ["#r2", 0.17, 560, 0.58, 0.85]].forEach(([id, d, R, dur, op]) => {
  tl.fromTo(id, { attr: { r: 0 }, opacity: op }, { attr: { r: R }, duration: dur, ease: "power4.out" }, CLICK + d);
  tl.to(id, { opacity: 0, duration: 0.65, ease: "power1.in" }, CLICK + 0.3 + d);
});
tl.to({}, { duration: 2.5 }, 0);
tl.eventCallback("onUpdate", () => draw(tl.time()));
draw(0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Превью техники «Буквенный одометр, приземляющийся слева направо» — На 0:03 в видео

Типографика

Буквенный одометр, приземляющийся слева направо

Фраза собрана из отдельной обрезанной колонки на каждый символ; в каждой лежит лента из десяти случайных букв, где настоящая стоит последней. Один прогресс power4.out (2,5 с) управляет всеми колонками: колонка i прокручивает свою ленту, пока прогресс проходит i/n, поэтому фраза «приземляется» слева направо: сначала быстро, к концу медленнее. Колонки, ещё не остановившиеся, остаются тусклого призрачного цвета, как ведущие нули счётчика.

Когда использовать Для заголовка или адреса, которые должны ощущаться живыми, сосчитанными или расшифрованными, а не напечатанными.

Показать код

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Буквенный одометр, приземляющийся слева направо</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;700&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; }
#label { position: absolute; left: 0; right: 0; top: 291px; text-align: center; font: 400 24px/26px "Geist Mono", monospace; letter-spacing: 5.4px; color: #FB2D89; }
#label i { display: inline-block; width: 12px; height: 12px; border-radius: 6px; background: #FB2D89; margin-right: 14px; vertical-align: 2px; }
#readout { position: absolute; left: 0; right: 0; top: 324px; height: 176px; display: flex; justify-content: center; }
.col { position: relative; width: 90.5px; height: 176px; overflow: hidden; }
.strip { position: absolute; left: 0; top: 0; width: 100%; }
.strip div { height: 176px; line-height: 176px; font: 500 154px/176px "Geist Mono", monospace; text-align: center; color: #FFFFFF; }
.ghost .strip div { color: #2a2442; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3.5" data-width="1920" data-height="1080">
  <div id="label" class="clip" data-start="0" data-duration="3.5"><i></i>LIVE PREVIEW</div>
  <div id="readout" class="clip" data-start="0" data-duration="3.5"></div>
</div>
<script>
const TEXT = "IDEAS IN MOTION";   // the phrase that lands
const START = 0.2, DUR = 2.5;        // the counter's curve: power4.out over DUR
const ROLL = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const rng = (seed) => () => { seed |= 0; seed = (seed + 0x6d2b79f5) | 0; let t = Math.imul(seed ^ (seed >>> 15), 1 | seed); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; };
const r = rng(31), box = document.getElementById("readout");
const cols = [...TEXT].map((ch) => {
  const col = document.createElement("div"); col.className = "col";
  const cells = []; for (let k = 0; k < 10; k++) cells.push(ch === " " ? "&nbsp;" : ROLL[Math.floor(r() * ROLL.length)]);
  cells.push(ch === " " ? "&nbsp;" : ch);
  col.innerHTML = `<div class="strip">${cells.map((c) => `<div>${c}</div>`).join("")}</div>`;
  box.appendChild(col); return col;
});
function draw(t) {
  const p = Math.max(0, Math.min(1, (t - START) / DUR)), prog = 1 - Math.pow(1 - p, 5);
  cols.forEach((col, i) => {
    const u = Math.max(0, Math.min(1, prog * (cols.length + 0.6) - i));
    col.firstChild.style.transform = `translateY(${-u * 10 * 176}px)`;
    col.classList.toggle("ghost", u < 1);
  });
}
const tl = gsap.timeline({ paused: true });
tl.fromTo("#readout", { opacity: 0, y: 50, filter: "blur(10px)" }, { opacity: 1, y: 0, filter: "blur(0px)", duration: 0.15, ease: "power2.out" }, START - 0.05);
tl.fromTo("#label", { opacity: 0 }, { opacity: 1, duration: 0.12 }, START + 0.08);
tl.to({}, { duration: 3.5 }, 0);
tl.eventCallback("onUpdate", () => draw(tl.time()));
draw(0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Превью техники «Вкладки статистики с прыгающей панелью и морфящимся линейным графиком» — На 0:06 в видео

Данные

Вкладки статистики с прыгающей панелью и морфящимся линейным графиком

Тёмная карточка с тремя показателями в ряд: активный лежит на слегка более светлой панели со светящимся подчёркиванием 4 px. Число каждой вкладки набирается с power3.out; когда вкладку сменяет следующая, панель и подчёркивание перепрыгивают на неё за 0,08 с (power3.inOut), подчёркивание берёт акцентный цвет вкладки, предыдущее число тускнеет, а график с областью ниже морфит свои 60 точек из одного ряда в другой, меняя цвет линии и градиентной заливки. Первый ряд рисуется слева направо со светящейся точкой на конце.

Когда использовать Чтобы за один кадр пройтись по трём числам, шагам или режимам продукта.

Показать код

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Вкладки статистики с прыгающей панелью и морфящимся линейным графиком</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; }
#card { position: absolute; left: 240px; top: 137px; width: 1440px; height: 806px; border-radius: 30px; background: linear-gradient(#17142c, #100d22); border: 1.5px solid rgba(233,228,242,.07); font-family: "Manrope", sans-serif; color: #FFFFFF; }
#panel { position: absolute; left: 44px; top: 130px; width: 420px; height: 172px; border-radius: 14px 14px 0 0; background: rgba(240,237,255,.03); }
#under { position: absolute; left: 44px; top: 298px; width: 420px; height: 4px; border-radius: 2px; background: #7C6CF2; }
#rule { position: absolute; left: 44px; top: 300px; width: 1351px; height: 1.5px; background: rgba(233,228,242,.07); }
.stat { position: absolute; top: 140px; white-space: nowrap; }
.lab { display: flex; align-items: center; font-size: 25px; font-weight: 500; color: #E9E4F2; height: 34px; }
.lab i { width: 13px; height: 13px; border-radius: 3px; margin-right: 14px; }
.val { font-size: 78px; font-weight: 600; line-height: 1; margin-top: 26px; color: #8F89A8; }
#chart { position: absolute; left: 0; top: 330px; width: 1440px; height: 476px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <div id="card" class="clip" data-start="0" data-duration="3">
    <div id="panel"></div><div id="rule"></div><div id="under"></div>
    <div class="stat" style="left:74px"><div class="lab"><i style="background:#7C6CF2"></i>"Pick a template"</div><div class="val" id="v0">00</div></div>
    <div class="stat" style="left:520px"><div class="lab"><i style="background:#FB2D89"></i>"Describe your idea"</div><div class="val" id="v1">00</div></div>
    <div class="stat" style="left:956px"><div class="lab"><i style="background:#2DD4B0"></i>"Refine in words"</div><div class="val" id="v2">00</div></div>
    <canvas id="chart" width="1440" height="476"></canvas>
  </div>
</div>
<script>
const TABS = [{ end: 1, start: 0.0, dur: 0.87, color: [124, 108, 242] }, { end: 2, start: 1.07, dur: 0.59, color: [251, 45, 137] }, { end: 3, start: 1.57, dur: 0.59, color: [45, 212, 176] }];
const PANEL_X = [44, 490, 930];       // where the panel sits for each tab
const rng = (seed) => () => { seed |= 0; seed = (seed + 0x6d2b79f5) | 0; let t = Math.imul(seed ^ (seed >>> 15), 1 | seed); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; };
const series = [3, 9, 21].map((seed) => { const r = rng(seed), p = []; let v = 0.25; for (let i = 0; i < 60; i++) { v = Math.max(0.05, Math.min(0.95, (v + (r() - 0.43) * 0.11) * 0.97 + (0.18 + 0.62 * i / 59) * 0.03)); p.push(v); } const lo = Math.min(...p), hi = Math.max(...p); return p.map((x) => (x - lo) / (hi - lo)); });
const ctx = document.getElementById("chart").getContext("2d");
const clamp = (x) => Math.max(0, Math.min(1, x)), out4 = (p) => 1 - Math.pow(1 - clamp(p), 4);
const inOut3 = (p) => { p = clamp(p); return p < 0.5 ? 4 * p * p * p : 1 - Math.pow(-2 * p + 2, 3) / 2; };
const at = (d, u) => { const f = u * (d.length - 1), i = Math.min(d.length - 2, Math.floor(f)); return d[i] + (d[i + 1] - d[i]) * (f - i); };
function draw(t) {
  TABS.forEach((tab, i) => { document.getElementById("v" + i).textContent = "0" + (t < tab.start ? 0 : Math.round(tab.end * out4((t - tab.start) / tab.dur))); });
  const s1 = inOut3((t - TABS[1].start) / 0.08), s2 = inOut3((t - TABS[2].start) / 0.08), act = t < TABS[1].start ? 0 : t < TABS[2].start ? 1 : 2;
  [0, 1, 2].forEach((i) => { document.getElementById("v" + i).style.color = i === act ? "#FFFFFF" : "#8F89A8"; });
  const x = PANEL_X[0] + (PANEL_X[1] - PANEL_X[0]) * s1 + (PANEL_X[2] - PANEL_X[1]) * s2;
  document.getElementById("panel").style.transform = document.getElementById("under").style.transform = `translateX(${x - 44}px)`;
  const c = [0, 1, 2].map((k) => TABS[0].color[k] + (TABS[1].color[k] - TABS[0].color[k]) * s1 + (TABS[2].color[k] - TABS[1].color[k]) * s2).map(Math.round);
  document.getElementById("under").style.background = `rgb(${c})`;
  const data = series[0].map((v, i) => v + (series[1][i] - v) * s1 + (series[2][i] - series[1][i]) * s2);
  const upto = clamp((t - 0.12) / 0.55);
  ctx.clearRect(0, 0, 1440, 476); if (upto <= 0) return;
  const pts = []; for (let k = 0; k <= 200 * upto; k++) { const u = k / 200; pts.push([33 + 1377 * u, 420 - 260 * at(data, u)]); }
  const g = ctx.createLinearGradient(0, 160, 0, 476); g.addColorStop(0, `rgba(${c},0.34)`); g.addColorStop(1, `rgba(${c},0)`);
  ctx.beginPath(); ctx.moveTo(pts[0][0], 476); pts.forEach(([x, y]) => ctx.lineTo(x, y)); ctx.lineTo(pts[pts.length - 1][0], 476); ctx.fillStyle = g; ctx.fill();
  ctx.shadowColor = `rgba(${c},0.9)`; ctx.shadowBlur = 16; ctx.strokeStyle = `rgb(${c})`; ctx.lineWidth = 5; ctx.lineJoin = "round";
  ctx.beginPath(); pts.forEach(([x, y], i) => (i ? ctx.lineTo(x, y) : ctx.moveTo(x, y))); ctx.stroke(); ctx.shadowBlur = 0;
  const [hx, hy] = pts[pts.length - 1]; ctx.fillStyle = "#FFFFFF"; ctx.beginPath(); ctx.arc(hx, hy, 7, 0, Math.PI * 2); ctx.fill();
}
const tl = gsap.timeline({ paused: true });
tl.fromTo("#card", { opacity: 0, filter: "blur(16px)", rotationX: 16, y: 90, transformPerspective: 2200 }, { opacity: 1, filter: "blur(0px)", rotationX: 4, y: 0, duration: 0.45, ease: "power3.out" }, 0);
tl.to({}, { duration: 3 }, 0);
tl.eventCallback("onUpdate", () => draw(tl.time()));
draw(0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Превью техники «Карточки со словами по четверти секунды, склеенные однокадровой вспышкой» — На 0:11 в видео

Переход

Карточки со словами по четверти секунды, склеенные однокадровой вспышкой

Восемь полноэкранных карточек, по одной каждые 0,25 с на сетке восьмых при 120 bpm; на каждой одно-два слова размером 240 px на своём фоне (светлый; тёмный с включающимися фигурами; акцентный с буквами, всплывающими по одной; контурный шрифт; вращающийся конический градиент; акцентный шрифт на светлом; светящийся шрифт поверх падающих символов; знак с названием). Каждая склейка проходит через один плоский средне-серый кадр, который вымывается за следующие три кадра. В углах стоят маленькие моно-подписи: сайт, счётчик 0N / 08, тег [ SECTION ] и линия прогресса, заполняющаяся на одну восьмую с каждой карточкой.

Когда использовать Для быстрого списка возможностей в такт в конце презентационного ролика.

Показать код

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Карточки со словами по четверти секунды, склеенные однокадровой вспышкой</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=block");
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;700&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; }
.card { position: absolute; inset: 0; opacity: 0; overflow: hidden; }
.title { position: absolute; left: 0; right: 0; top: 404px; height: 280px; line-height: 280px; text-align: center; font: 800 240px/280px "Manrope", sans-serif; letter-spacing: -8px; white-space: nowrap; }
.title span { display: inline-block; }
.meta { position: absolute; font: 500 18px/24px "Geist Mono", monospace; letter-spacing: 3px; }
.bar { position: absolute; left: 1552px; top: 1019px; width: 315px; height: 3px; transform-origin: 0 50%; }
#flash { position: absolute; inset: 0; background: #6B6385; opacity: 0; }
.conic { position: absolute; inset: -400px; background: conic-gradient(from -30deg at 50% 52%, #FB2D89, #FE9117, #FFD23F, #2DD4B0, #7C6CF2, #FB2D89); filter: blur(30px); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.2" data-width="1920" data-height="1080">
  <div id="cards" class="clip" data-start="0" data-duration="2.2"></div>
  <div id="flash" class="clip" data-start="0" data-duration="2.2"></div>
</div>
<script>
// your words, backgrounds and ink per card; "typed" letters rise in one by one, "conic" turns a gradient
const CARDS = [["Kinetic type.", "#FAF9FF", "#1C0B5D"], ["Shapes.", "#0D0B1E", "#FFFFFF"], ["3D effects.", "#FB2D89", "#1C0B5D", "typed"], ["Sound effects.", "#0D0B1E", "outline"],
  ["Another colour.", "#7C6CF2", "#1C0B5D", "conic"], ["Your footage.", "#FAF9FF", "#7C6CF2"], ["Music.", "#0D0B1E", "#2DD4B0"], ["Your name.", "#0D0B1E", "#FFFFFF"]];
const STEP = 0.25, FIRST = 0.1;
const root = document.getElementById("cards");
const cards = CARDS.map(([word, bg, ink, fx], i) => {
  const el = document.createElement("div"); el.className = "card";
  const meta = bg === "#FAF9FF" || bg === "#FB2D89" ? "#6B6385" : "#8F89A8";
  const title = fx === "typed" ? [...word].map((c) => `<span>${c === " " ? "&nbsp;" : c}</span>`).join("") : `<span>${word}</span>`;
  const style = ink === "outline" ? "color:transparent;-webkit-text-stroke:2.5px #FFFFFF;letter-spacing:0" : `color:${ink}`;
  el.innerHTML = `<div style="position:absolute;inset:0;background:${bg}">${fx === "conic" ? '<div class="conic"></div>' : ""}</div>` +
    `<div class="title" style="${style}${word.length >= 14 ? ";font-size:196px" : ""}${fx === "typed" ? ";clip-path:inset(0 -60px 0 -60px)" : ""}">${title}</div>` +
    `<div class="meta" style="left:48px;top:52px;color:${meta}">YOUR.SITE</div><div class="meta" style="right:52px;top:50px;color:${meta}">0${i + 1} / 08</div>` +
    `<div class="meta" style="left:51px;top:1005px;color:${meta}">[ SECTION ]</div><div class="bar" style="background:${meta}"></div>`;
  root.appendChild(el); return el;
});
function draw(t) {
  const k = Math.max(0, Math.min(7, Math.floor((t - FIRST) / STEP + 1e-6))), since = t - FIRST - k * STEP, p = Math.max(0, Math.min(1, since / STEP));
  cards.forEach((el, i) => { el.style.opacity = t >= FIRST && i === k ? 1 : 0; el.querySelector(".bar").style.transform = `scaleX(${(k + p) / 8})`; });
  document.getElementById("flash").style.opacity = t < FIRST || k === 0 ? 0 : since < 0.02 ? 1 : Math.max(0, 0.55 * (1 - (since - 0.02) / 0.05));
  if (CARDS[k][3] === "typed") [...cards[k].querySelectorAll(".title span")].forEach((s, i) => { const u = Math.max(0, Math.min(1, (since - i * 0.0135) / 0.045)); s.style.transform = `translateY(${(1 - u) * 120}px)`; s.style.opacity = u > 0 ? 1 : 0; });
  if (CARDS[k][3] === "conic") cards[k].querySelector(".conic").style.transform = `rotate(${40 * p}deg)`;
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 2.2 }, 0);
tl.eventCallback("onUpdate", () => draw(tl.time()));
draw(0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Превью техники «Ирис-раскрытие с отдаляющимся знаком, затем лого раздвигается» — На 0:12 в видео

Переход

Ирис-раскрытие с отдаляющимся знаком, затем лого раздвигается

Один бледный кадр, затем светлая страница раскрывается кругом от r 495 до полного кадра примерно за 0,15 с поверх более тёмной, а знак внутри отдаляется от 3,2x до 1x (по ключам за полсекунды), поворачиваясь с −75° до прямого положения и переходя от блёклого серого к полному цвету. Под ним набухает пастельное цветовое облако. Затем знак сдвигается из центра в левую часть центрированного лого-блока, а название выходит из-за него (строка смещена на 50% своей ширины минус половина знака, так что ничего не измеряется), слоган поднимается по словам в отдельных боксах (с шагом 0,05 с), под акцентным словом рисуется подчёркивание, а две кнопки выскакивают с back.out(2).

Когда использовать Для финальной карточки, вырастающей из последнего кадра и собирающей лого, строку и призыв к действию.

Показать код

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ирис-раскрытие с отдаляющимся знаком, затем лого раздвигается</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=block");
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;700&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; }
html, body, #root { background: #B9B3CC; }
#page { position: absolute; inset: 0; background: #FAF9FF; clip-path: circle(495px at 50% 50%); font-family: "Manrope", sans-serif; color: #1C0B5D; }
#cloud { position: absolute; left: 260px; top: 560px; width: 1400px; height: 760px; filter: blur(70px); opacity: 0; transform-origin: 50% 70%; }
#cloud i { position: absolute; border-radius: 50%; }
#lock { position: absolute; left: 0; right: 0; top: 335px; height: 209px; display: flex; justify-content: center; }
#row { display: flex; align-items: center; height: 209px; }
#mark { width: 209px; height: 209px; flex: none; border-radius: 50px; background: linear-gradient(135deg, #1C0B5D, #3a1d8a); position: relative; z-index: 2; }
#word { margin-left: 68px; clip-path: inset(-20px -40px -20px -68px); font-size: 150px; font-weight: 600; letter-spacing: -3px; white-space: nowrap; }
#word span { display: inline-block; }
#tag { position: absolute; left: 0; right: 0; top: 640px; height: 120px; text-align: center; font-size: 100px; line-height: 120px; font-weight: 700; letter-spacing: -2.5px; white-space: nowrap; }
#tag .w { display: inline-block; clip-path: inset(0 -20px 0 -20px); }
#tag .w > span { display: inline-block; position: relative; }
#tag .o span { color: #FB2D89; }
#under { position: absolute; left: 4px; right: 20px; top: 98px; height: 7px; border-radius: 4px; background: #FB2D89; transform-origin: 0 50%; }
#btns { position: absolute; left: 0; right: 0; top: 820px; height: 92px; display: flex; justify-content: center; gap: 27px; }
.btn { height: 92px; padding: 0 46px; border-radius: 16px; display: flex; align-items: center; font-size: 34px; font-weight: 600; opacity: 0; }
#b1 { background: #1C0B5D; color: #FFFFFF; } #b2 { background: #FFFFFF; border: 1.5px solid #E9E4F2; font-family: "Geist Mono", monospace; font-weight: 500; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <div id="page" class="clip" data-start="0" data-duration="3">
    <div id="cloud"><i style="left:380px;top:120px;width:640px;height:520px;background:#FDB4D6"></i><i style="left:120px;top:260px;width:520px;height:460px;background:#CFC8FA"></i><i style="left:820px;top:200px;width:560px;height:480px;background:#FFD3A3"></i><i style="left:880px;top:420px;width:420px;height:340px;background:#B8F1E5"></i></div>
    <div id="lock"><div id="row"><div id="mark"></div><div id="word"><span>"Your Name"</span></div></div></div>
    <div id="tag"><span class="w"><span>"Your</span></span> <span class="w"><span>idea</span></span> <span class="w"><span>is</span></span> <span class="w"><span>ready</span></span> <span class="w"><span>to</span></span> <span class="w o"><span>move."<i id="under"></i></span></span></div>
    <div id="btns"><div class="btn" id="b1">"Try it free" →</div><div class="btn" id="b2">"your.site"</div></div>
  </div>
</div>
<script>
// [t, scale, rotation, wash 0..1] of the mark, and the iris radius, read off a real cut
const MARK = [[0, 3.3, -80, 1], [0.017, 3.16, -75, 0.93], [0.05, 2.45, -55, 0.74], [0.067, 2.0, -35, 0.4], [0.1, 1.72, -25, 0.34], [0.15, 1.47, -12, 0.16], [0.2, 1.31, -5, 0.05], [0.25, 1.17, -1, 0], [0.3, 1.1, 0, 0], [0.5, 1, 0, 0]];
const IRIS = [[0, 470], [0.017, 495], [0.05, 660], [0.067, 840], [0.1, 1000], [0.15, 1150]];
// the lockup opening: [t, 1 = mark centred .. 0 = lockup centred, share of the wordmark still behind the mark]
const SLIDE = [[0.65, 1, 1], [0.7, 0.943, 0.909], [0.75, 0.873, 0.597], [0.8, 0.496, 0.348], [0.85, 0.146, 0.1], [0.9, 0.054, 0.036], [0.95, 0.016, 0.012], [1.0, 0, 0]];
const keys = (k, t) => { if (t <= k[0][0]) return k[0].slice(1); for (let i = 1; i < k.length; i++) if (t <= k[i][0]) { const a = k[i - 1], b = k[i], f = (t - a[0]) / (b[0] - a[0]); return a.slice(1).map((v, j) => v + (b[j + 1] - v) * f); } return k[k.length - 1].slice(1); };
const mark = document.getElementById("mark"), row = document.getElementById("row"), word = document.querySelector("#word span"), page = document.getElementById("page");
function draw(t) {
  const [s, rot, wash] = keys(MARK, t), [k0, hid] = keys(SLIDE, t);
  page.style.clipPath = `circle(${keys(IRIS, t)[0]}px at 50% 50%)`;
  mark.style.transform = `rotate(${rot}deg) scale(${s})`;
  mark.style.filter = wash > 0.002 ? `grayscale(${wash}) brightness(${1 + 2.2 * wash})` : "none";
  row.style.transform = `translateX(calc(${50 * k0}% - ${104.5 * k0}px))`;
  word.style.transform = `translateX(calc(${-hid} * (100% + 68px)))`;
}
const tl = gsap.timeline({ paused: true });
tl.fromTo("#cloud", { opacity: 0, scale: 0.35 }, { opacity: 1, scale: 1, duration: 0.8, ease: "power2.out" }, 0.35);
document.querySelectorAll("#tag .w > span").forEach((el, i) => tl.fromTo(el, { y: 130 }, { y: 0, duration: 0.3, ease: "power3.out" }, 0.96 + i * 0.05));
tl.fromTo("#under", { scaleX: 0 }, { scaleX: 1, duration: 0.2, ease: "power2.out" }, 1.56);
tl.fromTo("#b1", { opacity: 0, scale: 0.88, y: 28 }, { opacity: 1, scale: 1, y: 0, duration: 0.3, ease: "back.out(2)" }, 1.66);
tl.fromTo("#b2", { opacity: 0, scale: 0.88, y: 28 }, { opacity: 1, scale: 1, y: 0, duration: 0.3, ease: "back.out(2)" }, 1.75);
tl.to({}, { duration: 3 }, 0);
tl.eventCallback("onUpdate", () => draw(tl.time()));
draw(0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Другие промпты

Превью промпта «Сборка лого из low-poly граней с набором названия»

Сборка лого из low-poly граней с набором названия

<direction> Сделай 21-секундный горизонтальный логотип-реveal, 1920x1080, 60 кадров/с. Он медленно собирает мой логотип из low-poly граней и завершается горизонтальным лого-блоком: название бренда набирается как текст, под ним слоган. Идея: одна долгая спокойная сборка без склеек четырнадцать секунд, разрядка на дропе музыки в течение двух секунд, затем спокойный финал с набором текста. Вид: почти чёрный фон с мягкой круглой виньеткой, плоские фирменные цвета и чистый гротеск. Избегай градиентов на логотипе, видимых швов между треугольниками, склеек во время сборки и всего, что загромождает фон за логотипом. </direction> <structure> 1. 0–2,6 с, каркас: low-poly каркас контура моего логотипа сам прорисовывается от низа логотипа наружу. В нём около 35–45 вершин и 90 тонких линий. 2. 1,9–13,3 с, сборка: логотип разрезан примерно на 55 треугольников вдоль этого каркаса, и они влетают по частям из-за пределов кадра. Приземления начинаются медленно внизу логотипа и становятся чаще к верху. Последний фрагмент встаёт на место на 13,3 с, и логотип становится целым и точным. Задержи готовый логотип примерно на одну секунду. 3. 14,38 с, вспышка, точно на дроп музыки. Световой всплеск, расширяющееся оранжевое кольцо и яркая вспышка на логотипе срабатывают одновременно. Через 0,1 с после удара за логотипом вырастает тёмно-чернильная плашка и превращается в квадрат с закруглёнными углами — иконку приложения. Задержи иконку по центру на одну секунду. 4. 15,74–16,15 с, сдвиг: иконка уменьшается примерно до 42% и уходит в левую треть, освобождая место для названия. 5. 16,1–21 с, название: справа от иконки появляется розовый курсор, и набирается название, например "Brand Name" (замени на свой бренд). На 18,15 с под ним выезжает слоган, например "Your tagline here" (замени на свой). Курсор мигает три раза в такт и исчезает на 19,9 с. Держи лого-блок до конца. </structure> <composition> Фон: почти чёрная радиальная виньетка, #0D0B1E в центре, темнеющая до #040308 в углах. Палитра: - Глубокий чернильный #1C0B5D для плашки иконки. - Розовый #FB2D89 как основной акцент. - Оранжевый #FE9117. - Белый #FFFFFF. - Светлая лаванда #E9E4F2 и #F0EDFF для линий и мягкого текста. - Фиолетовый #7C6CF2 только в фоновом свечении. Логотип остаётся в плоских цветах без градиентов. Каркас: линии лавандовые #E9E4F2 с непрозрачностью 60%, толщина 1,3 px; точки вершин #F0EDFF радиусом 2,6 px. Плашка иконки: круг 676 px, который становится квадратом со скруглением 24% и мягкой тенью. Шрифт: название жирным гротеском (Golos Text 700, около 155 px, белый). Слоган под ним лёгким гротеском (Onest 400, около 49 px, лавандовый с непрозрачностью 74%). Курсор: розовая полоса #FB2D89, 10 x 128 px, с мягким розовым свечением. Итоговый лого-блок (иконка слева, название и слоган справа) центрирован в кадре целиком. </composition> <techniques> Приближение: начало идёт на очень медленном наезде к центру кадра, от масштаба 0,886 на 0 с до 0,998 на 11 с, затем неподвижно. Прорисовка каркаса: каждая линия растёт линейно от более ранней вершины к более поздней за 0,08–0,45 с. Маленькая точка проявляется на каждой вершине, когда до неё доходит линия. Пролёт: каждый фрагмент состоит из одного-трёх треугольников. Он влетает быстро по изогнутой траектории и замедляется до места примерно за 0,5 с, кувыркаясь в 3D. Вращение, переворот и наклон плавно сходят к нулю. В полёте он затемнён примерно до 60% и слегка размыт; при посадке чёткий и полностью освещённый. Каждый треугольник показывает именно свою часть плоского логотипа, так что готовая сборка бесшовна. Свечение: слабое розовое свечение #FB2D89, менее 10% непрозрачности, переходящее в фиолетовое #7C6CF2, нарастает за логотипом по мере его заполнения. Вспышка на 14,38 с: - Розово-лиловый световой всплеск в режиме screen вспыхивает вокруг логотипа и гаснет за 0,8 с. - Тонкое тёплое оранжевое кольцо, 7 px, стартует с радиуса 300 px и с постоянной скоростью вылетает за кадр за 0,38 с. - Логотип ярко вспыхивает и успокаивается за 0,3 с. Плашка: через 0,1 с после удара плашка #1C0B5D вырастает из точки до круга 676 px за 0,21 с (sine ease-out). Сначала она подсвечена, затем её углы скругляются до радиуса 24%. Сдвиг: иконка уменьшается примерно до 42% и уходит в левую треть за 0,415 с (power3 ease-in-out). В момент максимальной скорости размывается до 7 px и останавливается чёткой. Потом продолжает очень медленно расти, примерно на 3% за пять секунд. Набор: одна буква на каждую шестнадцатую ноту музыки (0,156 с при 96 BPM). Каждая буква проявляется за 0,05 с, а курсор прыгает за ней. Слоган: выезжает слева направо примерно за 0,2 с, символ за символом. </techniques> <music> Инструментал 96 BPM, обнадёживающий и современный, ровно 21 секунда. - Начало: мягкий глокеншпиль как в музыкальной шкатулке на тёплых пэдах. - Около 4,4 с: вступает полная бодрая аранжировка (ударные, бас, струнные, яркая партия глокеншпиля). Фильтр открывается на два такта и нарастает к вспышке. - 14,38 с: удар тарелки и большой аккорд точно на вспышке. - После дропа: музыкальная шкатулка возвращается на тянущихся пэдах под лого-блоком и затихает до тишины на 21 с. Держи всё на сетке долей, чтобы набор текста и мигание курсора попадали на шестнадцатые и доли. </music> <sound> Звуковые эффекты поверх музыки: - Мягкий райзер к первому приземлению треугольника. - Райзер к вспышке, затем глубокий бум и лёгкий стеклянный удар на ней. - Короткий свист, когда кольцо вылетает, и ещё один при сдвиге иконки. - Мягкий щелчок клавиши на каждую набранную букву и слабый — при появлении слогана. Без закадрового голоса. Общая громкость около -14 LUFS, true peak ниже -1 dBTP. </sound> <references> Премиальная техно- или app-launch заставка с логотипом: сборка из low-poly каркаса в твёрдую форму в стиле 3D-граней, разряжающаяся на дропе в появление иконки приложения, с набором названия в стиле терминала. </references>

Превью промпта «Бесшовный 15-секундный шоурил приложения в моушн-графике»

Бесшовный 15-секундный шоурил приложения в моушн-графике

<direction> Сделай 15-секундный горизонтальный шоурил в моушн-графике для моего приложения, 1920x1080, 60 кадров/с. Всё нарисовано графикой, без видеосъёмки. Единственное, что я предоставляю, — логотип приложения (иконка в виде квадрата со скруглёнными углами). Идея — одно непрерывное движение, где каждый раздел передаёт свой последний объект следующему. Точка становится логотипом, логотип становится названием, буквы становятся точками, точки становятся гоночными шарами, один шар заливает кадр, фигура распадается на плитки, плитки становятся 3D-облаком точек, а затем идут кинетические слова и финальная заставка. Каждый раздел демонстрирует один навык анимации. Используй плоские цвета, чёткие векторные формы и HUD видоискателя камеры поверх всего, со склейками, привязанными к треку 128 BPM. Избегай видеосъёмки, градиентов и текстур, закадрового голоса и любого раздела, который начинается с нуля, а не вырастает из предыдущего. </direction> <structure> 1. 0–1,9 с, почти чёрный фон: розовая точка лежит в тонком сером кольце, и кольцо раскрывается с expo.out. Второе кольцо выкатывается до слабого большого круга (0,45 с, expo.out). На 0,5 с мой логотип вырастает из точки, его слои выскакивают один за другим с back.out. На 0,92 с он становится крупнее, плавно поворачиваясь. Вокруг него появляется тонкое розовое кольцо из вращающегося моно-текста ("APP NAME · IDEAS IN MOTION · APPNAME.APP ·", замени на свой) и медленно вращается. На 1,7 с знак сжимается с лёгким размытием обратно в маленькую светлую точку. 2. 1,9–3,5 с: на бите-дропе на 1,93 с из точки вылетают два диска: сначала светлый, а розовый на 30 мс позже (expo.out, 0,3 с), так что тонкое светлое кольцо скользит по розовому краю. Название моего приложения широким гротеском поднимается побуквенно от базовой линии: каждая буква обрезана по собственному боксу, с задержкой 30 мс и 0,26 с expo.out. Название всегда занимает одну и ту же ширину 1640 px. Над ним от центра прорисовывается тонкая тёмная линия, слева печатается "01", справа — мой веб-адрес. С 2,55 с по буквам проходит волна ширины: каждая сужается со 150% примерно до 55% ширины и возвращается за 0,6 с, через 0,1 с после предыдущей. Слово подгоняется под 1640 px каждый кадр, поэтому узкие буквы становятся выше. На 2,84 с под ним по словам поднимается светлый курсивный serif-слоган ("ideas in motion"). На 3,3 с буквы схлопываются в тёмные точки, а слоган исчезает. 3. 3,5–5,6 с: диагональная светлая шторка идёт из правого нижнего угла (0,16 с). Шесть тёмных точек по кривой подлетают к началу шести строк (power2.inOut, со сдвигом) и принимают цвета строк. Курсивный serif-заголовок печатается слева ("Chat instead of a timeline."), справа — моно-заметка ("NO KEYFRAMES · LIVE PREVIEW"), а на двух концах — метки дорожек "IDEA" и "MP4". - В каждой строке: розовый номер, моно-название ("animated type", "shapes", "transitions", "3D effects", "sound", "live preview"), крошечная иконка кривой, которая сама прорисовывается, и линия дорожки, рисующаяся слева направо. - На 4,215 с шесть шаров (тёмный, фиолетовый, розовый, повторяя) мчатся на 1040 px ровно за 0,94 с, каждый со своей кривой: linear, power2.inOut, expo.out, back.out(1.7), elastic.out(1, 0.3) и bounce.out. - Засечки над каждой дорожкой отмечают, где был шар на каждой 1/16 пути. За каждым шаром тянутся три затухающих призрачных кольца, шары вытягиваются вдоль скорости, точка едет по каждой иконке кривой синхронно, а по прибытии у каждого шара появляется контурное гало. - На 5,3 с строки гаснут, шары летят в центр и сливаются, а фиолетовый раздувается на весь кадр. 4. 5,6–7,5 с, фиолетовый: светлый круг упруго вырастает из точки (elastic.out, 0,45 с). Двенадцать спутников-точек выстреливают на орбиту (expo.out, с шагом 12 мс). - За ними — тонкие перекрестные направляющие, пунктирная круговая орбита с засечками и метками "270°" и "90°". - По бокам моно-надписи: слева "SHAPES NO KEYFRAMES", справа цитаты с просьбами правок ("“BIGGER” “SLOWER”", "“ANOTHER COLOUR”"). - Вокруг круга пульсируют розовые кольца-волны. - Затем фигура превращается: круг → треугольник → звезда → квадрат. Каждое превращение занимает 0,26–0,3 с на back.out(2,2) с поворотом на 120°, и розовые контуры-эхо тянутся за фигурой только пока она вращается. - Спутники превращаются чуть позже, один за другим, и исчезают на 7,22 с. Она останавливается как прямой квадрат 360 px. 5. 7,5–9,75 с, почти чёрный: квадрат распадается на девять плиток по 120 px. Лабиринт Труше растёт кольцо за кольцом, заполняя кадр (back.out, около 30 мс на кольцо); на каждой плитке две четвертьдуги в противоположных углах, нарисованные светлыми линиями 20 px. Через него проходят розовые волны: сначала две полосы слева направо, затем кольцо, сжимающееся к центру. Плитки внутри волны поворачиваются на 90 или 180 градусов, сжимаются до 80% и становятся розовыми, так что линии распадаются на штрихи, а после прохода полосы возвращаются. Внизу печатается маленькая моно-надпись ("SHAPES · TRANSITIONS · NO KEYFRAMES"). С 9,45 с плитки схлопываются от центра к краям. 6. 9,5–11,25 с: на месте плиток появляется сетка точек 24 x 24, вид сверху. Она наклоняется в перспективную плоскость и складывается в сферу, вазу, сплюснутый шар и тор, вращаясь вокруг вертикальной оси. Между формами движение идёт на power2.inOut, между соседними точками слабые линии, примерно каждая девятая точка розовая, а с глубиной точки тускнеют. Ниже моно-надпись ("3D EFFECTS · LIVE PREVIEW · MP4 EXPORT"). Облако пролетает сквозь камеру и исчезает на 11 с. 7. 11,25–13,0 с, кинетические слова: одно слово каждые 0,23 с, каждое на своём плоском фоне и каждое на всю ширину кадра с разной шириной одного шрифта. Замени шесть слов на свою фразу. - "IDEA": тёмное на розовом, влетает слева, масштаб от 1,3 до 1, размытие проясняется за 0,14 с. - "IN.": светлое на почти чёрном с розовой точкой, влетает справа с размытием, и маленькая моно-заметка вверху слева ("EDIT IN WORDS ↗"). - "VIDEO": ультраузкое фиолетовое на светлой странице, буквы поднимаются снизу с шагом 25 мс. - "OUT.": светлое на фиолетовом, влетает слева с размытием, с заметкой вверху справа ("↘ MP4 EXPORT"). - "NO": тёмное на жёлтом. Буквы падают под углами с back.out, затем контурные копии слова заполняют ряды сверху и снизу и прокручиваются в чередующихся направлениях, пока основной ряд дрейфует влево. - "KEYFRAMES.": светлое на почти чёрном, скользит влево с постоянной скоростью с тонкой диагональной линией, затем быстро уходит с размытием. 8. 13,0–15 с, финальная заставка: розовый заливает кадр справа, и из центра выкатывается светлое кольцо (0,42 с). Мой логотип влетает в центр с вращением (back.out) с небольшим всплеском конфетти из точек, колец и треугольников тёмного, светлого и фиолетового цвета, затем смещается влево от лого-блока. Название моего приложения падает рядом побуквенно, из размытия в резкость, по 0,22 с на букву. Под ним поднимается курсивный serif-слоган ("your AI motion designer"). Прорисовывается линия, под ней печатается моно-строка: "PICK A TEMPLATE · DESCRIBE YOUR IDEA · MP4 EXPORT", маленькая точка записи, затем мой веб-адрес справа. Держи кадр последнюю секунду. </structure> <composition> Палитра, всё плоское: - глубокий почти чёрный #0d0b1e - ярко-розовый #fb2d89 (основной акцент) - светлая страница #faf9ff - мягкий фиолетовый #7c6cf2 - тёплый жёлтый #ffd23f, только для одной кинетической склейки Шрифты: - Широкий вариативный гротеск с осью ширины (Anybody, насыщенность 900, ширина 50–150%) для названия и кинетических слов. - Узкий редакторский serif-курсив (Instrument Serif Italic) для заголовков и слоганов. - Моно (JetBrains Mono) для надписей интерфейса, 14 px, межбуквенный интервал 0,16em. HUD видоискателя камеры поверх всего видео: - Тонкие уголки-скобки 2 px, на расстоянии 44 px от каждого угла. - Вверху слева: название моего приложения жирными моно-капсами с более тусклым слоганом после него ("APP NAME IDEAS IN MOTION"). - Вверху справа: метка текущего раздела ("01 — APP NAME", "02 — NO KEYFRAMES", "03 — SHAPES", "04 — EDIT IN WORDS", "05 — 3D EFFECTS", "06 — KINETIC TYPE", "07 — TRY IT FREE"). - Внизу слева: бегущий таймкод с кадрами ("00:00:03:09") и короткий слоган ("LIVE PREVIEW"). - Внизу справа: ещё один слоган ("NO KEYFRAMES"), четыре маленьких квадрата, загорающихся по одному на бит, и "MP4". - Вдоль нижнего края: линия прогресса 2 px, растущая со временем. HUD переключается между тёмными и светлыми чернилами на каждой склейке, чтобы читаться на любом фоне. Все надписи на экране — примеры, замени их своими. </composition> <techniques> - Каждый раздел заканчивается объектом, из которого вырастает следующий: точка в логотип, логотип обратно в точку, диски в название, буквы в точки, точки в шары, шар в фиолетовую заливку, квадрат в плитки, плитки в сетку точек, облако точек, пролетающее сквозь камеру в кинетические слова. - Метка каждого нового раздела HUD печатается за 0,3 с, со случайными символами, бегущими впереди курсора. Остальные моно-строки тоже печатаются. - Вариативная ширина шрифта: анимируй ось ширины каждой буквы и подгоняй всё слово под фиксированную ширину каждый кадр. - Появление букв обрезается по боксу каждой буквы. - Лёгкое смазывание движения только на быстрых движениях и слабая фиолетовая цветная кайма на большой ирисовой шторке. - Контуры-эхо, призрачные кольца и гало — тонкие розовые или в цвет объекта линии, быстро затухающие. </techniques> <music> Энергичный электронный синти-поп 128 BPM, первая доля на 0,06 с, ровно 15 с: - Мягкие колокольчатые пэды-аккорды в первом такте. - После дропа на 1,93 с: бас-бочка в каждую долю с хлопками на 2 и 4, хэты на слабую долю, мощный синтезаторный бас и короткие аккордовые акценты под разделами. - Брейк примерно с 10 с, нарастающий в кинетический раздел. - Звенящий финальный пэд-аккорд на финальной заставке. Разделы меняются на границах тактов, название приземляется на дроп на 1,93 с, а склейки кинетических слов приходятся на восьмые доли. </music> <sound> Без голоса. Удары поверх музыки: - райзер через первый такт - бум на дропе на 1,93 с - райзер примерно с 10 с до мощного удара на 11,25 с - бочка и короткий свист на каждой склейке кинетических слов - удар тарелки на 12,71 с - бум со звенящим пэд-аккордом, когда приземляется финальная заставка - маленький блип на 14,1 с Музыка ведёт трек, а удары чётко звучат поверх неё. </sound> <references> Шоурил моушн-дизайнера, скрещённый с техно-роликом запуска продукта. Он сочетает оверлей видоискателя камеры, смелую кинетическую типографику в швейцарском стиле, демонстрации кривых плавности, генеративные узоры из плиток Труше и вращающееся 3D-облако точек. </references>

Превью промпта «Объяснение продукта в стиле нарисованного рецепта напитка»

Объяснение продукта в стиле нарисованного рецепта напитка

<direction> Сделай квадратную моушн-графику на 30 секунд (1080x1080, 30 кадров/с) с лёгкой лаунж-музыкой, игривыми звуковыми эффектами на каждое действие и без голоса. Это нарисованное от руки объяснение-«рецепт» моего продукта: его шаги показаны как напиток, который шаг за шагом собирается в стакане. Это одна непрерывная иллюстрированная сцена без склеек, всё меняется на месте. Стиль — плоская 2D-иллюстрация на бледной лавандово-белой странице, с контурами цвета тёмных чернил, которые «кипят», как в рисованной анимации, и крупными мультяшными заглавными буквами в стиле стикеров. Замени каждое слово в кавычках ниже на слова моего продукта, сохраняя примерно ту же длину, чтобы вёрстка не поплыла. Избегай склеек, движений камеры, теней и градиентов, кроме плоских заливок, и закадрового голоса. </direction> <structure> Темп спокойный и ровный. Вступление быстрое и пружинистое, каждая заливка длится ровно 5 с, помешивание и завиток идут чуть быстрее, а финал держится 3 с. Каждая смена карточки приходится на долю музыки в 120 BPM: 6,0, 11,0, 16,0, 21,0, 24,5 и 27,0 с. - 0–2,5 с, заголовок: «YOUR BRAND» (замени на свой бренд) крупно по центру, шириной около 920 px. С 0,15 с его буквы по одной «штампуются» на своих местах за 0,83 с. Каждая начинается с 10% размера, на 22 px ниже и с наклоном ±8–14°, и приземляется за 0,36 с с мягким перелётом (back.out 1.7). На 1,4 с под ним проявляется маленькая строка «what your product is», а на 2,45 с она исчезает. - 2,5–3,6 с, передача: заголовок поднимается на 365 px и уменьшается до 58% за 0,8 с (power3.inOut), становясь шапкой. Тем временем с 2,87 с стакан рисуется сам, как набросок пером: левая стенка, правая стенка, эллипс края, затем кривая дна, всего около 0,4 с. Затем его заливка проявляется (0,28 с), а подзаголовок шапки проявляется под заголовком. - 3,6–6,0 с, шаг 1: карточка появляется с наклоном 4° и быстрым проявлением (0,15 с), а её крупное значение штампуется само по себе. Карточка гласит «STEP 01», «PICK», «TEMPLATE» и «vertical, horizontal or square». Проявляется трекер с первым активным кружком. Три кубика льда падают сверху за кадра с интервалом 0,35 с. Каждый падает с гравитацией (power2.in, около 0,3 с), отскакивает примерно на 140 px, подпрыгивает на 20 px и оседает: два на дне и один сверху. Три маленьких штриха-искры вспыхивают над каждым кубиком, когда он проходит край. Каждое приземление заполняет треть индикатора выполнения карточки и добавляет по одному слову статуса «three short words». - 6,0–21,0 с, шаги 2–4: три заливки по 5 с, все по одной схеме. Карточки гласят «STEP 02 / SAY / KINETIC TYPE / tell the chat what to show», затем «STEP 02 / SAY / SHAPES / the agent builds the animation», затем «STEP 02 / SAY / SOUND / music and sound effects to the rhythm». Бутылка выезжает слева (0,23 с) и встаёт. Затем она наклоняется до 115° по небольшой дуге, чуть вверх и затем вниз в точку заливки (0,37 с), и льёт изогнутую струю в стакан. Бутылки: лавандовая, затем розовая, затем цвета тёмных чернил. На каждой белая этикетка с моим логотипом в виде маленькой иконки со скруглённым квадратом, словом («TYPE», «SHAPES», «SOUND») и маленькой строкой («kinetic», «3D effects», «music»). Рядом со стаканом появляется серая метка уровня («01», затем «02», затем «03») с пунктирной линией через неё. Напиток поднимается до этой метки за 2 с (sine.inOut), лёд всплывает вместе с ним, а брызги подпрыгивают там, где падает струя. Напиток сначала прозрачно-белый, со вторым наливом становится розовым, с третьим — глубоким пурпурным (розовый, смешанный с цветом тёмных чернил), каждый цвет перетекает около 1,3 с. Индикатор выполнения заполняется, а «live preview» печатается в десять шагов. Затем метка становится розовой, верхушка струи отрывается и падает, а бутылка наклоняется обратно и уезжает. - 21,0–24,5 с, шаг 5: карточка гласит «STEP 03 / REFINE / IN WORDS / “bigger”, “slower”, “another colour”». Лёгкая барная ложка с шариком на конце падает с быстрым ease-out. Она качается на 8° туда-сюда с циклом 0,8 с, пока кубики толкаются и тускнеют, затем поднимается. Индикатор заполняется ступеньками по 4 кадра, пока печатается «live preview». - 24,5–27,0 с, шаг 6: карточка гласит «STEP 03 / MP4 / EXPORT / download the MP4». Над стаканом выскакивает апельсиновая цедра-завиток, скручивается и сплющивается около 0,8 с, пока падают оранжевые капли. Затем она скользит на край (0,5 с, power2.inOut), пока дописывается «try it free». - 27,0–30 с, финал: карточка снова собирается как «YOUR TAGLINE / OPEN APP / YOURSITE.COM / pick · describe · refine». Семь коротких розовых и оранжевых штрихов выстреливают вокруг стакана (0,16 с) и продолжают мягко «дышать». Стакан увеличивается на 4% за 0,6 с и держится до конца. </structure> <composition> Цвета: - Страница: бледный лавандово-белый (#FAF9FF). - Контуры: цвет тёмных чернил (#1C0B5D), около 3 px с круглыми окончаниями. - Стакан: лавандовый (#F0EDFF) с фиолетовым оттенком у основания. - Кубики льда: скруглённые квадраты, белые на 40% поверх того, что за ними, с линией во внутреннем углу. - Карточки: белые с мягкой лавандовой смещённой тенью. - Оранжевый (#FE9117): гарнир и половина штрихов финала. Шрифт: - Display: крупные мультяшные заглавные буквы (что-то вроде Lalezar) в виде стикеров. Лицевая часть розовая (#FB2D89), с контуром цвета тёмных чернил позади и фиолетовым выдавливанием (#7C6CF2), смещённым вниз-влево. - Мелкий текст: дружелюбный печатный рукописный шрифт (что-то вроде Playpen Sans), приглушённый пурпурно-серый (#6B6385) для основного текста и розовый для подписей. Макет после вступления: - Шапка: сверху по центру, шириной около 540 px, с маленькой строкой под ней: «first benefit · second benefit · third benefit». - Стакан: конический стакан для виски левее центра, шириной около 290 px, край на y 457 и дно на y 797. - Карточка: справа, 390x248 px со скруглением 14 px и рамкой цвета тёмных чернил. Сверху вниз в ней маленький розовый заголовок, крупное значение стикерными буквами, название тёмными заглавными, рукописная строка и пилюльный индикатор выполнения с коротким словом статуса справа. - Трекер: шесть шагов внизу. Кружки шириной 43 px на расстоянии 156 px друг от друга на тонкой направляющей, с маленькими подписями капителью под ними: «TEMPLATE», «TYPE», «SHAPES», «SOUND», «REFINE», «EXPORT». </composition> <techniques> - Кипящие линии: каждая нарисованная линия получает мягкое колебание на 1–2 px, которое меняется на новое каждые 4 кадра, по всему ролику, как турбулентное смещение линий. - Пересборка карточки: на первом кадре каждого шага один кадр виден только новое крупное значение, затем карточка возвращается. Крупное значение штампуется само с 72% размера с перелётом back.out. - Печать: слова статуса печатаются сами по шагам. - Трекер, текущий шаг: его кружок с кольцом цвета тёмных чернил, розовой точкой и розовой подписью, и он «дышит» между 100% и 112% каждую секунду. - Трекер, завершённый шаг: примерно за 0,1 с до следующей карточки его кружок заливается розовым, и белая галочка рисуется за 0,17 с. Его подпись становится цвета тёмных чернил, а направляющая к следующему кружку заполняется розовым за 0,37 с. - Трекер, будущие шаги: остаются приглушёнными с маленькой серой точкой. </techniques> <music> Тёплый расслабленный лаунж-поп инструментал в 120 BPM в мажорной тональности: щёточные барабаны, округлый акустический бас, вибрафон, щипковые струнные, щелчки пальцев и немного шейкера. Держи его негустым, без ведущей мелодии, чтобы он звучал под эффектами. Он открывается несколькими щипковыми нотами вибрафона и пиццикато без барабанов, а мягкий бас вступает на 2 с. Полный щёточный грув с шагающим басом врывается ровно на первой карточке заливки на 6,0 с. Он остаётся ровным через заливки, помешивание и завиток, даёт заключительный аккорд на 28,0 с, когда готовый стакан успокаивается, и звучит до конца. Сделай ровно 30 с, микс около -14 LUFS, true peak ниже -1 dBTP. </music> <sound> Без голоса. Каждый эффект приходится на свой кадр и ясно слышен над музыкой; музыке не нужно становиться громче, чтобы освободить место. - Заголовок: мягкий хлопок на каждую букву, немного повышающийся по высоте и смещающийся слева направо по панораме по мере построения слова. - Передача: мягкий свист под подъём заголовка и слабый скрежет карандаша на каждый штрих, пока стакан рисуется. - Карточки: шелест бумаги и мягкий глухой удар каждый раз, когда выдаётся карточка и штампуется её крупное слово. - Падение льда: жёсткий короткий стук льда о стекло на каждый кубик, с двумя-тремя касаниями с разницей в несколько миллисекунд и низким глухим стуком под падением. Мягче для отскока и тише для последнего подскока, каждый удар чётко слышен над музыкой. - Бутылки: мягкий свист, когда каждая бутылка выезжает, и снова, когда она наклоняется. - Заливки: каждая отчётливо слышна и отличается. Сначала шипучая, брызжущая прозрачная струя, бьющая по льду, затем более полная струя быстрыми глотками, затем тёмная сиропная струя медленными глубокими глотками. Дай каждой заливке насыщенность в диапазоне 1–4 кГц, где находятся струя и звенящий воздушный карман стакана, чтобы там она звучала примерно на 8 дБ выше окружающих секунд. Держи их чистыми: в основном звенящее стекло и пузырьки, мало шипения. - Вокруг каждой заливки: высота воздушного кармана растёт от заливки к заливке по мере наполнения стакана, а после каждой падают несколько последних капель. Музыка приглушается примерно на 5 дБ под каждой заливкой и мягко возвращается, а за уходящей бутылкой следует свист. - Трекер: мягкий двухнотный подтверждающий звон каждый раз, когда шаг отмечается, чуть громче для последнего. - Ложка: металлический звон, когда она падает, стук льда о стакан на каждом конце её размаха и свист, когда она поднимается. - Цедра: щипок, когда она выскакивает, три тонких брызга аэрозоля, пока она скручивается, и мягкий стук, когда она ложится на край. - Финал: яркий звон со всплеском штрихов поверх лёгкого стеклянного мерцания до конца. - Итоговый микс: около -14 LUFS, true peak ниже -1 dBTP. </sound> <references> Рисованная мультипликация с кипящими линиями, плоские объяснялки приложений в стиле стикеров и иллюстрации коктейльных рецептов, где каждый ингредиент означает функцию. </references>

Необходимые cookies сохраняют настройки сайта. С вашего согласия Google Analytics помогает нам понимать, как пользуются Motion Fab. Выбор можно изменить внизу страницы.

Ваш выбор конфиденциальности по применимым законам штатов США. Политика конфиденциальности