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

RU

Открыть beta

Simple Motion

Сплит-скрин заставка приложения в двух частотах кадров

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

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

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

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

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

Замысел

Сделай 12-секундную горизонтальную сплит-скрин заставку для моего приложения, 1920x1080, 59,94 кадра/с. Две квадратные панели рядом проигрывают одну и ту же яркую анимацию интерфейса. Левая панель шагает с ощущением 29,97 кадра/с, а правая идёт с полной частотой кадров, чтобы была видна разница в плавности. Семь быстрых планов ложатся на бит: курсор кликает по моему логотипу в окне приложения, значок взрывается орбитой квадратов, клик в строке меню выпускает стеклянное поле запроса, в котором печатается текст, страница текста пролистывается вместе с карточкой, две карточки стопкой плывут вверх, мой логотип остаётся один, а светящийся логотип-надпись врывается на почти чёрном фоне. Стиль чистый и яркий, с мягкими тенями и размытием движения на каждом перемещении. Избегай статичных стартов, кросс-фейдов, зерна и закадрового голоса.

Структура

0,00–2,39 с, заголовок и клик. Фиолетовая дымка за 0,9 с рассеивается до белой страницы и оставляет лавандовое свечение внизу. Однострочный заголовок поднимается примерно с y 930 до 537 по экспоненциальному ease-out (около 1,2 с), вначале сильно размытый. В нём мой логотип в лавандовом диске 132 px, название «[ваш бренд]» шрифтом Inter Medium цвета глубокой туши и капсула глубокой туши «Открыть приложение». Название появляется на втором кадре уже размытым. Капсула идёт следом через два кадра, сдвигаясь на 15 px влево по мере того, как становится чёткой. С 0,45 с вокруг заголовка проявляется белое окно приложения с радиусом углов 93 px (53%, 70%, затем 100% к 0,78 с). Внутри него лавандовая поисковая «таблетка» «Опиши видео», колонка приглушённых значков и карточка поверх обложки от глубокой туши к фиолетовому. Карточка в левой панели гласит «Твоя идея готова к движению» / «Живой предпросмотр · экспорт в MP4», а в правой — «Чат вместо таймлайна». Обложка гласит «От идеи до видео в одном чате» или «Опиши свою идею». На 0,88 с справа вверху появляется чёрный курсор-стрелка с белой обводкой и скользит влево, замедляясь. Он поворачивается на -85 градусов, чтобы смотреть вниз при заходе, садится на логотип вертикально и вырастает в 1,55 раза, пока вокруг диска загорается мягкое розовое кольцо. Камера наезжает до 1,2 относительно центра (ease-in-out, 0,47 с) и держится один кадр. Затем отъезжает до 1,04 по ускоряющейся кривой, пока курсор нажимает (уменьшается на 15%), прямо в склейку.
2,39–3,35 с, значок и орбита. Жёсткая склейка на дроп музыки: мой логотип как значок приложения появляется размером 276 px и сжимается до 178 px (expo out, 0,47 с). Четыре скруглённых квадрата, размытых движением и опережающих на 32 градуса, занимают места крестом вокруг него на радиусе 222 px (expo out, 0,9 с). Слева они фиолетовый, бирюзовый, розовый и жёлтый, а справа розовый, оранжевый, бирюзовый и белый. За значком за 0,2 с вырастает двухцветный лавандовый диск. С 3,12 с квадраты складываются в ряд справа и уменьшаются, а значок сжимается примерно до 70 px под нарастающим размытием.
3,35–5,29 с, строка меню и запрос. Склейка на правый верхний угол экрана компьютера под белой страницей. Видны почти чёрная рамка 46 px и тёмная полупрозрачная строка меню со значками wifi, батареи и управления, моим логотипом, тремя акцентными точками, «[ваш бренд]» и «Открыть приложение». Обои идут от глубокой туши к фиолетовому, слева диагональные световые полосы, розовое свечение, тонкая сетка и блик справа. Курсор поднимается к логотипу и кликает (масштаб 0,82 на 0,1 с). Матовое стеклянное поле запроса выскакивает из значка: 740 x 226 px, радиус 56 px, полупрозрачное лавандовое с белой тонкой рамкой. Оно масштабируется от 0,18 до 1 с перелётом за 0,19 с, его размытие падает с 9 px до 0, пока камера смещается на 115 px вправо. Текст печатается со скоростью 27 символов в секунду за белой кареткой: «Редактируй словами, без ключевых кадров» слева, «Крупнее, медленнее, другой цвет» справа. В нижнем ряду розовая круглая кнопка отправки и три маленьких значка. План уплывает вверх и уходит по вертикальной ступени размытия, пока лавандовая вуаль поднимается до 75%.
5,29–7,16 с, страница ответа и карточка. Из лавандовой вспышки снизу, с отступа 291 px, прокручивается вверх страница серо-фиолетового текста шрифтом Inter 42–45 px. Она движется по экспоненциальной кривой (постоянная времени 0,2 с), с вертикальным размытием, привязанным к скорости. Одна фраза глубокой тушью SemiBold стоит под маленьким вертикальным курсором: «ИИ-моушн-дизайнер» слева, ««медленнее», «другой цвет»» справа. Примеры строк: «От идеи до видео в одном чате», «01 Выбери шаблон», «02 Опиши свою идею», «03 Доработай словами и экспортируй», «Скажи чату, что показать. Агент соберёт анимацию.», «Кинетическая типографика, фигуры, 3D-эффекты и звук». На 6,22 с у нижнего края выскакивает размытая карточка. Она поднимается по быстрому ease-out на фоне ровного дрейфа вверх 158 px/с, пока страница тускнеет до 45% и размывается на 3 px. Слева на карточке абстрактный треугольник глубокой туши, фиолетового, оранжевого и жёлтого цветов с подписью «Идеи в движении» / «[ваш сайт]». Справа на ней обложка от глубокой туши к фиолетовому с белой карточкой «Опиши свою идею» и подписью «Чат вместо таймлайна» / «Живой предпросмотр · экспорт в MP4». С 6,9 с она ускоренно уходит вверх, уменьшается до 0,9 и растворяется в размытии.
7,16–8,16 с, стопка карточек. Размытое растворение за три кадра вводит две карточки стопкой (534 x 343 px, радиус 51 px). Они приходят на 165 px ниже, на 15% крупнее и размытыми, устраиваются за 0,3 с и продолжают дрейфовать вверх, затем уходят ускоренным движением и ступенью размытия. На каждой гигантский белый заголовок с непрозрачностью 60%, обрезанный нижним краем. Слева заголовки «Шрифты» и «Музыка» поверх графики с треугольником и «таблетки» «Открыть приложение». Справа «Фигуры» и «Звук» поверх обложек от глубокой туши к фиолетовому с «таблетками» «02» и «03» и белыми внутренними карточками «Кинетическая типографика, фигуры» и «Музыка и звуковые эффекты»; у второй карточки розово-оранжевое свечение.
8,16–10,03 с, логотип один. Склейка через размытие на мой логотип в лавандовом диске 167 px на белом. Он поднимается на 115 px на место по экспоненциальной кривой (0,17 с), держится, затем сжимается в склейку.
10,03–12,00 с, финальная карточка. Жёсткая склейка на почти чёрный фон с радиальным свечением глубокой туши. Белый логотип-надпись с мягким двухслойным свечением врывается с масштаба 3,85x: «[ваш бренд]» слева, «[ваш сайт]» справа. Его горизонтальное размытие гаснет за 0,1 с. Он оседает до 1x примерно за секунду на всё замедляющейся кривой, затем медленно отъезжает и ускоряется до 0,72x на последнем кадре.

Композиция

Фон почти чёрный #0D0B1E. Две квадратные панели по 930 x 930 px стоят рядом на y 100 (левая на x 20, правая на x 970). Над каждой небольшая подпись шрифтом Inter SemiBold 28 px светло-лавандового цвета #E9E4F2: «Живой предпросмотр» над левой панелью и «[ваш бренд] · экспорт в MP4» над правой. Обе панели одновременно проигрывают одни и те же семь планов с одинаковым таймингом и движением. Левая панель показывает новую картинку каждый второй кадр, а правая каждый кадр. Различаются только некоторые слова, как отмечено в планах. Внутри панели всё выкладывается на сцене 1080 x 1080, масштабируемой по размеру. Палитра: светлая страница #FAF9FF; лавандовый #F0EDFF для мягких панелей и свечений; линии #E9E4F2; приглушённый серо-фиолетовый #6B6385 для второстепенного текста; глубокая тушь #1C0B5D для тёмного текста и тёмных поверхностей; почти чёрный #0D0B1E. Акценты: розовый #FB2D89 (основной) и оранжевый #FE9117, с фиолетовым #7C6CF2, бирюзовым #2DD4B0 и жёлтым #FFD23F там, где нужны четыре цвета. Везде используй Inter 400/500/600/700. Мой логотип — значок приложения везде, где появляется логотип. Лучше всего подходит скруглённый квадратный значок, например квадрат глубокой туши с розово-оранжево-белым вихрем и розовым треугольником play.

Техники

Ничто не начинается со статичного кадра. Каждый элемент входит уже в движении по экспоненциальному ease-out и уходит ускоренным движением или ступенью размытия. Размытие движения следует скорости и направлению каждого перемещения. Кросс-фейдов нет: планы меняются жёсткими склейками, склейками через размытие и коротким растворением через размытие, всё на бит. Камера наезжает до 1,2 (ease-in-out, 0,47 с), держится один кадр и отъезжает до 1,04 по ускоряющейся кривой в плане 1, и смещается на 115 px вправо в плане 3. Курсор — чёрная стрелка с белой обводкой; его клики уменьшают его (на 15% или до 0,82 на 0,1 с). Печать идёт со скоростью 27 символов в секунду за белой кареткой. Появления выскакивают с перелётом. Уходы вверх используют вертикальные ступени размытия, а врыв финальной карточки использует горизонтальное размытие.

Музыка

Сделай бодрую фанковую хаус-подложку 124 BPM длиной ровно 12 секунд. Она открывается фильтрованным вступлением под первым планом. Полный грув (бочка четыре четверти, клэпы, слэп-бас, щипковые аккорды) вступает на склейке к значку на 2,39 с. Фильтрованный брейкдаун звучит под одиноким логотипом, а реверберационный хвост идёт после удара финальной карточки. Каждая склейка приходится на бит. Сведи примерно до -14 LUFS с true peak ниже -1 dBTP.

Звук

Поверх музыки добавь такие звуковые эффекты:

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

Референсы

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

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

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

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

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

Типографика

Заголовок поднимается из дымки с размытием, привязанным к скорости

Однострочный заголовок (диск с логотипом, название, тёмная капсула) поднимается примерно на 400 px с экспоненциальным ease-out (expo.out, 1.25 s), пока синяя дымка (#b5cce6) за 0.9 s рассеивается до белой страницы. Размытие следует за скоростью: 16 px в начале, исчезает к 0.5 s. Название появляется на втором кадре уже размытым, капсула — двумя кадрами позже, сдвигаясь на 15 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=Inter:wght@400;500;600;700&display=swap");
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; }
#root { position: relative; width: 1080px; height: 1920px; overflow: hidden; font-family: Inter, sans-serif; background: #fbfcfa; }
.clip { position: absolute; inset: 0; }
#haze { background: linear-gradient(180deg, #b5cce6 0%, #b5cce6 55%, #dbedfc 100%); }
#lockup { display: flex; align-items: center; justify-content: center; gap: 40px; top: 894px; bottom: auto; height: 132px; }
.disc { width: 132px; height: 132px; border-radius: 50%; background: #fbfcfe; box-shadow: 0 0 0 1.5px #e8e8ea; display: flex; align-items: center; justify-content: center; font: 700 52px Inter; color: #1e2f52; }
.name { font: 500 64px/1 Inter; color: #151517; letter-spacing: -0.01em; }
.pill { height: 60px; padding: 0 26px; border-radius: 30px; background: #2f2e2f; color: #fff; font: 500 26px/60px Inter; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1920">
  <div id="haze" class="clip" data-start="0" data-duration="3"></div>
  <div id="lockup" class="clip" data-start="0" data-duration="3">
    <div class="disc">A</div>
    <div class="name">Your Product</div>
    <div class="pill">Get started</div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
// the haze clears to the page while the header rises
tl.fromTo("#haze", { opacity: 1 }, { opacity: 0, duration: 0.92, ease: "power2.inOut" }, 0);
// exponential ease-out rise; blur tracks speed, strongest at the start
tl.fromTo("#lockup", { y: 395 }, { y: 0, duration: 1.25, ease: "expo.out" }, 0);
tl.fromTo("#lockup", { filter: "blur(16px)" }, { filter: "blur(0px)", duration: 0.5, ease: "power3.out" }, 0);
// name on frame 2, already blurred; capsule two frames later, sliding 15 px left as it sharpens
tl.fromTo(".name", { opacity: 0, filter: "blur(6px)" }, { opacity: 1, filter: "blur(0px)", duration: 0.25, ease: "power2.out" }, 0.05);
tl.fromTo(".pill", { opacity: 0, x: 15, filter: "blur(12px)" }, { opacity: 1, x: 0, filter: "blur(0px)", duration: 0.24, ease: "power2.out" }, 0.12);
// a slow drift keeps the frame alive after it lands
tl.to("#lockup", { y: -12, duration: 1.75, ease: "none" }, 1.25);
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 в видео

Камера

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

Стрелка macOS плавно замедляясь (power2.out) въезжает в кадр, за 0.11 s поворачивается на -85 градусов и смотрит вниз при погружении, затем возвращается в вертикаль и увеличивается в 1.55 раза, приземляясь на логотип, где загорается мягкое кольцо. Камера наезжает до 1.2 к логотипу (power2.inOut, 0.47 s), держится один кадр, затем отъезжает до 1.04 с ускоряющимся изингом (power2.in), пока курсор нажимает (уменьшается на 15%), и сразу идёт жёсткая склейка.

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

Показать код

<!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=Inter:wght@400;500;600;700&display=swap");
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; }
#root { position: relative; width: 1080px; height: 1920px; overflow: hidden; font-family: Inter, sans-serif; background: #fbfcfa; }
.clip { position: absolute; inset: 0; }
#cam { transform-origin: 540px 840px; }
#logo { position: absolute; left: 474px; top: 774px; width: 132px; height: 132px; border-radius: 50%; background: #fbfcfe; box-shadow: 0 0 0 1.5px #e8e8ea; display: flex; align-items: center; justify-content: center; font: 700 52px Inter; color: #1e2f52; }
#ring { position: absolute; left: 453px; top: 753px; width: 174px; height: 174px; border-radius: 50%; background: radial-gradient(circle closest-side, #d5f3ff 70%, #f7feff 100%); }
#label { position: absolute; left: 650px; top: 818px; font: 500 39px/1 Inter; color: #151517; }
#cursor { inset: auto; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
#cursor svg { position: absolute; left: -2px; top: -2px; filter: drop-shadow(0 1.5px 2px rgba(0,0,0,0.35)); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.6" data-width="1080" data-height="1920">
  <div id="cam" class="clip" data-start="0" data-duration="2.6">
    <div id="ring"></div>
    <div id="logo">A</div>
    <div id="label">Your Product</div>
  </div>
  <div id="cursor" class="clip" data-start="0" data-duration="2.6"><svg viewBox="0 0 28 37" width="32" height="42"><path d="M2 2V31.2L9.3 24.5L14.1 35.6L19.3 33.4L14.6 22.6H24.4Z" fill="#000" stroke="#fff" stroke-width="2.2" stroke-linejoin="round"/></svg></div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
gsap.set("#cursor", { x: 891, y: 693, opacity: 0 });
gsap.set("#ring", { opacity: 0, scale: 0.88 });
tl.to("#cursor", { opacity: 1, duration: 0.03 }, 0.2);
// glide left, decelerating
tl.to("#cursor", { x: 768, y: 678, duration: 0.55, ease: "power2.out" }, 0.2);
// turn to face the dive, then dive down and in
tl.to("#cursor", { rotation: -85, duration: 0.11, ease: "power1.inOut" }, 0.8);
tl.to("#cursor", { keyframes: [{ x: 794, y: 729, duration: 0.17 }, { x: 791, y: 814, duration: 0.13 }, { x: 664, y: 890, duration: 0.1 }], ease: "none" }, 0.8);
// land: upright again, grow on hover, the ring lights
tl.to("#cursor", { rotation: 0, scale: 1.55, duration: 0.07, ease: "power2.out" }, 1.15);
tl.to("#ring", { opacity: 1, scale: 1, duration: 0.15, ease: "power2.out" }, 1.1);
tl.to("#cursor", { x: 589, y: 852, duration: 0.12, ease: "power2.out" }, 1.2);
tl.to("#cursor", { x: 555, y: 831, duration: 0.38, ease: "power1.out" }, 1.32);
// camera: push in, hold a frame, pull back accelerating while the cursor presses
tl.to("#cam", { scale: 1.2, duration: 0.467, ease: "power2.inOut" }, 0.87);
tl.to("#cam", { scale: 1.04, duration: 0.333, ease: "power2.in" }, 1.37);
tl.to("#cursor", { scale: 1.32, duration: 0.066, ease: "power2.in" }, 1.64);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

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

Фигуры

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

На жёсткой склейке иконка приложения уменьшается с 276 до 178 px (expo.out, 0.47 s), а четыре скруглённых квадрата, стартуя с опережением 32 градуса на радиусе 222 px и с motion blur, занимают позиции креста (expo.out, 0.9 s); за иконкой за 0.2 s вырастает двухтоновый серый диск. После короткой паузы квадраты складываются в ряд справа и уменьшаются, а иконка сжимается до 70 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=Inter:wght@400;500;600;700&display=swap");
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; }
#root { position: relative; width: 1080px; height: 1920px; overflow: hidden; font-family: Inter, sans-serif; background: #fbfcfa; }
.clip { position: absolute; inset: 0; }
#disc-out, #disc-in { position: absolute; left: 440px; top: 860px; width: 200px; height: 200px; border-radius: 50%; }
#disc-out { background: #e7e9eb; } #disc-in { background: #dddfe0; }
#orbit { position: absolute; left: 540px; top: 960px; width: 0; height: 0; }
.sq { position: absolute; left: -46px; top: -46px; width: 92px; height: 92px; border-radius: 22px; }
#sq-top { background: linear-gradient(140deg, #5a8cff, #2f6bff 70%); transform: translateY(-222px); }
#sq-right { background: linear-gradient(140deg, #7adcf6, #3cc8f0 70%); transform: translateX(222px); }
#sq-bottom { background: linear-gradient(140deg, #80e4bd, #4ed6a0 70%); transform: translateY(222px); }
#sq-left { background: #ffffff; box-shadow: 0 4px 14px rgba(0,0,0,0.07); transform: translateX(-222px); }
#icon { position: absolute; left: 401px; top: 821px; width: 276px; height: 276px; border-radius: 28%; background: linear-gradient(160deg, #294376, #1e2f52); color: #fff; font: 700 110px Inter; display: flex; align-items: center; justify-content: center; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.2" data-width="1080" data-height="1920">
  <div id="stage" class="clip" data-start="0" data-duration="2.2">
    <div id="disc-out"></div><div id="disc-in"></div>
    <div id="orbit"><div class="sq" id="sq-top"></div><div class="sq" id="sq-right"></div><div class="sq" id="sq-bottom"></div><div class="sq" id="sq-left"></div></div>
    <div id="icon">A</div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
// the icon lands big and shrinks fast
tl.fromTo("#icon", { scale: 1, filter: "blur(4px)" }, { scale: 0.645, filter: "blur(0px)", duration: 0.47, ease: "expo.out" }, 0);
// squares arrive 32 degrees ahead and settle into a cross; each counter-rotates to stay upright
tl.fromTo("#orbit", { rotation: 32 }, { rotation: 0, duration: 0.9, ease: "expo.out" }, 0);
tl.fromTo(".sq", { rotation: -32, scale: 1.4, filter: "blur(7px)" }, { rotation: 0, scale: 1, filter: "blur(0px)", duration: 0.9, ease: "expo.out" }, 0);
// the grey disc grows behind the icon
tl.fromTo("#disc-out", { scale: 0 }, { scale: 1.58, duration: 0.21, ease: "power2.out" }, 0.065);
tl.fromTo("#disc-in", { scale: 0 }, { scale: 1.27, duration: 0.21, ease: "power2.out" }, 0.065);
// fold into a row on the right while the icon shrinks under a blur ramp
tl.to("#sq-top", { x: 91, y: -84, scale: 0.58, duration: 0.25, ease: "power2.in" }, 0.75);
tl.to("#sq-bottom", { x: 156, y: 113, scale: 0.58, duration: 0.25, ease: "power2.in" }, 0.75);
tl.to("#sq-left", { x: 82, y: -7, scale: 0.58, duration: 0.25, ease: "power2.in" }, 0.75);
tl.to("#sq-right", { x: 239, scale: 0.58, duration: 0.25, ease: "power2.in" }, 0.75);
tl.to("#icon", { scale: 0.26, x: -8, filter: "blur(4px)", duration: 0.25, ease: "power2.in" }, 0.75);
tl.to(["#orbit", "#disc-out", "#disc-in"], { filter: "blur(5px)", duration: 0.25, ease: "power2.in" }, 0.75);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

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

Композиция

Стеклянное поле запроса выскакивает из иконки в строке меню и печатает текст

Курсор кликает по иконке в строке меню (уменьшается до 0.82 на 0.1 s); матовое поле запроса масштабируется с 0.18 до 1 из иконки с перелётом (back.out(1.5), 0.19 s), размытие падает с 9 px до 0, а камера смещается на 115 px, чтобы кадрировать его. Текст печатается со скоростью 27 символов в секунду за белой кареткой; в нижнем ряду — значки звуковой волны, вложения и изображения и круглая кнопка отправки.

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

Показать код

<!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=Inter:wght@400;500;600;700&display=swap");
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; }
#root { position: relative; width: 1080px; height: 1920px; overflow: hidden; font-family: Inter, sans-serif; background: #fbfcfa; }
.clip { position: absolute; inset: 0; }
#desk { background: #fbfcfa; }
#screen { position: absolute; left: -300px; top: 760px; width: 1366px; height: 1300px; background: #050506; border-radius: 0 118px 0 0; padding: 48px 46px 0; box-sizing: border-box; }
#menu { height: 68px; display: flex; align-items: center; gap: 13px; padding-left: 710px; background: linear-gradient(180deg, #1c2b40, #2e4f84); }
#screen::after { content: ""; position: absolute; left: 46px; right: 46px; top: 116px; bottom: 0; background: linear-gradient(180deg, #2e4f84, #3d659b); }
#icon { width: 46px; height: 46px; border-radius: 10px; background: rgba(255,255,255,0.18); }
.dot { width: 38px; height: 38px; border-radius: 50%; }
#clock { color: #fff; font: 500 30px Inter; margin-left: 40px; }
#box { position: absolute; left: 65px; top: 913px; width: 740px; height: 226px; border-radius: 56px; background: rgba(200,220,255,0.2); border: 1.5px solid rgba(255,255,255,0.42); box-shadow: 0 14px 44px rgba(8,16,60,0.28); transform-origin: 370px -71px; z-index: 2; }
#text { position: absolute; left: 64px; top: 48px; font: 400 30px/36px Inter; color: #fff; white-space: nowrap; }
#text::after { content: ""; display: inline-block; width: 2px; height: 32px; background: #fff; vertical-align: -6px; margin-left: 2px; }
#send { position: absolute; left: 651px; top: 136px; width: 48px; height: 48px; border-radius: 50%; background: #2f6bff; color: #fff; font: 600 26px/48px Inter; text-align: center; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1920">
  <div id="desk" class="clip" data-start="0" data-duration="3">
    <div id="screen"><div id="menu"><div id="icon"></div><span class="dot" style="background:#2f6bff"></span><span class="dot" style="background:#3cc8f0"></span><span class="dot" style="background:#4ed6a0"></span><span id="clock">9:41</span></div></div>
    <div id="box"><div id="text"></div><div id="send">&uarr;</div></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const prompt = "Make a short video for my app";
const typed = { n: 0 };
gsap.set("#box", { scale: 0.18, opacity: 0, filter: "blur(9px)" });
// click on the icon
tl.fromTo("#icon", { scale: 1 }, { scale: 0.82, duration: 0.06, yoyo: true, repeat: 1, ease: "power1.inOut" }, 0.2);
// the box springs out of the icon, blur ramping down, while the camera pans to frame it
tl.to("#box", { opacity: 1, duration: 0.055, ease: "none" }, 0.32);
tl.to("#box", { scale: 1, duration: 0.19, ease: "back.out(1.5)" }, 0.32);
tl.to("#box", { filter: "blur(0px)", duration: 0.18, ease: "power2.out" }, 0.32);
tl.fromTo("#desk", { x: 0 }, { x: 115, duration: 0.3, ease: "sine.inOut" }, 0.3);
// typing at 27 characters a second
tl.to(typed, { n: prompt.length, duration: prompt.length / 27, ease: "none", onUpdate: () => { document.getElementById("text").textContent = prompt.slice(0, Math.floor(typed.n)); } }, 0.35);
// a slow drift up while it types
tl.to("#desk", { y: -24, duration: 2.2, ease: "none" }, 0.6);
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 в видео

Переход

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

Уходящий кадр дрейфует вверх и исчезает под вертикальной рампой размытия (направленное SVG-размытие от 0 до 16 px за 0.19 s, power2.in), пока светло-голубая вуаль (#e1eef9) поднимается до 75%. На склейке входящая страница стартует на 291 px ниже, на 85% залитая синим, и прокручивается вверх с экспоненциальным изингом (постоянная времени 0.2 s, expo.out за 1.4 s) с вертикальным размытием, привязанным к скорости; вуаль уходит за 0.15 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=Inter:wght@400;500;600;700&display=swap");
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; }
#root { position: relative; width: 1080px; height: 1920px; overflow: hidden; font-family: Inter, sans-serif; background: #fbfcfa; }
.clip { position: absolute; inset: 0; }
#shotA { background: #fbfcfa; filter: url(#vb); }
.slab { position: absolute; left: 0; right: 0; top: 900px; height: 1020px; background: linear-gradient(180deg, #050506 0 48px, #1c2b40 48px 116px, #3d659b 116px); }
#shotB { background: #fbfcfa; }
#page { position: absolute; left: 121px; right: 60px; top: 640px; filter: url(#vb); }
#page p, #page h2 { margin: 0 0 16px; font: 400 42px/58px Inter; color: #a9a9a9; }
#page h2 { font-weight: 500; color: #8f8f8f; }
#page b { color: #111; font-weight: 600; }
#wash { background: #e1eef9; opacity: 0; pointer-events: none; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.2" data-width="1080" data-height="1920">
  <svg width="0" height="0" style="position:absolute"><filter id="vb" x="-5%" y="-20%" width="110%" height="140%"><feGaussianBlur stdDeviation="0 0"/></filter></svg>
  <div id="shotA" class="clip" data-start="0" data-duration="0.6"><div class="slab"></div></div>
  <div id="shotB" class="clip" data-start="0.6" data-duration="1.6"><div id="page"><p>Chapter 2</p><h2>Pick one reference</h2><p>Download it and count its frames.</p><p>Then rebuild it <b>frame for frame</b> with</p><p>your colours and your words.</p></div></div>
  <div id="wash" class="clip" data-start="0" data-duration="2.2"></div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const blurY = document.querySelector("#vb feGaussianBlur");
// outgoing: drift up, vertical blur ramp, wash rises
tl.to(".slab", { y: -40, duration: 0.6, ease: "power1.in" }, 0);
tl.fromTo(blurY, { attr: { stdDeviation: "0 0" } }, { attr: { stdDeviation: "4 16" }, duration: 0.19, ease: "power2.in" }, 0.41);
tl.fromTo("#wash", { opacity: 0 }, { opacity: 0.75, duration: 0.24, ease: "power1.in" }, 0.36);
// incoming: the page scrolls up from 291 px with an exponential ease; blur falls with its speed
tl.set("#wash", { opacity: 0.85 }, 0.6);
tl.to("#wash", { opacity: 0, duration: 0.15, ease: "power2.out" }, 0.6);
tl.fromTo("#page", { y: 291 }, { y: 0, duration: 1.4, ease: "expo.out" }, 0.6);
tl.fromTo(blurY, { attr: { stdDeviation: "0 10" } }, { attr: { stdDeviation: "0 0" }, duration: 0.35, ease: "power2.out", immediateRender: false }, 0.6);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Превью техники «Карточка поднимается на дрейфующей камере, затем растворяется в размытии в стопку карточек с гигант…» — На 0:06 в видео

Переход

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

Сильно размытая карточка появляется у нижнего края и поднимается с экспоненциальным изингом (128 px при постоянной времени 0.08 s) на фоне равномерного дрейфа вверх 158 px/s; страница позади тускнеет до 45% и размывается на 3 px. Карточка ускоряется вверх и уменьшается до 0.9, размываясь; через два кадра следующего плана она ещё видна на 45% под двумя стопкой карточек, которые приходят размытыми (11 px), на 165 px ниже и на 15% крупнее, устаканиваются за 0.3 s и продолжают дрейфовать вверх. На каждой карточке гигантский белый заголовок (126-174 px, жирный, 60% непрозрачности), обрезанный нижним краем.

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

Показать код

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Карточка поднимается на дрейфующей камере, затем растворяется в размытии в стопку карточек с гигант…</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; }
#root { position: relative; width: 1080px; height: 1920px; overflow: hidden; font-family: Inter, sans-serif; background: #fbfcfa; }
.clip { position: absolute; inset: 0; }
#page { padding: 600px 121px 0; }
#page p { margin: 0 0 16px; font: 400 42px/58px Inter; color: #a9a9a9; }
#card { position: absolute; left: 225px; top: 794px; width: 627px; height: 532px; border-radius: 51px; overflow: hidden; background: linear-gradient(170deg, #284a8a, #5f8cc6); }
.inner { position: absolute; left: 40px; top: 182px; width: 507px; height: 156px; border-radius: 6px; background: #fff; padding: 24px 26px; font: 600 38px Inter; color: #111; }
#caption { position: absolute; left: 209px; width: 662px; top: 1396px; text-align: center; font: 600 37px Inter; color: #111; }
.tile { position: absolute; left: 272px; width: 534px; height: 343px; border-radius: 51px; overflow: hidden; background: linear-gradient(170deg, #284a8a, #5f8cc6); }
.giant { position: absolute; left: 18px; top: 231px; font: 700 134px/1 Inter; color: rgba(255,255,255,0.6); letter-spacing: -0.035em; }
#stack { transform-origin: 540px 941px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1920">
  <div id="page" class="clip" data-start="0" data-duration="3"><p>Some text on a page behind the card.</p><p>More lines that dim when the card arrives.</p><p>A third line of body copy.</p></div>
  <div id="rise" class="clip" data-start="0" data-duration="1.25"><div id="card"><div class="inner">A short title</div></div><div id="caption">Card caption</div></div>
  <div id="stack" class="clip" data-start="1.2" data-duration="1.8"><div class="tile" style="top:600px"><div class="giant">Launch</div></div><div class="tile" style="top:979px"><div class="giant">Sound</div></div></div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
// the card pops in low and blurred, rises on an exponential ease plus a steady drift
tl.fromTo("#rise", { y: 199, filter: "blur(10px)" }, { y: 63, filter: "blur(0px)", duration: 0.2, ease: "expo.out" }, 0);
tl.to("#rise", { y: -20, duration: 0.65, ease: "none" }, 0.2);
tl.fromTo("#page", { opacity: 1, filter: "blur(0px)" }, { opacity: 0.45, filter: "blur(3px)", duration: 0.14, ease: "power2.out" }, 0);
// it accelerates up, shrinks and blurs out
tl.to("#rise", { y: -94, scale: 0.9, filter: "blur(8px)", duration: 0.35, ease: "power2.in" }, 0.85);
tl.set("#rise", { opacity: 0.45 }, 1.2);
// the stack arrives blurred, low and large, settles, then keeps drifting up
tl.fromTo("#stack", { y: 165, scale: 1.15, opacity: 0.55, filter: "blur(11px)" }, { y: 54, scale: 1.03, opacity: 1, filter: "blur(1px)", duration: 0.2, ease: "power2.out" }, 1.2);
tl.to("#stack", { y: 0, scale: 1, filter: "blur(0px)", duration: 0.45, ease: "power2.out" }, 1.4);
tl.to("#stack", { y: -60, duration: 1.0, ease: "power1.in" }, 1.85);
tl.to("#page", { opacity: 0, duration: 0.07, ease: "none" }, 1.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:10 в видео

Типографика

Светящийся логотип-слово врывается на чёрном и медленно отъезжает

На жёсткой склейке к почти чёрному фону с мягким радиальным свечением белый логотип-слово с двухслойным свечением (text-shadow 10 px и 26 px) стартует с размера 3.85x с горизонтальным направленным размытием (14 px, затухает за 0.07 s) и оседает до 1x примерно за 1 s по кривой, которая всё время замедляется (2.86x через 33 ms, 1.73x через 150 ms, 1.14x через 0.48 s). Затем медленно отъезжает: 0.96x к 1.5 s и ускоряется до 0.72x на последнем кадре.

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

Показать код

<!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=Inter:wght@400;500;600;700&display=swap");
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; }
#root { position: relative; width: 1080px; height: 1920px; overflow: hidden; font-family: Inter, sans-serif; background: #fbfcfa; }
.clip { position: absolute; inset: 0; }
#end { background: radial-gradient(560px 360px at 540px 960px, #3a3a3b 0%, #2b2b2c 28%, #161618 62%, #060608 100%), #030305; }
#word { position: absolute; left: 0; right: 0; top: 922px; text-align: center; font: 600 74px/1 Inter; color: #fff; letter-spacing: -0.02em; white-space: nowrap; text-shadow: 0 0 10px rgba(255,255,255,0.85), 0 0 26px rgba(255,255,255,0.45); filter: url(#hb); transform-origin: 540px 50%; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1080" data-height="1920">
  <svg width="0" height="0" style="position:absolute"><filter id="hb" x="-30%" y="-10%" width="160%" height="120%"><feGaussianBlur stdDeviation="0 0"/></filter></svg>
  <div id="end" class="clip" data-start="0" data-duration="2"><div id="word">yourbrand.app</div></div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const blurX = document.querySelector("#hb feGaussianBlur");
// punch-in: huge to 1x along a curve that keeps slowing
tl.fromTo("#word", { scale: 3.85 }, { keyframes: [{ scale: 2.86, duration: 0.033 }, { scale: 2.0, duration: 0.067 }, { scale: 1.73, duration: 0.05 }, { scale: 1.3, duration: 0.167 }, { scale: 1.14, duration: 0.167 }, { scale: 1.056, duration: 0.166 }, { scale: 1.0, duration: 0.334 }], ease: "none" }, 0);
// horizontal blur dies out fast
tl.fromTo(blurX, { attr: { stdDeviation: "14 0" } }, { attr: { stdDeviation: "0 0" }, duration: 0.3, ease: "expo.out" }, 0);
// slow pull-back, accelerating into the last frame
tl.to("#word", { scale: 0.96, duration: 0.5, ease: "none" }, 0.98);
tl.to("#word", { scale: 0.72, duration: 0.5, ease: "power2.in" }, 1.48);
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>

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

Превью промпта «Погружение в 3D-стену приложений: демо продукта в три шага»

Погружение в 3D-стену приложений: демо продукта в три шага

<direction> Сделай горизонтальное демо продукта 1280x720 длиной 31 секунда, целиком построенное на анимации, со звуком. Оно идёт как одно непрерывное движение камеры без склеек и зациклено бесшовно: последний кадр совпадает с первым. Идея: стена экранов приложений, наклонённая назад в 3D, камера ныряет в один экран, этот экран становится окном приложения, а три пронумерованных шага показывают, что делает продукт, перед финальной заставкой с моим логотипом. Стиль чистый и современный: плоский векторный интерфейс, нарисованный тобой, мягкая глубина, много свободного места, спокойное и точное движение. Избегай резких склеек, реальной съёмки, стоковых изображений, пёстрого фона, прыгающей или мультяшной анимации и всего, что ломает зацикливание. </direction> <structure> Начало, примерно 0–4 с: стена экранов приложений, наклонённая назад в 3D, медленно дрейфует. Поверх неё по центру заголовок вроде "Your ideas, in motion" (замени на свой), затем он растворяется в размытии. Погружение, примерно 4–6 с: камера въезжает в один экран, он увеличивается, превращается в окно приложения и встаёт сбоку кадра. Шаг 01, примерно 6–13 с: маленький номер шага "01" и заголовок вроде "Sketch your idea" (замени на свой) выезжают вверх построчно рядом с окном. Внутри окна по холсту проводится мазок кисти. Шаг 02, примерно 13–20 с: предыдущий текст уезжает вверх и исчезает, затем так же выезжают "02" и заголовок вроде "Chat to shape it". Содержимое окна меняется соответственно. Шаг 03, примерно 20–26 с: "03" и заголовок вроде "Export in one click" появляются так же, а в окне терминал печатает строки текста с мигающим курсором. Финальная заставка, примерно 26–31 с: мой логотип и "[your brand]" с короткой подписью вроде "Make it move" (замени на свою). Затем камера отъезжает обратно к наклонённой стене экранов, чтобы последний кадр совпал с первым и видео зациклилось. </structure> <composition> Держи окно крупным, примерно 60% ширины кадра, с одной стороны. Текстовую колонку размести с другой стороны, выровняв по левому краю. Номер шага сделай маленьким, акцентного цвета, над заголовком. Заголовки набери жирным чистым гротеском, не больше двух коротких строк, с более лёгким начертанием для поддерживающей строки. Используй мой логотип как иконку приложения в рамке окна и по центру финальной заставки. Используй цвета по ролям из моего бренда, например почти чёрный фон (#0E0F13), светлый белый текст (#F4F4F6), один яркий акцент для номеров шагов, подсветок и мазка кисти и приглушённый серый для рамки окна и второстепенного интерфейса. Держи стену экранов в той же палитре с пониженным контрастом, чтобы заголовок читался поверх неё. </composition> <techniques> Всё происходит внутри одного непрерывного движения камеры: медленный дрейф над 3D-стеной, наклонённой назад примерно на 25 градусов, с мягким параллаксом между экранами. Заголовок уходит с нарастающим размытием и затуханием примерно за 0,6 с. Погружение — плавный ease-in-out наезд на один экран, пока он увеличивается и выпрямляется в окно приложения. Строки заголовка выезжают вверх примерно на 30 px с появлением, со сдвигом около 0,1 с, с мягким ease-out. Уходящий текст уезжает вверх и исчезает до появления следующего шага. Содержимое окна меняется на месте короткими перекрёстными затуханиями и сдвигами. Мазок кисти рисуется постепенно. Терминал печатает символ за символом с мигающим курсором. На финальной заставке логотип мягко увеличивается, затем камера плавно отъезжает к начальной стене для бесшовного цикла. </techniques> <music> Используй инструментальный спокойный synthwave-трек примерно 100 BPM, ровно 31 секунда, с монтажными склейками и акцентами по сетке ритма. Под заголовком звучит тёплый pad. Бит вступает с мягким буммом, когда камера ныряет в окно. Трек слегка поднимается на шаге 02 и редеет под терминалом. Райзер подводит к финальной заставке, и трек разрешается так, чтобы возврат к началу был бесшовным. Целься примерно в -14 LUFS с true peak ниже -1 dBTP. </music> <sound> Добавь свист (whoosh) при погружении в окно, мягкий UI-тик, когда каждая строка заголовка встаёт на место, лёгкий шорох кисти на мазке в шаге 01 и тихий стук клавиш под печать в терминале. Добавь мягкий удар или звон, когда логотип встаёт на финальной заставке. Держи эффекты тише музыки, без закадрового голоса. </sound> <references> Похоже на стильную анимацию запуска или обзора приложения: камера летит над 3D-сеткой экранов интерфейса в чистое окно продукта, с пронумерованными шагами функций, как в современных демо на лендингах софта. </references>

Превью промпта «Промо для лендинга с переходами через объекты»

Промо для лендинга с переходами через объекты

<direction> Сделай 15-секундный горизонтальный моушн-графический промо-ролик 1920x1080 для [your brand], построенный так, будто лендинг оживает. Монтаж под электронный трек 128 BPM без закадрового голоса. Идея в том, что здесь никогда нет простой склейки: каждая сцена передаёт эстафету следующей через объект (точку, выбор в барабане, телефон, выигравшую плитку). Сохрани чистый светлый стиль продуктового UI: светлые фоны, скруглённые пилюли, карточки, телефон, дашборд и видеостена, все подписи — тёмным текстом на белых плашках, а мои фирменные цвета используются по ролям. Избегай резких склеек, наплывов, голоса, белого текста на светлом или полосатом фоне и подписей, которые перекрывают кольца или соседние фигуры. </direction> <structure> Пять битов примерно равной длины, около 3 секунд каждый, каждая передача попадает в долю. 1. Открытие: одна точка появляется в центре и вырастает в горизонтальную пилюлю с рядом кругов: маленькие портреты и иконки, например "Aa", простые фигуры и куб. Каждая иконка полностью видна и не закрыта соседним кругом. Камера отъезжает и открывает заголовок из двух строк, обе строки по центру. Первая строка вроде "No … keyframes." (замени на свою). Последнее слово заголовка постоянно перебирает варианты, как барабан игрового автомата. 2. Зум ныряет в вертящийся барабан портретов авторов и карточек. Барабан замедляется и останавливается на одном выборе, который подсвечивается. 3. Выбор превращается в телефон, и вокруг него веером раскрываются карточки функций. На одной карточке написано "Edit in words", крупное число "03" и маленький тег "Live preview" прямо рядом с числом (замени на свои функции). Подписи карточек лежат на белых плашках. 4. Резкий свайп-пэн ведёт к дашборду из видеоплиток с подписями на белых плашках. Он оценивает их и выбирает выигравшее видео, которое подсвечивается. 5. Выигравшая плитка раскрывается в наклонную стену видео с подписями на белых плашках. Затем стена складывается в мой логотип для финальной карточки, рядом с логотипом на белой плашке "[your website]". </structure> <composition> Центрированная симметричная композиция для заголовка и финальной карточки с логотипом. Элементы UI расположены как на настоящем лендинге: ряд пилюль, карточки с крупными числами и маленькими тегами, макет телефона, сетка дашборда и стена в перспективе. Используй мои фирменные цвета по ролям: тона фона (светлые, с некоторыми полосатыми заливками), один акцент для подсветки, выделений и колец и тёмный цвет текста. Каждая подпись на карточках, плитках и стене — тёмный текст на белой скруглённой плашке, чтобы читалась на любом фоне. Используй одно чистое семейство без засечек: жирный заголовок, подписи обычного начертания и жирные подписи кнопок. Оставь щедрые отступы, чтобы текст не касался колец или краёв. </composition> <techniques> Каждый переход — это объект, превращающийся в следующую сцену, никогда не склейка. Точка увеличивается в пилюлю с плавным ease-out, а круги выскакивают с небольшой задержкой друг за другом. Отъезд камеры — плавное уменьшение масштаба, открывающее заголовок. Меняющееся слово — вертикальный слот-ролл, перебирающий слова по кругу. Зум проходит сквозь пилюлю в барабан. Барабан быстро вращается и замедляется длинным ease-out, чтобы точно остановиться на выбранном. Выбор масштабируется и перестраивается в телефон, а карточки веером раскрываются вокруг него с поочерёдным поворотом и скольжением. Свайп-пэн — быстрое горизонтальное движение с размытием в движении и резким in-out. Выбор в дашборде — кольцо подсветки и увеличение победителя. Победитель разворачивается в наклонную 3D-стену, которая складывается и схлопывается в логотип с финальной посадкой. Все ключевые движения и остановки попадают в сетку бита. </techniques> <music> Сделай оригинальный бодрый электронный трек 128 BPM длиной ровно 15 секунд с чёткой дугой: лёгкое начало, нарастание через сцены с барабаном и телефоном, дроп около свайп-пэна и чистое завершение на логотипе. Положи его на сетку бита монтажа, с акцентами, написанными поверх для каждой передачи, райзером перед дропом и финальным ударом, когда стена складывается в логотип. Мастеринг примерно -14 LUFS, true peak ниже -1 dBTP. </music> <sound> Без закадрового голоса. Добавь вуши на зуме и свайп-пэне, короткий тик-и-стоп, когда барабан останавливается, и мягкий удар на логотипе. Держи все звуки тише музыки и в долю. </sound> <references> Лендинг SaaS, анимированный в продуктовое промо: карточки UI, макет телефона, аналитический дашборд и видеостена, в стиле современных роликов о запуске приложений с бесшовными переходами от объекта к объекту. </references>

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

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

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

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

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

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