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

RU

Открыть beta

Simple Motion

Шоурил моушн-дизайна под бит

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

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

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

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

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

Замысел

Сделай 15-секундный шоурил моушн-дизайна для [your brand], 1920x1080 горизонтально, 60 fps, полностью нарисованный: анимированный текст, фигуры, частицы, 3D-облако точек и дашборд, без съёмки. Идея: быстрый продуктовый ролик, где каждая смена сцены попадает на хаус-бит 128,57 BPM. Один бит равен ровно 28 кадрам (0,4667 с), каждая склейка стоит на этой сетке, а первый сильный удар приходится на 1,867 с (бит 4). Образ чередует почти чёрные и светлые лавандово-белые сцены, главный акцент — ярко-розовый, плюс фиолетовый и оранжевый. Заголовки — плотная гротескная гарнитура, подписи — моно, а утверждение — курсивный антиква. Поверх всего ролика лежит рамка в стиле телетрансляции до финального глитча. Используй мой знак логотипа на финальной карточке и замени весь текст в кавычках моими словами, сохраняя примерно ту же длину, чтобы вёрстка не поехала. Избегай фото, стокового видео, мягких банальных наплывов и всего, что уходит с битовой сетки.

Структура

0–1,85 с, вступление на почти чёрном. Тонкая линия-линейка (шириной 1440 px, светлая, 22 % непрозрачности) вырастает из центра на 0,34 с (expo.out, 0,65 с), затем слева направо появляются 13 засечек с интервалом в один кадр. Розовый шар 80 px падает сверху слева и смещается к центру (power2.out, 1,25 с). Он трижды отскакивает от линейки, сплющиваясь при каждом ударе и вытягиваясь при каждом падении, с лёгким смазом на скорости. Под линейкой печатается моно-строка, по одному символу каждые 1,56 кадра, затем мигает блочный курсор (пример "no keyframes.", замени своим). На 1,28 с шар сжимается до 0,8x, затем раздувается по кривой expo-in, пока к 1,82 с не зальёт кадр розовым.
1,82–3,70 с, четыре слова, по одному на бит. Каждое плотное слово 300 px стоит на своём фоне, под ним моно-строка комментария (примеры "// describe your idea", "// live preview", "// refine in words", "// mp4 export"). Позади две строки контурных копий этих четырёх слов по 205 px движутся сверху и снизу со скоростью 760 px/с в противоположные стороны. Контуры обведены цветом текста сцены при 7–14 % непрозрачности.

Слово 1 (пример "DESCRIBE"), тёмно-индиго на розовом: слово прилетает с масштаба 1,39x по expo.out (0,33 с), а буквы появляются с интервалом 0,03 с с быстрым снятием размытия.
Слово 2 (пример "PREVIEW"), светлое на почти чёрном на 2,333 с: трекинг сжимается со 150 px до плотного по expo.out (0,45 с), с появлением за 3 кадра.
Слово 3 (пример "REFINE"), фиолетовое на светлой странице на 2,8 с: буквы поднимаются на 340 px из-за линии маски в 40 px под базовой линией по back.out(2.2), по 0,3 с каждая, с интервалом 0,035 с.
Слово 4 (пример "EXPORT"), светлое на фиолетовом на 3,267 с: буквы выскакивают на 1/32 долях (через 3,5 кадра), каждая с 0,6x до прыжка 1,13x на высоту 50 px, затем оседает.

3,46–4,02 с, шторка из полос. Восемь вертикальных полос по 240 px, чередуя розовый и светлый цвет страницы, поднимаются снизу (power2.inOut, 0,18 с, с интервалом 0,7 кадра, первой левая). Они задерживаются, потом продолжают подниматься и уходят, открывая снизу следующую сцену.
3,70–5,60 с, фигуры на почти чёрном. Сетка 120 px из маленьких приглушённых скруглённых квадратов (каждый пятый — контур) с крошечными крестиками между ними. Волна выходит из центра на каждый бит (3,73, 4,2, 4,67 и 5,13 с) со скоростью 2000 px/с. Там, где проходит её фронт, каждая ячейка вырастает с 42 до 74 px, скругляется к кругу, поворачивается на 38 градусов и становится розовой. Первая волна открывает сетку, а сетка медленно вращается против часовой стрелки, всё быстрее и быстрее. После последней волны ячейки опустошаются и затухают к 5,47 с.
5,55–7,42 с, частицы. Белая вспышка с тонким кольцом ударной волны появляется на 5,62 с, затем из центра вырываются 7000 крошечных квадратиков. Они собираются в одно огромное слово 590 px (пример "IDEA"), окрашенное по ширине от оранжевого к лавандовому и фиолетовому, мерцающее на пиксель. С 7,0 с они утекают вправо со шлейфами, сначала левая часть слова. Позади лежит мягкое розовое радиальное свечение.
7,42–9,45 с, 3D на глубоком индиго радиальном фоне. Сфера Фибоначчи из 1700 точек (радиус 362 px) медленно вращается над перспективным полом из тонких фиолетовых линий, ряды которых ползут к зрителю. Точки розовые или фиолетовые, спереди крупнее и ярче. С 8,12 с каждая точка движется на своё место на торическом узле (2,3) (cubic in-out, случайные задержки до 0,16 с), и узел продолжает вращаться.
9,08–9,65 с, вторая шторка из полос, как в сцене 3, в фиолетовом, розовом и светлом цвете страницы.
9,27–11,1 с, дашборд на светлой странице с едва заметными вертикальными направляющими.

Шаги: три строки плотных номеров шагов по 180 px отсчитываются по expo.out ("01", "02", "03", третий розовый) с моно-подписями (пример "PICK A TEMPLATE"). Каждая строка поднимается в свой обрезанный блок с интервалом 0,08 с.
Карточка: белая карточка (880x740, скругление 26 px, мягкая индиго-тень) въезжает на 90 px (power3.out, 0,45 с). На ней жирный заголовок строчными, маленькая плашка "LIVE" и кольцо, которое заполняется по power3.out с короткой подписью внутри.
График: четырнадцать оранжевых столбцов вырастают от основания с интервалом 0,031 с, последний сплошной розовый. Фиолетовая линия рисует себя поверх них по sine.inOut (0,72 с), а на её острие едут точка, ореол и тёмная метка (пример "No keyframes").

10,96–11,45 с, шторка из полос-лент. Восемь горизонтальных полос, чередуя почти чёрный и розовый, въезжают слева (power3.inOut, 0,2 с, с интервалом в один кадр, первой верхняя) и уходят вправо.
11,07–13,07 с, утверждение на почти чёрном. Четыре пучка по 28 тончайших линий текут через кадр лентами с аддитивным смешиванием: розово-оранжевый вверху, затем розово-фиолетовый, фиолетовый и фиолетово-розовый внизу. Утверждение из двух строк курсивной антиквой 290 px появляется по буквам. Каждая буква поднимается на 36 px и теряет размытие за 0,16 с, с интервалом 0,02 с в первой строке и 0,035 с во второй. Первая строка светлая и начинается с x 334 (пример "Ideas in"); вторая розовая и заканчивается на x 1438 (пример "motion.").
12,73–13,07 с, глитч. Срезы текста прыгают вбок, кадр дважды инвертируется, мерцают маленькие фиолетовые, жёлтые и розовые блоки, а текст расщепляется на розовый и бирюзовый. Рамка трансляции и её счётчики исчезают.
13,07–15,0 с, финальная карточка на почти чёрном.

Бледная вспышка затухает (0,26 с).
Плотный логотип-слово 260 px ("[your brand]") поднимается по буквам из-за базовой линии (back.out(1.6), 0,32 с, с интервалом 0,05 с).
Мой знак логотипа падает сверху, как шар во вступлении, сплющивается при приземлении на 13,51 с и становится точкой в конце слова.
Под блоком логотипа рисуется тонкая линия (power3.out, 0,3 с).
Под ней расшифровывается широко разрежённая моно-строка: из перемешанных розовых символов в светлые буквы (13,76–14,6 с).
Розовый курсивный призыв к действию проявляется на 14,33 с (пример "try it free.").
Внизу проявляется приглушённый ряд из четырёх коротких преимуществ.
Держи финальную карточку до 15 с.

Композиция

Палитра:
- Почти чёрный #0D0B1E для тёмных фонов.
- Глубокий индиго #1C0B5D для тёмного текста и 3D-сцены.
- Светлая страница #FAF9FF для светлых фонов и светлого текста.
- Лавандовый #F0EDFF для мягких панелей.
- Приглушённый #6B6385 для подписей и #E9E4F2 для линий.
- Акценты: основной розовый #FB2D89, второй фиолетовый #7C6CF2, тёплый оранжевый #FE9117, плюс белый.
- Жёлтый #FFD23F и бирюзовый #2DD4B0 только как крапинки глитча.
- Если я дам фирменные цвета, подставь их по ролям.
Шрифты: Roboto Flex с весом 900 и плотным трекингом (-0,035 em) для всех заголовков. JetBrains Mono для рамки, подписей и строк комментариев. Instrument Serif Italic для двухстрочного утверждения и призыва к действию.
Мягкая боковая виньетка, темнее только по левому и правому краям: около -8 % на середине края и -12 % в углах.
Рамка в стиле телетрансляции поверх всего до глитча:
- Угловые скобки 26 px.
- Заголовок вверху слева (пример "[YOUR BRAND] / YOUR TAGLINE").
- Бегущий таймкод вверху справа (00:00:SS:FF при 60 fps).
- Название текущей главы внизу слева.
- Счётчик кадров "NNN / 900" с индикатором прогресса 300 px внизу справа.
- Каждая часть светлая при 0,9 непрозрачности в режиме смешивания exclusion, поэтому на светлых сценах она тёмная, а на розовых и фиолетовых окрашена. Рамка появляется на 0,3 с.

Техники

Каждая смена сцены стоит на 28-кадровой битовой сетке. Сцены и шторки перекрываются на несколько кадров, так что ни один кадр не пустой.
Разнообразь переходы: шар, раздувающийся в следующий фон, жёсткие цветовые склейки между четырьмя словами, вертикальные шторки из полос, горизонтальная шторка из полос, вспышка с кольцом ударной волны и RGB-глитч в финальную карточку.
Дай шару и знаку логотипа физическое движение: сплющивание при ударе, вытягивание при падении, лёгкий смаз на скорости.
Используй появление по буквам везде, у каждого слова своё сглаживание (посадки expo.out, подъёмы из маски back.out, выскакивания на 1/32 долях), с потерей размытия по мере появления букв.
Сохраняй всё чётким и векторным: частицы, точки и линии крошечные и резкие, а свечения остаются мягкими и за текстом.

Музыка

Сделай оригинальную хаус-подложку 128,57 BPM, ровно 15 с, уложенную на битовую сетку.

Вступление: воздушный пэд с пузырчатыми щипками.
С удара на 1,867 с: полный грув с бочкой четыре четверти, клэпами, хэтами и басом с сайдчейном.
Финал: райзер и глитч в один большой финальный удар на 13,07 с, затем завершающий аккорд звучит до 15 с.

Звук

Поверх подложки добавь удары, сочинённые под монтаж:

райзер в бум на заполнении 1,867 с
короткие вушы с пиком на каждой смене слова и каждой шторке
мягкие щелчки на волнах фигур
небольшой бум и стеклянный тик на вспышке частиц
вуш-шлейф, когда частицы уходят
саб-дроп в 3D-сцену
райзер и цифровые глитч-тики в финальный бум на 13,07 с
колокольчик, когда знак логотипа приземляется на 13,51 с
Без закадрового голоса. Микс около -14 LUFS, true peak ниже -1 dBTP.

Референсы

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

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

Ваш знак логотипа, квадратный, как значок приложения. Он падает на финальной карточке и становится точкой в конце слова-логотипа.

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

Превью техники «Bounce со squash-and-stretch, переходящий в следующую сцену» — На 0:01 в видео

Фигуры

Bounce со squash-and-stretch, переходящий в следующую сцену

Шар 80 px влетает сверху слева, плывёт к центру на power2.out (1,25 с) и трижды отскакивает от линии-линейки: сплющивается при каждом ударе, вытягивается в каждом падении и слегка размывается на скорости. Он сжимается до 0,8x как предвосхищение, затем разбухает по кривой expo-in (0,46 с), пока не закроет кадр, и его цвет становится фоном следующей сцены.

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

Показать код

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bounce со squash-and-stretch, переходящий в следующую сцену</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=Roboto+Flex:opsz,[email protected],100..1000&family=JetBrains+Mono:wght@400;700&family=Instrument+Serif:ital@1&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0d0b1e; }
#ruler { position: absolute; left: 240px; top: 719px; width: 1440px; height: 2px; background: rgba(250,249,255,0.22); }
#ball { position: absolute; inset: 0; }
#next { background: #fb2d89; display: flex; align-items: center; justify-content: center; }
#next span { font: 900 200px/1 'Roboto Flex', sans-serif; color: #1c0b5d; letter-spacing: -7px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080">
  <div id="ruler"></div>
  <canvas id="ball" width="1920" height="1080"></canvas>
  <div id="next" class="clip" data-start="1.8" data-duration="2.2"><span>"Next title"</span></div>
</div>
<script>
const ctx = document.getElementById("ball").getContext("2d");
const FLOOR = 679;                       // centre height when the ball rests on the ruler
const BOUNCES = [[0.0, 0.467, -260], [0.467, 0.933, 381], [0.933, 1.167, 591], [1.167, 1.283, 659]]; // [from, to, apex y]
const ease3 = (p) => 1 - Math.pow(1 - p, 3);
function y(t) {
  if (t < 0.467) { const p = Math.max(0, t / 0.467); return -260 + (FLOOR + 260) * p * p * p * p; } // the fall: power3.in
  for (const [a, b, apex] of BOUNCES.slice(1)) if (t < b) { const m = (a + b) / 2, h = FLOOR - apex;
    return t < m ? FLOOR - h * ease3((t - a) / (m - a)) : apex + h * Math.pow((t - m) / (b - m), 2); }
  return FLOOR;
}
function draw(t) {
  ctx.clearRect(0, 0, 1920, 1080);
  const x = 714 + 246 * ease3(Math.min(1, t / 1.25));       // drift to the centre, power2.out
  const v = (y(t + 1 / 120) - y(t - 1 / 120)) * 60;          // vertical speed, px per frame
  let sx = 1, sy = 1, size = 80;
  const nearFloor = FLOOR - y(t) < 30 && t < 1.3;
  if (nearFloor) { sx = 1.25; sy = 0.62; } else if (Math.abs(v) > 4) { sx = 0.82; sy = 1.2; }   // squash on impact, stretch when fast
  if (t > 1.28) size = t < 1.37 ? 80 - 16 * (t - 1.28) / 0.09 : Math.max(64, 64.9 + 1071 * Math.pow(2, 10 * ((t - 1.303) / 0.464 - 1))); // anticipation, then expo-in swell
  ctx.filter = Math.abs(v) > 6 ? "blur(3px)" : "none";
  ctx.fillStyle = "#fb2d89";
  ctx.beginPath(); ctx.ellipse(t > 1.28 ? 960 : x, t > 1.28 ? 689 : y(t), size * sx / 2, size * sy / 2, 0, 0, Math.PI * 2); ctx.fill();
}
const tl = gsap.timeline({ paused: true });
tl.fromTo("#ruler", { scaleX: 0 }, { scaleX: 1, duration: 0.655, ease: "expo.out" }, 0.344);
tl.to({}, { duration: 4 }, 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:02 в видео

Типографика

Одно слово на бит, у каждого свой выход

Четыре тяжёлых слова по 300 px сменяются на последовательных битах (28 кадров при 128,57 BPM), каждое на своём цвете фона. Первое приземляется с 1,39x на expo.out (0,33 с), а его буквы появляются с интервалом 0,03 с; второе сводит трекинг со 150 px до -0,035 em на expo.out (0,45 с); третье поднимается по буквам на 340 px из-за линии под базовой линией на back.out(2.2) с шагом 0,035 с; четвёртое выскакивает по буквам на нотах 1/32 с прыжком 1,13x. Контурные копии слов по 205 px движутся двумя рядами со скоростью 760 px/s в противоположных направлениях, а моноширинная строка-комментарий называет приём.

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

Показать код

<!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=Roboto+Flex:opsz,[email protected],100..1000&family=JetBrains+Mono:wght@400;700&family=Instrument+Serif:ital@1&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0d0b1e; }
.panel { position: absolute; inset: 0; opacity: 0; }
.word { position: absolute; left: 0; width: 1920px; top: 392px; text-align: center; font: 900 307px/307px 'Roboto Flex', sans-serif; letter-spacing: -0.035em; white-space: nowrap; transform-origin: 960px 148px; }
.word span { display: inline-block; transform-origin: 50% 85%; }
.mask { position: absolute; inset: 0; clip-path: inset(0 0 390px 0); }
.note { position: absolute; left: 0; width: 1920px; top: 748px; text-align: center; font: 400 26px/30px 'JetBrains Mono', monospace; opacity: 0.8; }
#rows { position: absolute; inset: 0; }
.row { position: absolute; white-space: nowrap; font: 900 205px/205px 'Roboto Flex', sans-serif; letter-spacing: -0.035em; word-spacing: 30px; color: transparent; -webkit-text-stroke: 2px rgba(250,249,255,0.1); }
#top { top: 40px; left: -200px; } #bot { top: 840px; left: -2400px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <div class="panel" id="p0" style="background:#fb2d89;color:#1c0b5d"><div class="word" id="w0">DESCRIBE</div><div class="note">// "first beat"</div></div>
  <div class="panel" id="p1" style="background:#0d0b1e;color:#faf9ff"><div class="word" id="w1">PREVIEW</div><div class="note">// "second beat"</div></div>
  <div class="panel" id="p2" style="background:#faf9ff;color:#7c6cf2"><div class="mask"><div class="word" id="w2">REFINE</div></div><div class="note">// "third beat"</div></div>
  <div class="panel" id="p3" style="background:#7c6cf2;color:#faf9ff"><div class="word" id="w3">EXPORT</div><div class="note">// "fourth beat"</div></div>
  <div id="rows"><div class="row" id="top">DESCRIBE PREVIEW REFINE EXPORT DESCRIBE PREVIEW REFINE EXPORT</div><div class="row" id="bot">DESCRIBE PREVIEW REFINE EXPORT DESCRIBE PREVIEW REFINE EXPORT</div></div>
</div>
<script>
const BEAT = 28 / 60;                                  // one beat at 128.57 BPM
const split = (id) => { const el = document.getElementById(id); el.innerHTML = [...el.textContent].map((c) => "<span>" + c + "</span>").join(""); return [...el.children]; };
const L = [0, 1, 2, 3].map((i) => split("w" + i));
const tl = gsap.timeline({ paused: true });
[0, 1, 2, 3].forEach((i) => { tl.set("#p" + i, { opacity: 1 }, i * BEAT); if (i < 3) tl.set("#p" + i, { opacity: 0 }, (i + 1) * BEAT); });
tl.fromTo("#top", { x: 0 }, { x: -1520, duration: 2, ease: "none" }, 0);   // 760 px/s
tl.fromTo("#bot", { x: 0 }, { x: 1520, duration: 2, ease: "none" }, 0);
// 1: the word lands from 1.39x while its letters appear one by one
tl.fromTo("#w0", { scale: 1.39 }, { scale: 1, duration: 0.326, ease: "expo.out" }, 0);
tl.fromTo(L[0], { opacity: 0, filter: "blur(6px)" }, { opacity: 1, filter: "blur(0px)", duration: 0.04, stagger: 0.03 }, 0);
// 2: tracking closes from 150 px
tl.fromTo("#w1", { letterSpacing: "150px" }, { letterSpacing: "-10.7px", duration: 0.45, ease: "expo.out" }, BEAT);
tl.fromTo("#w1", { opacity: 0 }, { opacity: 1, duration: 0.05 }, BEAT);
// 3: letters rise from behind the line under the word
tl.fromTo(L[2], { y: 340 }, { y: 0, duration: 0.3, ease: "back.out(2.2)", stagger: 0.035 }, 2 * BEAT);
// 4: letters pop on 1/32 notes with a hop
L[3].forEach((s, j) => { const t = 3 * BEAT + j * BEAT / 8;
  tl.fromTo(s, { opacity: 0, scale: 0.6, y: 0 }, { opacity: 1, scale: 1.13, y: -50, duration: 0.067, ease: "power2.out", immediateRender: false }, t);
  tl.to(s, { scale: 1, y: 0, duration: 0.15, ease: "power2.inOut" }, t + 0.067); });
tl.set(L[3], { opacity: 0 }, 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>

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

Переход

Ступенчатый wipe полосами: поднимаются и уходят вверх

Восемь вертикальных полос по 240 px в чередующихся фирменных цветах поднимаются из-за нижней границы кадра на power2.inOut (по 0,18 с, со сдвигом 0,7 кадра, слева направо), держатся около 0,1 с, пока подменяется сцена под ними, затем продолжают движение вверх и за верхний край с тем же изингом и сдвигом, открывая следующую сцену снизу вверх.

Когда использовать Резкий ритмичный переход с жёсткими краями между двумя сценами в плоских цветах.

Показать код

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ступенчатый wipe полосами: поднимаются и уходят вверх</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=Roboto+Flex:opsz,[email protected],100..1000&family=JetBrains+Mono:wght@400;700&family=Instrument+Serif:ital@1&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0d0b1e; }
#a, #b { display: flex; align-items: center; justify-content: center; font: 900 220px/1 'Roboto Flex', sans-serif; letter-spacing: -8px; }
#a { background: #7c6cf2; color: #faf9ff; } #b { background: #0d0b1e; color: #fb2d89; }
.stripe { position: absolute; top: 0; width: 241px; height: 1080px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <div id="a" class="clip" data-start="0" data-duration="1.35"><span>"Scene A"</span></div>
  <div id="b" class="clip" data-start="1.35" data-duration="1.65"><span>"Scene B"</span></div>
  <div id="stripes"></div>
</div>
<script>
const COLORS = ["#fb2d89", "#faf9ff", "#fb2d89", "#faf9ff", "#fb2d89", "#faf9ff", "#fb2d89", "#faf9ff"];
const bars = COLORS.map((c, i) => { const s = document.createElement("div"); s.className = "stripe"; s.style.left = 240 * i + "px"; s.style.background = c; document.getElementById("stripes").appendChild(s); return s; });
const tl = gsap.timeline({ paused: true });
const AT = 1.0;                              // when the wipe starts
tl.fromTo(bars, { y: 1080 }, { y: 0, duration: 0.18, ease: "power2.inOut", stagger: 0.0117 }, AT);
tl.to(bars, { y: -1080, duration: 0.18, ease: "power2.inOut", stagger: 0.0117 }, AT + 0.297);
tl.to({}, { duration: 3 }, 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:04 в видео

Фигуры

Радиальная волна по сетке фигур в такт музыке

Сетка с шагом 120 px из маленьких приглушённых скруглённых квадратов (пятая часть — контуры) с крошечными крестиками между ними. На каждый бит из центра выходит волна со скоростью 2000 px/s; там, где проходит её гауссов фронт (шириной 105 px), каждая ячейка вырастает с 42 до 74 px, скругляет углы до круга, поворачивается на 38 градусов и меняет приглушённый цвет на акцентный. Первая волна открывает сетку, вся сетка медленно вращается против часовой стрелки всё быстрее, а после последней волны пустеет и затухает.

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

Показать код

<!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>
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0d0b1e; }
#grid { position: absolute; inset: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <canvas id="grid" width="1920" height="1080"></canvas>
</div>
<script>
const ctx = document.getElementById("grid").getContext("2d");
const PITCH = 120, SPEED = 2000, WIDTH = 105, WAVES = [0.03, 0.5, 0.97, 1.43];   // a wave per beat (0.467 s)
const PINK = [251, 45, 137], MUTED = [74, 68, 96];
const hash = (i, j) => { const s = Math.sin(i * 127.1 + j * 311.7) * 43758.5453; return s - Math.floor(s); };
const cells = []; for (let j = -6; j <= 6; j++) for (let i = -10; i <= 9; i++) cells.push({ x: PITCH * (i + 0.5), y: PITCH * j, outline: hash(i, j) < 0.2, spin: (hash(j, i) - 0.5) * 16 });
const mix = (a, b, u) => a.map((v, k) => Math.round(v + (b[k] - v) * u));
const smooth = (a, b, x) => { const u = Math.min(1, Math.max(0, (x - a) / (b - a))); return u * u * (3 - 2 * u); };
function rrect(s, r) { const h = s / 2; r = Math.min(r, h); ctx.beginPath(); ctx.moveTo(-h + r, -h); ctx.arcTo(h, -h, h, h, r); ctx.arcTo(h, h, -h, h, r); ctx.arcTo(-h, h, -h, -h, r); ctx.arcTo(-h, -h, h, -h, r); ctx.closePath(); }
function draw(t) {
  ctx.clearRect(0, 0, 1920, 1080);
  const p = Math.max(0, (t - 0.3) / 1.3), rot = -24 * p * p * Math.PI / 180, cr = Math.cos(rot), sr = Math.sin(rot);
  const reveal = SPEED * (t - WAVES[0]), fade = 1 - smooth(1.66, 1.77, t);
  for (const c of cells) {
    const x = 960 + c.x * cr - c.y * sr, y = 540 + c.x * sr + c.y * cr, d = Math.hypot(x - 960, y - 540);
    if (d > reveal) continue;
    let I = 0; for (const w of WAVES) if (t >= w) I = Math.max(I, Math.exp(-(((d - SPEED * (t - w)) / WIDTH) ** 2)));
    const scale = (1 - smooth(reveal - 140, reveal - 20, d) * 0.9) * fade; if (scale < 0.02) continue;
    const size = (42 + 32 * I) * scale;
    ctx.save(); ctx.translate(x, y); ctx.rotate(rot + (c.spin + 38 * I) * Math.PI / 180); rrect(size, size * (0.1 + 0.4 * I));
    if (c.outline) { ctx.lineWidth = 2; ctx.strokeStyle = "rgba(" + mix([233, 228, 242], PINK, I).join(",") + ",0.75)"; ctx.stroke(); }
    else { ctx.fillStyle = "rgba(" + mix(MUTED, PINK, I).join(",") + "," + (0.82 + 0.18 * I) + ")"; ctx.fill(); }
    ctx.restore();
  }
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 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:06 в видео

Частицы

Взрыв частиц, собирающийся в слово и улетающий потоком

Белая вспышка с ударным кольцом, расширяющимся до 1250 px; 7000 крошечных квадратов разлетаются из центра на power2.out (0,17 с), затем летят в случайные точки внутри тяжёлого слова в 590 px по cubic in-out (0,23 с плюс случайная задержка до 0,08 с). Пока слово держится, они мерцают на 1 px и окрашены по x вдоль слова (оранжевый, лавандовый, фиолетовый), затем уходят вправо по cubic ease-in со штрихами, начиная с левой части слова. Сзади — мягкое розовое радиальное свечение.

Когда использовать Чтобы превратить удар в музыке в слово, возникающее из энергии.

Показать код

<!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=Roboto+Flex:opsz,[email protected],100..1000&family=JetBrains+Mono:wght@400;700&family=Instrument+Serif:ital@1&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0d0b1e; }
#glow { position: absolute; inset: 0; background: radial-gradient(760px 620px at 50% 50%, rgba(251,45,137,0.11), rgba(251,45,137,0) 100%); }
#dots { position: absolute; inset: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <div id="glow"></div>
  <canvas id="dots" width="1920" height="1080"></canvas>
</div>
<script>
const WORD = "IDEA", N = 7000, BANG = 0.07, OUT_END = 0.24, IN_END = 0.47, LEAVE = 1.45;
let seed = 7; const rnd = () => { seed = (seed * 16807) % 2147483647; return seed / 2147483647; };
const ctx = document.getElementById("dots").getContext("2d");
const P = [];
document.fonts.load('900 590px "Roboto Flex"').then(() => {
  const off = document.createElement("canvas"); off.width = 1920; off.height = 1080; const oc = off.getContext("2d");
  oc.font = '900 590px "Roboto Flex"'; oc.textAlign = "center"; oc.fillStyle = "#fff"; oc.fillText(WORD, 960, 728);
  const img = oc.getImageData(0, 0, 1920, 1080).data, spots = [];
  for (let y = 250; y < 760; y += 3) for (let x = 0; x < 1920; x += 3) if (img[(y * 1920 + x) * 4] > 128) spots.push([x, y]);
  const minX = Math.min(...spots.map((s) => s[0])), maxX = Math.max(...spots.map((s) => s[0]));
  const lerp = (a, b, u) => a + (b - a) * u;
  for (let i = 0; i < N; i++) {
    const [tx, ty] = spots[Math.floor(rnd() * spots.length)], a = rnd() * 6.283, r = Math.sqrt(rnd()), u = (tx - minX) / (maxX - minX);
    const c = u < 0.5 ? [lerp(254, 240, u * 2), lerp(145, 237, u * 2), lerp(23, 255, u * 2)] : [lerp(240, 124, u * 2 - 1), lerp(237, 108, u * 2 - 1), lerp(255, 242, u * 2 - 1)];
    const k = 0.55 + rnd() * 0.45;
    P.push({ tx, ty, bx: 960 + Math.cos(a) * r * 430, by: 540 + Math.sin(a) * r * 330, d: rnd() * 0.08, ph: rnd() * 6.28, lead: u * 0.17 + rnd() * 0.05, far: 1500 + rnd() * 900, col: "rgb(" + c.map((v) => Math.round(v * k)).join(",") + ")" });
  }
  draw(tl.time());
});
const clamp = (v) => Math.min(1, Math.max(0, v)), outE = (p) => 1 - Math.pow(1 - p, 3), inOut = (p) => (p < 0.5 ? 4 * p * p * p : 1 - Math.pow(-2 * p + 2, 3) / 2);
function draw(t) {
  ctx.clearRect(0, 0, 1920, 1080); if (t < BANG) return;
  const f = clamp((t - BANG) / 0.24);
  if (t < BANG + 0.36) {
    ctx.strokeStyle = "rgba(250,249,255," + 0.22 * (1 - f) + ")"; ctx.lineWidth = 2;
    ctx.beginPath(); ctx.arc(960, 540, Math.max(1, 1250 * outE(clamp((t - BANG) / 0.34))), 0, 6.283); ctx.stroke();
    const g = ctx.createRadialGradient(960, 540, 0, 960, 540, 70); g.addColorStop(0, "rgba(255,255,255," + (1 - f * 0.9) + ")"); g.addColorStop(1, "rgba(251,45,137,0)");
    ctx.fillStyle = g; ctx.beginPath(); ctx.arc(960, 540, 70, 0, 6.283); ctx.fill();
  }
  for (const p of P) {
    let x, y, streak = 0;
    if (t < OUT_END) { const u = outE(clamp((t - BANG) / (OUT_END - BANG))); x = 960 + (p.bx - 960) * u; y = 540 + (p.by - 540) * u; }
    else if (t < IN_END + p.d) { const u = inOut(clamp((t - OUT_END - p.d / 2) / (IN_END - OUT_END))); x = p.bx + (p.tx - p.bx) * u; y = p.by + (p.ty - p.by) * u; }
    else { x = p.tx + Math.sin(t * 9 + p.ph) * 1.2; y = p.ty + Math.cos(t * 7 + p.ph) * 1.2;
      const q = clamp((t - LEAVE - p.lead) / 0.3); if (q > 0) { x += p.far * q * q * q; streak = Math.min(160, p.far * q * q * 0.05); } }
    if (x > 1930) continue;
    ctx.fillStyle = p.col; ctx.fillRect(x - streak, y, 2.2 + streak, 2.2);
  }
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 2 }, 0);
tl.eventCallback("onUpdate", () => draw(tl.time()));
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:08 в видео

3D

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

1700 точек на сфере Фибоначчи (радиус 362 px) медленно вращаются вокруг вертикальной оси с лёгким наклоном, проецируются камерой 1500 px и сортируются от дальних к ближним: передние точки крупнее и ярче, тёплые — розовые, остальные — фиолетовые. У каждой точки есть двойник на торическом узле (2,3); при морфинге она летит к нему по cubic in-out со случайной задержкой до 0,16 с. Под ними пол из тонких фиолетовых линий уходит к точке схода на горизонте, ряды ползут к зрителю, на глубоком индиго радиальном фоне.

Когда использовать 3D-бит в 2D-ролике без 3D-движка: точки, проекция и морфинг.

Показать код

<!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>
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0d0b1e; }
#root { background: radial-gradient(1100px 760px at 50% 58%, #1c0b5d 0%, #150a48 40%, #0f0a2c 85%, #0d0b1e 100%); }
#space { position: absolute; inset: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <canvas id="space" width="1920" height="1080"></canvas>
</div>
<script>
const N = 1700, R = 362, CAM = 1500, MORPH = 0.7, MORPH_END = 1.16;
let seed = 11; const rnd = () => { seed = (seed * 16807) % 2147483647; return seed / 2147483647; };
const pts = [], ga = Math.PI * (3 - Math.sqrt(5));
for (let i = 0; i < N; i++) {
  const y = 1 - (2 * (i + 0.5)) / N, r = Math.sqrt(1 - y * y), a = i * ga, phi = (i / N) * Math.PI * 2;
  const kr = 210 + 120 * Math.cos(3 * phi), tube = 16 * Math.sqrt(rnd()), ta = rnd() * 6.283;
  pts.push({ s: [Math.cos(a) * r * R, y * R, Math.sin(a) * r * R],
    k: [Math.cos(2 * phi) * kr + Math.cos(ta) * tube, Math.sin(2 * phi) * kr + Math.sin(ta) * tube, 120 * Math.sin(3 * phi) + Math.cos(ta + 1) * tube], d: rnd() * 0.16, warm: rnd() });
}
const ctx = document.getElementById("space").getContext("2d");
const clamp = (v) => Math.min(1, Math.max(0, v)), inOut = (p) => (p < 0.5 ? 4 * p * p * p : 1 - Math.pow(-2 * p + 2, 3) / 2);
function draw(t) {
  ctx.clearRect(0, 0, 1920, 1080);
  ctx.lineWidth = 1;
  for (let k = -14; k <= 14; k++) { ctx.strokeStyle = "rgba(124,108,242,0.25)"; ctx.beginPath(); ctx.moveTo(960 + k * 9, 612); ctx.lineTo(960 + k * 230, 1080); ctx.stroke(); }
  for (let z = 1; z < 30; z++) { const zz = z - ((t * 0.35) % 1); if (zz <= 0.2) continue; const y = 612 + 470 / zz; if (y > 1080) continue;
    ctx.strokeStyle = "rgba(124,108,242," + Math.min(0.32, 0.05 + (y - 612) / 1400) + ")"; ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(1920, y); ctx.stroke(); }
  const yaw = t * 0.55, tilt = 0.32, cy = Math.cos(yaw), sy = Math.sin(yaw), ct = Math.cos(tilt), st = Math.sin(tilt), out = [];
  for (const p of pts) {
    const u = inOut(clamp((t - MORPH - p.d) / (MORPH_END - MORPH - 0.16)));
    const x = p.s[0] + (p.k[0] - p.s[0]) * u, y = p.s[1] + (p.k[1] - p.s[1]) * u, z = p.s[2] + (p.k[2] - p.s[2]) * u;
    const x1 = x * cy + z * sy, z1 = -x * sy + z * cy, y2 = y * ct - z1 * st, z2 = y * st + z1 * ct, s = CAM / (CAM + z2);
    out.push([960 + x1 * s, 517 + y2 * s, z2, p.warm]);
  }
  out.sort((a, b) => b[2] - a[2]);
  for (const [x, y, z, w] of out) { const f = clamp(0.5 - z / (2 * R)), size = 1.6 + 1.6 * f;
    ctx.fillStyle = w < 0.62 ? "rgba(251," + Math.round(45 + 70 * f) + ",137," + (0.35 + 0.6 * f) + ")" : "rgba(150,138,250," + (0.35 + 0.6 * f) + ")";
    ctx.fillRect(x - size / 2, y - size / 2, size, size); }
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 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:10 в видео

Данные

Счётная панель с растущими столбцами и самочерчущейся линией

На светлой странице три строки тяжёлых чисел по 180 px с моноширинными подписями поднимаются в свои обрезанные блоки с шагом 0,08 с, а значения считаются на expo.out (0,9 с). Белая карточка с мягкой индиго-тенью поднимается на 90 px в позицию (power3.out 0,45 с); её кольцо заполняется на power3.out, четырнадцать столбцов растут от основания с шагом 0,031 с (power3.out 0,3 с, последний — сплошного акцентного цвета), затем поверх них сама прорисовывается фиолетовая ломаная на sine.inOut (0,72 с) с точкой, ореолом и тёмной меткой, едущей на её конце.

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

Показать код

<!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=Roboto+Flex:opsz,[email protected],100..1000&family=JetBrains+Mono:wght@400;700&family=Instrument+Serif:ital@1&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0d0b1e; }
#root { background: #faf9ff; color: #1c0b5d; }
.row { position: absolute; left: 0; width: 900px; height: 200px; clip-path: inset(0); }
.num { position: absolute; left: 126px; top: -12px; font: 900 180px/180px 'Roboto Flex', sans-serif; }
.cap { position: absolute; left: 137px; top: 163px; font: 500 22px/26px 'JetBrains Mono', monospace; color: #6b6385; }
#card { position: absolute; left: 920px; top: 170px; width: 880px; height: 740px; border-radius: 26px; background: linear-gradient(115deg, #fff 52%, #f0edff); box-shadow: 0 34px 70px rgba(28,11,93,0.13); }
#title { position: absolute; left: 56px; top: 64px; font: 700 30px/36px 'Roboto Flex', sans-serif; }
#ring { position: absolute; left: 731px; top: 61px; width: 98px; height: 98px; }
.bar { position: absolute; width: 38px; border-radius: 7px 7px 0 0; background: #febc74; transform-origin: 50% 100%; }
#plot { position: absolute; inset: 0; width: 880px; height: 740px; }
#tag { position: absolute; width: 120px; height: 44px; border-radius: 9px; background: #1c0b5d; color: #fff; font: 700 22px/44px 'Roboto Flex', sans-serif; text-align: center; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <div class="row" style="top:190px"><div class="num" id="n0">00</div><div class="cap">"FIRST STEP"</div></div>
  <div class="row" style="top:440px"><div class="num" id="n1">00</div><div class="cap">"SECOND STEP"</div></div>
  <div class="row" style="top:690px"><div class="num" id="n2" style="color:#fb2d89">00</div><div class="cap">"THIRD STEP"</div></div>
  <div id="card"><div id="title">"card title"</div>
    <svg id="ring" viewBox="0 0 98 98"><circle cx="49" cy="49" r="44.5" fill="none" stroke="#e9e4f2" stroke-width="9"/><circle id="arc" cx="49" cy="49" r="44.5" fill="none" stroke="#7c6cf2" stroke-width="9" stroke-linecap="round" transform="rotate(-90 49 49)" stroke-dasharray="279.6" stroke-dashoffset="279.6"/></svg>
    <div id="bars"></div><svg id="plot" viewBox="0 0 880 740"><polyline id="line" fill="none" stroke="#7c6cf2" stroke-width="4.5" stroke-linejoin="round" stroke-linecap="round"/><circle id="head" r="10" fill="#7c6cf2"/></svg><div id="tag">"tag"</div></div>
</div>
<script>
const TOPS = [706, 723, 651, 635, 704, 691, 645, 560, 605, 602, 572, 514, 518, 537], LINE = [660, 693, 600, 572, 666, 659, 585, 502, 573, 563, 508, 465, 490, 488];
const bars = TOPS.map((top, i) => { const b = document.createElement("div"); b.className = "bar"; Object.assign(b.style, { left: 60 + 55.5 * i + "px", top: top - 170 + "px", height: 830 - top + "px" }); if (i === 13) b.style.background = "#fb2d89"; document.getElementById("bars").appendChild(b); return b; });
const pts = LINE.map((y, i) => [79 + 55.5 * i, y - 170]), seg = pts.slice(1).map((p, i) => Math.hypot(p[0] - pts[i][0], p[1] - pts[i][1])), total = seg.reduce((a, b) => a + b, 0);
const v = { a: 0, b: 0, c: 0, ring: 0, line: 0 };
function show() {
  ["n0", "n1", "n2"].forEach((id, i) => { document.getElementById(id).textContent = String(Math.round([v.a, v.b, v.c][i])).padStart(2, "0"); });
  document.getElementById("arc").setAttribute("stroke-dashoffset", 279.6 * (1 - v.ring));
  let left = total * v.line, out = [pts[0]], h = pts[0];
  for (let i = 0; i < seg.length; i++) { if (left >= seg[i]) { out.push(pts[i + 1]); left -= seg[i]; h = pts[i + 1]; continue; } const f = left / seg[i]; h = [pts[i][0] + (pts[i + 1][0] - pts[i][0]) * f, pts[i][1] + (pts[i + 1][1] - pts[i][1]) * f]; out.push(h); break; }
  document.getElementById("line").setAttribute("points", out.map((p) => p.join(",")).join(" "));
  const head = document.getElementById("head"); head.setAttribute("cx", h[0]); head.setAttribute("cy", h[1]);
  Object.assign(document.getElementById("tag").style, { left: h[0] - 60 + "px", top: h[1] - 77 + "px" });
}
const tl = gsap.timeline({ paused: true });
gsap.utils.toArray(".row").forEach((r, i) => tl.fromTo(r.children, { y: 70, opacity: 0 }, { y: 0, opacity: 1, duration: 0.4, ease: "power3.out" }, 0.02 + 0.08 * i));
tl.fromTo("#card", { y: 90, opacity: 0 }, { y: 0, opacity: 1, duration: 0.45, ease: "power3.out" }, 0.07);
tl.to(v, { a: 1, duration: 0.9, ease: "expo.out", onUpdate: show }, 0.02);
tl.to(v, { b: 2, duration: 0.9, ease: "expo.out", onUpdate: show }, 0.1);
tl.to(v, { c: 3, duration: 0.9, ease: "expo.out", onUpdate: show }, 0.24);
tl.to(v, { ring: 1, duration: 0.9, ease: "power3.out", onUpdate: show }, 0.27);
tl.fromTo(bars, { scaleY: 0 }, { scaleY: 1, duration: 0.3, ease: "power3.out", stagger: 0.031 }, 0.3);
tl.fromTo(["#head", "#tag"], { opacity: 0 }, { opacity: 1, duration: 0.08 }, 0.65);
tl.to(v, { line: 1, duration: 0.72, ease: "sine.inOut", onUpdate: show }, 0.65);
show();
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>

Превью техники «HUD-рамка с режимом exclusion и живым таймкодом» — На 0:02 в видео

Композиция

HUD-рамка с режимом exclusion и живым таймкодом

Угловые скобки (26 px, 2 px), заголовок слева вверху, таймкод в стиле SMPTE справа вверху (секунды и кадры при 60 fps), название главы слева внизу и счётчик кадров с индикатором прогресса 300 px справа внизу — всё светлого цвета с opacity 0,9, у каждой части mix-blend-mode exclusion, поэтому рамка читается на любом фоне: светлая на тёмном, тёмная на светлом и с оттенком дополнительного цвета на розовом или фиолетовом. Она проявляется на 0,3 с, а счётчики обновляются по таймлайну каждый кадр.

Когда использовать Чтобы дать ролику или продуктовому фильму эфирную рамку «живого рендера», не конфликтующую со сценами.

Показать код

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HUD-рамка с режимом exclusion и живым таймкодом</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=Roboto+Flex:opsz,[email protected],100..1000&family=JetBrains+Mono:wght@400;700&family=Instrument+Serif:ital@1&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0d0b1e; }
#bg { position: absolute; inset: 0; }
.hud { position: absolute; mix-blend-mode: exclusion; color: #faf9ff; opacity: 0; }
.corner { width: 26px; height: 26px; border: 0 solid #faf9ff; }
.txt { font: 700 17px/17px 'JetBrains Mono', monospace; white-space: pre; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <div id="bg"></div>
  <div class="hud corner" style="left:36px;top:36px;border-left-width:2px;border-top-width:2px"></div>
  <div class="hud corner" style="left:1858px;top:36px;border-right-width:2px;border-top-width:2px"></div>
  <div class="hud corner" style="left:36px;top:1018px;border-left-width:2px;border-bottom-width:2px"></div>
  <div class="hud corner" style="left:1858px;top:1018px;border-right-width:2px;border-bottom-width:2px"></div>
  <div class="hud txt" style="left:64px;top:63px">"BRAND / TITLE"</div>
  <div class="hud txt" id="tc" style="right:64px;top:61px">00:00:00:00</div>
  <div class="hud txt" id="ch" style="left:64px;top:1008px">"CHAPTER"</div>
  <div class="hud txt" id="fc" style="right:64px;top:993px">000 / 180</div>
  <div class="hud" style="left:1556px;top:1020px;width:300px;height:1px;background:#faf9ff"></div>
  <div class="hud" id="fill" style="left:1556px;top:1017px;width:0;height:5px;background:#faf9ff"></div>
</div>
<script>
const FPS = 60, FRAMES = 180, pad = (n, k) => String(n).padStart(k, "0");
function hud(t) { const f = Math.min(FRAMES, Math.round(t * FPS));
  document.getElementById("tc").textContent = "00:00:" + pad(Math.floor(f / FPS), 2) + ":" + pad(f % FPS, 2);
  document.getElementById("fc").textContent = pad(f, 3) + " / " + FRAMES;
  document.getElementById("fill").style.width = 300 * f / FRAMES + "px"; }
const tl = gsap.timeline({ paused: true });
// The backgrounds change under the frame: pink, near-black, light page, violet.
["#fb2d89", "#0d0b1e", "#faf9ff", "#7c6cf2"].forEach((c, i) => tl.set("#bg", { backgroundColor: c }, i * 0.75));
tl.fromTo(".hud", { opacity: 0 }, { opacity: 0.9, duration: 0.12 }, 0.3);
tl.to({}, { duration: 3 }, 0);
tl.eventCallback("onUpdate", () => hud(tl.time()));
hud(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>

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

Превью промпта «Живое математическое шоуриль с глитч-склейками в такт»

Живое математическое шоуриль с глитч-склейками в такт

<direction> Сделай 20-секундный моушн-шоуриль, целиком построенный на математике: каждый кадр генерируется из текущего времени t, без фото, видеозаписей и картинок. Горизонтальный формат 1920x1080, 60 кадров/с. Он должен ощущаться как точный лабораторный прибор, который вдруг становится прекрасным: тёмный, светящийся, точный, с одной глитч-склейкой каждые две секунды в такт. Восемь математических сцен идут внутри неподвижной рамки в стиле прибора (угловые скобки, логотип, счётчик и название сцены, точка ритма, бегущие часы, линия прогресса, живое уравнение), затем финальная карточка с брендом. Избегай зерна, стоковых изображений и любого декора, не взятого из математики. </direction> <structure> Склейки на 2, 4, 8, 10, 12, 14, 16 и 18 с, все в такт. 1) 0–2 с, начало координат: бледное бирюзовое кольцо растёт из центра до r 238 px (0–0,45 с, ease out); оси с делениями каждые 60 px растут из светящейся центральной точки; на каждом ударе от точки уходит кольцо-рябь. Широко разрежённая строка вроде "YOUR AI MOTION DESIGNER" проявляется из случайных символов (0,3–0,78 с); короткая строка с засечками вроде "Ideas in motion" печатается буква за буквой рядом с началом координат (0,5–1,12 с). С 1,35 до 1,95 с бирюзовая дуга радиуса 220 один раз обвивает начало координат, на её конце белая точка, а слова гаснут. 2) 2–4 с, единичная окружность: бирюзовая окружность (r 220) слева, угол растёт со скоростью 4,52 рад/с. Белый радиус, бирюзовый катет косинуса, розовый катет синуса, оранжевая дуга угла с подписью θ, пунктирная розовая линия к розовой точке при x 820, где записан синус; история угла тянется вправо светящейся розовой синусоидой (104 px на радиан) с бледной бирюзовой косинусоидой рядом и пунктирными направляющими +1/-1. Живые показания "θ = 4.524 rad" и "sin θ = -0.982". Уравнение: y = sin θ. 3) 4–8 с, эпициклы Фурье: цепочка из 180 вращающихся кругов (по убыванию размера, бледные лавандовые кольца, белые радиусы) рисует контур большого π светящимся оранжевым с 4,3 до 7,2 с (прогресс sine in-out), затем фигура заливается мягким градиентом от розового к фиолетовому, а цепочка гаснет. Слева спектр |cₙ| для n = -24...24 (высота столбцов по квадратному корню амплитуды) загорается от центра к краям по мере рисования; показания "K = 180 terms" и "t/2π = 0.527". Уравнение: f(t) = Σ cₙ e^{int}. 4) 8–10 с, 3D-узел Лиссажу (sin 3t, sin 2t, sin 5t) прорисовывается за 0,6 с, затем вращается в перспективе: лента, цвет которой идёт от бирюзового через фиолетовый к розовому вдоль кривой, а ширина и яркость зависят от глубины. Справа сетка 3x3 из маленьких плоских фигур Лиссажу с подписями 1:1, 2:3, 4:5, 1:2, 3:4, 5:6, 1:3, 3:5, 3:2 рисуется по одной с плавающей фазой; последняя становится бирюзовой в тонкой рамке. 5) 10–12 с, каркасная волновая поверхность z = cos(kr - ωt)/(1 + r) на сетке 48x48 под углом 67° сверху, проявляется от центра к краям за 0,55 с и медленно поворачивается, линии окрашены по высоте от бирюзового через фиолетовый к розовому. Оранжевая точка-зонд скользит по поверхности при r = 3.2 с выносной линией и живыми показаниями "r = 3.200", "z = 0.276". 6) 12–14 с, множество Жюлиа z² + c на весь кадр, открывающееся круглым порталом, который расширяется из центра с белой каймой. c = 0.7885·e^{iα} скользит по своей окружности (sine in-out), так что фрактал превращается из отдельных спиралей в связную фигуру с чёрной серединой; медленное приближение и вращение. Цвета по времени выхода: индиго, фиолетовый, розовый, оранжевый, бледно-кремовый до белого. Врезка показывает движение c по окружности с показаниями "Re c" и "Im c". 7) 14–16 с, филлотаксис: 1500 семян при θₙ = n·137.508°, rₙ = c√n появляются от центра к краям и вращаются, сначала белые, потом розовые, фиолетовые и бирюзовые. Слева φ = 1.6180339887... записывается цифра за цифрой, растёт ряд Фибоначчи (21 и 34 бирюзовым), с "seeds n = 1500" и "spirals 21 ⟲ 34 ⟳". 8) 16–18 с, тождество Эйлера: семена закручиваются в кольцо, которое становится бирюзовой единичной окружностью слева; точка движется от 1 к -1, оставляя оранжевую дугу над верхом; e^{iπ} появляется крупно, затем "+", "1", "=" по одному в такт, в точке -1 пульсирует кольцо, а "0" приземляется на 18 с в розовом кольце. 9) 18–20 с, финальная карточка: тождество уменьшается и уходит наверх; большой широко разрежённый логотип вроде "YOUR BRAND" (замени на свой) поднимается снизу буква за буквой внутри маски (задержка 0,06 с), под ним прорисовывается бирюзово-фиолетово-розовое подчёркивание, разрежённая строка вроде "IDEAS IN MOTION × [your web address]" проявляется из случайных символов, а курсивная строка с засечками "From idea to video in one chat" плавно появляется. Всё гаснет до чёрного с 19,35 до 19,95 с. </structure> <composition> Фон: глубокое индиго-чёрное радиальное свечение, центр #10063A, к краям #03030A, без зерна. Акценты: розовый #FB2D89 (основной), оранжевый #FE9117, фиолетовый #7C6CF2, бирюзовый #2DD4B0 и белый. Линии и подписи в лавандово-серых тонах: #9A98A4 для подписей, #57516F для тусклых пояснений, #433E53 для осей. Штрихи мягко светятся с размытием 12–16 px собственного цвета. Шрифты: уравнения шрифтом в духе Computer Modern (Old Standard TT, переменные курсивом, функции прямым); все показания, счётчики и подписи моноширинным (Liberation Mono или похожим), мелким и разрежённым; название бренда жирной гротескной гарнитурой с очень широким трекингом. Неподвижная рамка остаётся всё время, появляясь за 0,15–0,9 с: тонкие угловые скобки длиной 27 px, на 47 px от каждого угла. Слева сверху: логотип вроде "YOUR BRAND" (жирный, 22 px, трекинг около 0,35 em) с крошечной разрежённой строкой под ним вроде "IDEAS IN MOTION · [your web address]". Справа сверху: счётчик сцен "01 / 08" и под ним короткое название каждой сцены, например "DESCRIBE YOUR IDEA", "EDIT IN WORDS", "NO KEYFRAMES", "3D EFFECTS", "LIVE PREVIEW", "SHAPES AND SOUND", "MUSIC TO THE RHYTHM", "MP4 EXPORT" (замени на свои слоганы), слева от него маленькая розовая точка. Справа снизу: бегущие часы "t = 03.35 s" (два знака после запятой) и крошечная строка с номером кадра. Внизу: линия прогресса толщиной 1 px от x 80 до x 1840, заполняющаяся бирюзово-фиолетово-розовым градиентом по ходу времени, с маленькими засечками на границах сцен. Слева снизу: уравнение текущей сцены. </composition> <techniques> Каждая склейка это 0,2-секундный глитч: уходящая картинка режется на горизонтальные полосы, сдвинутые вбок, мерцают 3–6 тонких линий во всю ширину бирюзового, розового, оранжевого и белого цвета, весь кадр вспыхивает белым примерно на 14% и затухает за 0,25 с, а подписи рамки на несколько кадров прокручивают случайные символы. Розовая точка ритма ярко вспыхивает на каждом ударе и затухает за полтакта. Уравнение сцены появляется через 0,1–0,35 с после каждой склейки. Показания, часы и счётчики обновляются вместе с анимацией. Разрежённые строки проявляются из случайных символов; строки с засечками печатаются буква за буквой; финальный логотип поднимается снизу внутри маски с задержкой 0,06 с. Прорисовки и трансформации используют ease-out или sine in-out, как указано для каждой сцены. </techniques> <music> Энергичный электронный трек 120 BPM (фортепианные аккорды, тёплые пэды, синтезаторный бас, бит four-on-the-floor), ровно 20 с, каждая склейка попадает на удар. Мягкий и фильтрованный первые две секунды с райзером к буму на 2 с, полный драйв до 16 с, фильтрованный брейкдаун с райзером к финальному буму на 18 с, затем затухание к 20 с. Микс около -14 LUFS, истинный пик ниже -1 dBTP. </music> <sound> Мягкий вуш и три глитч-щелчка на каждой склейке, а также более глубокий вуш и бум, когда на 12 с открывается портал фрактала, всё поверх музыки и по сетке ритма. Без закадрового голоса. </sound> <references> Математические объясняющие анимации в сочетании с генеративным креативным кодингом и sci-fi интерфейсом осциллографа или лабораторного прибора: тонкие светящиеся линии на почти чёрном фоне, моноширинные показания, учебниковые уравнения с засечками. </references>

Превью промпта «Сборка лого из 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>

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

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