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

RU

Открыть beta

Simple Motion

Промо с билетом, чемоданом и форматами и появлением логотипа

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

Опубликован 10 ноября 2026 г.Использовали 2 раза

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

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

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

Замысел

Сделай 15-секундный горизонтальный (1920x1080, 60 к/с) моушн-промо для [your brand], продукта, который превращает описание в готовое видео (адаптируй слова под свой продукт). Идея: запрос превращается в билет, билет раскрывается обещанием, чемодан по одному выдаёт шаги, три формата проносятся мимо, и всё приходит к моему логотипу. Закадрового голоса нет: слова на экране, а ритм задаёт музыка. Всё нарисовано: плоская 2D-графика с одной карточкой, наклонённой в 3D, без съёмки. Стиль светлый, чистый и энергичный: один розовый акцент на светлой странице и глубокое тёмно-чернильное поле. Избегай съёмки, голоса, размытия внутри текстовых масок и любого дрейфа или искажения логотипа. Логотип формируется целиком, точно как нарисован, и остаётся абсолютно неподвижным примерно с 13,3 с до конца.

Структура

0–1,9 с, запрос. Слева маленький розовый заголовок-кикер с разрядкой «YOUR AI MOTION DESIGNER» над трёхстрочным заголовком около 180 px: «Describe» / «the» / «video.» (замени на свой; последняя строка розовая). Строки поднимаются от своих базовых линий одна за другой. Первая уже движется на кадре 0, остальные следуют с интервалом 0,13 с, линейно, по 0,17 с каждая. Справа белая карточка-билет, наклонённая в перспективе, левой стороной ближе. На ней розовая шапка «FROM IDEA TO VIDEO» и мой небольшой логотип с «[your brand]» рядом. Два поля, «FROM IDEA · Your idea» и «TO MP4 · Video», соединены пунктирной линией с розовым треугольником play. Также есть маленькие надписи «EDIT WORDS», «STEP 03», «EFFECTS 3D» и «PREVIEW LIVE», штрихкод и «03» на корешке. Карточка влетает справа на 0,23 с (power3.out, 0,35 с), проскакивает примерно на 125 px влево и возвращается (sine.inOut, 0,37 с). Тем временем код «MP4» перебирает случайные буквы 15 раз в секунду и фиксируется буква за буквой на 0,67, 0,8 и 0,93 с. На 1,17 с розовый контурный штамп «MP4 EXPORT», наклонённый на -14°, прихлопывается с масштаба 2,4x за 8 кадров с лёгким отскоком. На 1,67 с треугольник play сжимается в розовую точку, которая вырастает в круговую шторку с центром в ней, а двумя бледно-розовыми кольцами идут чуть снаружи её края. Радиус проходит значения 15, 36, 66, 120, 210, 330, 540, 900 и 1500 px, шаг каждые два кадра. Строки заголовка уходят вверх по порядку, пока растёт круг.
1,9–4,0 с, обещание, на полностью розовом поле (радиальный, светлее в центре). Белый треугольник play, чуть длиннее, чем шире, чтобы указывать направление, рождается внутри круга. Он делает одну петлю вокруг слов, повёрнутый вдоль пути: вверх, влево по верху, вниз по левой стороне, вдоль низа, вверх по правой стороне и наружу в правом верхнем углу. За собой он рисует пунктирную белую орбиту, чьи старые точки растворяются в тонкую бледную линию. На фоне два больших бледных круга. «No keyframes.» (около 220 px, белый) влетает буква за буквой с интервалом 0,03 с по дуге снизу справа, начиная с 38° и выпрямляясь. На 2,8 с оно улетает вверх и прочь буква за буквой. Одновременно «The agent animates it.» (около 157 px) поднимается от базовой линии буква за буквой с интервалом 16 мс. На 3,03 с белая скруглённая плашка выезжает слева за словами «animates it.» за 0,18 с, и эти слова становятся розовыми внутри неё. На 3,77 с слова размываются и исчезают. Глубокий тёмно-чернильный чемодан с розовым ремнём и биркой «MP4» падает сверху и приземляется на 4,02 с с небольшим сплющиванием.
4,0–8,95 с, шаги. Из чемодана раскрывается светлый круг с двумя бледно-розовыми кольцами, а от его основания расходятся два розовых эллипса-ряби. Вверху поднимается «Edit in words.» (приглушённый, около 56 px). Затем слово за словом поднимается «Your idea is ready to move.» (около 93 px), «move.» розовым, а под ним рисуется розовое подчёркивание от руки. Над чемоданом одна за другой каждые 0,58 с появляются шесть белых карточек шагов. Каждая карточка 900x165 px, скруглённая, с плиткой-иконкой слева и чипом статуса справа. Каждая поднимается из-за чемодана (на 100 px ниже и с размером 72%, 0,3 с, power2.inOut) с лавандовым чипом «Animating» и спиннером. Затем она загорается в два такта: сначала розовая рамка и мягкое внешнее свечение, через 0,07 с плитка-иконка становится розовой, а чип превращается в розовый «✓ Ready». Когда приходит следующая карточка, прежняя сдвигается вверх на 40 px и гаснет за 0,15 с. Карточки гласят: «Kinetic type», «Shapes», «3D effects», «Sound», «Your own footage», «Fonts for every script» (замени на свои). Под чемоданом шесть точек и счётчик меняются с каждой карточкой, от «1 / 6 in motion» до «6 / 6 in motion». На 7,9 с последняя карточка на месте меняется на «Ready to move.» с плиткой-галочкой и розовым чипом «6 / 6». Счётчик заменяется на «✓ Live preview. MP4 export.» На 8,4 с всё, кроме чемодана, уходит вверх и растворяется в размытии. На 8,7 с камера ныряет в чемодан, пока его глубокое тёмно-чернильное тело не заполнит кадр.
8,95–11,4 с, форматы. Группа из трёх наклонных полос проносится справа налево за 0,2 с и открывает за своим задним краем панель на весь кадр. Полосы наклонены примерно на 18°: тёмно-розовая узкая, широкая розовая и светло-розовая узкая. Тот же проход повторяется на 9,76 с и 10,5 с. Три панели — мягкие градиентные блоки с горизонтом:

от лавандового к фиолетовому, с тёплым светом в нижней половине;
фиолетовое небо над глубоким тёмно-чернильным «морем»;
оранжевое небо над глубоким чернильным цветом с полосой бирюзовой дымки.
Каждая панель медленно приближается с 1,07 до 1 и имеет глубокий тёмно-чернильный градиент внизу. Её название поднимается буква за буквой внизу слева, около 226 px, белым: «Vertical», «Horizontal», «Square». Вверху слева маленький HUD с разрядкой: «01 / 03» светло-розовым, затем «9:16», затем «MP4 EXPORT» печатается, а под ним растёт розовое подчёркивание. Он меняется на «02 / 03 · 16:9 · LIVE PREVIEW», а затем на «03 / 03 · 1:1 · NO KEYFRAMES».

11,4–12,5 с, сетка. Последняя панель сжимается в правую карточку, а две другие вплывают слева. Вместе они образуют три портретные карточки (580x780 px, с промежутком 30 px) на глубоком тёмно-чернильном поле. Сетка мягко приближается до 1,05 и возвращается за полсекунды. Над ней белым поднимается «Vertical, horizontal or square.» Когда сетка успокоится, на карточках проявляются маленькие названия («Vertical», «Horizontal», «Square»), хорошо внутри кадра.
12,2–15 с, логотип. Из средней карточки вырастает розовая точка с бледными кольцами-ореолами, пока сетка уменьшается до 0,9 на белой странице. Её радиус задан ключами каждые два кадра от 12 до 1150 px. Затем точка быстро уменьшается и замедляется (260, 125, 90, 75 px), перемещаясь левее центра. Там она прямо раскрывается в фоновую форму моего логотипа, не перекрывая сам логотип, а внутренние части логотипа вырастают как единое целое, точно как нарисован логотип. На 13,03 с «[your brand]» выезжает из-за логотипа вправо (power3.out, 0,32 с), а вокруг логотипа расходится тонкое розовое кольцо и гаснет. Название около 150 px, тёмно-чернильное, его буквы центрированы по средней линии логотипа, а весь блок центрирован в кадре. Затем под ним слово за словом поднимается «Describe the video. The agent animates it.», второе предложение розовым. Выскакивают три лавандовых чипа: «• Vertical», «• Horizontal», «• Square». «[your website]» поднимается приглушённым серым. Логотип остаётся абсолютно неподвижным примерно с 13,3 с, и всё держится до конца.

Композиция

Основа — светлая страница #FAF9FF с едва заметной точечной сеткой 40 px #E9E4F2 и мягкими розовыми радиальными свечениями. Глубокий чернильный #1C0B5D — для тёмного текста, тёмных объектов и тёмного поля. Один акцент, розовый #FB2D89, — для выделений, акцентного поля и прогресса. Приглушённый #6B6385 — для второстепенных строк, а лавандовый #F0EDFF — для мягких чипов. Оранжевый #FE9117, фиолетовый #7C6CF2 и бирюзовый #2DD4B0 встречаются только на трёх панелях форматов (и в моём логотипе, если он их использует). Заголовки — плотный геометрический гротеск Manrope ExtraBold с узким трекингом около -0,05em. Мелкие надписи, HUD и сайт — чистый гротеск Inter SemiBold. Композиция по сценам:

Сцена 1: заголовок слева, наклонённый билет справа.
Сцена 2: слова по центру розового поля.
Сцена 3: карточки шагов стопкой над чемоданом, точки и счётчик под ним, заголовок вверху.
Сцена 4: названия форматов внизу слева, HUD вверху слева.
Сцена 6: финальный логотип по центру, ниже слоган, чипы и сайт.

Техники

Появления чистые. Текст поднимается от собственной базовой линии внутри обрезки, которая движется вместе с ним, никогда не размытие внутри маски. Уходы ускоряются и завершаются примерно за 0,1 с.

Круговые шторки растут ступенчатыми радиусами с ключами каждые два кадра, с бледно-розовыми кольцами чуть снаружи края.
Код на билете перебирает буквы и фиксируется буква за буквой.
Штамп прихлопывается с масштаба 2,4x с лёгким отскоком.
Буквы входят по вращающейся дуге, а плашка-выделение выезжает за словами, которые меняют цвет внутри неё.
Карточки шагов загораются в два такта: сначала рамка и свечение, потом плитка и чип.
Камера ныряет в чемодан с масштабом 1,5, 3,1, 6,2 и 7 за четверть секунды.
Наклонные трёхполосные проходы осуществляют переходы между панелями форматов, и каждая панель медленно приближается.
Одна панель схлопывается в сетку из трёх карточек.
Точка путешествует и раскрывается в логотип, который строится как единое целое и после формирования не двигается и не деформируется.

Музыка

Используй оригинальный бодрый, оптимистичный электронный хаус-трек на 120 BPM, ровно 15 с. Полный грув играет с первого кадра, бочка на каждой доле примерно на x,05 и x,55 с. Он остаётся ровным под карточками и форматами. Ударные пропадают на 12,55 с, когда точка поглощает сетку, остаются тёплый пэд и нарастающее арпеджио, затухающие к 15 с. Склейки и ключевые акценты попадают в сетку долей.

Звук

Звуковой дизайн лежит поверх трека, без дополнительных ударных:

свист, когда билет влетает;
мягкие щелчки, когда код фиксируется;
мягкий удар на штампе;
свисты на каждой круговой шторке и плашке-выделении;
глухой удар, когда приземляется чемодан;
писк, поднимающийся по высоте, когда каждая карточка становится розовой;
перезвон, когда приземляется последняя карточка;
нарастание перед погружением и удар, когда открывается первая панель;
свисты на каждом проходе полос и когда карточки собираются вместе;
нарастание перед дропом;
колокольчик, когда формируется логотип;
мягкие щелчки на чипах.
Сведи примерно к -14 LUFS с истинным пиком ниже -1 dBTP.

Референсы

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

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

Ваш логотип, лучше всего векторный или PNG с прозрачным фоном; он появляется маленьким на карточке билета и формируется из розовой точки в финальном блоке.

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

Превью техники «Подъём от базовой линии с синхронным клипом» — На 0:00 в видео

Типографика

Подъём от базовой линии с синхронным клипом

Надзаголовок и трёхстрочный заголовок поднимаются от собственных базовых линий: каждая строка движется вверх на свою высоту, а нижний inset её clip-path уменьшается с той же скоростью, поэтому базовая линия остаётся неподвижной резкой кромкой, а внутри маски нет размытия. Первая строка движется уже на кадре 0 (sine.in с 88%), две следующие стартуют с интервалом около 0,13 с с линейным easing за 0,17 с, так что стек читается как единый жест; последняя строка получает акцентный цвет. Уходят они так же, вверх, в порядке чтения, каждая исчезает за 0,1 с.

Когда использовать Открытие промо крупным многострочным заголовком, который должен прочитаться за первую секунду.

Показать код

<!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");
:root { --page: #faf9ff; --ink: #1c0b5d; --accent: #fb2d89; --muted: #6b6385; --line: #e9e4f2; }
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; background: var(--page); }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Manrope", sans-serif; color: var(--ink); }
#stage { position: absolute; inset: 0; background-image: radial-gradient(circle, var(--line) 0 1.6px, transparent 2.2px); background-size: 40px 40px; }
#kicker { position: absolute; left: 110px; top: 650px; font: 800 30px/1 "Manrope"; letter-spacing: 0.16em; color: var(--accent); }
#head { position: absolute; left: 100px; top: 700px; font: 800 200px/192px "Manrope"; letter-spacing: -0.055em; }
.ln { white-space: nowrap; }
.ln span { display: inline-block; padding: 0.12em 0.06em 0.16em; margin: -0.12em -0.06em -0.16em; }
.acc { color: var(--accent); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1080" data-height="1920">
  <div id="stage" class="clip" data-start="0" data-duration="4">
    <div id="kicker" class="ln"><span></span></div>
    <div id="head"></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const KICKER = "YOUR ONLY TASK";          // example text
const LINES = ["Write", "the", "brief."]; // example text; the last line takes the accent
document.querySelector("#kicker span").textContent = KICKER;
const head = document.getElementById("head");
LINES.forEach((w, i) => {
  const ln = document.createElement("div"); ln.className = "ln";
  const sp = document.createElement("span"); sp.textContent = w; if (i === LINES.length - 1) sp.className = "acc";
  ln.appendChild(sp); head.appendChild(ln);
});
// rise: the line moves up by its own height while the bottom of its clip shrinks at the same rate,
// so the baseline stays a fixed, sharp edge (no blur inside the mask)
function rise(el, at, dur, ease, from = 100) {
  tl.fromTo(el, { yPercent: from, clipPath: `inset(-20% -10% ${from}% -10%)` },
    { yPercent: 0, clipPath: "inset(-20% -10% 0% -10%)", duration: dur, ease }, at);
}
function sink(el, at, dur) {
  tl.fromTo(el, { yPercent: 0, clipPath: "inset(-20% -10% 0% -10%)" },
    { yPercent: -100, clipPath: "inset(100% -10% -20% -10%)", duration: dur, ease: "power2.in", immediateRender: false }, at);
}
const spans = [...head.querySelectorAll(".ln span")];
rise(document.querySelector("#kicker span"), 0.03, 0.12, "none");
rise(spans[0], 0, 0.24, "sine.in", 88); // already moving on frame 0
rise(spans[1], 0.18, 0.18, "none");     // about 0.13 s apart, linear
rise(spans[2], 0.32, 0.17, "none");
sink(document.querySelector("#kicker span"), 3.1, 0.1);
spans.forEach((el, i) => sink(el, 3.15 + i * 0.08, 0.1)); // out upwards in reading order
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 в видео

Переход

Круговая шторка из иконки с кольцами-ореолами

Следующая сцена открывается через clip-path circle с центром на маленькой иконке текущей сцены, а сама иконка уменьшается и исчезает, как только круг начинает расти. Радиус задан ключами через каждые два кадра при 60 fps (15, 36, 66, 120, 210, 330, 540, 900, 1500 px): ускоряющийся рост закрывает кадр примерно за 0,3 с. Два бледных залитых круга с радиусами 1,07 r + 6 и 1,17 r + 12 в оттенках акцента находятся в уходящей сцене прямо за краем, поэтому шторка читается как рябь; иконка новой сцены стартует на 35% крупнее и оседает.

Когда использовать Переход от детали (иконки, кнопки) к полноцветной сцене, продолжающей её идею.

Показать код

<!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");
:root { --page: #faf9ff; --ink: #1c0b5d; --accent: #fb2d89; --muted: #6b6385; --line: #e9e4f2; }
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; background: var(--page); }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Manrope", sans-serif; color: var(--ink); }
#a, #b { position: absolute; inset: 0; }
.card { position: absolute; left: 140px; top: 820px; width: 800px; height: 160px; border-radius: 28px; background: #fff; box-shadow: 0 30px 60px rgba(28, 11, 93, 0.14); display: flex; align-items: center; gap: 28px; padding-left: 360px; box-sizing: border-box; font: 800 52px/1 "Manrope"; }
.icon { position: absolute; left: 374px; top: 54px; width: 52px; height: 52px; fill: var(--accent); }
.ring { position: absolute; left: 0; top: 0; border-radius: 50%; }
#r1 { background: color-mix(in srgb, var(--accent) 48%, white); }
#r2 { background: color-mix(in srgb, var(--accent) 22%, white); }
#b { background: radial-gradient(ellipse 80% 70% at 50% 45%, #fd4c9c 0%, #e2187a 100%); clip-path: circle(0px at 540px 900px); }
.icon2 { position: absolute; left: 510px; top: 870px; width: 60px; height: 60px; fill: #fff; }
#title { position: absolute; left: 0; width: 1080px; top: 1060px; text-align: center; font: 800 120px/1 "Manrope"; letter-spacing: -0.05em; color: #fff; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1920">
  <div id="a" class="clip" data-start="0" data-duration="1.4">
    <div class="card"><svg class="icon" viewBox="0 0 24 24"><path d="M8.9 4.6 19.1 11.2a1 1 0 0 1 0 1.6L8.9 19.4A1 1 0 0 1 7.4 18.6V5.4a1 1 0 0 1 1.5-.8Z"/></svg><span id="label"></span></div>
    <div id="r2" class="ring"></div><div id="r1" class="ring"></div>
  </div>
  <div id="b" class="clip" data-start="0.95" data-duration="2.05">
    <svg class="icon2" viewBox="0 0 24 24"><path d="M8.9 4.6 19.1 11.2a1 1 0 0 1 0 1.6L8.9 19.4A1 1 0 0 1 7.4 18.6V5.4a1 1 0 0 1 1.5-.8Z"/></svg>
    <div id="title"></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
document.getElementById("label").textContent = "Ticket";  // example text
document.getElementById("title").textContent = "Next.";   // example text
const C = { x: 540, y: 900 }; // the icon's centre: the circle grows from here
const iris = { r: 0 }, b = document.getElementById("b"), r1 = document.getElementById("r1"), r2 = document.getElementById("r2");
const ring = (el, r) => Object.assign(el.style, { width: 2 * r + "px", height: 2 * r + "px", transform: `translate(${C.x - r}px, ${C.y - r}px)` });
const draw = () => {
  b.style.clipPath = `circle(${iris.r}px at ${C.x}px ${C.y}px)`;
  ring(r1, iris.r ? iris.r * 1.07 + 6 : 0);  // two pale rings ride just outside the edge
  ring(r2, iris.r ? iris.r * 1.17 + 12 : 0);
};
draw();
const R = [15, 36, 66, 120, 210, 330, 540, 900, 1500]; // radius every 2 frames at 60 fps
tl.fromTo(iris, { r: 0 }, { keyframes: R.map((r) => ({ r, duration: 2 / 60, ease: "none" })), onUpdate: draw }, 1.0);
tl.fromTo(".icon", { scale: 1, opacity: 1 }, { scale: 0.3, opacity: 0, duration: 4 / 60, ease: "power2.in", transformOrigin: "50% 50%" }, 0.97);
tl.fromTo(".icon2", { scale: 1.35 }, { scale: 1, duration: 0.3, ease: "power2.out", transformOrigin: "50% 50%" }, 1.1);
tl.fromTo("#title", { y: 80, opacity: 0 }, { y: 0, opacity: 1, duration: 0.35, ease: "power3.out" }, 1.45);
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:00 в видео

Типографика

Код направления, перебирающий буквы и фиксирующий их по одной

Карточка билета влетает справа с power3.out, проскакивает примерно на 110 px влево и возвращается на sine.inOut, а её трёхбуквенный код меняет случайные буквы пятнадцать раз в секунду (каждые четыре кадра при 60 fps). Буквы фиксируются по одной с интервалом 0,13 с, складываясь в настоящий код. Случайность задаётся seeded-хешем номера шага, поэтому каждый рендер показывает одинаковые буквы; ничто не зависит от часов.

Когда использовать Раскрытие направления, кода, цены или имени с эффектом табло с перекидными буквами.

Показать код

<!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");
:root { --page: #faf9ff; --ink: #1c0b5d; --accent: #fb2d89; --muted: #6b6385; --line: #e9e4f2; }
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; background: var(--page); }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Manrope", sans-serif; color: var(--ink); }
#stage { position: absolute; inset: 0; }
#card { position: absolute; left: 120px; top: 760px; width: 840px; height: 400px; border-radius: 30px; background: #fff; overflow: hidden; box-shadow: 0 34px 70px rgba(28, 11, 93, 0.16); }
.bar { position: absolute; left: 0; top: 0; right: 0; height: 80px; background: var(--accent); }
.from, .to { position: absolute; top: 130px; font: 700 18px/1 "Manrope"; letter-spacing: 0.14em; color: var(--muted); }
.from { left: 50px; } .to { right: 50px; }
.a, .b { position: absolute; top: 160px; font: 800 96px/1 "Manrope"; letter-spacing: 0.06em; }
.a { left: 46px; } .b { right: 46px; text-align: right; }
.line { position: absolute; left: 330px; right: 330px; top: 210px; border-top: 3px dashed var(--line); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1920">
  <div id="stage" class="clip" data-start="0" data-duration="3">
    <div id="card"><div class="bar"></div><div class="from">FROM</div><div class="to">TO</div><div class="a" id="codeA"></div><div class="b" id="code"></div><div class="line"></div></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
document.getElementById("codeA").textContent = "NOW";  // example codes
const TARGET = "MP4";
const LOCKS = [0.67, 0.8, 0.93]; // each letter locks on its own frame
const RATE = 15;                  // random letters change 15 times a second
const LET = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
const hash = (n) => { const x = Math.sin(n * 127.1 + 311.7) * 43758.5453; return x - Math.floor(x); }; // seeded
const el = document.getElementById("code"), p = { t: 0 };
const draw = () => {
  const step = Math.floor(p.t * RATE);
  el.textContent = [...TARGET].map((c, i) => (p.t >= LOCKS[i] ? c : LET[Math.floor(hash(step * 3 + i) * LET.length)])).join("");
};
tl.fromTo(p, { t: 0.2 }, { t: 3, duration: 2.8, ease: "none", onUpdate: draw }, 0.2);
// the card: in from the right, overshoot left, settle
tl.fromTo("#card", { x: 1000 }, { keyframes: [{ x: -110, duration: 0.35, ease: "power3.out" }, { x: 0, duration: 0.37, ease: "sine.inOut" }] }, 0.23);
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 в видео

Типографика

Плашка-подсветка, выезжающая за последними словами

Белая строка на акцентном фоне поднимается по буквам от базовой линии (интервал 16 мс, по 0,22 с каждая, power3.out). Затем белая скруглённая плашка выезжает слева за последними словами за 0,18 с (power2.inOut), а её двойник из тех же букв акцентного цвета виден только внутри плашки через тот же clip, так что слова меняются с белого на цветном на цветное на белом ровно там, куда дошла плашка. Размер плашки берётся по измеренным буквам после загрузки шрифта.

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

Показать код

<!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");
:root { --page: #faf9ff; --ink: #1c0b5d; --accent: #fb2d89; --muted: #6b6385; --line: #e9e4f2; }
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; background: var(--page); }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Manrope", sans-serif; color: var(--ink); }
#stage { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 50% 42%, #fd4c9c 0%, #e2187a 100%); }
.t { position: absolute; top: 880px; font: 800 112px/1 "Manrope"; letter-spacing: -0.045em; color: #fff; white-space: nowrap; }
.t .ch { display: inline-block; white-space: pre; }
#hl { position: absolute; inset: 0; clip-path: inset(0px 1080px 0px 0px); }
#pill { position: absolute; top: 868px; height: 132px; border-radius: 22px; background: #fff; }
#twin { color: var(--accent); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1920">
  <div id="stage" class="clip" data-start="0" data-duration="3">
    <div id="line" class="t"></div>
    <div id="hl"><div id="pill"></div><div id="twin" class="t"></div></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const TEXT = "We do the rest.", HIGHLIGHT = "the rest."; // example text
// rise: the line moves up by its own height while the bottom of its clip shrinks at the same rate,
// so the baseline stays a fixed, sharp edge (no blur inside the mask)
function rise(el, at, dur, ease, from = 100) {
  tl.fromTo(el, { yPercent: from, clipPath: `inset(-20% -10% ${from}% -10%)` },
    { yPercent: 0, clipPath: "inset(-20% -10% 0% -10%)", duration: dur, ease }, at);
}
function sink(el, at, dur) {
  tl.fromTo(el, { yPercent: 0, clipPath: "inset(-20% -10% 0% -10%)" },
    { yPercent: -100, clipPath: "inset(100% -10% -20% -10%)", duration: dur, ease: "power2.in", immediateRender: false }, at);
}
document.fonts.ready.then(() => {
  const split = (el) => { [...TEXT].forEach((c) => { const s = document.createElement("span"); s.className = "ch"; s.textContent = c; el.appendChild(s); }); return [...el.children]; };
  const line = document.getElementById("line"), twin = document.getElementById("twin");
  const A = split(line), B = split(twin);
  line.style.left = twin.style.left = (1080 - line.offsetWidth) / 2 + "px";
  const i0 = TEXT.indexOf(HIGHLIGHT), a = A[i0], z = A[i0 + HIGHLIGHT.length - 1];
  const x = line.offsetLeft + a.offsetLeft - 16, w = z.offsetLeft + z.offsetWidth - a.offsetLeft + 34;
  Object.assign(document.getElementById("pill").style, { left: x + "px", width: w + "px" });
  A.forEach((ch, i) => rise([ch, B[i]], 0.2 + i * 0.016, 0.22, "power3.out"));
  const hl = document.getElementById("hl"), p = { v: 0 };
  tl.fromTo(p, { v: 0 }, { v: 1, duration: 0.18, ease: "power2.inOut", onUpdate: () => { hl.style.clipPath = `inset(0px ${1080 - x - w * p.v}px 0px ${x}px)`; } }, 0.75);
  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 в видео

Данные

Карточки шагов, поднимающиеся из-за объекта и загорающиеся

Каждый шаг — белая карточка, которая поднимается из-за тёмного объекта под ней (y +100 px и scale 0,72 до покоя за 0,3 с, power2.inOut), ждёт, затем загорается в два такта: сначала рамка и внешнее гало, через 0,07 с плитка с иконкой и чип статуса. Когда стартует следующая карточка, предыдущая сдвигается вверх на 40 px и гаснет за 0,15 с с линейным easing, так что в фокусе остаётся одна карточка. Ряд точек и счётчик 'n / total' переключаются при каждом включении; период — 0,58 с на карточку.

Когда использовать Показ чек-листа, онбординга или пайплайна, завершающегося шаг за шагом.

Показать код

<!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");
:root { --page: #faf9ff; --ink: #1c0b5d; --accent: #fb2d89; --muted: #6b6385; --line: #e9e4f2; }
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; background: var(--page); }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Manrope", sans-serif; color: var(--ink); }
#stage { position: absolute; inset: 0; }
.pc { position: absolute; left: 90px; top: 700px; width: 900px; height: 165px; }
.halo { position: absolute; inset: -19px; border-radius: 46px; border: 2px solid color-mix(in srgb, var(--accent) 42%, white); opacity: 0; }
.body { position: absolute; inset: 0; border-radius: 28px; background: #fff; border: 2px solid var(--line); box-shadow: 0 26px 56px rgba(28, 11, 93, 0.13); }
.on { position: absolute; inset: -2px; border-radius: 28px; border: 3px solid var(--accent); opacity: 0; }
.tile, .tile-on { position: absolute; left: 30px; top: 27px; width: 108px; height: 108px; border-radius: 22px; display: flex; align-items: center; justify-content: center; }
.tile { background: color-mix(in srgb, var(--accent) 11%, white); } .tile-on { background: var(--accent); opacity: 0; }
.tile svg, .tile-on svg { width: 50px; height: 50px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tile svg { stroke: var(--accent); } .tile-on svg { stroke: #fff; }
.label { position: absolute; left: 166px; top: 0; height: 100%; display: flex; align-items: center; font: 800 52px/1 "Manrope"; letter-spacing: -0.03em; }
.chip { position: absolute; right: 40px; top: 54px; height: 57px; padding: 0 24px; border-radius: 30px; display: flex; align-items: center; font: 700 28px/1 "Manrope"; }
.wait { background: var(--line); color: var(--muted); } .done { background: var(--accent); color: #fff; opacity: 0; }
#case { position: absolute; left: 425px; top: 930px; width: 230px; height: 290px; border-radius: 42px; background: var(--ink); overflow: hidden; }
.strap { position: absolute; left: 0; right: 0; top: 110px; height: 34px; background: var(--accent); }
#prog { position: absolute; left: 0; width: 1080px; top: 1300px; display: flex; justify-content: center; align-items: center; gap: 24px; font: 700 30px/1 "Manrope"; }
#dots { display: flex; gap: 13px; } .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--line); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3.5" data-width="1080" data-height="1920">
  <div id="stage" class="clip" data-start="0" data-duration="3.5">
    <div id="cards"></div>
    <div id="case"><div class="strap"></div></div>
    <div id="prog"><div id="dots"></div><span id="count"></span></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const ICONS = {"type": "M4 7V4h16v3M9 20h6M12 4v16", "cube": "M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16ZM3.3 7 12 12l8.7-5M12 22V12", "note": "M9 18V5l12-2v13M9 18a3 3 0 1 1-6 0 3 3 0 0 1 6 0M21 16a3 3 0 1 1-6 0 3 3 0 0 1 6 0"};
const STEPS = [["Type", "type"], ["3D", "cube"], ["Sound", "note"]]; // example labels and their icons
const START = [0.2, 0.78, 1.36], ON = [0.62, 1.2, 1.78];               // 0.58 s per card
const svg = (d) => `<svg viewBox="0 0 24 24"><path d="${d}"/></svg>`;
const cards = document.getElementById("cards");
STEPS.forEach(([label, icon], i) => {
  const c = document.createElement("div"); c.className = "pc";
  c.innerHTML = `<div class="halo"></div><div class="body"><div class="on"></div><div class="tile">${svg(ICONS[icon])}</div><div class="tile-on">${svg(ICONS[icon])}</div><div class="label"></div><div class="chip wait">Working</div><div class="chip done">Done</div></div>`;
  c.querySelector(".label").textContent = label;
  cards.appendChild(c);
  tl.fromTo(c, { y: 100, scale: 0.72, opacity: 0 }, { y: 0, scale: 1, opacity: 1, duration: 0.3, ease: "power2.inOut" }, START[i]);
  tl.fromTo(c.querySelectorAll(".on, .halo"), { opacity: 0 }, { opacity: 1, duration: 0.06, ease: "power1.out" }, ON[i] - 0.07); // border first
  tl.fromTo(c.querySelectorAll(".tile-on, .done"), { opacity: 0 }, { opacity: 1, duration: 0.06, ease: "power1.out" }, ON[i]); // then icon and chip
  tl.fromTo(c.querySelector(".wait"), { opacity: 1 }, { opacity: 0, duration: 0.06, ease: "power1.out" }, ON[i]);
  if (i < STEPS.length - 1) tl.fromTo(c, { y: 0, opacity: 1 }, { y: -40, opacity: 0, duration: 0.15, ease: "none", immediateRender: false }, START[i + 1] - 0.02);
});
const dots = document.getElementById("dots"), count = document.getElementById("count"), p = { t: 0 };
STEPS.forEach(() => { const d = document.createElement("div"); d.className = "dot"; dots.appendChild(d); });
const draw = () => {
  const n = ON.filter((a) => p.t >= a).length;
  count.textContent = `${n} / ${STEPS.length}`;
  [...dots.children].forEach((d, k) => { d.style.background = k < n ? "var(--accent)" : "var(--line)"; d.style.transform = `scale(${k === n - 1 ? 1.6 : 1})`; });
};
draw();
tl.fromTo(p, { t: 0 }, { t: 3.5, duration: 3.5, ease: "none", onUpdate: 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:09 в видео

Переход

Косая полосная шторка между полноэкранными панелями

Группа из трёх наклонных полос (skewX -18,4 deg: тёмная узкая, широкая акцентная, светлая узкая) пересекает кадр справа налево примерно за 0,2 с на sine.inOut. Следующая полноэкранная панель открывается polygon clip-path, левый край которого следует за задним краем полос, так что старая панель остаётся видна перед полосами, а новая раскрывается за ними. Затем на каждой панели крупное название поднимается по буквам от базовой линии (интервал 35 мс).

Когда использовать Перебор списка мест, продуктов или форматов в темпе бита.

Показать код

<!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");
:root { --page: #faf9ff; --ink: #1c0b5d; --accent: #fb2d89; --muted: #6b6385; --line: #e9e4f2; }
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; background: var(--page); }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Manrope", sans-serif; color: var(--ink); }
.pan { position: absolute; inset: 0; overflow: hidden; }
#p0 { background: linear-gradient(180deg, #e9e4ff 0%, #7c6cf2 55%, #1c0b5d 100%); }
#p1 { background: linear-gradient(180deg, #fe9117 0%, #fb2d89 50%, #1c0b5d 100%); }
#p2 { background: linear-gradient(180deg, #2dd4b0 0%, #1c0b5d 70%); }
.name { position: absolute; left: 70px; top: 1500px; font: 800 190px/1.1 "Manrope"; letter-spacing: -0.05em; color: #fff; white-space: nowrap; }
.name span { display: inline-block; white-space: pre; }
#band { position: absolute; left: 0; top: -100px; width: 700px; height: 2120px; display: flex; transform: translateX(2200px) skewX(-18.4deg); }
#band .d { width: 60px; background: color-mix(in srgb, var(--accent) 55%, var(--ink)); }
#band .m { width: 580px; background: var(--accent); }
#band .l { width: 60px; background: color-mix(in srgb, var(--accent) 55%, white); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1920">
  <div id="p0" class="pan clip" data-start="0" data-duration="3"><div class="name"></div></div>
  <div id="p1" class="pan clip" data-start="0" data-duration="3"><div class="name"></div></div>
  <div id="p2" class="pan clip" data-start="0" data-duration="3"><div class="name"></div></div>
  <div id="band" class="clip" data-start="0" data-duration="3"><div class="d"></div><div class="m"></div><div class="l"></div></div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const NAMES = ["Vertical", "Wide", "Square"]; // example names
const LEAN = 320; // horizontal shift of the slant over half the frame height (tan 18.4 deg x 960)
// rise: the line moves up by its own height while the bottom of its clip shrinks at the same rate,
// so the baseline stays a fixed, sharp edge (no blur inside the mask)
function rise(el, at, dur, ease, from = 100) {
  tl.fromTo(el, { yPercent: from, clipPath: `inset(-20% -10% ${from}% -10%)` },
    { yPercent: 0, clipPath: "inset(-20% -10% 0% -10%)", duration: dur, ease }, at);
}
function sink(el, at, dur) {
  tl.fromTo(el, { yPercent: 0, clipPath: "inset(-20% -10% 0% -10%)" },
    { yPercent: -100, clipPath: "inset(100% -10% -20% -10%)", duration: dur, ease: "power2.in", immediateRender: false }, at);
}
const band = document.getElementById("band");
const clipAt = (x) => `polygon(${x + LEAN}px 0px, 2600px 0px, 2600px 1920px, ${x - LEAN}px 1920px)`;
["#p0", "#p1", "#p2"].forEach((sel, k) => {
  const pan = document.querySelector(sel), name = pan.querySelector(".name");
  [...NAMES[k]].forEach((c) => { const s = document.createElement("span"); s.textContent = c; name.appendChild(s); });
  const t0 = k * 1.0;
  if (k > 0) {
    pan.style.clipPath = clipAt(2400);
    const w = { x: 2400 };
    tl.fromTo(w, { x: 2400 }, { x: -480, duration: 0.2, ease: "sine.inOut", immediateRender: false, onUpdate: () => {
      band.style.transform = `translateX(${w.x - 700}px) skewX(-18.4deg)`; // the trailing edge is at w.x
      pan.style.clipPath = clipAt(w.x);
    } }, t0 - 0.2);
  }
  [...name.children].forEach((ch, i) => rise(ch, t0 + 0.05 + i * 0.035, 0.26, "power3.out"));
});
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 в видео

Переход

Точка, поглощающая кадр и становящаяся знаком

Акцентная точка вырастает из средней карточки (радиус по ключам через каждые два кадра: от 12 до 1150 px примерно за 0,3 с, с двумя бледными кольцами-ореолами), пока макет под ней сжимается до 0,9 на белой странице. Затем она быстро уменьшается с замедлением (до 260, 125, 90 и 75 px за 0,4 с), двигаясь к месту знака, где круг превращается в скруглённый квадрат знака (rx от 50 до 24, акцент в тёмные чернила, 0,12 с), а внутренние фигуры знака масштабируются. Название выезжает из-за знака (power3.out, 0,32 с) через clip в центре знака, а вокруг знака расширяется и гаснет тонкое кольцо.

Когда использовать Финал промо: схлопнуть всё в одну точку, которая становится логотипом.

Показать код

<!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");
:root { --page: #faf9ff; --ink: #1c0b5d; --accent: #fb2d89; --muted: #6b6385; --line: #e9e4f2; }
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; background: var(--page); }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Manrope", sans-serif; color: var(--ink); }
#end { position: absolute; inset: 0; background: #fff; }
#grid { position: absolute; inset: 0; background: var(--ink); display: flex; flex-direction: column; gap: 30px; padding: 260px 120px; box-sizing: border-box; }
#grid .c { flex: 1; border-radius: 24px; background: linear-gradient(180deg, #7c6cf2, #1c0b5d); }
#dotl { position: absolute; inset: 0; pointer-events: none; }
.dd { position: absolute; left: 0; top: 0; border-radius: 50%; }
#dot { background: var(--accent); } #h1 { background: color-mix(in srgb, var(--accent) 55%, white); } #h2 { background: color-mix(in srgb, var(--accent) 25%, white); }
#mark { position: absolute; top: 845px; width: 150px; height: 150px; opacity: 0; }
#wclip { position: absolute; inset: 0; }
#word { position: absolute; top: 820px; font: 800 150px/1.2 "Manrope"; letter-spacing: -0.045em; white-space: nowrap; }
#ring { position: absolute; left: 0; top: 0; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--accent) 58%, white); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1080" data-height="1920">
  <div id="end" class="clip" data-start="0" data-duration="4">
    <div id="ring"></div>
    <div id="wclip"><div id="word"></div></div>
    <svg id="mark" viewBox="0 0 100 100"><rect class="bg" width="100" height="100" rx="24" fill="#1c0b5d"/><g class="in"><circle cx="50" cy="50" r="27" fill="#fe9117"/><path d="M42 36 66 50 42 64Z" fill="#fff"/></g></svg>
  </div>
  <div id="grid" class="clip" data-start="0" data-duration="1.2"><div class="c"></div><div class="c mid"></div><div class="c"></div></div>
  <div id="dotl" class="clip" data-start="0" data-duration="2"><div id="h2" class="dd"></div><div id="h1" class="dd"></div><div id="dot" class="dd"></div></div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const NAME = "Brand"; // example name
document.fonts.ready.then(() => {
  const word = document.getElementById("word"); word.textContent = NAME;
  const W = word.offsetWidth, L0 = 540 - (150 + 40 + W) / 2, MX = L0 + 75, MY = 920; // mark, gap and name centred together
  document.getElementById("mark").style.left = L0 + "px";
  word.style.left = L0 + 190 + "px";
  document.getElementById("wclip").style.clipPath = `inset(0px 0px 0px ${MX}px)`;
  const at = (el, x, y, r) => Object.assign(el.style, { width: 2 * r + "px", height: 2 * r + "px", transform: `translate(${x - r}px, ${y - r}px)` });
  const d = { r: 0, x: 540, y: 960, h: 1 }, dot = document.getElementById("dot"), h1 = document.getElementById("h1"), h2 = document.getElementById("h2");
  const draw = () => { at(dot, d.x, d.y, d.r); at(h1, d.x, d.y, d.r ? d.r * 1.06 + 8 : 0); at(h2, d.x, d.y, d.r ? d.r * 1.14 + 18 : 0); h1.style.opacity = h2.style.opacity = d.h; };
  draw();
  // grow out of the middle card, two frames per key at 60 fps
  tl.fromTo(d, { r: 0 }, { keyframes: [12, 30, 48, 90, 150, 270, 570, 900, 1150].map((r) => ({ r, duration: 2 / 60, ease: "none" })), onUpdate: draw }, 0.4);
  tl.fromTo("#grid", { scale: 1 }, { scale: 0.9, duration: 0.12, ease: "power1.in", transformOrigin: "50% 50%" }, 0.58);
  tl.fromTo(d, { h: 1 }, { h: 0, duration: 0.05, ease: "none", onUpdate: draw, immediateRender: false }, 0.7);
  // shrink fast, then slow, onto the mark
  tl.to(d, { keyframes: [{ r: 260, x: 540 + (MX - 540) * 0.82, y: 960 + (MY - 960) * 0.9, duration: 0.08, ease: "power2.in" }, { r: 125, x: 540 + (MX - 540) * 0.93, y: MY, duration: 0.1, ease: "none" },
    { r: 90, x: 540 + (MX - 540) * 0.97, y: MY, duration: 0.1, ease: "none" }, { r: 75, x: MX, y: MY, duration: 0.11, ease: "power1.out" }], onUpdate: draw }, 0.72);
  tl.fromTo("#dotl", { opacity: 1 }, { opacity: 0, duration: 0.02, ease: "none" }, 1.12);
  // the circle becomes the mark
  tl.fromTo("#mark", { opacity: 0 }, { opacity: 1, duration: 0.01, ease: "none" }, 1.1);
  tl.fromTo("#mark .bg", { attr: { rx: 50 }, fill: "#fb2d89" }, { attr: { rx: 24 }, fill: "#1c0b5d", duration: 0.12, ease: "power2.out" }, 1.11);
  tl.fromTo("#mark .in", { scale: 0, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.12, ease: "power2.out", svgOrigin: "50 50" }, 1.13);
  // the name slides out from behind it; a ring spreads and fades
  tl.fromTo("#word", { x: -(115 + W) }, { x: 0, duration: 0.32, ease: "power3.out" }, 1.23);
  const ring = document.getElementById("ring"), g = { r: 110, o: 0 };
  const drawRing = () => { at(ring, MX, MY, g.r); ring.style.opacity = g.o; };
  drawRing();
  tl.fromTo(g, { r: 110, o: 1 }, { keyframes: [{ r: 175, duration: 0.17, ease: "power2.out" }, { r: 260, o: 0.6, duration: 0.25, ease: "sine.out" }, { r: 300, o: 0, duration: 0.2, ease: "power1.in" }], onUpdate: drawRing, immediateRender: false }, 1.17);
  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>

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

Превью промпта «Кинетическое видео-запуск приложения с анимированным макетом интерфейса»

Кинетическое видео-запуск приложения с анимированным макетом интерфейса

<direction> Сделай горизонтальное кинетическое видео-запуск продукта 1920x1080 длиной 42 секунды для [your app]. Оно показывает, как основатель делает видео-запуск для своего стартапа, просто общаясь в приложении. Воссоздай интерфейс моего приложения по моим скриншотам как чистый анимированный макет из фигур и текста, максимально близкий к оригиналу. В этом видео это тёмное сине-фиолетовое приложение с Live preview слева, вкладками Chat / Files / Panels справа и розовыми акцентными кнопками. Никогда не показывай скриншоты как статичные картинки: каждый элемент должен двигаться. Держи один непрерывный интерфейс без резких склеек. Камера приближается, панорамирует и отдаляется между панелями, пока курсор движется и кликает. Держись сетки ритма 120 BPM (один удар = 0,5 с) и делай так, чтобы что-то происходило на каждый удар. Огромные кинетические слова врезаются поверх интерфейса между шагами. Стартап основателя — выдуманное приложение, например "Pulse — standups your team actually reads" (замени на своё). Избегай резких склеек, статичных скриншотов, всего, что обрезается по краям кадра, и текста или полос выделения, заезжающих на соседние колонки. </direction> <structure> 1) Хук, 0–3 с: "YOUR LAUNCH VIDEO.", затем "IN ONE CHAT." огромным шрифтом, по слову на удар. "CHAT." превращается во вкладку Chat, и камера отъезжает до всего окна приложения. 2) Референсы, 3–8 с: в чат вставляется ссылка "pulse-demo.app". PDF-питч-дек и логотип влетают как карточки-вложения и встают на место. Большое слово "DROP". 3) Промпт, 8–13 с: основатель печатает "Make a 30-second launch video for Pulse, kinetic style, our colours" буква за буквой, затем курсор нажимает отправить. Большое слово "ASK". 4) План, 13–18 с: агент отвечает планом из пяти шагов в виде чек-листа. Шаги появляются и отмечаются один за другим, а камера слегка отъезжает с каждой новой строкой, чтобы кадр не казался пустым. Большое слово "PLAN". 5) Эскиз и Go, примерно 18–21 с: серый каркасный эскиз ролика быстро заполняет Live preview, при этом видны надпись "Live preview" и панель воспроизведения. Основатель нажимает Go, и розовый фон вырастает из нажатой кнопки и заливает экран за огромным "GO!". 6) Live, примерно 21–31 с: в чате появляются строки статуса ("Picking fonts", "Animating the title", "Writing a soundtrack"), пока эскиз превращается в готовый ролик. Камера приближается, пока ролик не заполнит кадр. Около 27 с заголовок ролика "Standups your team actually reads." выезжает, а под "actually reads." прорисовывается лаймовая полоса выделения. Рядом колонка со статистикой: "92%" и "updates read". Большое слово "LIVE". 7) Экспорт, примерно 31–37 с: камера отъезжает к приложению. Кнопка Export и вкладки полностью видны, пока идёт и завершается экспорт. Большое слово "DONE". 8) Финальная карточка, примерно 37–42 с: логотип [your app] и "Live on [launch site] today" (замени на своё), попадающие на последний удар и остающиеся до конца. </structure> <composition> Палитра: тёмный сине-фиолетовый интерфейс, пурпурно-розовые акцентные кнопки и розовая заливка, розово-оранжевый градиент на логотипе и лаймовый как цвет выделения внутри демо-ролика. Кинетические слова огромные, жирные, прописные, без засечек, шрифтами бренда, и занимают большую часть ширины кадра. Лучше слегка уменьши длинное слово, чем дай ему обрезаться. Везде держи безопасные поля. На общих планах всё окно приложения в кадре. В чате поле ввода полностью видно. В сцене экспорта кнопка Export и вкладки в кадре. В ролике заголовок и лаймовая полоса остаются в своей колонке с запасом места. Полоса точно совпадает по ширине со своими словами и никогда не перекрывает колонку "92%". </composition> <techniques> Непрерывная виртуальная камера с плавными приближениями, панорамами и отъездами между панелями (ease-in-out) и без склеек. Курсор плавно скользит к целям и кликает с небольшим уменьшением масштаба при нажатии. Слова хука врезаются по одному на удар. Карточки вложений влетают и встают на место с лёгким перелётом. Текст в чате печатается буква за буквой. Пункты чек-листа появляются и отмечаются на последовательных ударах. Серый эскиз быстро заполняется, а затем элемент за элементом превращается в готовый ролик. Розовая заливка под "GO!" растёт радиально от нажатой кнопки. Большие слова врезаются быстрым уменьшением масштаба поверх интерфейса и быстро уходят на следующем ударе. На каждом ударе есть видимое событие: слово, клик, карточка, галочка, строка статуса или движение камеры. </techniques> <music> Энергичный электронный трек 120 BPM, где каждая склейка, удар слова и событие интерфейса привязаны к ритму. Он нарастает на подготовительных шагах, взлетает к "GO!", ведёт через живую сборку и завершается финальным ударом на финальной карточке. </music> <sound> Клики клавиатуры точно на каждую напечатанную букву. Клики мыши на каждое нажатие курсора. Свуши на движения камеры и на влёт карточек вложений и щелчки, когда карточки встают на место. Мягкие тики для шагов чек-листа и строк статуса. Мощный удар под каждым большим словом, райзер перед "GO!" и финальный удар на финальной карточке. Держи музыку тише эффектов, чтобы клики и удары звучали чётко. </sound> <references> Кинетические трейлеры запуска приложений, которые воссоздают интерфейс SaaS как чёткий анимированный макет с одним непрерывным движением камеры, в стиле промо ко дню запуска продукта. </references>

Использовали 2 раза

Превью промпта «Soft-tech промо приложения: стена иконок, телефон и 3D-студия»

Soft-tech промо приложения: стена иконок, телефон и 3D-студия

placeholder

Превью промпта «Одна розовая точка в коллаже из гравюр»

Одна розовая точка в коллаже из гравюр

placeholder

Использовали 2 раза

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

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