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

RU

Открыть beta

Simple Motion

Кинетическая типографика для запуска продукта под бит 120 BPM

Жирные слова строчными влетают с жёсткой склейкой на каждый бит, с всплывающим интерфейсом, погружением в точку, печатной паузой, дропом и быстрым туром по продукту.

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

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

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

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

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

Замысел

Сделай 24-секундный анонс моего продукта в стиле кинетической типографики, горизонтальный 1920x1080, 30 к/с, ровно 23,8 с, без голоса и без снятого видео: всё нарисовано. Идея: одно жирное слово строчными буквами на кадр, жёсткая склейка каждую секунду под бит 120 BPM, короткая демонстрация продукта в середине, затем печатная пауза, дроп и быстрый тур по работающему продукту, финал на спокойном закрывающем слове. Размести мой знак логотипа внизу слева в каждом кадре со словом и перерисуй экраны моего продукта простым плоским интерфейсом (боковая панель, карточки, график, видеоплеер). Каждое слово и строка в кавычках ниже — пример, который нужно заменить на данные моего продукта: 15-18 отдельных слов-функций, к каждому короткая фраза на плашке, три шага, несколько строк, которые вводит пользователь, с ответами, а также название моего продукта и его веб-адрес. Избегай плавных переходов, медленного дрейфа, снятого видео, закадрового голоса и целых предложений в кадрах-заголовках.

Структура

0.00-0.97: «type.» на светлой странице, влетает слева. Курсор скользит из правого нижнего угла к розовой точке: ореол при наведении, волна от клика, и под точкой раскрывается розовая подсказка с текстом «Describe your idea.», шагом «01» и кнопкой-стрелкой.
0.97-1.97: «ideas.» на тёмно-синем фоне (deep ink), левее центра, справа. На 1,5 с розовая подсказка шага выскакивает от своего левого края (back out, перелёт около 22%, в покое 543 x 196 px): «Type your idea. Live preview.», шаг «02», стрелки назад и вперёд.
1.97-2.97: «edit.» на розовом, справа, под ним плашка «Edit in words». Курсор тянет пунктирное выделение по концу слова и точке, которые затем размываются (размытие фона 18 px); маленький белый пузырёк у логотипа говорит «No keyframes».
2.97-3.93: «move.» на светлой странице, снизу, плашка «3D effects». На 3,5 с плашка исчезает, и камера ныряет в точку: масштаб растёт как e^(0.0251 n²), n — кадры с начала погружения, центр на точке, пока её розовый цвет не заполнит кадр.
3.93-4.97: на этом розовом «sound.» вырастает от 0,42 до 1 (power2 in-out, 0,23 с, лёгкий перелёт); затем его буквы прыгают как индикатор уровня (новый случайный подъём и масштаб каждый кадр, затихая). Белая пилюля с иконкой ноты, живой волной (сыгранные столбики розовые, остальные бледно-розовые) и текстом «Music and sound effects».
4.97-5.97: «vertical.» на светлой странице, слева, под ним лавандовая пилюля «Vertical». На каждой восьмой доле слово меняется на «horizontal.», «square.», «MP4.»: за 3 кадра старое слово поднимается на 135 px, размывается и исчезает, а новое выезжает снизу с 300 px из размытия (power2 out), текст пилюли меняется при приземлении. Тёмный пузырёк у логотипа говорит «Try it free».
5.97-6.97: «fonts.» на розовом, сверху, с почти чёрной кнопкой «Try it free»; затем жёсткие склейки каждые 0,25 с на то же слово мягким антиквенным шрифтом на фиолетовом (жёлтая точка), плотной чёрной гротескной гарнитурой на оранжевом (белая точка) и узким начертанием на бирюзовом (точка цвета deep ink), у каждого свой цвет кнопки.
6.97-7.97: «free.» на deep ink, слева. Белая адресная строка выскакивает с перелётом, показывая адрес моего продукта и розовую кнопку «Open app»; курсор кликает по ней, появляется галочка, и внутри кнопки расходится волна.
7.97-8.97: «live.» на светлой странице, справа; под ним однострочный embed-сниппет в белом блоке кода, тег iframe с адресом моего продукта (тег розовый, атрибут оранжевый, строка фиолетовая). На 8,4 с окно браузера падает сверху позади слова (power2 in, 2 кадра, с размытием) и приземляется.
8.97-9.97: «export.» на розовом, снизу; три белые карточки влетают одна за другой с интервалом 2 кадра, перелетают примерно на 28 px и успокаиваются: «Pick a template» 01, «Describe your idea» 02, «Refine in words, then export» 03.
9.97-11.47: «in a chat.» мелко (140 px) вверху, слева. Под ним снизу выезжает панель управления моего продукта в окне браузера (expo out за 0,29 с примерно с 725 px, с размытием): боковая панель цвета deep ink с моим знаком, карточки шагов и растущий розовый график, и розовая подсказка тура «Describe the video. The agent animates it.». Курсор нажимает её стрелку «далее», и страница вспыхивает белым, переходя на следующую с подсказкой «The preview updates as you talk.».
11.47-12.97: «as an MP4.» на розовом, продукт в виде затемнённого видеоплеера, поднимающегося снизу. Курсор нажимает белую кнопку play, обложка поднимается, кнопка складывается, и видео наезжает (1,34x, power3 out) на первую карточку, пока появляются подсказка «Pick a template.» и пульсирующая розовая точка-хотспот.
12.97-13.97: пауза на deep ink. «your AI» проявляется слово за словом с оранжевой текстовой кареткой, строка перецентрируется при добавлении «motion», каретка мигает 4 кадра вкл., 4 выкл.; затем 7 кадров почти чёрного.
13.97-14.97: дроп на розовом. Кольцо тонких белых линий скорости взрывается наружу за 6 кадров, и «designer.» врезается в 2x, проседает до 0,88 и пружинит через 1,03 в покой за 0,45 с.
14.97-20.97: продукт в работе. Окно приложения въезжает справа на светлую страницу: чат слева и сцена справа («Your AI motion designer», две стартовые кнопки «Pick a template» и «Describe your idea»). Камера наезжает на чат (1,77x за 4 кадра): пузырь запроса «Kinetic type, shapes and sound», три точки размышления, печатный ответ «Describe the video. The agent animates it.». Камера отъезжает, пока сцена открывает окно браузера с выбором шаблонов (шесть карточек), наезжает на чат и экран вместе, пока печатается «No keyframes to hunt for. Say what should change.» и приходит пузырь «'Bigger', 'slower', 'another colour'», отъезжает, пока сцена превращается в играющее видео, и завершается общим планом. Каждое быстрое движение занимает 3-6 кадров с лёгким размытием.
20.97-21.97: «words.» на розовом, слева; белая карточка чата, где появляется запрос «'Bigger', 'slower', 'another colour'», затем ответ «The preview updates as you talk.».
21.97-22.97: «gets it.» на deep ink, справа; белая полоса из четырёх ячеек выскакивает (от 0,83 до 1 с back out): TYPE «Bigger», MOTION «Slower», COLOUR «Another colour», EXPORT «MP4».
22.97-23.80: «in motion.» на светлой странице, сверху, бирюзовая пилюля «Live preview · Vertical», вторая половина которой каждые 7 кадров меняется на «Horizontal», «Square» и «MP4 export». Последняя надпись — адрес моего сайта.

Композиция

Палитра: светлая страница #FAF9FF, deep ink #1C0B5D (тёмные фоны и тёмный текст), почти чёрный #0D0B1E (кнопки, затемнение), основной акцент розовый #FB2D89 (также цветные фоны), оранжевый #FE9117 (акцент на тёмном), фиолетовый #7C6CF2, бирюзовый #2DD4B0 и жёлтый #FFD23F только для смен тем, лавандовые панели #F0EDFF, приглушённый текст #6B6385, тонкие линии #E9E4F2, белый.
Кадры чередуют три фона: светлая страница со словами цвета deep ink и розовой точкой; deep ink с белыми словами и оранжевой точкой; розовый с белыми словами и точкой цвета deep ink.
Слова-заголовки: Mona Sans Black с шириной 112,5%, 250-315 px, межбуквенный интервал -0,06 em, строчные, по центру, всегда с цветной круглой точкой шириной 0,2 em на базовой линии. Текст интерфейса — Inter 400-700. Для карусели тем: один момент с антиквой Fraunces 600 с мягкими окончаниями, одна плотная гротескная гарнитура (Inter Black при -0,1 em) и одно узкое начертание (Mona Sans с шириной 75%). Код — Geist Mono.
Оформление каждого кадра со словом: подпись заглавными слева вверху (Mona Sans 600 expanded, 19 px, трекинг +0,25 em; deep ink 55% на светлом, белый 52% на тёмном, белый 62% на цветном), тонкая линейная иконка справа вверху (30 px, тот же цвет, появляется за 3 кадра после каждой склейки) и мой знак логотипа внизу слева в виде скруглённого квадрата 78 px.

Техники

Склейки жёсткие и попадают в бит, каждые 2 доли (1,0 с); четыре смены тем попадают на восьмые доли.
Каждое новое слово влетает со стороны, по очереди слева, справа, сверху, снизу: стартует примерно за 500 px и успокаивается за 0,14 с с expo out, затухая примерно в 5 раз за кадр, с размытием вдоль направления движения, пропорциональным оставшемуся расстоянию (около 0,11 px размытия на px), приземляясь чётко.
Подпись заглавными расшифровывается на каждой склейке: по 3 буквы за кадр, перемешанные буквы и цифры опережают на 7 и меняются каждый второй кадр; пробелы и средняя точка остаются.
Элементы интерфейса выскакивают: на первом кадре видны наполовину, через кадр полностью, масштаб от 0,7-0,85 с back out (перелёт около 10%) за 0,26 с.
Логотип подпрыгивает на 6 px за кадр перед каждой долей и испускает розовое гало (белое на розовом фоне), которое растёт до 1,68x и гаснет с 34% до 6% в течение доли.
Курсоры — чёрная стрелка с белой обводкой, плавно въезжающая с power3/power4 out, клик с лёгким сжатием и кольцом волны.

Музыка

Сделай оригинальную бодрую глянцевую электро-поп-подложку 120 BPM, 4/4, ровно по длине видео: упругий стаккатный синтбас, чёткие клэпы, чёткие хэты, яркие щипковые и несколько нарезанных вокальных стабов «woo», без слов. Полная энергия с первой доли, сильные доли каждые 2 с начиная с -0,03 с, чтобы каждая склейка попадала на долю. На 12,97 с бит пропадает, остаются только фильтрованный брейкдаун и райзер под печатной паузой; на 13,97 с полный грув обрушивается обратно на взрыв с глубоким бумом. Короткое затухание в конце.

Звук

Без закадрового голоса. Поверх музыки: короткий воздушный свуш с пиком на каждой склейке, мягкие щелчки на каждом появлении, тики на сменах тем и печатных словах, короткий райзер перед погружением и суб-дроп, когда цвет заполняет кадр, быстрые свуши на движениях камеры, глухой удар, когда приземляется окно браузера, и бум на последней склейке. Микс около -14 LUFS, true peak ниже -1 dBTP.

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

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

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

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

Типографика

Направленный смаз при влёте слова

Слово стартует примерно в 500 px от своего места и устанавливается за 0.14 с с easing expo out, так что затухает примерно в 5 раз за кадр при 30 fps. Одноосевое гауссово размытие SVG (feGaussianBlur stdDeviation 'X 0' или '0 Y') следует той же кривой: 0.11 px размытия на каждый px оставшегося пути. Первый кадр выглядит призрачным смазом, а на третьем кадре слово приземляется чётким. После приземления фильтр удаляется.

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

Показать код

<!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=Mona+Sans:wdth,[email protected],200..900&display=block");
body { margin: 0; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; }
.scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.word { font-family: "Mona Sans", sans-serif; font-weight: 900; font-stretch: 112.5%; font-size: 300px; letter-spacing: -0.065em; line-height: 1; white-space: nowrap; }
.dot { display: inline-block; width: 0.2em; height: 0.2em; border-radius: 50%; margin-left: 0.05em; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="2" style="background:#1c0b5d">
    <div class="word" id="w1" style="color:#ffffff">ideas<span class="dot" style="background:#fe9117"></span></div>
  </div>
  <div class="scene clip" data-start="2" data-duration="2" style="background:#fb2d89">
    <div class="word" id="w2" style="color:#ffffff">edit<span class="dot" style="background:#1c0b5d"></span></div>
  </div>
</div>
<script>
// Whip in from a side with a smear along the move: expo out over 0.14 s from 500 px, and a one-axis
// SVG Gaussian blur that follows the speed (for expo out the speed is proportional to the distance left).
const tl = gsap.timeline({ paused: true });
const DIST = 500;   // px the word starts away from its place
const DUR = 0.14;   // s to settle (the move decays ~5x a frame at 30 fps)
const K = 0.11;     // px of blur per px still to travel
let uid = 0;
function whip(el, t, dir) {
  const axis = dir === "left" || dir === "right" ? "x" : "y";
  const sign = dir === "left" || dir === "top" ? -1 : 1;
  const id = "smear" + ++uid;
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute("width", "0"); svg.setAttribute("height", "0"); svg.style.position = "absolute";
  svg.innerHTML = `<filter id="${id}" x="-60%" y="-60%" width="220%" height="220%"><feGaussianBlur stdDeviation="0 0"/></filter>`;
  el.parentNode.appendChild(svg);
  const fe = svg.querySelector("feGaussianBlur");
  const s0 = DIST * K, sd = axis === "x" ? `${s0} 0` : `0 ${s0}`;
  tl.fromTo(el, { [axis]: sign * DIST }, { [axis]: 0, duration: DUR, ease: "expo.out" }, t);
  tl.set(el, { filter: `url(#${id})` }, t);
  tl.fromTo(fe, { attr: { stdDeviation: sd } }, { attr: { stdDeviation: "0 0" }, duration: DUR, ease: "expo.out" }, t);
  tl.set(el, { filter: "none" }, t + DUR);  // land sharp
}
whip(document.getElementById("w1"), 0.001, "right");
whip(document.getElementById("w2"), 2, "left");
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 в видео

Типографика

Расшифровка подписи капсом

Небольшая подпись капсом с разрядкой собирается заново на каждой склейке: по 3 буквы за кадр проявляются, а зашумлённые символы (буквы, цифры, # + /) с seed опережают на 7 букв и меняются каждый второй кадр; пробелы и средняя точка остаются на месте. Строка каждого кадра задаётся отдельно через tl.set(textContent), поэтому при перемотке вперёд или назад показывается правильный текст.

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

Показать код

<!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=Mona+Sans:wdth,[email protected],200..900&display=block");
body { margin: 0; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #1c0b5d; }
.label { position: absolute; left: 64px; top: 50px; font-family: "Mona Sans", sans-serif; font-weight: 600; font-stretch: 125%;
  font-size: 22px; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.52); white-space: pre; }
.word { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: "Mona Sans", sans-serif;
  font-weight: 900; font-stretch: 112.5%; font-size: 300px; letter-spacing: -0.06em; color: #fff; }
.dot { display: inline-block; width: 0.2em; height: 0.2em; border-radius: 50%; margin-left: 0.05em; background: #fe9117; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080">
  <div class="label" id="lab"></div>
  <div class="word">ideas<span class="dot"></span></div>
</div>
<script>
// A caps label that decodes: 3 letters resolve per frame, scrambled glyphs run 7 ahead and change every
// second frame, spaces and the middle dot stay. Each frame's string is set on its own frame (seek-safe).
const tl = gsap.timeline({ paused: true });
const FPS = 30;
const PER_FRAME = 3;   // letters resolved per frame
const AHEAD = 7;       // scrambled letters ahead of the resolved ones
const CHARS = "ABCDEFGHJKLMNPQRSTUVWXYZ0123456789#+/";
function noise(i, pair) {   // seeded, never Math.random
  let a = (1013 * (i + 1) + 7919 * (pair + 1)) >>> 0;
  a = Math.imul(a ^ (a >>> 15), a | 1); a ^= a + Math.imul(a ^ (a >>> 7), a | 61);
  return CHARS[((a ^ (a >>> 14)) >>> 0) % CHARS.length];
}
function frameText(text, f) {
  const R = PER_FRAME * f, N = R + AHEAD; let last = -1;
  const out = [...text].map((c, i) => {
    if (i < R || c === " " || c === "·") { if (c !== " ") last = i; return c; }
    if (i < N) { last = i; return noise(i, Math.floor(f / 2)); }
    return " ";
  });
  return out.slice(0, last + 1).join("");
}
function decode(el, text, t) {
  const frames = Math.ceil(text.length / PER_FRAME) + 1;
  for (let f = 0; f <= frames; f++) tl.set(el, { textContent: frameText(text, f) }, t + f / FPS);
}
const lab = document.getElementById("lab");
lab.textContent = frameText("DESCRIBE · YOUR IDEA", 0);
decode(lab, "DESCRIBE · YOUR IDEA", 0.001);
decode(lab, "LIVE · PREVIEW", 2);
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 в видео

Переход

Погружение через точку

Камера масштабирует слой со словом относительно его цветной точки по формуле scale = e^(0.0251 n^2), где n — номер кадра 12-кадрового погружения (1.3x через 3 кадра, 5x через 8, 37x через 12), пока цвет точки не заполнит кадр. Следующая сцена открывается тем же цветом, и её слово растёт от 0.42 до 1 с power2 in-out за 7 кадров с перелётом 2.5%.

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

Показать код

<!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=Mona+Sans:wdth,[email protected],200..900&display=block");
body { margin: 0; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; }
.scene { position: absolute; inset: 0; }
.cam { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.scene > .word { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.word { font-family: "Mona Sans", sans-serif; font-weight: 900; font-stretch: 112.5%; font-size: 295px; letter-spacing: -0.06em; color: #1c0b5d; line-height: 1; }
.dot { display: inline-block; width: 0.2em; height: 0.2em; border-radius: 50%; margin-left: 0.05em; background: #fb2d89; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="2.4" style="background:#faf9ff">
    <div class="cam" id="cam"><div class="word" id="w">move<span class="dot" id="dot"></span></div></div>
  </div>
  <div class="scene clip" data-start="2.4" data-duration="1.6" style="background:#fb2d89">
    <div class="word" id="next" style="color:#fff">sound<span class="dot" style="background:#1c0b5d"></span></div>
  </div>
</div>
<script>
// Dive through the full stop: the camera scales about the dot as scale = e^(k n^2), n frames into the
// dive, until the dot's colour fills the frame; the next scene starts on that colour and grows its word.
const tl = gsap.timeline({ paused: true });
const FRAMES = 12;              // length of the dive in frames (0.4 s at 30 fps)
const K = 0.0251;               // curvature measured on the reference: 1.3x after 3 frames, 37x after 12
const END = Math.exp(K * FRAMES * FRAMES);
const cam = document.getElementById("cam"), dot = document.getElementById("dot");
const r = dot.getBoundingClientRect();          // measured once at build, not at tween time
cam.style.transformOrigin = `${r.left + r.width / 2 - 4}px ${r.top + r.height / 2}px`;
tl.fromTo(cam, { scale: 1 }, { scale: END, duration: FRAMES / 30, ease: (u) => (Math.exp(K * FRAMES * FRAMES * u * u) - 1) / (END - 1) }, 2.0);
// The next word grows out of the colour.
tl.fromTo("#next", { scale: 0.42, opacity: 0 }, { scale: 1.025, opacity: 1, duration: 7 / 30, ease: "power2.inOut" }, 2.4);
tl.to("#next", { scale: 1, duration: 5 / 30, ease: "sine.inOut" }, 2.4 + 7 / 30);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Превью техники «Логотип-сердцебиение с ореолом» — На 0:00 в видео

Фигуры

Логотип-сердцебиение с ореолом

Знак подпрыгивает на 6 px вверх и увеличивается на 4% за кадр до каждого удара, через два кадра опускается и испускает ореол своей формы, который растёт от 1.05x до 1.68x, угасая с 34% до 6% за удар, а затем сбрасывается. При 120 BPM и 30 fps удар длится 15 кадров; строится из дискретных set и одного tween на удар.

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

Показать код

<!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>
body { margin: 0; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #faf9ff; }
.mark { position: absolute; left: 881px; top: 461px; width: 158px; height: 158px; }
.halo { position: absolute; inset: 0; border-radius: 24%; background: #fb2d89; opacity: 0; }
.tile { position: absolute; inset: 0; border-radius: 24%; background: #1c0b5d; box-shadow: 0 8px 24px rgba(28, 11, 93, 0.25); }
.swirl { position: absolute; left: 32%; top: 32%; width: 44%; height: 44%; border-radius: 50%; background: conic-gradient(#fb2d89, #fe9117, #ffffff, #fb2d89); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080">
  <div class="mark" id="mark"><div class="halo" id="halo"></div><div class="tile"><div class="swirl"></div></div></div>
</div>
<script>
// A logo that beats with the music: it hops a frame before every beat, then sends out a halo that grows
// and fades over the beat. At 120 BPM a beat is 15 frames.
const tl = gsap.timeline({ paused: true });
const FPS = 30, BEAT = 15;          // frames per beat (120 BPM at 30 fps)
const HOP = 6;                      // px the mark rises
const GROW = 1.68, FADE = [0.34, 0.06];   // halo scale at the end of a beat, opacity start/end
for (let b = 13; b < 120; b += BEAT) {
  tl.set("#mark", { y: -HOP, scale: 1.04 }, (b + 1) / FPS);
  tl.set("#mark", { y: -HOP / 2, scale: 1.02 }, (b + 2) / FPS);
  tl.set("#mark", { y: 0, scale: 1 }, (b + 3) / FPS);
  tl.fromTo("#halo", { scale: 1.05, opacity: FADE[0] }, { scale: GROW, opacity: FADE[1], duration: 12 / FPS, ease: "sine.out" }, (b + 3) / FPS);
  tl.set("#halo", { opacity: 0, scale: 1 }, (b + BEAT) / FPS - 0.0001);
}
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:05 в видео

Типографика

Прокрутка слов на восьмых нотах

На каждой восьмой ноте слово меняется за 3 кадра: старое поднимается на 135 px линейно, исчезает и размывается до 10 px, а новое поднимается с 300 px снизу с power2 out из размытия 14 px и линейно проявляется. Плашка под ним меняет текст в момент приземления нового слова.

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

Показать код

<!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=Mona+Sans:wdth,[email protected],200..900&family=Inter:wght@500&display=block");
body { margin: 0; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #faf9ff; }
.slot { position: absolute; left: 0; top: 330px; width: 1920px; text-align: center; font-family: "Mona Sans", sans-serif; font-weight: 900;
  font-stretch: 112.5%; font-size: 250px; letter-spacing: -0.065em; line-height: 1; color: #1c0b5d; white-space: nowrap; }
.dot { display: inline-block; width: 0.2em; height: 0.2em; border-radius: 50%; margin-left: 0.05em; background: #fb2d89; }
.row { position: absolute; left: 0; top: 761px; width: 1920px; display: flex; justify-content: center; }
.pill { height: 65px; padding: 0 27px; border-radius: 33px; background: #f0edff; border: 2px solid #e9e4f2; display: flex; align-items: center;
  font: 500 31px/1 "Inter", sans-serif; color: #fb2d89; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080">
  <div class="slot" id="w0">vertical<span class="dot"></span></div>
  <div class="slot" id="w1">horizontal<span class="dot"></span></div>
  <div class="slot" id="w2">square<span class="dot"></span></div>
  <div class="row"><div class="pill" id="pill">Vertical</div></div>
</div>
<script>
// Rolling word swap on the 8th notes: over 3 frames the old word rises 135 px linearly, blurs and fades,
// while the new one comes up from 300 px below (power2 out) out of a blur; the pill changes as it lands.
const tl = gsap.timeline({ paused: true });
const F = (n) => n / 30;
const UP = -135, FROM = 300;   // px the old word leaves by, px the new one starts below
const FRAMES = 3;              // length of a swap
const words = ["#w0", "#w1", "#w2"], labels = ["Vertical", "Horizontal", "Square"];
gsap.set(["#w1", "#w2"], { opacity: 0 });
[0.5, 1.5].forEach((t, k) => {
  const out = words[k], inn = words[k + 1];
  tl.fromTo(out, { filter: "blur(0px)" }, { y: UP, opacity: 0, filter: "blur(10px)", duration: F(FRAMES), ease: "none" }, t);
  tl.fromTo(inn, { y: FROM, filter: "blur(14px)" }, { y: 0, filter: "blur(0px)", duration: F(FRAMES), ease: "power2.out" }, t);
  tl.fromTo(inn, { opacity: 0 }, { opacity: 1, duration: F(FRAMES), ease: "none" }, t);
  tl.set(inn, { filter: "none" }, t + F(FRAMES));
  tl.set("#pill", { textContent: labels[k + 1] }, t + F(FRAMES));
});
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:14 в видео

Частицы

Взрыв линий скорости и пружинный удар

На дропе 46 тонких белых линий, расставленных кольцом (радиус 230-470 px, длина 38-90 px, seed), разлетаются наружу за 6 кадров (1.5x, 1.95x, 2.35x, 2.7x, 3x от радиуса) и гаснут. Слово появляется кадром позже при 2x и 60% непрозрачности, затем проходит покадровые масштабы 1.16, 1.06, 0.93, 0.88, 0.88, 0.92, 0.97, 1.005, 1.024, 1.027, 1.02, 1.008, 1: удар с недолётом и небольшой пружиной.

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

Показать код

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Взрыв линий скорости и пружинный удар</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Mona+Sans:wdth,[email protected],200..900&display=block");
body { margin: 0; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #fb2d89; }
#lines { position: absolute; inset: 0; }
.spoke { position: absolute; left: 960px; top: 540px; width: 0; height: 0; }
.line { position: absolute; left: 0; top: -1.5px; height: 3px; border-radius: 2px; background: #fff; }
.word { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: "Mona Sans", sans-serif;
  font-weight: 900; font-stretch: 112.5%; font-size: 250px; letter-spacing: -0.067em; color: #fff; line-height: 1; }
.dot { display: inline-block; width: 0.2em; height: 0.2em; border-radius: 50%; margin-left: 0.04em; background: #1c0b5d; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080">
  <div id="lines"></div>
  <div class="word" id="w">designer<span class="dot"></span></div>
</div>
<script>
// The drop: a ring of speed lines bursts outward over 6 frames, then the word slams in at 2x, overshoots
// down to 0.88 and springs back through 1.027 to rest. Scales are given per frame.
const tl = gsap.timeline({ paused: true });
const F = (n) => n / 30, T0 = 0.5;   // the drop
let seed = 3; const rnd = () => ((seed = (seed * 16807) % 2147483647) / 2147483647);
const lines = document.getElementById("lines");
for (let i = 0; i < 46; i++) {
  const a = (i / 46) * 360 + (rnd() - 0.5) * 6, r0 = 230 + rnd() * 240, len = 38 + rnd() * 52;   // angle, start radius, length
  const sp = document.createElement("div"); sp.className = "spoke"; sp.style.transform = `rotate(${a}deg)`;
  const ln = document.createElement("div"); ln.className = "line"; ln.style.width = len + "px";
  sp.appendChild(ln); lines.appendChild(sp);
  gsap.set(ln, { x: r0, opacity: 0 });
  tl.set(ln, { opacity: 1 }, T0);
  tl.to(ln, { keyframes: [1.5, 1.95, 2.35, 2.7, 3].map((k, j) => ({ x: r0 * k, opacity: j < 3 ? 1 : j === 3 ? 0.4 : 0, duration: F(j < 4 ? 1 : 2) })), ease: "none" }, T0);
}
const S = [2.0, 1.16, 1.06, 0.93, 0.88, 0.88, 0.92, 0.97, 1.005, 1.024, 1.027, 1.02, 1.008, 1.0];   // scale per frame
gsap.set("#w", { opacity: 0, scale: S[0] });
tl.set("#w", { opacity: 0.6, scale: S[0] }, T0 + F(1));
tl.set("#w", { opacity: 1 }, T0 + F(2));
tl.to("#w", { keyframes: S.slice(1).map((s) => ({ scale: s, duration: F(1) })), ease: "none" }, T0 + F(1));
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>

Превью техники «Тур камеры по живому UI» — На 0:15 в видео

Камера

Тур камеры по живому UI

Весь интерфейс лежит в одном слое мира в исходном размере, а трансформ камеры (screen = T + s * world, origin 0 0) двигает его: 1.77x на чат, назад к 1, 1.23x на экран, 1.77x на чат и экран вместе, назад к общему плану. Движения длятся 3-6 кадров с power3 in-out и размытием 5 px с пиком в середине; между ними камера держится, пока интерфейс печатает и меняется.

Когда использовать Показать зрителю экран продукта за несколько секунд без склеек.

Показать код

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Тур камеры по живому UI</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=Inter:wght@400;600&display=block");
body { margin: 0; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #faf9ff; }
#world { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; }
.win { position: absolute; left: 125px; top: 90px; width: 1670px; height: 940px; border-radius: 26px; background: #fff; box-shadow: 0 40px 90px rgba(28, 11, 93, 0.14); }
.chat { position: absolute; left: 15px; top: 15px; width: 438px; height: 910px; border-radius: 18px; background: #f0edff; }
.msg { position: absolute; left: 16px; height: 14px; border-radius: 7px; background: #6b6385; opacity: 0.45; }
.m1 { top: 80px; width: 380px; } .m2 { top: 108px; width: 260px; } .m3 { top: 240px; width: 340px; }
.bub { position: absolute; right: 16px; top: 150px; height: 56px; padding: 0 19px; border-radius: 14px; background: #fff; border: 1.5px solid #e9e4f2;
  font: 400 16px/53px "Inter", sans-serif; color: #1c0b5d; }
.main { position: absolute; left: 470px; top: 15px; width: 1185px; height: 910px; border-radius: 18px; background: #faf9ff; border: 1.5px solid #e9e4f2; }
.screen { position: absolute; left: 57px; top: 136px; width: 1069px; height: 635px; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 30px 70px rgba(28, 11, 93, 0.18); }
.side { position: absolute; left: 0; top: 0; width: 204px; height: 635px; background: #1c0b5d; }
.card { position: absolute; top: 94px; width: 253px; height: 113px; border-radius: 11px; border: 1.5px solid #e9e4f2; }
.c1 { left: 234px; } .c2 { left: 511px; } .c3 { left: 788px; }
.chart { position: absolute; left: 234px; top: 230px; width: 811px; height: 344px; border-radius: 11px; border: 1.5px solid #e9e4f2;
  background: linear-gradient(transparent 55%, rgba(251, 45, 137, 0.18)); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="6" data-width="1920" data-height="1080">
  <div id="world">
    <div class="win">
      <div class="chat"><div class="msg m1"></div><div class="msg m2"></div><div class="bub b1">"Bigger", "slower"</div><div class="msg m3"></div></div>
      <div class="main"><div class="screen"><div class="side"></div><div class="card c1"></div><div class="card c2"></div><div class="card c3"></div><div class="chart"></div></div></div>
    </div>
  </div>
</div>
<script>
// Camera tour over a live UI: one "world" layer, screen = T + s * world. Push in on the chat, pull back
// as the screen opens, push in on chat and screen together, end wide. Fast moves (3-6 frames) blur a little.
const tl = gsap.timeline({ paused: true });
const F = (n) => n / 30;
const world = document.getElementById("world");
gsap.set(world, { scale: 1, x: 0, y: 0, filter: "blur(0px)" });
function cam(f0, f1, s, x, y) {   // frames from-to, scale, translate x/y in px
  tl.to(world, { scale: s, x, y, duration: F(f1 - f0), ease: "power3.inOut" }, F(f0));
  if (f1 - f0 <= 6) {
    tl.to(world, { filter: "blur(5px)", duration: F((f1 - f0) / 2), ease: "power1.in" }, F(f0));
    tl.to(world, { filter: "blur(0px)", duration: F((f1 - f0) / 2), ease: "power1.out" }, F((f0 + f1) / 2));
  }
}
cam(14, 18, 1.774, -226.4, -149.3);   // into the chat
cam(51, 57, 1.0, 0, 0);               // back out
cam(57, 60, 1.225, -315, -147);       // onto the screen
cam(87, 90, 1.773, -226, -315);       // chat and screen together
cam(127, 133, 1.0, 0, 0);             // wide again
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>

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

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

Печатный текст превращается в шрифт: промо приложения на 30 секунд

<direction> Сделай 30-секундный полностью анимированный промо-ролик моего приложения, 1920x1080 горизонтально, 60 кадров/с. Идея: написанный текст постоянно превращается в готовую типографику. Набранные моно-строки становятся большими serif-заголовками, заголовок закручивается во вспышку, которая становится логотипом, окно приложения отрисовывает то, что набрано, затем идут карточки функций, сетка иконок и финальная карточка. Всё нарисовано: шрифт, интерфейс и фигуры, без видеоматериала. Ролик должен ощущаться как премиальная моушн-дизайн-работа: каждое движение со сглаживанием, каждая склейка точно в бит трека 128 BPM. Используй название моего продукта "[your brand]", мою квадратную иконку приложения (или нарисуй простой знак в виде скруглённого квадрата в моих цветах), однострочный слоган, три шага, как это работает, несколько коротких строк о функциях и мой веб-адрес. Замени каждый приведённый ниже пример в кавычках моими словами, сохраняя длину каждой строки примерно как у примера, чтобы макет не поплыл. Избегай видеоматериала и фото, линейных движений, склеек мимо бита и музыки, которая обрывается до конца. </direction> <structure> Время в секундах; один такт = 1,875 с. - 0–7,5, печатное вступление. Моно-строка "# Ideas" набирается в центре, по одному символу на 16-ю ноту, с розовой кареткой ("#" розовый). На бит моно-буквы поднимаются на 26 px и размываются быстрой волной, а то же слово вырастает как огромный serif-заголовок (около 228 px), буква за буквой с 74 px ниже, размытие от 10 до 0, масштаб от 1,12 до 1 (0,3 с, power3.out). Каретка прыгает в конец с небольшим перелётом и мигает на половинных долях. Вторая моно-строка "*in motion*" набирается вдвое быстрее и тем же способом превращается в розовую курсивную вторую строку "in motion.", а мелкие символы "#" и "*" разлетаются, пока моно-текст распадается. С 3,75 с четыре белых плашки по очереди на последовательных битах выскакивают вокруг заголовка (back.out, лёгкие наклоны). Каждая сначала показывает короткую команду моно-шрифтом, затем меняется на то, что она делает: "bigger" становится жирным "Bigger", "slower" становится курсивным "slower" с чертой, "colour" получает розовый образец цвета, "MP4" становится "export". Плашки мягко покачиваются. На 6,0 с обе строки заголовка изгибаются в дуги вокруг центра, раскручиваются примерно до 330 градусов и уменьшаются до нуля меньше чем за секунду, а плашки уходят по орбите наружу и растворяются в размытии. 48 тонких лучей (каждый пятый розовый, остальные лавандово-серые) врываются снаружи и встают вокруг центра, в середине выскакивает розовая точка, кадр слегка темнеет до серо-фиолетового, и точка сплющивается перед склейкой. - 7,5–9,75, раскрытие логотипа на дропе. Два розовых кольца расширяются из центра и исчезают, и около 70 мелких символов ("+", "×", "~", "/", "°", "< >") разлетаются, кружатся и уплывают. Иконка приложения выскакивает в центре (масштаб 0,4, 1,55, 1,22, 1,0 за 0,3 с) и сдвигается влево в логотип-композицию. Название продукта "[your brand]" (около 205 px, serif жирный) вырастает буква за буквой, по одной каждые 60 мс, с 70 px ниже с наклоном и размытием. Розовая точка, взлетевшая на склейке, падает обратно и приземляется как точка над "i" (или как точка в конце), сплющиваясь. Слоган "Your AI motion designer" (приглушённый, 45 px) вырастает слово за словом под ним, и короткое розовое подчёркивание растёт с expo.out. На 9,55 с слоган уходит вниз, а вся композиция уменьшается и улетает в левый верхний угол, где становится логотипом в шапке окна приложения. - 9,75–15,0, приложение. Белое скруглённое окно приложения (1600x900) вырастает из логотипа в шапке с expo.out. Кнопки шапки выскакивают по одной (призрачная кнопка "Preview", розовая кнопка "Export" со стрелкой, маленькие линейные иконки), вырастает разделитель, и подписи панелей "CHAT" и "PREVIEW" проявляются. Слева моно-шрифтом с розовыми маркерами и кареткой набираются строки: "# Ideas in motion", "Tell the **chat** what to *show*.", "## Features", "- Fonts for every script", "- Vertical or square", "- [x] Live preview", "- [ ] MP4 export", "> Edit in words." и строка кода в ограждении с двумя словами в кавычках. Когда очередная строка дописана, она бросает тонкий розовый безье-штрих через разделитель; там, где он приземляется, справа появляется отрисованный элемент с размытием от 8 до 0 и небольшим сдвигом (serif-заголовок, строка текста с жирными и курсивными словами, заголовок с волосяной линией, маркеры списка, отмеченный розовый чекбокс, пустой, цитата с полосой, тонированный блок кода с оранжевыми и фиолетовыми токенами), позади вспыхивает мягкая розовая полоса и остаётся маленькая розовая точка. Камера движется всё время (см. техники) и заканчивает проходом сквозь зум в превью на 14,8 с. - 15,0–24,4, пять карточек функций, примерно по такту каждая. У каждой слева один и тот же блок: разреженная розовая моно-надпись над заголовком, которая расшифровывается из случайных символов, жирная serif-строка и розовая курсивная строка (около 119 и 114 px), вырастающие буква за буквой от базовой линии, полупрозрачная розовая маркерная полоса, выезжающая под курсивной строкой, и приглушённая строка текста, раскрывающаяся слева направо. Визуалы справа: 1. "01 — PICK A TEMPLATE" / "Live" / "preview." / "Tell the chat what to show. The agent builds the animation." Две карточки влетают с 3D-поворотом: карточка чата, в которой набирается "# Ideas", "Edit in **words**", "- bigger", "- slower", и карточка превью, отрисовывающая каждое нажатие клавиши; между ними розовый круглый значок с молнией выскакивает и вращается после каждой дописанной строки. Уходит коротким толчком и вертикальным рывком вверх. 2. "02 — DESCRIBE YOUR IDEA" / "Chat instead" / "of a timeline." / "No keyframes to hunt for. Say what should change." Влетает рывком снизу. Большой бледный круг и контур ноутбука рисуются сами, иконка приложения падает на экран со сплющиванием и отскоком, расходятся пульсирующие кольца, а три серые иконки инструментов вокруг (ключевой кадр-ромб, таймлайн, кривая) по очереди перечёркиваются розовым. Уходит горизонтальным рывком. 3. "03 — REFINE IN WORDS" / "Edit" / "in words." / "“Bigger”, “slower”, “another colour”: the preview updates as you talk." Карточка чата с нумерованными строками помечает одну строку оранжевой полосой и значком, над строками раскрывается заметка "Say what should change.", вставляется пустая строка, заметка закрывается, и бирюзовое кольцо с галочкой расширяется с конфетти-точками. Затем наклонная розовая шторка пересекает кадр, а под ней уже лежит следующая карточка. 4. "NO KEYFRAMES" / "Another" / "colour." / "Kinetic type, shapes, 3D effects and sound." Белая карточка с иконкой солнца выскакивает с 3D-поворотом, следом появляются четыре образца цвета; указатель кликает по карточке, расходится розовое кольцо, солнце превращается в луну, и вся сцена раскрывается в тёмную тему растущим кругом от карточки. 5. Однокадровая серо-фиолетовая вспышка, затем на глубоком чернильном фоне: "MP4 EXPORT" / "Your idea is" / "ready to move." / "Vertical, horizontal or square." Указатель открывает меню "Export" рядом с кнопкой "Open app" и выбирает "Vertical MP4", затем "Square MP4"; каждый раз тёмная карточка файла с надписью ".mp4" выпадает из меню с наклоном и несколькими искрами. - 24,4–26,25, сетка иконок. Тёмная сетка 11 x 6 из тонких иконок моушн-дизайна (play, film, music, type, layers, wand, image, video, shapes, mic, chat, palette, sun, sparkles) с шестью подсвеченными розовыми плитками, которые выскакивают на биты, и несколькими мерцающими; после склейки сетка тускнеет и медленно приближается. В центре на каждую половинную долю переворачиваются огромные отдельные слова, чередуясь: белый жирный и розовый курсив: "Type." "Shapes." "3D." "Sound." "Footage." "Free." Каждое выскакивает с масштаба 1,12 с размытием, одно сплющивается. Последнее слово глитчит, затем вся сетка спиралью уходит в центр и оставляет одну розовую точку. - 26,25–30, финальная карточка. Кольца и символы вырываются оттуда, где стоит иконка, иконка выскакивает, название влетает справа буква за буквой с размытием, слоган вырастает слово за словом, и растёт подчёркивание. Затем с интервалом в четверть секунды появляются три белые таблетки с маленькими розовыми иконками: "Live preview", "Try it free" и "[your web address]". Розовая каретка мигает сразу после названия на бит, а карточка очень медленно приближается до конца. </structure> <composition> Светлая страница #FAF9FF в центре, переходящая через #F4F2FE в мягкую виньетку #D9D4EA по углам, с двумя очень мягкими лавандово-розовыми бликами, медленно дрейфующими, и едва заметной точечной сеткой. Карточки белые с мягкими тенями оттенка #1C0B5D, тонкие линии #E9E4F2, мягкие панели #F0EDFF. Тёмный шрифт и тёмные сцены глубокого чернильного цвета #1C0B5D (радиальный градиент к #0D0B1E по краям); приглушённый текст #6B6385; основной акцент розовый #FB2D89, второй акцент оранжевый #FE9117, небольшие штрихи фиолетового #7C6CF2 и бирюзового #2DD4B0 (кольцо успеха). Шрифты: высококонтрастный дисплейный serif, Fraunces с оптическим размером 72, для заголовков, жирный прямой для первой строки и средний курсив розовым для второй; Onest для строк текста, слогана и таблеток; JetBrains Mono для набираемого текста, разреженных надписей и подписей интерфейса. Размеры: заголовок вступления около 228 px, название продукта около 205 px, слоган 45 px, строки функций около 119 px (жирный) и 114 px (курсив), окно приложения 1600x900 со скруглёнными углами. Логотип-композиция: иконка слева, название справа, под ними слоган и короткое розовое подчёркивание. В карточках функций текстовый блок слева, визуал справа. </composition> <techniques> - Каждое движение со сглаживанием, ничего линейного: power3.out для подъёма букв, back.out для выскакиваний (плашки, таблетки, карточки файлов), expo.out для растущих окон, разделителей и подчёркиваний. - Текст входит буква за буквой снизу от базовой линии с размытием и лёгким уменьшением масштаба или наклоном; слоганы поднимаются слово за словом; строки текста раскрываются слева направо; надписи расшифровываются из случайных символов. - Морф из моно в serif: набранные моно-буквы поднимаются на 26 px и размываются быстрой волной, пока на их месте вырастает serif-слово, а мелкие символы разлетаются. - Выскакивания с перелётом (масштаб иконки 0,4, 1,55, 1,22, 1,0 за 0,3 с); точки и иконка сплющиваются при приземлении. - Розовые безье-штрихи рисуются примерно за 0,1 с и стираются с хвоста за 0,14 с. - Камера в сцене приложения: медленный наезд, быстрый наезд примерно до 1,4x на верх окна на 11 с, медленный панорамный спуск за набором текста, быстрый отъезд с наклоном окна примерно на 10 градусов в 3D на 14 с и проход сквозь зум в превью с сильным размытием на 14,8 с. Медленные наезды на сетку иконок и финальную карточку. - Переходы: закрутка дугой в лучи, вспышка колец и символов, полёт логотипа в шапку окна, проход сквозь зум с размытием, короткий толчок и вертикальный рывок, горизонтальный рывок, наклонная розовая шторка с четырьмя ступенчатыми более светлыми краями, пересекающая кадр слева направо примерно за 0,22 с, круговое раскрытие в тёмную тему, однокадровая серо-фиолетовая вспышка и спираль сетки в одну точку. - Карточки влетают с 3D-поворотом, плашки мягко покачиваются, каретка мигает на половинных долях. </techniques> <music> Яркий инструментальный synthwave 128 BPM с тёплыми аналоговыми синтезаторами, созданный заново и ровно 30 секунд длиной, уложенный на битовую сетку картинки. Каждая склейка попадает на такт: дроп и логотип на 7,5 с, одна функция на такт, слова на половинных долях, финальная карточка на 26,25 с. Развитие: четыре такта нарастания с арпеджио и шумовым райзером, дроп с крэшем на логотипе, затем драйвовый грув с сайдчейн-басом, который идёт без пауз до самой финальной карточки, её последней доли и длинного затухания синтезатора, которое держится до самого конца. Микс около -14 LUFS, true peak ниже -1 dBTP. </music> <sound> Звуковой дизайн только на моменты картинки, поверх музыки: мягкие щелчки печати под набираемыми строками, блип, когда каждая строка превращается в типографику, небольшие хлопки для плашек, таблеток и карточек файлов, вуш для закрутки, каждого рывка, шторки, прохода сквозь зум и тёмного раскрытия, райзер к дропу и бум на нём, короткий глухой удар, когда иконка приземляется на ноутбук, восходящий колокольчик для бирюзовой галочки, клики для указателя, глитч на серой вспышке, удар на склейке сетки, тик на каждое переворачивающееся слово и короткий райзер в финальный бум на первой доле финальной карточки. Без закадрового голоса. </sound>

Превью промпта «Шоурил моушн-дизайна под бит»

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

<direction> Сделай 15-секундный шоурил моушн-дизайна для [your brand], 1920x1080 горизонтально, 60 fps, полностью нарисованный: анимированный текст, фигуры, частицы, 3D-облако точек и дашборд, без съёмки. Идея: быстрый продуктовый ролик, где каждая смена сцены попадает на хаус-бит 128,57 BPM. Один бит равен ровно 28 кадрам (0,4667 с), каждая склейка стоит на этой сетке, а первый сильный удар приходится на 1,867 с (бит 4). Образ чередует почти чёрные и светлые лавандово-белые сцены, главный акцент — ярко-розовый, плюс фиолетовый и оранжевый. Заголовки — плотная гротескная гарнитура, подписи — моно, а утверждение — курсивный антиква. Поверх всего ролика лежит рамка в стиле телетрансляции до финального глитча. Используй мой знак логотипа на финальной карточке и замени весь текст в кавычках моими словами, сохраняя примерно ту же длину, чтобы вёрстка не поехала. Избегай фото, стокового видео, мягких банальных наплывов и всего, что уходит с битовой сетки. </direction> <structure> 1. 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 с не зальёт кадр розовым. 2. 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. 3,46–4,02 с, шторка из полос. Восемь вертикальных полос по 240 px, чередуя розовый и светлый цвет страницы, поднимаются снизу (power2.inOut, 0,18 с, с интервалом 0,7 кадра, первой левая). Они задерживаются, потом продолжают подниматься и уходят, открывая снизу следующую сцену. 4. 3,70–5,60 с, фигуры на почти чёрном. Сетка 120 px из маленьких приглушённых скруглённых квадратов (каждый пятый — контур) с крошечными крестиками между ними. Волна выходит из центра на каждый бит (3,73, 4,2, 4,67 и 5,13 с) со скоростью 2000 px/с. Там, где проходит её фронт, каждая ячейка вырастает с 42 до 74 px, скругляется к кругу, поворачивается на 38 градусов и становится розовой. Первая волна открывает сетку, а сетка медленно вращается против часовой стрелки, всё быстрее и быстрее. После последней волны ячейки опустошаются и затухают к 5,47 с. 5. 5,55–7,42 с, частицы. Белая вспышка с тонким кольцом ударной волны появляется на 5,62 с, затем из центра вырываются 7000 крошечных квадратиков. Они собираются в одно огромное слово 590 px (пример "IDEA"), окрашенное по ширине от оранжевого к лавандовому и фиолетовому, мерцающее на пиксель. С 7,0 с они утекают вправо со шлейфами, сначала левая часть слова. Позади лежит мягкое розовое радиальное свечение. 6. 7,42–9,45 с, 3D на глубоком индиго радиальном фоне. Сфера Фибоначчи из 1700 точек (радиус 362 px) медленно вращается над перспективным полом из тонких фиолетовых линий, ряды которых ползут к зрителю. Точки розовые или фиолетовые, спереди крупнее и ярче. С 8,12 с каждая точка движется на своё место на торическом узле (2,3) (cubic in-out, случайные задержки до 0,16 с), и узел продолжает вращаться. 7. 9,08–9,65 с, вторая шторка из полос, как в сцене 3, в фиолетовом, розовом и светлом цвете страницы. 8. 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"). 9. 10,96–11,45 с, шторка из полос-лент. Восемь горизонтальных полос, чередуя почти чёрный и розовый, въезжают слева (power3.inOut, 0,2 с, с интервалом в один кадр, первой верхняя) и уходят вправо. 10. 11,07–13,07 с, утверждение на почти чёрном. Четыре пучка по 28 тончайших линий текут через кадр лентами с аддитивным смешиванием: розово-оранжевый вверху, затем розово-фиолетовый, фиолетовый и фиолетово-розовый внизу. Утверждение из двух строк курсивной антиквой 290 px появляется по буквам. Каждая буква поднимается на 36 px и теряет размытие за 0,16 с, с интервалом 0,02 с в первой строке и 0,035 с во второй. Первая строка светлая и начинается с x 334 (пример "Ideas in"); вторая розовая и заканчивается на x 1438 (пример "motion."). 11. 12,73–13,07 с, глитч. Срезы текста прыгают вбок, кадр дважды инвертируется, мерцают маленькие фиолетовые, жёлтые и розовые блоки, а текст расщепляется на розовый и бирюзовый. Рамка трансляции и её счётчики исчезают. 12. 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 с. </structure> <composition> - Палитра: - Почти чёрный #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 с. </composition> <techniques> - Каждая смена сцены стоит на 28-кадровой битовой сетке. Сцены и шторки перекрываются на несколько кадров, так что ни один кадр не пустой. - Разнообразь переходы: шар, раздувающийся в следующий фон, жёсткие цветовые склейки между четырьмя словами, вертикальные шторки из полос, горизонтальная шторка из полос, вспышка с кольцом ударной волны и RGB-глитч в финальную карточку. - Дай шару и знаку логотипа физическое движение: сплющивание при ударе, вытягивание при падении, лёгкий смаз на скорости. - Используй появление по буквам везде, у каждого слова своё сглаживание (посадки expo.out, подъёмы из маски back.out, выскакивания на 1/32 долях), с потерей размытия по мере появления букв. - Сохраняй всё чётким и векторным: частицы, точки и линии крошечные и резкие, а свечения остаются мягкими и за текстом. </techniques> <music> Сделай оригинальную хаус-подложку 128,57 BPM, ровно 15 с, уложенную на битовую сетку. - Вступление: воздушный пэд с пузырчатыми щипками. - С удара на 1,867 с: полный грув с бочкой четыре четверти, клэпами, хэтами и басом с сайдчейном. - Финал: райзер и глитч в один большой финальный удар на 13,07 с, затем завершающий аккорд звучит до 15 с. </music> <sound> Поверх подложки добавь удары, сочинённые под монтаж: - райзер в бум на заполнении 1,867 с - короткие вушы с пиком на каждой смене слова и каждой шторке - мягкие щелчки на волнах фигур - небольшой бум и стеклянный тик на вспышке частиц - вуш-шлейф, когда частицы уходят - саб-дроп в 3D-сцену - райзер и цифровые глитч-тики в финальный бум на 13,07 с - колокольчик, когда знак логотипа приземляется на 13,51 с Без закадрового голоса. Микс около -14 LUFS, true peak ниже -1 dBTP. </sound> <references> Шоурил запуска технологического продукта в духе стильных анимированных брендовых роликов: HUD-рамка трансляции, кинетическая типографика, генеративные частицы, вращающееся 3D-облако точек и чистый UI-дашборд. </references>

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

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

<direction> Сделай 15-секундный ролик о запуске моего приложения (15,07 с), только моушн-графика, горизонтальный формат 1920x1080, 60 кадров/с, смонтированный строго под бит 120 bpm: бит каждые 0,5 с от нуля, такт каждые 2 с. Идея — одна непрерывная цепочка, где каждый объект превращается в следующий. Длинный набранный промпт схлопывается в точку, точка становится короткой ссылкой, а клик по ней роняет бит. Затем идут глобус, карточка продукта, сеть, восемь карточек со словами и финальная карточка. Должно ощущаться как премиальная презентация продукта: тёмный и глянцевый стиль почти всё время и яркая финальная карточка в конце. Ничего не снимается на камеру. Название моего продукта, мой адрес, мой знак и мои собственные строки заменяют все приведённые ниже примеры в кавычках (замени на свои). Избегай съёмки и стоковых видео, названий и заявлений других брендов и неточного тайминга: каждое изменение попадает в сетку бита. </direction> <structure> 1. 0–1,5 с, длинный промпт. На тёмной странице мигает розовый курсор, а заголовок «DESCRIBE YOUR IDEA · 02» (ОПИШИТЕ СВОЮ ИДЕЮ · 02) проявляется на 0,2 с. Предложение, намного длиннее экрана, печатается шрифтом Geist Mono 46 px: «Скажи чату, что показать. Агент создаст анимацию. Не нужно искать ключевые кадры. Скажи, что должно измениться...». Печать начинается медленно, в середине идёт взрывом (сотни символов в секунду) и мягко завершается на 1,0 с. Ключевые слова белые, остальные приглушённые. Курсор доходит примерно до 82% ширины, затем останавливается, а строка прокручивается влево под ним, левый край гаснет через маску. С 1,05 с строка размазывается в стороны (размытие только по горизонтали) и тускнеет. На 1,38 с она сплющивается в светящуюся розово-белую линию толщиной 4 px, концы которой за пять кадров смыкаются в точку в центре. 2. 1,5–2,3 с, короткая ссылка. Один плоский серо-фиолетовый кадр-вспышка гаснет за 0,2 с. Из точки рождается тёмная плашка с тонкой светлой рамкой: мой знак и «[ваш бренд]» белым с розовым «.app», Manrope полужирный. Буквы печатаются, каждая появляется из размытия, пока камера приближается примерно до 1,2x и возвращается обратно. Белый указатель влетает снизу справа и кликает ровно на 2,0 с (дроп). При клике: - плашка вжимается до 0,96 и на два кадра становится ярче; - страница вспыхивает тёмно-розовым и гаснет за 0,12 с; - от клика растут светлое кольцо и два розовых кольца с power4.out; - примерно семьдесят розовых и белых искр разлетаются с торможением. 3. 2,0–4,4 с, глобус. Тёмный глобус (радиус 780 px) поднимается снизу и медленно вращается. У него розовое свечение внутри края, белые точки вместо суши и едва заметные меридианы. Плашка уменьшается примерно вдвое и поднимается наверх. Под ней стоит «● LIVE PREVIEW» (ПРЕВЬЮ ВЖИВУЮ) розовым моно-шрифтом, затем огромная моно-надпись «IDEAS IN MOTION» (ИДЕИ В ДВИЖЕНИИ) размером 154 px, которая прокручивается как одометр: - по одной обрезанной колонке на букву, каждая прокручивает случайные буквы; - колонки останавливаются слева направо по кривой power4.out за 2,5 с; - колонки, которые ещё не остановились, остаются тусклого призрачного цвета. Розовые кометы летят дугой от плашки к глобусу и оставляют пульсирующее кольцо в месте приземления. 4. 4,4–7,5 с, карточка продукта. Размытое растворение (4,41–4,52 с) ведёт к тёмной скруглённой карточке в лёгкой 3D-перспективе, которая выходит из сильного наклона и продолжает дрейфовать. Вверху: плашка со значком ссылки и «[ваш бренд].app», плашка «Live preview» (Живое превью) и мой знак справа вверху. Три показателя в ряд с подписями «Pick a template» (Выберите шаблон), «Describe your idea» (Опишите свою идею) и «Refine in words, then export» (Доработайте словами и экспортируйте), значения отсчитываются до «01», «02» и «03». Активный показатель лежит на слабой панели со светящимся подчёркиванием. Панель перепрыгивает к следующему показателю на 5,5 с и 6,0 с, а подчёркивание становится фиолетовым, затем розовым, затем бирюзовым. Плоскостная диаграмма со светящейся линией прорисовывается, затем на каждом прыжке перетекает в новую кривую и цвет. С 6,3 с ползунок с маленькой подсказкой идёт по линии. Подсказка читает «Edit in words» (Редактируй словами) / «Bigger» (Больше), затем «Slower» (Медленнее). Четыре уведомления въезжают справа и сдвигают стопку вверх: - «Describe your idea» (Опишите свою идею) / «Tell the chat what to show.» (Скажите чату, что показать.) - «No keyframes» (Без ключевых кадров) / «Say what should change.» (Скажите, что должно измениться.) - «Live preview» (Живое превью) / «The preview updates as you talk.» (Превью обновляется по ходу разговора.) - «MP4 export» (Экспорт в MP4) / «Vertical, horizontal or square» (Вертикально, горизонтально или квадрат) На 7,25 с карточка в 3D уносится прочь, размывается и исчезает к 7,48 с. 5. 7,5–10,5 с, сеть. Белый диск с моим знаком выскакивает из темноты внутри фиолетового свечения, перелетает до 1,12x и успокаивается к 7,9 с. Заголовок «Edit in words.» (Редактируй словами.) поднимается по словам из собственной строки вверху, слово «words.» в градиенте фиолетовый–розовый–оранжевый. Вокруг диска примерно 37 круглых аватаров (простые лица-заглушки в цветных кольцах) выскакивают кольцо за кольцом вдоль двух пунктирных эллипсов. Тонкие фиолетовые линии соединяют их с центром, и они медленно вращаются. Бирюзовые искры бегут по линиям. Каждое кольцо, до которого они добрались, становится бирюзовым и светится, а рядом выскакивает маленькая бирюзовая плашка с функцией: «+Type», «+Shapes», «+3D», «+Sound», «+Music», «+Fonts», «+Photos», «+Logos» (+Шрифт, +Фигуры, +3D, +Звук, +Музыка, +Шрифты, +Фото, +Логотипы). Ни одна плашка не перекрывает другую. Внизу «[ваш бренд].app» выкатывается по буквам бирюзовым моно-шрифтом, под ним «YOUR AI MOTION DESIGNER» (ТВОЙ ИИ-МОУШН-ДИЗАЙНЕР). С 9,8 с камера дрейфует влево. 6. 10,5–12,5 с, восемь карточек со словами, по одной каждые 0,25 с на восьмых долях. Первая влетает от правого края и резко тормозит, заголовок смазан движением. Каждая карточка — один заголовок Manrope ExtraBold 240 px: - «Kinetic type.» (Кинетическая типографика.) тёмными чернилами на светлой странице; - «Shapes.» (Фигуры.) белым на почти чёрном, тёмно-розовые квадраты включаются; - «3D effects.» (3D-эффекты.) тёмными чернилами на розовом, буквы поднимаются по одной; - «Sound effects.» (Звуковые эффекты.) белым контурным шрифтом на почти чёрном; - «Another colour.» (Другой цвет.) на медленно вращающемся коническом градиенте из акцентных цветов; - «Your footage.» (Твои съёмки.) фиолетовым на светлой странице; - «Music.» (Музыка.) светящимся бирюзовым над падающими нотами; - мой знак с «[ваш бренд].» белым на почти чёрном. В углах стоит мелкий моно-текст: - слева вверху: мой знак и адрес; - справа вверху: «0N / 08»; - слева внизу: тег раздела вроде «[ NO KEYFRAMES ]» ([ БЕЗ КЛЮЧЕВЫХ КАДРОВ ]); - справа внизу: линия прогресса, заполняющаяся на одну восьмую с каждой карточкой. 7. 12,5–15,07 с, финальная карточка. Один бледный кадр, затем светлая страница раскрывается кругом из центра поверх серо-фиолетовой страницы. С 12,5 до 13,0 с мой знак уменьшается примерно с 3x, выпрямляясь и переходя от блёкло-серого к полному цвету. Пастельное облако (розовый, фиолетовый, персиковый, мятный, масляный) набухает снизу и дрейфует. На 13,15 с знак уезжает влево, а название «[ваш бренд]» выходит из-за него в центрированный логотип-локап: тёмные чернила, Manrope 600, около 170 px. Строка «Your idea is ready to move.» (Твоя идея готова двигаться.) поднимается по словам с 13,46 с, с интервалом 0,05 с. «move.» (двигаться.) розовое, а розовое подчёркивание рисуется под ним на 14,06 с. Две кнопки выскакивают с эффектом back: тёмная «Try it free →» (Попробуй бесплатно →) на 14,16 с и белая моно «[ваш бренд].app» на 14,25 с. Держи до конца. </structure> <composition> Палитра: - почти чёрный фон #0D0B1E; - тёмные чернила #1C0B5D для тёмного шрифта на светлых страницах; - светлая страница #FAF9FF и мягкая лаванда #F0EDFF; - приглушённый текст #6B6385 и более светлый приглушённый #8F89A8 на тёмном; - линии #E9E4F2; - белый #FFFFFF. Акценты: розовый #FB2D89 главный (курсор, ссылки, кольца, акцентное слово), оранжевый #FE9117 второй. Фиолетовый #7C6CF2, бирюзовый #2DD4B0 и жёлтый #FFD23F появляются только там, где нужно различать три цвета. Шрифты: Manrope (700–800) для заголовков и интерфейса, Geist Mono для набираемого текста, подписей, счётчиков и адресов. Мелкие подписи — моно 24 px, заглавные, с широким трекингом (около 0,23 em). Слабая сетка 96 px цвета линий лежит под радиальной маской: 5% на тёмных страницах, 3,5% на светлой финальной карточке. Мой знак, скруглённая квадратная иконка приложения, появляется в плашке-ссылке, на карточке продукта, в центре сети, в углу карточек со словами и на финальной карточке. </composition> <techniques> Каждая сцена передаёт свой объект следующей: линия схлопывается в точку, точка вырастает в плашку, плашка поднимается над глобусом, глобус растворяется в карточку, карточка уносится в сеть, а сеть влетает в карточки со словами. Срезы и удары используют одиночные плоские кадры-вспышки, быстро гаснущие: серо-фиолетовый за 0,2 с на 1,5 с, тёмно-розовый за 0,12 с на клике, приглушённый фиолетовый, сходящий за три кадра на каждом срезе карточек, бледный на финальной карточке. Кривые: - power4.out для колец и посадки одометра; - овершут для появления диска сети; - back для кнопок финальной карточки; - резкое торможение для рывка первой карточки со словом. Размытие и маски: размытие только по горизонтали для смаза и рывка, подъём из размытия на каждой набранной букве, размытое растворение в карточку, размытие на её 3D-выходе и затухание масок на прокручиваемых краях. Камера дышит всё время: наезд на плашку, медленный 3D-дрейф карточки, вращающиеся аватары и дрейф влево в сети. Свечение лежит на линиях, ободках, кольцах и активном подчёркивании, а искры летят с торможением. </techniques> <music> Инструментальный электронный synthwave, 120 bpm, до минор, тёмный и глянцевый, ровно по длине видео. - Тихое фильтрованное вступление раскрывается, нарастая первые две секунды, с райзером. - Дроп приходится точно на клик на 2,0 с, в напористый бит: бочка на каждую долю, хэты на слабые доли, пульсирующий бас, яркое арпеджио. - Ровный драйв идёт до финальной карточки. - Всё обрывается на 12,5 с одним большим ударом и ярким аккордом до минора, длинный хвост реверберации которого затихает к концу. Громкость около −14 LUFS, true peak ниже −1 dBTP. </music> <sound> Звуковые эффекты ложатся на картинку и никогда не дублируют барабаны музыки: - тихие тики под печать; - короткий вуш и стеклянный тик, когда линия схлопывается и вспыхивает; - клик, бум и удар на дропе на 2,0 с; - вуш в карточку на 4,45 с; - маленькие блипы на два прыжка по вкладкам и на каждое из четырёх уведомлений; - вуш, когда карточка уносится; - мягкий глухой удар, когда выскакивает знак на 7,55 с; - быстрый вуш на рывке на 10,5 с; - тик на каждом срезе карточек со словами; - короткий райзер в финальную карточку; - бум и мягкий всплеск на 12,5 с; - лёгкий вуш, когда раскрывается лого-локап; - два блипа для кнопок. Закадрового голоса нет. </sound> <references> Премиальный SaaS-ролик о запуске в стиле отполированного моушн-дизайна для презентации продуктов: тёмный глянцевый интерфейс, светящиеся линии, кинетическая типографика, счётчики-одометры, 3D-карточки дашборда и быстрые заголовочные карточки из одного слова на бит, завершающиеся пастельным воздушным брендовым лого-локапом. </references>

Рассылка

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

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

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

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