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

RU

Открыть beta

Simple Motion

Шоурил моушн-дизайна из восьми техник

15-секундный горизонтальный шоурил из восьми сцен с жёсткими склейками: заголовок, морфинг фигур, LED-сетка, частицы, жидкость, стена текста, 3D-куб, финал.

Код промпта ONOОпубликован 11 ноября 2026 г.

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

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

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

Использовать в своём агентеВ своём агенте

Замысел

Сделай 15-секундный горизонтальный шоурил моушн-дизайна, 1920x1080, 60 кадров/с. Используй восемь сцен: семь ровно по 2 секунды и финальная заставка на 1 секунду. Каждая склейка попадает на сильную долю хаус-трека 120 BPM. Должно ощущаться как шоурил точного и игривого моушн-дизайнера, с разной техникой в каждой сцене. Только жёсткие склейки, без затуханий между сценами, кроме финального затемнения. Используй плоские графичные страницы, один розовый акцент, плотный сжатый гротеск и смаз от затвора на каждом быстром движении. Без фото, видеозаписей и голоса. Ни одна буква не должна выходить за ребро куба. Слова на стене текста никогда не должны выстраиваться в колонки. После взрыва не должно оставаться частиц.

Структура

0-2 с, заголовок на светлой странице. Почти чёрная линия 1500 x 6 пикс. растёт из центра кадра (scaleX, expo.out 0,45 с). На 0,5 с первое слово, например "SHOW", поднимается из линии снизу. На 1,0 с второе слово, например "REEL", опускается из неё сверху (замени оба на свои). Каждое слово находится в боксе, обрезанном по линии: путь 290 пикс., expo.out 0,45 с, Geist Bold 248 пикс., по центру. На 1,5 с за 0,1 с появляются три угловые подписи: имя вверху слева, бегущий покадровый таймкод (HH:MM:SS:FF) вверху справа и список возможностей, например "TYPE / SHAPES / 3D / SOUND", внизу слева бледным приглушённым тоном. С 1,6 с весь слой увеличивается с 1x до 41x за 0,4 с с expo.in, в точку внутри толстого штриха верхнего слова (подойдёт перекладина буквы T). Кадр заканчивается заливкой почти чёрным и незаметно переходит в следующую сцену.
2-4 с, фигуры на почти чёрном, подпись главы, например "01 / FIRST STEP". Розовый круг пружинисто появляется из ничего до 512 пикс. в поперечнике с одним мягким перелётом, r = 256(1 - e^(-9t) cos 11t). Каждые полсекунды он превращается в следующую фигуру: квадрат (сторона 338 пикс.), затем треугольник (радиус описанной окружности 266), затем мягкая пятилучевая морская звезда. Каждый контур рисуется из 240 точек, переход которых к следующей фигуре начинается с разницей в несколько сотых секунды, так что край дрожит 0,1 с. Кадр постоянно поворачивается по часовой стрелке: быстрый поворот power2.inOut на 30–45 градусов, когда фигура встаёт на место, и медленный дрейф между ними. Каждую четверть секунды от фигуры отходит тонкое бледное кольцо с радиусом 300 пикс. и расширяется до 980 пикс. (expo.out, 0,95 с), исчезая.
4-6 с, светодиодная сетка, подпись главы, например "02 / SECOND STEP". Кадр превращается в сетку 32 x 18 из светлых плиток 56 пикс. с шагом 60 пикс. и почти чёрными линиями между ними. Каждая плитка переворачивается как карточка (высота x |cos|, 180 градусов, power2.inOut 0,23 с) и на середине меняет цвет. Переворот идёт волной от центральной ячейки наружу, 0,028 с на ячейку, при этом вертикальное расстояние считается с коэффициентом 1,2. Волна открывает пустые ячейки глубокого чернильного цвета и большое пиксельное число в розовых ячейках высотой 13 ячеек, например "02". На 5,45 с вертикальная развёртка проходит справа налево за 0,37 с и ненадолго сжимает только пустые ячейки до четверти высоты.
6-8 с, частицы на почти чёрном, подпись главы, например "03 / THIRD STEP". Около 2800 светлых и розовых точек (3–6 пикс.) дрейфуют по всему кадру. Затем они собираются в слово, например "IDEAS", шрифтом Geist Bold, расставленные так, чтобы заполнить x 395–1520 с высотой заглавных от y 382 до 668, по sine.inOut за 0,42 с, причём каждая точка немного запаздывает. Они держатся с дрожанием в один пиксель. На 7,5 с они разлетаются от центра с ускорением, и каждая точка покидает кадр к 7,8 с. Быстро двигаясь, точки оставляют полосу вдоль траектории.
8-10 с, жидкость на розовом, маленькая почти чёрная подпись "LIVE PREVIEW". Семь светлых капель-метаболов, одна большая посередине и шесть вокруг, вращаются по орбите и «дышат», соединяясь и сливаясь, когда сближаются. На 8,45 с они втягиваются в одну каплю (power2.in 0,17 с), которая остаётся маленькой. На 9,05 с их снова выбрасывает с back.out.
10-12 с, стена текста на светлой странице, подпись "KINETIC TYPE". Восемь строк Geist Bold 152 пикс. с шагом 150 пикс. покрывают кадр. Слова чередуются: громкие почти чёрные и тихие бледно-серые, с небольшим дополнительным пробелом, например "MOTION IDEAS TYPE SHAPES SOUND PREVIEW" по кругу (замени на свои слова о возможностях). Чётные строки сдвинуты почти на целый цикл слов, чтобы слова никогда не выстраивались в колонки. Чётные строки идут влево, нечётные вправо, каждая строка на 60 пикс./с быстрее предыдущей (от 900 до 1320 пикс./с). На 11,0 с все строки резко останавливаются, затем рывком проезжают ещё примерно 0,17 с пути (power3.inOut 0,28 с). В тот же момент розовая полоса на всю ширину высотой 300 пикс. раскрывается от центра поперёк середины (scaleY expo.out 0,35 с). Название белым Geist Bold 262 пикс., например "STUDIO NAME", поднимается в полосу от её нижнего края (expo.out 0,33 с).
12-14 с, 3D-куб на почти чёрном, подпись "3D EFFECTS". Куб 514 пикс. стоит в перспективе (2400 пикс.), наклонён на -14,5 градуса, так что виден его верх глубокого чернильного цвета. Он покоится в виде три четверти и каждые полсекунды поворачивается на четверть оборота (power3.out 0,3 с), причём каждая грань встаёт под одним и тем же углом. На четырёх гранях по одному жирному слову, например: "TYPE" почти чёрным на светлом, "3D" белым на розовом, "SHAPES" светлым на почти чёрном, "SOUND" розовым на светлом. Короткие слова по 200 пикс. Более длинные масштабируются примерно до 85% грани, так что каждое слово помещается в свою грань с полями.
14-15 с, финальная заставка на почти чёрном. Название из двух слов Geist Bold 224 пикс., например "Studio Name", первое слово светлое, второе розовое, поднимается из жёсткого края чуть ниже базовой линии (expo.out 0,45 с). На 14,15 с следом идёт фраза, например "your tagline · your website", Geist Medium 44 пикс. На 14,25 с появляется крошечный призыв к действию, например "TRY IT FREE", шрифтом Geist Mono. С 14,55 с вся карточка линейно затухает до чёрного, достигая чёрного на последнем кадре.

Композиция

Палитра:

Светлая страница #FAF9FF.
Почти чёрный #0D0B1E для тёмных страниц и тёмного шрифта.
Глубокий чернильный #1C0B5D для тёмных панелей, пустых ячеек сетки и верха куба.
Один акцентный розовый #FB2D89.
Белый #FFFFFF для текста на розовом.
Приглушённый #6B6385 для мелких подписей на светлых страницах и с прозрачностью 24% для тихих слов стены текста.
Подписи глав на почти чёрном: #E9E4F2 с прозрачностью 55%.
Шрифт:
Geist Bold для всего крупного, плотно: letter-spacing -0.07em, line-height 1.
Geist Medium только для фразы на финальной заставке.
Geist Mono 22 пикс. для угловых подписей, на расстоянии 64 пикс. слева и 60 пикс. сверху.
Крупные элементы остаются по центру кадра, вокруг единственного главного элемента каждой сцены много свободного места.

Техники

Каждое быстрое движение несёт смаз от затвора. Отрисуй три копии движущегося слоя, взятые с шагом в четверть кадра (t - 1/240 с, t, t + 1/240 с), и наложи их с прозрачностью 1, 1/2 и 1/3. Это усредняет их, так что движение оставляет ступенчатые серые тени. Сцены, нарисованные на canvas (морфинг, сетка, частицы, жидкость), усредняют три прохода так же. Слова появляются, поднимаясь или опускаясь из жёстких границ обрезки с expo.out, никогда не проявляясь через прозрачность. Первая склейка скрыта зумом expo.in в штрих буквы. Все остальные переходы — жёсткие склейки на сильную долю. Линейное затухание финальной заставки до чёрного — единственное затухание.

Музыка

Оригинальный хаус-трек 120 BPM длиной ровно 15 секунд, по одному такту на сцену, всё по сетке долей композиции. Бас-бочка в каждую долю, клэпы на 2 и 4, открытые хэты на слабых долях, фанковая подпрыгивающая бас-линия и яркие аккордовые стабы на слабых долях. Первый такт, под заголовком, — тихое нарастание. Райзер и короткий вуш идут в зум, и полный грув врывается на 2,0 с с бумом. Каждая бочка попадает в сетку, так что каждая склейка приходится на сильную долю. Трек затухает в последние полсекунды. Микс примерно -14 LUFS, истинный пик ниже -1 dBTP.

Звук

Звуки, наложенные на картинку поверх музыки:

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

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

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

Типографика

Слова, выходящие из растущей линии

Линия толщиной 6 px растёт из центра (scaleX от 0 до 1, expo.out 0.45 s). Первое слово поднимается из линии снизу, второе опускается из неё сверху, с разницей в 0.5 s; каждое слово лежит в собственном блоке с overflow-hidden, границей которого служит линия, поэтому слова словно выходят из неё (y от 290 px до 0, expo.out 0.45 s). Плотная гротескная гарнитура 248 px с трекингом -0.07em, почти чёрная на светлой странице.

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

Показать код

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Слова, выходящие из растущей линии</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;700&family=Geist+Mono&display=swap");
html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; }
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene { background: #faf9ff; }
.rule { position: absolute; left: 210px; top: 537px; width: 1500px; height: 6px; background: #0d0b1e; transform: scaleX(0); }
.box { position: absolute; left: 0; width: 1920px; overflow: hidden; }
.box.top { top: 0; height: 534px; }      /* bottom edge = the rule */
.box.bottom { top: 566px; height: 514px; } /* top edge just under the rule */
.word { position: absolute; left: 0; width: 1920px; text-align: center; white-space: nowrap;
  font: 700 248px/1 "Geist", sans-serif; letter-spacing: -0.07em; color: #0d0b1e; }
.box.top .word { top: 316px; }
.box.bottom .word { top: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="3">
    <div class="rule"></div>
    <div class="box top"><div class="word">"SHOW"</div></div>
    <div class="box bottom"><div class="word">"REEL"</div></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const RISE = 290;   // travel of each word, about one line height
const DUR = 0.45;   // every move: expo.out over 0.45 s
tl.fromTo(".rule", { scaleX: 0 }, { scaleX: 1, duration: DUR, ease: "expo.out" }, 0);
tl.fromTo(".box.top .word", { y: RISE }, { y: 0, duration: DUR, ease: "expo.out" }, 0.5);
tl.fromTo(".box.bottom .word", { y: -RISE }, { y: 0, duration: DUR, ease: "expo.out" }, 1.0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Превью техники «Зум сквозь штрих буквы с трёхкратным смазом затвора» — На 0:01 в видео

Переход

Зум сквозь штрих буквы с трёхкратным смазом затвора

Весь слой заголовка масштабируется от 1 до 41 за 0.4 s с expo.in вокруг точки внутри толстого штриха (здесь перекладины буквы T), так что кадр заполняется цветом шрифта, который является фоном следующей сцены: бесшовная склейка. Смаз — это три копии слоя, взятые с шагом в четверть кадра (t - 1/240 s, t, t + 1/240 s) и наложенные с opacity 1, 1/2 и 1/3, то есть точное среднее трёх экспозиций, поэтому быстрые движения оставляют ступенчатые серые шлейфы, как у настоящего затвора.

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

Показать код

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Зум сквозь штрих буквы с трёхкратным смазом затвора</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;700&family=Geist+Mono&display=swap");
html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; }
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene { background: #faf9ff; }
.layer { position: absolute; inset: 0; background: #faf9ff; }
.zoom { position: absolute; inset: 0; transform-origin: 956px 368px; } /* a point inside the T's bar */
.word { position: absolute; left: 0; top: 316px; width: 1920px; text-align: center; white-space: nowrap;
  font: 700 248px/1 "Geist", sans-serif; letter-spacing: -0.07em; color: #0d0b1e; }
.next { position: absolute; inset: 0; background: #0d0b1e; }
.dot { position: absolute; left: 910px; top: 490px; width: 100px; height: 100px; border-radius: 50%; background: #fb2d89; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="3">
    <div id="stack"></div>
    <div class="next clip" data-start="2" data-duration="1"><div class="dot"></div></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const SH = 0.25 / 60;                 // a quarter frame at 60 fps
const SAMPLES = [-SH, 0, SH], OPACITY = [1, 1 / 2, 1 / 3];
const expoIn = gsap.parseEase("expo.in");
const stack = document.getElementById("stack");
const layers = SAMPLES.map((dt, i) => {
  const L = document.createElement("div");
  L.className = "layer"; L.style.opacity = OPACITY[i];
  L.innerHTML = '<div class="zoom"><div class="word">MOTION</div></div>';
  stack.appendChild(L);
  return { dt, zoom: L.querySelector(".zoom") };
});
function pose(L, t) {
  const p = Math.min(1, Math.max(0, (t - 1.6) / 0.4)); // zoom from 1.6 s to 2.0 s
  L.zoom.style.transform = "scale(" + (1 + 40 * expoIn(p)).toFixed(4) + ")";
}
const clock = { t: 0 };
tl.to(clock, { t: 3, duration: 3, ease: "none", onUpdate: () => layers.forEach((L) => pose(L, clock.t + L.dt)) }, 0);
layers.forEach((L) => pose(L, L.dt));
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 в видео

Фигуры

Дрожащий радиальный морфинг форм с кольцами ряби

Один SVG-контур перерисовывается в каждом кадре по 240 точкам вокруг центра: каждая форма (круг, квадрат, треугольник, мягкая пятилучевая звезда) задана как функция радиуса от угла, и каждая точка переходит к следующей форме за 0.07 s со своей небольшой задержкой (от 0 до 0.05 s, сумма синусов), так что контур дрожит во время морфинга. Рамка поворачивается по часовой стрелке быстрым вращением power2.inOut, когда форма встаёт на место, и медленно дрейфует между ними. Тонкие кольца уходят от формы каждые четверть секунды и расширяются от 300 до 980 px (expo.out, 0.95 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=Geist:wght@400;500;700&family=Geist+Mono&display=swap");
html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; }
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene { background: #0d0b1e; }
.ring { position: absolute; left: -20px; top: -440px; width: 1960px; height: 1960px; opacity: 0; }
#turn { position: absolute; inset: 0; transform-origin: 960px 540px; }
svg { position: absolute; left: 0; top: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="2">
    <div id="rings"></div>
    <div id="turn"><svg width="1920" height="1080" viewBox="0 0 1920 1080"><path id="shape" fill="#fb2d89" d=""></path></svg></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const TAU = Math.PI * 2, N = 240, CX = 960, CY = 540, d2r = Math.PI / 180;
const rings = [];
for (let k = 0; k < 8; k++) {
  const d = document.createElement("div"); d.className = "ring";
  d.innerHTML = '<svg width="1960" height="1960" viewBox="0 0 1960 1960"><circle cx="980" cy="980" r="978" fill="none" stroke="#faf9ff" stroke-width="2.5" vector-effect="non-scaling-stroke"/></svg>';
  document.getElementById("rings").appendChild(d); rings.push(d);
}
// radius of each shape at angle a, in the turning frame
const circleR = (t) => { const u = Math.max(0, t - 0.025); return 256 * (1 - Math.exp(-9 * u) * Math.cos(11 * u)); };
const polyR = (a, n, rc, v) => { const ap = rc * Math.cos(Math.PI / n), seg = TAU / n; const x = (((a - v) % seg) + seg) % seg; return ap / Math.cos(x - Math.PI / n); };
const squareR = (a) => 169 / Math.max(Math.abs(Math.cos(a)), Math.abs(Math.sin(a)));
const starR = (a) => { const c = (1 + Math.cos(5 * (a + Math.PI / 2))) / 2; return 108 + 154 * c * c; };
const shapes = [(a, t) => circleR(t), (a) => squareR(a), (a) => polyR(a + 22 * d2r, 3, 266, -Math.PI / 2), (a) => starR(a + 100 * d2r)];
const morphAt = [0.5, 1.0, 1.5];
const delay = Array.from({ length: N }, (_, i) => { const a = (i / N) * TAU; return 0.03 * (0.5 + 0.5 * Math.sin(3 * a + 1.3)) + 0.02 * (0.5 + 0.5 * Math.sin(7 * a + 0.4)); });
const morphE = gsap.parseEase("power2.inOut"), ringE = gsap.parseEase("expo.out");
const path = document.getElementById("shape");
function draw(t) {
  let k = 0; while (k < 3 && t >= morphAt[k]) k++;
  const from = shapes[Math.max(0, k - 1)], to = shapes[k], m0 = k > 0 ? morphAt[k - 1] : -1;
  let d = "";
  for (let i = 0; i < N; i++) {
    const a = (i / N) * TAU;
    let r = shapes[0](a, t);
    if (k > 0) { const e = morphE(Math.min(1, Math.max(0, (t - m0 - delay[i]) / 0.07))); r = from(a, t) * (1 - e) + to(a, t) * e; }
    d += (i ? "L" : "M") + (CX + r * Math.cos(a)).toFixed(1) + " " + (CY + r * Math.sin(a)).toFixed(1);
  }
  path.setAttribute("d", d + "Z");
  rings.forEach((el, j) => {
    const age = t - j * 0.25, p = age / 0.95;
    if (age < 0 || p >= 1) { el.style.opacity = 0; return; }
    el.style.opacity = 0.32 * (1 - p);
    el.style.transform = "scale(" + (300 / 980 + (1 - 300 / 980) * ringE(p)) + ")";
  });
}
const clock = { t: 0 };
tl.to(clock, { t: 2, duration: 2, ease: "none", onUpdate: () => draw(clock.t) }, 0);
// clockwise spin as each shape lands, slow drift between
tl.set("#turn", { rotation: -15 }, 0);
tl.to("#turn", { rotation: 32, duration: 0.25, ease: "power2.inOut" }, 0.52);
tl.to("#turn", { rotation: 45, duration: 0.23, ease: "sine.out" }, 0.77);
tl.to("#turn", { rotation: 82, duration: 0.2, ease: "power2.inOut" }, 1.0);
tl.to("#turn", { rotation: 100, duration: 0.4, ease: "sine.out" }, 1.2);
tl.to("#turn", { rotation: 136, duration: 0.4, ease: "power2.out" }, 1.6);
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:04 в видео

Переход

Волна переворота пиксельной сетки, открывающая светящееся слово

Сетка 32 x 18 из плиток 56 px с шагом 60 px на почти чёрном фоне, нарисованная на canvas. Каждая плитка переворачивается как карточка (высота x |cos(угол)|, угол от 0 до 180 градусов, power2.inOut за 0.23 s) и меняет цвет на середине; моменты переворота идут волной от центральной ячейки (0.028 s на ячейку, вертикальные расстояния считаются с коэффициентом 1.2), так что раскрывается рваная диафрагма с горизонтальными щелями. Слово один раз растеризуется из шрифта в ячейки (ячейка горит, если глиф покрывает большую её часть). Позже вертикальная развёртка проходит справа налево и на мгновение сжимает только пустые ячейки.

Когда использовать Цифровое появление числа или короткого слова в стиле светодиодного табло.

Показать код

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Волна переворота пиксельной сетки, открывающая светящееся слово</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;700&family=Geist+Mono&display=swap");
html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; }
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene { background: #0d0b1e; }
canvas { position: absolute; left: 0; top: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="2">
    <canvas id="grid" width="1920" height="1080"></canvas>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const COLS = 32, ROWS = 18, PITCH = 60, TILE = 56, WORD = "02";
const C = { light: "#faf9ff", tile: "#1c0b5d", lit: "#fb2d89", gap: "#0d0b1e" };
let PIX = [];
function raster(word) {   // the word into 32 x 18 cells: cap height 13 cells, 26 cells wide at most
  const S = 10, cv = document.createElement("canvas"); cv.width = COLS * S; cv.height = ROWS * S;
  const g = cv.getContext("2d"), size = (13 / 0.708) * S;
  g.font = "700 " + size + 'px "Geist"';
  const m = g.measureText(word), w = m.actualBoundingBoxLeft + m.actualBoundingBoxRight;
  g.fillStyle = "#fff"; g.fillText(word, 16 * S - w / 2 + m.actualBoundingBoxLeft, 15 * S);
  const d = g.getImageData(0, 0, cv.width, cv.height).data, rows = [];
  for (let r = 0; r < ROWS; r++) { let row = ""; for (let c = 0; c < COLS; c++) { let on = 0; for (let j = 1; j < S; j += 2) for (let i = 1; i < S; i += 2) if (d[((r * S + j) * cv.width + c * S + i) * 4 + 3] > 127) on++; row += on > 12 ? "#" : "."; } rows.push(row); }
  return rows;
}
const mid = [];
for (let r = 0; r < ROWS; r++) for (let c = 0; c < COLS; c++) { const dx = c - 16, dy = (r - 9) * 1.2; mid.push(0.19 + 0.0277 * Math.hypot(dx, dy)); }
const FLIP = 0.2333, flipE = gsap.parseEase("power2.inOut");
const sweep = (c) => 1.3 + (8.5 + 0.71 * (31 - c)) / 60;
const ctx = document.getElementById("grid").getContext("2d");
function draw(t) {
  ctx.fillStyle = C.gap; ctx.fillRect(0, 0, 1920, 1080);
  for (let r = 0; r < ROWS; r++) for (let c = 0; c < COLS; c++) {
    const lit = PIX.length && PIX[r][c] === "#";
    const p = Math.min(1, Math.max(0, (t - mid[r * COLS + c] + FLIP / 2) / FLIP)), a = Math.PI * flipE(p);
    let s = Math.abs(Math.cos(a));
    if (!lit && p >= 1) { const d = (t - sweep(c)) / 0.034; s *= 1 - 0.75 * Math.exp(-d * d); }
    const h = TILE * s; if (h < 0.3) continue;
    ctx.fillStyle = a < Math.PI / 2 ? C.light : lit ? C.lit : C.tile;
    ctx.fillRect(c * PITCH + 2, r * PITCH + 2 + (TILE - h) / 2, TILE, h);
  }
}
tl.eventCallback("onUpdate", () => draw(tl.time()));
tl.to({}, { duration: 2 }, 0);
document.fonts.load('700 100px "Geist"').then(() => { PIX = raster(WORD); 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:07 в видео

Частицы

Слово из частиц: сбор, удержание, взрыв

Около 2 800 точек (радиус от 1.6 до 3.2 px, три четверти светлых, одна четверть акцентных) сначала разбросаны по кадру и дрейфуют. Их цели — случайные точки внутри букв слова, один раз нарисованного на внеэкранном canvas с межбуквенным интервалом, заполняющим заданный блок. Каждая точка движется с sine.inOut за 0.42 s после собственной задержки (от 0 до 0.05 s), дрожит на пиксель, пока слово удерживается, затем всё разлетается от центра: слово раздувается (scale 1 + 40 u^2), а радиальный толчок, растущий как u^3, выбрасывает каждую точку за кадр за 0.3 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=Geist:wght@400;500;700&family=Geist+Mono&display=swap");
html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; }
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene { background: #0d0b1e; }
canvas { position: absolute; left: 0; top: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="2">
    <canvas id="dots" width="1920" height="1080"></canvas>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const WORD = "IDEAS", BOX = { x0: 395, x1: 1520, top: 382, base: 668 }, N = 2800;
let seed = 7; const rnd = () => { seed = (seed * 16807) % 2147483647; return seed / 2147483647; };
let P = [];
function build() {
  const c = document.createElement("canvas"); c.width = 1920; c.height = 1080; const g = c.getContext("2d");
  const size = (BOX.base - BOX.top) / 0.708; g.font = "700 " + size + 'px "Geist"';
  const ink = (ls) => { g.letterSpacing = ls + "px"; const m = g.measureText(WORD); return m.actualBoundingBoxLeft + m.actualBoundingBoxRight - ls; };
  const ls = (BOX.x1 - BOX.x0 - ink(0)) / (WORD.length - 1); g.letterSpacing = ls + "px";
  const m = g.measureText(WORD); g.fillStyle = "#fff"; g.fillText(WORD, BOX.x0 + m.actualBoundingBoxLeft, BOX.base);
  const d = g.getImageData(0, 0, 1920, 1080).data, pts = [];
  for (let y = 300; y < 760; y += 2) for (let x = 300; x < 1620; x += 2) if (d[(y * 1920 + x) * 4 + 3] > 128) pts.push([x, y]);
  P = Array.from({ length: N }, () => { const tg = pts[Math.floor(rnd() * pts.length)]; return { sx: rnd() * 1920, sy: rnd() * 1080, vx: (rnd() - 0.5) * 30, vy: (rnd() - 0.5) * 30, tx: tg[0], ty: tg[1], delay: rnd() * 0.05, r: 1.6 + rnd() * 1.6, col: rnd() < 0.24 ? "#fb2d89" : "#faf9ff", ph: rnd() * 6.28, burst: 0.7 + rnd() * 0.6 }; });
}
const gather = gsap.parseEase("sine.inOut");
function pos(p, t) {
  const fx = p.sx + p.vx * t, fy = p.sy + p.vy * t, e = gather(Math.min(1, Math.max(0, (t - 0.3 - p.delay) / 0.42)));
  let x = fx + (p.tx - fx) * e + Math.sin(t * 9 + p.ph) * 1.2 * e, y = fy + (p.ty - fy) * e + Math.cos(t * 7 + p.ph) * 1.2 * e;
  if (t > 1.5) { // swell, then fling every dot clear of the frame within 0.3 s
    const u = t - 1.5, k = 1 + 40 * p.burst * u * u, dx = x - 960, dy = y - 540, r = Math.hypot(dx, dy) || 1, push = 61000 * p.burst * u * u * u;
    x = 960 + dx * k + (dx / r) * push; y = 540 + dy * k + (dy / r) * push;
  }
  return [x, y];
}
const ctx = document.getElementById("dots").getContext("2d"); ctx.lineCap = "round";
function draw(t) {
  ctx.clearRect(0, 0, 1920, 1080);
  for (const p of P) { const a = pos(p, t - 1 / 180), b = pos(p, t + 1 / 180); ctx.strokeStyle = p.col; ctx.lineWidth = p.r * 2; ctx.beginPath(); ctx.moveTo(a[0], a[1]); ctx.lineTo(b[0] + 0.01, b[1]); ctx.stroke(); }
}
tl.eventCallback("onUpdate", () => draw(tl.time()));
tl.to({}, { duration: 2 }, 0);
document.fonts.load('700 400px "Geist"').then(() => { build(); 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:09 в видео

Фигуры

Метаболлы-капли, которые вращаются, сливаются и разлетаются

Семь капель (одна большая и шесть вокруг неё) отрисованы как поле на canvas половинного разрешения: пиксель закрашивается там, где сумма (radius / distance)^2 превышает 1, с мягкой полосой от 0.92 до 1.08 для сглаживания, поэтому капли вздуваются и образуют перемычки при сближении. Спутники вращаются со своими угловыми скоростями и дышат; на удар их расстояние и размер втягиваются к центру (power2.in, 0.17 s), они держатся как одна капля, а затем снова выбрасываются с back.out. Усредняются три экспозиции, чтобы быстрые движения смазывались.

Когда использовать Жидкий органичный момент между графическими сценами; эпизоды в духе лава-лампы или «флюид».

Показать код

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Метаболлы-капли, которые вращаются, сливаются и разлетаются</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;700&family=Geist+Mono&display=swap");
html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; }
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene { background: #fb2d89; }
canvas { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="2">
    <canvas id="fluid" width="960" height="540"></canvas>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const BG = [251, 45, 137], FG = [250, 249, 255], d2r = Math.PI / 180;
const SAT = [{ a: -118, d: 251, r: 85, w: 38, ph: 0.3 }, { a: -164, d: 279, r: 83, w: -30, ph: 1.9 }, { a: 149, d: 246, r: 108, w: 44, ph: 3.1 }, { a: -42, d: 296, r: 108, w: -36, ph: 4.4 }, { a: -4, d: 394, r: 90, w: 28, ph: 5.2 }, { a: 36, d: 281, r: 83, w: -48, ph: 2.6 }];
const inE = gsap.parseEase("power2.in"), outE = gsap.parseEase("back.out(1.6)"), grow = gsap.parseEase("power2.out");
const reach = (t) => t < 0.45 ? 1 : t < 0.62 ? 1 - inE((t - 0.45) / 0.17) : t < 1.05 ? 0 : t < 1.3 ? outE((t - 1.05) / 0.25) : 1;
const size = (t) => t < 0.45 ? 1 : t < 0.62 ? 1 - 0.45 * inE((t - 0.45) / 0.17) : t < 1.05 ? 0.55 : t < 1.2 ? 0.55 + 0.45 * grow((t - 1.05) / 0.15) : 1;
function balls(t) {
  const R = reach(t), S = size(t), cx = 480 + 21 * Math.sin(t * 2.1), out = [[cx, 270, 66.5 * S]];
  for (const s of SAT) { const a = (s.a + s.w * (t - 1.2)) * d2r, d = s.d * R * (1 + 0.16 * Math.sin(t * 5.7 + s.ph)) / 2; out.push([cx + d * Math.cos(a), 270 + d * Math.sin(a), (s.r / 2) * S]); }
  return out;
}
const ctx = document.getElementById("fluid").getContext("2d"), img = ctx.createImageData(960, 540), px = img.data, acc = new Float32Array(960 * 540);
function draw(t) {
  acc.fill(0);
  for (const ts of [t - 1 / 180, t, t + 1 / 180]) {
    const B = balls(ts);
    for (let y = 0; y < 540; y++) for (let x = 0; x < 960; x++) {
      let f = 0; for (const b of B) { const dx = x + 0.5 - b[0], dy = y + 0.5 - b[1]; f += (b[2] * b[2]) / (dx * dx + dy * dy + 0.01); }
      acc[y * 960 + x] += (f <= 0.92 ? 0 : f >= 1.08 ? 1 : (f - 0.92) / 0.16) / 3;
    }
  }
  for (let i = 0, j = 0; i < acc.length; i++, j += 4) { const a = acc[i]; px[j] = BG[0] + (FG[0] - BG[0]) * a; px[j + 1] = BG[1] + (FG[1] - BG[1]) * a; px[j + 2] = BG[2] + (FG[2] - BG[2]) * a; px[j + 3] = 255; }
  ctx.putImageData(img, 0, 0);
}
tl.eventCallback("onUpdate", () => draw(tl.time()));
tl.to({}, { duration: 2 }, 0);
draw(0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

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

Типографика

Стена текста со встречной прокруткой: резкая остановка, рывок и раскрытие полосы

Восемь строк плотных заглавных 152 px с шагом 150 px заполняют кадр; слова чередуются: громкие (почти чёрные) и тихие (приглушённый серый с 24%, около 1.4:1 на странице), разложены по собственным ширинам шрифта с небольшим добавочным пробелом; чётные строки стартуют почти на цикл слова позже нечётных, чтобы слова не выстраивались в колонки. Чётные строки идут влево, нечётные вправо, каждая на 60 px/s быстрее предыдущей (от 900 до 1320 px/s); на удар они резко останавливаются, затем рывком продвигаются на путь за 0.173 s с power3.inOut за 0.28 s. В момент остановки на всю ширину раскрывается акцентная полоса из центра (scaleY expo.out 0.35 s), и в неё с нижнего края полосы поднимается имя (expo.out 0.33 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=Geist:wght@400;500;700&family=Geist+Mono&display=swap");
html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; }
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene { background: #faf9ff; }
.row { position: absolute; left: 0; white-space: pre; font: 700 152px/1 "Geist", sans-serif; letter-spacing: -0.07em; }
.row span { position: absolute; top: 0; }
.loud { color: #0d0b1e; } .quiet { color: rgba(107, 99, 133, 0.24); }
.band { position: absolute; left: 0; top: 390px; width: 1920px; height: 300px; background: #fb2d89; overflow: hidden; transform: scaleY(0); }
.name { position: absolute; left: 0; top: 18px; width: 1920px; text-align: center; white-space: nowrap; font: 700 262px/1 "Geist", sans-serif; letter-spacing: -0.07em; color: #ffffff; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="2">
    <div id="rows"></div>
    <div class="band"><div class="name">"YOUR NAME"</div></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const WORDS = ["MOTION", "IDEAS", "TYPE", "SHAPES", "SOUND", "PREVIEW"], SIZE = 152, GAP = 24.5;
function build() {
  const g = document.createElement("canvas").getContext("2d"); g.font = "700 " + SIZE + 'px "Geist"'; g.letterSpacing = -0.07 * SIZE + "px";
  const adv = (w) => g.measureText(w).width, space = adv(" ");
  const C = WORDS.reduce((sum, w) => sum + adv(w) + space + GAP, 0);
  const evenAnchor = -1397 + 0.867 * C;   // even rows start 0.867 of a word cycle after the odd ones: staggered, never in columns
  for (let k = 0; k < 8; k++) {
    const row = document.createElement("div"); row.className = "row"; row.style.top = (-40 + 150 * k - 0.15 * SIZE) + "px";
    let x = 0, anchor = 0;
    for (let c = 0; c < 4; c++) WORDS.forEach((w, i) => { const s = document.createElement("span"); s.className = i % 2 ? "quiet" : "loud"; s.textContent = w; s.style.left = x + "px"; row.appendChild(s); if (c === 2 && i === 3) anchor = x; x += adv(w) + space + GAP; });
    document.getElementById("rows").appendChild(row);
    const x0 = (k % 2 ? -1397 : evenAnchor) - anchor, dir = k % 2 ? 1 : -1, v = 900 + 60 * k;
    tl.fromTo(row, { x: x0 }, { x: x0 + dir * v, duration: 1, ease: "none" }, 0);             // run
    tl.to(row, { x: x0 + dir * v * 1.1733, duration: 0.28, ease: "power3.inOut" }, 1.0);     // stop dead, lurch on
  }
  tl.fromTo(".band", { scaleY: 0 }, { scaleY: 1, duration: 0.35, ease: "expo.out" }, 1.0);
  tl.fromTo(".name", { y: 300 }, { y: 0, duration: 0.33, ease: "expo.out" }, 1.128);
  window.__timelines = window.__timelines || {}; window.__timelines["main"] = tl;
}
document.fonts.load('700 152px "Geist"').then(build, build);
</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 в видео

3D

Вертушка-куб из слов, четверть оборота на удар

CSS 3D-куб (грани 514 px, perspective 2400 px), наклонённый на -14.5 градусов в плоскости экрана обёрткой, чтобы была видна верхняя грань, и вращающийся внутри неё вокруг оси Y. В покое он стоит в виде в три четверти (-26.7 градуса) и поворачивается на -90 градусов каждые полсекунды с power3.out за 0.3 s, так что каждая грань встаёт под одним и тем же углом. Грани чередуют светный, акцентный и тёмный фоны, на каждой одно плотное слово по размеру грани (короткие слова 200 px, длинные примерно 85% ширины грани, чтобы ничего не выходило за край); верх — тёмная панель.

Когда использовать Перечисление трёх-четырёх возможностей или функций в такт в компактном 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>
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;700&family=Geist+Mono&display=swap");
html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; }
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene { background: #0d0b1e; }
.stage { position: absolute; inset: 0; perspective: 2400px; perspective-origin: 960px 540px; }
.tilt { position: absolute; left: 703px; top: 283px; width: 514px; height: 514px; transform-style: preserve-3d; transform: rotateX(-14.5deg); }
.cube { position: absolute; inset: 0; transform-style: preserve-3d; }
.face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 200px/1 "Geist", sans-serif; letter-spacing: -0.07em; white-space: nowrap; }
.front { transform: translateZ(257px); background: #faf9ff; color: #0d0b1e; }
.right { transform: rotateY(90deg) translateZ(257px); background: #fb2d89; color: #ffffff; }
.back { transform: rotateY(180deg) translateZ(257px); background: #0d0b1e; color: #faf9ff; letter-spacing: -0.05em; }
.left { transform: rotateY(-90deg) translateZ(257px); background: #faf9ff; color: #fb2d89; }
.top { transform: rotateX(90deg) translateZ(257px); background: #1c0b5d; }
.bottom { transform: rotateX(-90deg) translateZ(257px); background: #1c0b5d; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="2">
    <div class="stage"><div class="tilt"><div class="cube">
      <div class="face front">"TYPE"</div><div class="face right">"3D"</div><div class="face back">"SHAPES"</div><div class="face left">"SOUND"</div>
      <div class="face top"></div><div class="face bottom"></div>
    </div></div></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
// every word fits its face: short words keep 200 px, longer ones fill about 85% of the 514 px face
const FIT = { front: [0.9, -0.07], right: [0.9, -0.07], back: [0.85, -0.05], left: [0.85, -0.07] };
function fit() {
  const g = document.createElement("canvas").getContext("2d"); g.font = '700 100px "Geist"';
  for (const [k, [fill, ls]] of Object.entries(FIT)) {
    const el = document.querySelector(".face." + k), w = el.textContent.replace(/"/g, ""), m = g.measureText(w);
    const ink = m.actualBoundingBoxLeft + m.actualBoundingBoxRight + (w.length - 1) * ls * 100;
    el.style.fontSize = Math.min(200, (100 * fill * 514) / ink) + "px";
  }
}
document.fonts.load('700 100px "Geist"').then(fit);
tl.set(".cube", { rotationY: 63.3 }, 0);                       // starts one face early
for (let k = 0; k < 4; k++) tl.to(".cube", { rotationY: -26.7 - 90 * k, duration: 0.3, ease: "power3.out" }, 0.5 * k);
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>

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

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

Simple MotionTQW

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

<direction> Сделай вертикальное (1080x1920) кинетическое типографическое видео длиной 46 секунд, в котором короткое заявление о миссии проходит от двух заголовков через три абзаца к трём призывам к действию и финальной карточке. Идея: одна-единственная цветная линия движется через весь ролик и связывает каждую сцену в единое визуальное повествование, каждый раз принимая новую форму (петля, узел, рамка, поднимающаяся страница, путь, за которым следует камера). Стиль минималистичный и современный, с яркими плоскими цветами, весь текст набран шрифтом Montserrat, чистым гротеском. Набирай текст слово в слово, точно как написано. Ролик должен ощущаться как моушн-дизайн-идентика уровня премий: эмоциональный, современный, художественный, точный и человечный. Каждая сцена должна выглядеть иначе, чем остальные. Избегай всего, что похоже на слайд-презентацию, шаблон Canva, типичную рекламу НКО или стоковые кадры. Не используй фото, видеозаписи или иллюстрации, которые трактуют слова, и не добавляй близкие по смыслу или перефразированные слова: вся визуальная часть — это типографика и линия. Используй мягкую оригинальную музыку без закадрового голоса. </direction> <structure> Примерный тайминг, где полные абзацы — основа повествования: 1. Первый заголовок (примерно 0–5 с): "THREADS OF HOPE." (замени на свой) на грязно-белом фоне. Пурпурная линия петлёй входит в кадр и открывает каждую строку заголовка снизу, затем завязывает узел. Из узла вытекает синий цвет и заливает экран. 2. Второй заголовок (примерно 5–10 с): "ROOTS OF PEACE." (замени на свой). Жёлтая линия рисует квадратную рамку вокруг слов, пока буквы первого слова поднимаются одна за другой. 3. Первый абзац (примерно 10–18 с): линия поднимается в полноэкранную жёлтую страницу с текстом "Across [your country], we are weaving new connections through psychological support, collective action, and community-led initiatives." (замени на свой). Выдели ключевые фразы обводкой соединённой линией, например "weaving new connections", "psychological support", "collective action" и "community-led initiatives". 4. Второй абзац (примерно 18–27 с): тёмно-синяя сцена с текстом "We bring together professionals, organizations, and communities to rebuild the social fabric, strengthen psychosocial well-being, and cultivate cultures of peace rooted in empathy, solidarity, dialogue, and mutual care." (замени на свой). Ключевая фраза "cultures of peace" получает собственный момент. Она стоит на отдельной строке примерно в 1,5 раза крупнее окружающего текста, ярко-жёлтого цвета, и вырастает из чуть меньшего размера до полного. Когда приходят следующие строки, остальная часть абзаца приглушается до меньшей непрозрачности, но эта фраза остаётся полностью яркой до конца сцены. "emphaty" выделено пурпурным, "solidarity" выделено голубым, "dialogue" выделено зелёным, а "mutual care" выделено лавандовым, так что жёлтый здесь принадлежит только ключевой фразе. 5. Третий абзац (примерно 27–35 с): зелёная сцена, где камера движется вдоль линии, а текст "From individual healing to collective transformation, we are creating opportunities for communities to reconnect, grow, and shape more peaceful futures." полностью жирным (замени на свой) разворачивается вдоль её пути. 6. Призывы к действию (примерно 35–41 с): три выделенных приглашения, появляющихся по очереди: "Explore our work.", "Connect with our mission.", "Help cultivate cultures of peace." (замени на свои). Последнее может повторять жёлтое выделение "cultures of peace". 7. Финальная карточка (примерно 41–46 с): "Know More about" / "[your brand]" / "[your website]". Линия замирает, и ролик заканчивается спокойным неподвижным кадром. </structure> <composition> Используй вертикальное кадрирование с щедрыми полями и большим количеством свободного пространства. У каждой сцены своя компоновка, чтобы никакие две не были похожи: заголовки по центру, заголовок в рамке, полноэкранная цветная страница, тёмное поле с сильной иерархией и путь, по которому движется камера. Весь текст набран шрифтом Montserrat. Заголовки жирные, прописными буквами, точно как написано. Основной текст более лёгкого начертания, короткими читаемыми строками. Выделяй ключевые слова цветом, начертанием или размером, а не декором. Палитра яркая и плоская: грязно-белая основа, а пурпурный, насыщенный синий, жёлтый, тёмно-синий и зелёный служат цветами сцен. Голубой — второй акцент, а ярко-жёлтый зарезервирован для ключевой фразы "cultures of peace". Линия всегда контрастирует с фоном, который пересекает. </composition> <techniques> Непрерывная линия — главный приём. Она прорисовывается эффектом обводки и работает как маска, открывающая текст снизу. Она завязывает узел, который высвобождает полноэкранную цветовую заливку как переход к следующей сцене. Она рисует квадратную рамку. Она поднимается, как лист бумаги, в следующую страницу. Наконец, она становится путём, по которому камера движется через зелёную сцену. Каждый переход передаётся самой линией, никогда не обычными склейками или шторками. Движение текста: буквы поднимаются одна за другой со сдвигом. Слова и строки появляются в порядке чтения. Ключевые фразы появляются чуть позже и сильнее. Выделенная фраза увеличивается от чуть меньшего размера до полного, а завершённые строки приглушаются по непрозрачности. Движение должно быть плавным и точным, с мягким замедлением в конце и без отскоков. Темп спокойный, оставляющий время прочитать каждый абзац. </techniques>

Превью промпта «Гипнотический showreel «Погружение в глаз» в неоновом синтвейве»

Simple MotionPHY

Гипнотический showreel «Погружение в глаз» в неоновом синтвейве

<direction> Сделай 20-секундный психоделический гипнотический моушн-графический шоурил, 16:9, 1920x1080, 60 к/с. Всё нарисовано и сгенерировано: процедурные узоры и 3D-формы, без видеосъёмки и фотографий. Смонтируй под неоновый синтвейв-трек 120 BPM. Идея: глаз раскрывается из одной линии, а камера всё глубже ныряет сквозь него в всё более странные миры, пока не приземлится на заголовок. Каждый кадр зависит от времени. Секции сменяются на границах тактов (каждые 2 с) за белыми вспышками, а пульсации яркости на долях держат картинку «дышащей». Внешний вид: глубокие чернильные и почти чёрные тона с неоновым розовым, оранжевым, фиолетовым, бирюзовым и жёлтым, мягкое свечение (bloom), лёгкая хроматическая аберрация, мелкое зерно и виньетка, а всё обрамляет тонкий технический HUD. Все слова в кавычках — примеры, замени их своими; держи длину близкой, чтобы вёрстка не поехала. Избегай видеосъёмки и стоковых изображений, плоских нетекстурированных заливок, чистого чёрного (тёмные тона никогда не ниже #0D0B1E), пересыщенных цветов и любых реальных имён или брендов на экране. </direction> <structure> 1. 0,0–4,0 с, глаз. Чёрный экран, затем на 0,3 с появляется тонкая светящаяся линия ресниц. Глаз — заострённый миндаль: форма линзы между двумя пересекающимися кругами, около 0,55 ширины кадра. Весь кадр вокруг заполняют контурные линии — изолинии той же двухкруговой формы с логарифмическим шагом (каждый промежуток примерно на 13% шире предыдущего). Они медленно текут наружу и гаснут с расстоянием: бледно-лавандовые, оранжевые и бирюзовые рядом с глазом, розовые дальше, поверх глубоких чернильных полос. С 0,3 до 0,85 с глаз — щель. С 0,85 до 1,33 с веки раскрываются (power2.out), а глаз вырастает с 86% до полного размера. Радужка волокнистая, с полосами оранжевого, персикового, мятного и фиолетового, с розовым краевым кольцом, бирюзовым свечением и кольцевым бликом вверху слева; у век мягкий белый внутренний ободок. Ритмичные волны проходят по линиям на 1,5, 1,75, 2,5 и 2,75 с. Центрированная подпись мелким моноширинным шрифтом с разрядкой («YOUR LINE OF TWENTY-SIX LETTERS») расшифровывается с 1,4 с со скоростью около 45 букв в секунду и рассыпается справа в 2,8–3,1 с. С 2,75 с зрачок расширяется и показывает внутри уже идущую следующую сцену, а полосы радужки смещаются к фиолетовому и жёлтому. С 3,42 до 3,98 с камера въезжает в зрачок, пока внутренняя сцена не заполнит кадр в масштабе 1:1. 2. 4,0–8,0 с, туннель. Склейка на белой вспышке с радиальными лучами. Это туннель в перспективе из колец, расположенных так, что обратный радиус растёт на 0,75 на кольцо. В каждом кольце 18 миндалевидных глаз с бирюзовыми контурами, розовыми и фиолетовыми радужками и белым бликом. Соседние кольца сдвинуты на полклетки и вращаются в противоположные стороны. Кольца летят наружу со скоростью около 11 колец в секунду с толчком на каждую долю, а дальние кольца тают в чернильной дымке вокруг белого ядра. На каждую долю из ядра выходит светящееся кольцо и растёт, поочерёдно белое, розовое, затем бирюзовое. С 6,05 до 6,45 с глаза превращаются в полярную шахматную доску, затем в солнечный веер из 36 медленно вращающихся лучей в приглушённых цветах радуги, с яркой окружностью вокруг центра, которая раздувается после 7,0 с. С 7,45 до 7,8 с шахматка снова вспыхивает, а с 7,72 до 7,97 с всё уходит в белое. 3. 8,0–11,33 с, хромовая капля. Белое тает за 0,5 с, открывая переливающийся хромовый метабол над тёмными концентрическими волнами. Это шесть сфер в плавном объединении: тёмное тело с тонкими масляными контурными полосами бирюзового и розового, розовый контровой свет и резкие белые блики. Он вращается и меняет форму. Вертикальная цепочка собирается в комок, две капли отделяются в 9,1–9,5 с, и он сминается в 9,5–9,9 с. С 10,0 с кадр становится калейдоскопом, который проходит через 4, 6, 3, 8, затем 10 зеркальных сегментов, а бледная дуга расходится наружу в 10,0–10,25 с. 4. 11,33–14,0 с, спираль. Глитч-вспышка, затем двенадцать логарифмических спиральных рукавов из каплевидных ячеек. Каждая ячейка в 1,5 раза больше предыдущей вдоль рукава, а рукава закручиваются против часовой стрелки наружу. У ячеек двойные лавандовые контуры, и в них либо радужка (бирюзовая, розовая или оранжевая), либо вложенный градиентный ромб (розовый или фиолетовый). Тонкие золотые линии прочерчивают рукава и кольца, а в центре светится белое ядро. Спираль приближается к центру со скоростью около 1 лог-единицы в секунду и медленно вращается; оба движения получают толчок на каждую долю, с пульсацией яркости на каждой доле. С 13,82 до 14,0 с белое сияние растёт из центра и заполняет кадр. 5. 14,0–15,5 с, комната сфер. Белое тает за 0,7 с в 3D-комнату. Арки сделаны из жемчужных бусин, большие переливающиеся сферы выстроены вдоль стен, а плоские напольные диски несут зигзагообразные оп-арт-полосы в пастельной радуге, всё в чернильно-фиолетовом тумане. Камера едет вперёд и кренится вправо. 6. 15,5–16,0 с, монтаж на шестнадцатых (склейки на 15,5, 15,633, 15,75 и 15,883 с): крупный план радужки, лучи, калейдоскоп и спираль, каждый с небольшой вспышкой. 7. 16,0–18,0 с, глаз снова. Белая вспышка с тёмным диском в центре, который сжимается до нуля за 50 мс. Камера отъезжает из зрачка, внутри которого видна комната сфер, до полного глаза к 16,32 с. Теперь контурные линии — толстые неоновые полосы: розовые рядом с глазом, затем фиолетовые, затем глубокие чернильные дальше, становящиеся бирюзовыми в 16,9–17,8 с. Радужка — пастельное радужное кольцо вокруг большого тёмного зрачка. Пульсации на долях приходятся на 16,5, 17,0 и 17,5 с. С 17,84 до 17,98 с глаз моргает: полосы выпрямляются в горизонтальные с одной яркой линией посередине. В 18,0 с всё схлопывается во тьму за 50 мс. 8. 18,1–20,0 с, титр. Слово широким чёрным гротеском («YOUR WORD») подгоняется примерно под 1436 px в ширину и центрируется. Оно проявляется слева направо с мягким размытым краем за 0,52 с. Буквы бледные (лаванда, мята, затем румянец слева направо), заполнены зерном, с красно-синим разделением, сходящимся с 10 до 3 px, и свечением фиолетового, бирюзового и розового оттенков. В 18,62 с под ним проявляется курсивный подзаголовок («your short tagline»). В 19,1 с над ним расшифровывается крошечная моноширинная строка с разрядкой («( a short call to action )»). С 19,55 до 19,95 с слово рассыпается в шум, и кадр гаснет. </structure> <composition> Палитра: глубокий чернильный #1C0B5D и почти чёрный #0D0B1E для всех тёмных областей (фоны, полосы, белок глаза). Акценты: розовый #FB2D89 (основной), оранжевый #FE9117, фиолетовый #7C6CF2, бирюзовый #2DD4B0, жёлтый #FFD23F и белый #FFFFFF. Светлая лаванда #F0EDFF / #FAF9FF для бледных оттенков и текста, приглушённая лаванда #9890B4 для мелкого текста HUD и #E9E4F2 для линий. Радужные элементы чередуют розовый, фиолетовый, бирюзовый, жёлтый, оранжевый. Грейдинг на всё: мягкое свечение ярких форм (порог около 0,7), лёгкая радиальная хроматическая аберрация к углам, мелкое зерно, виньетка и слегка приглушённая насыщенность. Тёмные тона никогда не ниже #0D0B1E. Шрифты: Unbounded 900 (очень широкий чёрный гротеск) для заголовка, JetBrains Mono 400/700 размером 11–15 px с разрядкой около 0,3 em для HUD и Spectral Italic 400 около 43 px для подзаголовка. HUD: лежит поверх всего с 1,0 с, проявляется за 0,5 с и гаснет в 19,6–19,9 с. Тонкие L-образные угловые скобки на расстоянии 28 px от каждого угла. - Вверху слева: название жирным моно («YOUR NAME») и слоган под ним («YOUR TAGLINE»). - Вверху справа, по правому краю: счётчик глав («01 / 07») и жирное название главы («FIRST CHAPTER»), меняющиеся в каждой секции. - Внизу слева: таймкод «TC 00:00:SS:FF», считающий кадры при 60 к/с, и «120 BPM · bar.beat.sixteenth» (например, 02.3.3). - Внизу справа: четыре квадрата 8 px, текущая доля подсвечена белым, и короткая подпись жирным (например, «YOURSITE.COM»). - Линия прогресса 1,5 px между нижними скобками заполняется вместе с воспроизведением. </composition> <techniques> - Расшифровка текста: в начале каждой секции счётчик и название главы расшифровываются буква за буквой за 0,38 с. Каждая буква перебирает символы вроде # % & = + @ < | / $ со скоростью 30 смен в секунду и проявляется слева направо. Подпись и призыв к действию используют ту же расшифровку, а подпись рассыпается справа так же. - Вспышки секций: каждая белая вспышка с радиальными лучами затухает как 0.94 / (1 + (t / 0.07)^2.5). - Толчок в зрачок (3,42–3,98 с): зум ускоряется экспоненциально, лог-зум = 5.5·x² / (x + 0.1) на протяжении движения. Следующая сцена идёт внутри зрачка и заканчивается ровно в 1:1, так что склейка бесшовная. Отъезд в 16,0 с зеркален. - Толчки на долях: скорость туннеля, зум и вращение спирали, а также волны и кольца получают импульс на каждую долю, с пульсациями яркости на долях. - Морфинг вместо склеек внутри сцен: глаза в шахматку в солнечный веер, цепочка метабола в комок в капли в смятие, затем счёт зеркальных сегментов калейдоскопа 4, 6, 3, 8, 10. - Переходы: уходы в белое и появления из белого на границах тактов, глитч-вспышка в спираль, белое сияние из центра в комнату сфер, вспышки-склейки на шестнадцатых в монтаже, схлопывание во тьму за 50 мс перед титром. - Титр: мягкий вайп слева направо, RGB-разделение, сходящееся с 10 до 3 px, затем растворение в шум и затухание в конце. </techniques> <music> Неоновый синтвейв 120 BPM в ля миноре, один аккорд на такт (2 с): Am F для вступления, затем Am F C G Am, F в брейкдауне, G на возвращении, Am в конце. Бочка попадает точно в доли картинки (каждые 0,5 с). - 0–4 с: колокольная фигура восьмыми над тёплым падом, с долгим райзером и обратной тарелкой, без ударных. - В 4,0 с: бочка «четыре четверти», бас с прыжками на октаву восьмыми и пилообразное арпеджио шестнадцатыми. Бас и арпеджио качаются от бочки. - С 8,0 с: большой снэр с ревербом на вторую и четвёртую доли, хэты на оффбите и квадратный лид с длинными нотами, со снэр-филлом в 14,0 с. - 14,0–16,0 с: ударные и бас выпадают, пад нарастает, а фильтрованное арпеджио поднимается со снэр-роллом тридцать вторыми в 16,0 с. - В 16,0 с: всё врывается обратно. - Ударные останавливаются за полдоли до 18,0 с, а один звенящий аккорд Am add9 несёт финальную карточку. </music> <sound> Звуковые эффекты на картинку: - мягкий высокий синус в 0,3 с для линии ресниц - райзер в глубокий бум в 4,0 с - короткий райзер и бум в 8,0 с - глитч в 11,33 с - райзер и вуш в 14,0 с - четыре коротких глитч-тика на склейках монтажа - длинный райзер в бум в 16,0 с - вуш на моргании в 17,95 с - даунер и саб-дроп в 18,0 с - мягкий колокольчик при появлении титра в 18,12 с - воздушный вуш, пока титр растворяется Без закадрового голоса. Микс примерно −14 LUFS, истинный пик ниже −1 dBTP. </sound> <references> Цвета outrun и синтвейва конца 80-х, оп-арт-муар и иллюзии контурных линий, психоделические образы глаз, процедурные шоурилы в духе демосцены и шоурилы моушн-студий с техническим HUD. </references>

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

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

Simple MotionTKM

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

<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>

Рассылка

Присылаем лучшие новые промпты сообщества вместе с видео. Без спама, в каждом письме есть ссылка для отписки.

Адрес нужен только для этой рассылки. Конфиденциальность

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

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