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

RU

Открыть beta

Simple Motion

Бренд-ролик «Манифест прыгающего мяча»

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

Код промпта MOVОпубликован 11 ноября 2026 г.Использовали 3 раза

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

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

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

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

Замысел

Сделай вертикальный бренд-ролик длиной 19,2 секунды (1080x1920, 30 fps) с бесшовным зацикливанием. Это чистая моушн-графика, смонтированная под бит 150 BPM (0,4 с на удар, 12 тактов). Идея: один глянцевый шар — герой всего фильма. Он прыгает по манифесту-хуку «слово на удар», становится грузом маятника, превращается в лампу, которая освещает страницу, пережидает быстрый монтаж за названием твоего бренда и остаётся один на финальной карточке ровно там, где начинается первый кадр. Стиль: смелая редакционная типографика на плоских фонах цвета глубокой ночи и бумаги, розово-оранжевый градиентный акцент и фиолетовый второй акцент. Темп: безумный первые 3,2 с, затем две длинные дышащие сцены на пульсе в два удара, 3,2 с всплеска монтажа на восьмых, 2 с кульминации и тихая точка зацикливания. Избегай съёмок, закадрового голоса, мягких наплывов и любых склеек мимо бита: каждая склейка приходится на удар или полудар. Слова акцентного цвета должны быть того же начертания ExtraBold, что и остальные, никогда не тоньше.

Структура

Хук, 0–3,2 с. Тёмный кадр. Шар (140 px) стартует в центре и падает к линии пола примерно на y 1516, уменьшаясь до 88 px, и приземляется на 0,37 с. С 0,4 с появляется по одному слову на удар, затем на полудар: «мы» (0,4), «не» (0,8), «просто» (1,2), «промптим.» (1,6), «мы» (2,0), «режиссируем.» (2,2, акцентным градиентом), «печатаем» (2,6), «свет» (2,8), «глубину» (3,0). Замени их своими строками манифеста. Фон переключается между тёмным и бумажным на каждой склейке. На «свет» и «глубину» шар улетает вверх и за край в левом верхнем углу.
Маятник, 3,2–8,0 с. Бумажный фон. Шар становится грузом (112 px) тонкого тёмного стержня, подвешенного к оси в 380 px над верхним центром (длина плеча 1317 px). Размытая тень стержня и груза смещена вправо. Двустрочный заголовок капсом стоит посередине и меняется при каждом взмахе: «СДЕЛАНО / ВРУЧНУЮ?» → «СДЕЛАНО / КОДОМ.» (вторая строка акцентом) → «НИКАКОГО / ТАЙМЛАЙНА.» → «НИКАКИХ / КЛЮЧЕВЫХ КАДРОВ.» → «ТОЛЬКО / СЛОВА.» (акцент) → «И / СВЕТ.». Это примеры, замени их. На 7,2 с свет гаснет за линией стержня, а последний взмах тянет темноту через весь кадр.
Лампа, 8,0–12,8 с. Тёмный #14112E. Шар становится светящейся лампой, конус света которой открывает бумажную страницу. На странице написано «СВЕТ — / ЭТО ВСЕГО / ЛИШЬ МАТЕМАТИКА.» капсом (пример; последняя строка фиолетовая) и небольшой логотип около y 1430: градиентная точка и твой логотип-надпись чернилами. С 12,27 с вся страница освещена.
Монтаж, 12,8–16,0 с. На дропе «[твой бренд]» шрифтом Anton (около 260 px высотой, по центру) неподвижен, а мир позади него меняется на каждую восьмую (0,2 с). Миры по порядку:

глянцевый мраморный розово-оранжевый 3D-блоб с хорошо видимым краем на сером
тот же блоб ближе
плоские блоки: фиолетовые, тёмные и бумажные квадраты и акцентный градиент
гипнотические чернильно-бумажные кольца, которые приближаются и вращаются
пустая бумажная бирка, качающаяся на нитке на фиолетовом
поле тёмных клавиш сверху, несколько розовых и оранжевых клавиш нажимаются
тор из чётких полутоновых точек на тёмном
плоский фиолетовый с едва заметной сеткой
игрушечные 3D-фигуры, кувыркающиеся на тёмно-сливовом (кубы, шары, кольца, конусы и капсулы цветов палитры плюс жёлтый #FFD23F)
те же фигуры, размытые, на пастельно-розовом
стеклянный телефон на сером
блоб на фиолетовом
пол из белых кубов, из которого растут розовые и оранжевые колонны
полутоновый тор из чернильных точек на белом
плоский коралловый с сеткой

Воксельный финал, 16,0–18,2 с. Фиолетовый фон. Короткое слово (твой продукт или вторая половина названия бренда) собирается из маленьких кубов. Полностью сформировано к 16,6 с, дышит, затем разлетается с 17,72 с, пока из центра открывается чёрная дыра и заполняет кадр к 18,17 с.
Финальная карточка, 18,2–19,2 с. Тёмная. Шар вырастает из ничего в центре (142 px, x 539, y 959). Твой логотип-надпись в розово-оранжевом градиенте появляется под ним на 18,1 с, держится и исчезает на 18,85 с. Остаётся только шар ровно там, где начинается первый кадр, поэтому цикл бесшовный.

Композиция

Палитра:

глубокая ночь #0C0A1E и чуть светлее #14112E для тёмных сцен
бумага #F2EFFA для светлых
чернила #1C0B5D для текста на бумаге
розово-оранжевый акцентный градиент #FB2D89 → #FE9117
фиолетовый второй акцент #7C4DFF
жёлтый #FFD23F только для игрушечных фигур
Слова хука цвета бумаги на тёмных склейках и цвета чернил на бумажных.
Типографика:
слова и заголовки шрифтом Manrope ExtraBold с плотным трекингом (-0,035em для заголовков капсом)
название бренда в монтаже шрифтом Anton
небольшой ник «@yourbrand» (замени) шрифтом JetBrains Mono в левом верхнем углу, 56 px от левого края и 246 px от верха, на протяжении всего фильма
Заголовок маятника: первая строка около 145 px высоты заглавных, вторая около 128 px, по центру.
Шар — глянцевая сфера: мягкий белый блик вверху слева на теле с градиентом оранжевый → розовый → глубокий пурпурный.
Название бренда в монтаже: три слоя (жёсткая тень со смещением 9 px, обводка 16 px и заливка). Оно белое с тёмной обводкой на тёмных или пёстрых мирах и тёмное с белой обводкой на светлых.
Воксельное слово: одна строка, около 430 px высотой и 890 px шириной. Первая буква с градиентом от розового к оранжевому сверху вниз; остальные бумажно-белые.
Финальная карточка: шар по центру; градиентный логотип-надпись около y 1225, шириной около 620 px.

Техники

Хук:

Каждое слово появляется за четыре кадра с сильным ease-out (power3.out). Входы чередуются: трекинг, сходящийся от полуэма, падение с увеличением от 125% и на 320 px ниже, вертикальное растяжение от 260% с опорой на базовую линию и выезд слева с 835 px за кадром.
Смена фонов — жёсткие склейки.
На каждой склейке шар на один кадр раздувается до 125% на месте, а в следующем кадре находится на вершине прыжка. За пять кадров он перетекает в другую точку покоя (x 287 или 788), уменьшаясь обратно.
Маятник:
Он качается на ±23,6° с power3.inOut за 0,34 с, каждый взмах центрирован на каждом втором ударе (3,6, 4,4, 5,2, 6,0, 6,8, 7,6 с), и замирает в крайних точках.
Три блёклые копии с интервалом в кадр тянутся за грузом.
Стержень хорошо виден, его тень заметна.
Каждый взмах стирает заголовок, открывая следующий. Новый заголовок показан со стороны, которую груз уже прошёл, а старый — с другой, с помощью прямоугольных inset-масок с тем же easing.
На 7,2 с всё за линией стержня темнеет, а последний взмах тянет темноту через кадр.
Лампа:
Шар за треть секунды скользит в центр и начинает светиться, с мягким оранжево-розовым ореолом около 220 px вокруг.
Конус света раскрывается из шара узким сектором в 7°, направленным строго вверх. Он качается вниз влево и вправо, расширяясь по мере движения шара: примерно до x 800, y 1090, затем x 900, y 975, затем вверх до x 760, y 560.
Конус останавливается над словами, шириной 120° и направленный вниз.
Конус — клиновидная маска с вершиной в шаре, открывающая бумажную страницу под тьмой. Копия страницы с прозрачностью 28%, шире на 4,5° с каждой стороны, создаёт жёсткую серую полутень.
С 12,27 с конус раскрывается до 360° за 0,33 с с in-out easing.
Монтаж: жёсткие склейки каждые 0,2 с за неподвижным названием. Каждый мир движется в своём слоте: кольца приближаются и вращаются, бирка качается, клавиши нажимаются, фигуры кувыркаются, колонны растут.
Воксельный финал:
Около 800 маленьких кубов толщиной в три на сетке 11x18 на букву.
Кубы стартуют разбросанными по глубине и влетают на место по quartic in-out за полсекунды с задержкой до 0,18 с, пока мимо камеры проносятся искры.
Слово дышит: каждая буква слегка поворачивается вокруг центра, а по рядам пробегает волна.
С 17,72 с каждый куб разлетается наружу и к объективу, размазываясь motion blur.
Тёмный диск раскрывается из точки в центре (power3.in, 0,37 с с 17,8 с) и заполняет кадр к 18,17 с, а кубы летят поверх него.
Финальная карточка: шар вырастает из ничего примерно за 0,12 с, логотип-надпись исчезает на 18,85 с.

Музыка

Создай оригинальный тёмный, ударный инструментальный электронный трек на 150 BPM в ре миноре с ощущением half-time (бочка на раз, снейр на три). В нём искажённый пульсирующий бас на восьмых, чёткие ударные и напряжённые пэды, а также обработанная вокальная нарезка без слов как текстура, без пения. Играет с первого кадра. Его бочки и снейры падают на склейки слов и взмахи маятника, а дроп наступает на 12,8 с. Заканчивается тяжёлым ударом с тёмным аккордом точно на чёрной дыре на 18,0 с, который звучит под финальной карточкой. Обрежь до 19,2 с по такту.

Звук

Накладывай поверх музыки:

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

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

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

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

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

Типографика

Слова-вспышки в такт с четырьмя входами

По одному слову на удар (0,4 с при 150 BPM, в конце половинные доли), фон на каждом склеивающем кадре переключается между почти чёрным и бумажным. Каждое слово появляется за четыре кадра с power3.out, используя по очереди один из четырёх входов: трекинг, сжимающийся с половины em, падение с зумом от 125% и на 320 px ниже, вертикальное растяжение от 260% с привязкой к базовой линии и въезд слева с расстояния 835 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=Manrope:wght@800&family=Anton&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; }
#bg { position: absolute; inset: 0; background: #0c0a1e; }
.w { position: absolute; left: 0; top: 840px; width: 1080px; text-align: center; white-space: nowrap; font: 800 230px/1.1 "Manrope", sans-serif; letter-spacing: -0.03em; opacity: 0; }
.w span { display: inline-block; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.8" data-width="1080" data-height="1920">
  <div id="bg" class="clip" data-start="0" data-duration="2.8"></div>
  <div id="words" class="clip" data-start="0" data-duration="2.8"></div>
</div>
<script>
const BEAT = 0.4;                         // seconds per beat (150 BPM)
const E = 4 / 30;                          // every entrance lands in four frames
const DARK = "#0c0a1e", PAPER = "#f2effa", INK = "#1c0b5d";
const WORDS = [                            // [word, entrance, beats on screen]
  ["we", "track", 1], ["don't", "zoom", 1], ["just", "stretch", 1], ["prompt.", "slide", 1],
  ["we", "track", 0.5], ["direct.", "zoom", 1], ["type", "stretch", 0.5], ["light", "slide", 0.5], ["depth", "track", 0.5],
];
const tl = gsap.timeline({ paused: true });
const host = document.getElementById("words"), bg = document.getElementById("bg");
let t = 0;
WORDS.forEach(([text, kind, beats], i) => {
  const dark = i % 2 === 0;
  const el = document.createElement("div");
  el.className = "w";
  el.style.color = text === "direct." ? "#fb2d89" : dark ? PAPER : INK;
  el.innerHTML = [...text].map((c) => "<span>" + c + "</span>").join("");
  host.appendChild(el);
  tl.set(bg, { backgroundColor: dark ? DARK : PAPER }, t);
  tl.set(el, { opacity: 1 }, t);
  tl.set(el, { opacity: 0 }, t + beats * BEAT);
  if (kind === "track") el.querySelectorAll("span").forEach((g, k, all) =>
    tl.fromTo(g, { x: 115 * (k - all.length / 2) }, { x: 0, duration: E, ease: "power3.out", immediateRender: false }, t));
  if (kind === "zoom") tl.fromTo(el, { scale: 1.25, y: 320 }, { scale: 1, y: 0, duration: E, ease: "power3.out", immediateRender: false }, t);
  if (kind === "stretch") tl.fromTo(el, { scaleY: 2.6, transformOrigin: "50% 100%" }, { scaleY: 1, duration: E, ease: "power3.out", immediateRender: false }, t);
  if (kind === "slide") tl.fromTo(el, { x: -835 }, { x: 0, duration: E, ease: "power3.out", immediateRender: false }, t);
  t += beats * BEAT;
});
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 в видео

Персонаж

Шар, который подпрыгивает на склейке и перескакивает

Глянцевая CSS-сфера (два radial-gradient: мягкий белый блик поверх оранжево-пурпурного тела) лежит в одной из двух точек на линии пола. В кадре каждой склейки она раздувается на месте до 125%, в следующем кадре уже находится в верхней точке прыжка, а за пять кадров плавно перетекает в другую точку, снова уменьшаясь до 100%, так что читается как 3D-отскок к камере. Анимируется покадрово по ключевым кадрам.

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

Показать код

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Шар, который подпрыгивает на склейке и перескакивает</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #0c0a1e; }
#floor { position: absolute; inset: 0; }
#ball { position: absolute; left: 0; top: 0; width: 88px; height: 88px; background: radial-gradient(circle at 33% 27%, rgba(255,246,236,.95) 0%, rgba(255,246,236,0) 15%), radial-gradient(circle at 38% 32%, #ffb347 0%, #fe9117 24%, #fb2d89 66%, #b0135c 90%, #7d0b40 100%); border-radius: 50%; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.8" data-width="1080" data-height="1920">
  <div id="floor" class="clip" data-start="0" data-duration="2.8"><div id="ball"></div></div>
</div>
<script>
const F = 1 / 30;
const L = { x: 287, y: 1516 }, R = { x: 788, y: 1516 };   // the two resting spots
const P = [0, 0.42, 0.7, 0.876, 0.963, 0.995, 1];         // share of the way across, frame by frame
const H = [0, 165, 136, 65, 19, 2, 0];                    // height above the floor, px
const S = [1.25, 1.14, 1.07, 1.045, 1.02, 1, 1];          // the pop on the cut, then back to size
const tl = gsap.timeline({ paused: true });
const ball = document.getElementById("ball");
gsap.set(ball, { xPercent: -50, yPercent: -50, x: L.x, y: L.y });
for (let k = 0; k < 6; k++) {
  const from = k % 2 ? R : L, to = k % 2 ? L : R, t0 = 0.4 + k * 0.4;   // a hop on every beat
  P.forEach((p, f) => tl.to(ball, { x: from.x + (to.x - from.x) * p, y: to.y - H[f], scale: S[f], duration: F, ease: "none" }, t0 + (f - 1) * F));
}
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 в видео

Переход

Маятник, стирающий заголовки и тянущий за собой свет

Стержень висит на оси над кадром и качается на ±23,6° с power3.inOut за 0,34 с, центрируясь на каждой второй доле, затем замирает. Когда груз проходит, clip-path inset, управляемые тем же изингом, открывают следующий двустрочный заголовок на стороне, которую он миновал, и срезают старый; три бледные копии груза с шагом в кадр оставляют шлейф, а размытая копия стержня и груза служит тенью. На последнем махе тёмный полигон, ограниченный линией стержня, закрывает всё за ней и протягивается через кадр.

Когда использовать Смена серии коротких фраз в физичном, метрономном ритме с финалом в затемнение.

Показать код

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Маятник, стирающий заголовки и тянущий за собой свет</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@800&family=Anton&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #f2effa; }
#stage { position: absolute; inset: 0; }
.title { position: absolute; left: 0; top: 600px; width: 1080px; text-align: center; font: 800 150px/0.95 "Manrope", sans-serif; letter-spacing: -0.04em; color: #1c0b5d; opacity: 0; }
.title .hot { color: #fb2d89; }
.arm { position: absolute; left: 536px; top: -380px; width: 8px; height: 1317px; transform-origin: 4px 0; }
.rod { position: absolute; inset: 0; background: #120a33; border-radius: 4px; }
.bob { position: absolute; left: -52px; top: 1261px; width: 112px; height: 112px; background: radial-gradient(circle at 33% 27%, rgba(255,246,236,.95) 0%, rgba(255,246,236,0) 15%), radial-gradient(circle at 38% 32%, #ffb347 0%, #fe9117 24%, #fb2d89 66%, #b0135c 90%, #7d0b40 100%); border-radius: 50%; }
#shadow { left: 558px; top: -374px; filter: blur(9px); opacity: .22; }
#shadow .rod, #shadow .bob { background: #1c0b5d; }
#curtain { position: absolute; inset: 0; background: #0c0a1e; opacity: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1080" data-height="1920">
  <div id="stage" class="clip" data-start="0" data-duration="4">
    <div class="title" id="t0"><div>MADE</div><div>BY HAND?</div></div>
    <div class="title" id="t1"><div>MADE</div><div class="hot">BY CODE.</div></div>
    <div class="title" id="t2"><div>NO</div><div>KEYFRAMES.</div></div>
    <div class="title" id="t3"><div>AND</div><div>LIGHT.</div></div>
    <div class="arm" id="shadow"><div class="rod"></div><div class="bob"></div></div>
    <div class="arm ghost" id="g2" style="opacity:.15"><div class="bob"></div></div>
    <div class="arm ghost" id="g1" style="opacity:.3"><div class="bob"></div></div>
    <div id="curtain"></div>
    <div class="arm" id="arm"><div class="rod"></div><div class="bob"></div></div>
  </div>
</div>
<script>
const AMP = 23.6, SWING = 0.34, PX = 540, PY = -380, L = 1317;   // swing angle, its length, pivot, arm
const CENTRES = [0.4, 1.2, 2.0, 2.8];                          // a swing on every second beat
const tl = gsap.timeline({ paused: true });
const titles = [...document.querySelectorAll(".title")];
gsap.set(titles[0], { opacity: 1 });
const x = (deg) => PX + L * Math.sin(deg * Math.PI / 180);       // where the bob is, left or right
for (const [sel, lag] of [["#arm", 0], ["#shadow", 0], ["#g1", 1 / 30], ["#g2", 2 / 30]]) {
  gsap.set(sel, { rotation: AMP });
  gsap.set(sel + " .bob", { rotation: -AMP });                     // keep the highlight up and left
  CENTRES.forEach((c, k) => {
    const to = k % 2 ? AMP : -AMP;
    tl.to(sel, { rotation: to, duration: SWING, ease: "power3.inOut" }, c - SWING / 2 + lag);
    tl.to(sel + " .bob", { rotation: -to, duration: SWING, ease: "power3.inOut" }, c - SWING / 2 + lag);
  });
}
CENTRES.slice(0, 3).forEach((c, k) => {                           // the wipe follows the bob
  const inc = titles[k + 1], out = titles[k], t0 = c - SWING / 2, a = x(-AMP), b = x(AMP), ltr = k % 2 === 0;
  tl.set(inc, { opacity: 1 }, t0);
  tl.fromTo(inc, { clipPath: ltr ? "inset(0px " + (1080 - a) + "px 0px 0px)" : "inset(0px 0px 0px " + b + "px)" },
    { clipPath: ltr ? "inset(0px " + (1080 - b) + "px 0px 0px)" : "inset(0px 0px 0px " + a + "px)", duration: SWING, ease: "power3.inOut", immediateRender: false }, t0);
  tl.fromTo(out, { clipPath: ltr ? "inset(0px 0px 0px " + a + "px)" : "inset(0px " + (1080 - b) + "px 0px 0px)" },
    { clipPath: ltr ? "inset(0px 0px 0px " + b + "px)" : "inset(0px " + (1080 - a) + "px 0px 0px)", duration: SWING, ease: "power3.inOut", immediateRender: false }, t0);
  tl.set(out, { opacity: 0 }, t0 + SWING);
});
// the light goes out beyond the rod, and the last swing drags the dark across
const poly = (deg) => { const r = deg * Math.PI / 180, qx = PX + 3 * L * Math.sin(r), qy = PY + 3 * L * Math.cos(r);
  return "polygon(" + PX + "px " + PY + "px, " + qx + "px " + qy + "px, 6000px " + qy + "px, 6000px -3000px, " + PX + "px -3000px)"; };
const cur = document.getElementById("curtain"), ease = gsap.parseEase("power3.inOut"), last = CENTRES[3] - SWING / 2;
gsap.set(cur, { clipPath: poly(AMP) });
tl.set(cur, { opacity: 1 }, 2.2);
for (let f = 1; f <= 11; f++) tl.to(cur, { clipPath: poly(AMP - 2 * AMP * ease(Math.min(1, f / 30 / SWING))), duration: 1 / 30, ease: "none" }, last + (f - 1) / 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:10 в видео

Фигуры

Ищущий конус прожектора, открывающий освещённую страницу

На тёмном фоне светящийся шар проходит несколько позиций, а клиновидный clip-path (вершина в шаре, направление и половина ширины, полигон, уходящий далеко за кадр) показывает слой бумаги со словами. Вторая копия страницы с непрозрачностью 28%, обрезанная клином шире на 4,5°, создаёт полутень с жёстким краем. Луч начинается тонкой полоской в 7°, направленной вверх, смещается влево и вниз, расширяясь примерно до 120°, затем за треть секунды раскрывается до 360° и освещает всю страницу.

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

Показать код

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ищущий конус прожектора, открывающий освещённую страницу</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@800&family=Anton&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #14112e; }
#scene { position: absolute; inset: 0; }
.page { position: absolute; inset: 0; background: #f2effa; }
#soft { opacity: .28; }
.line { position: absolute; left: 0; top: 660px; width: 1080px; text-align: center; font: 800 190px/0.93 "Manrope", sans-serif; letter-spacing: -0.04em; color: #1c0b5d; }
.line span { color: #7c4dff; }
#lamp { position: absolute; left: 0; top: 0; width: 100px; height: 100px; margin: -50px 0 0 -50px; background: radial-gradient(circle at 33% 27%, rgba(255,246,236,.95) 0%, rgba(255,246,236,0) 15%), radial-gradient(circle at 38% 32%, #ffb347 0%, #fe9117 24%, #fb2d89 66%, #b0135c 90%, #7d0b40 100%); border-radius: 50%; }
#glow { position: absolute; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,128,72,.6) 0%, rgba(252,80,110,.12) 36%, rgba(252,60,120,0) 50%); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4.5" data-width="1080" data-height="1920">
  <div id="scene" class="clip" data-start="0" data-duration="4.5">
    <div class="page" id="soft"><div class="line">LIGHT<br>IS JUST<br><span>MATH.</span></div></div>
    <div class="page" id="lit"><div class="line">LIGHT<br>IS JUST<br><span>MATH.</span></div></div>
    <div id="glow"></div><div id="lamp"></div>
  </div>
</div>
<script>
const PEN = 4.5;                                          // the soft edge, degrees
const s = { x: 536, y: 696, dir: 271, half: 0 };           // ball and beam (0 deg = right, 90 = down)
const wedge = (h) => { if (h <= 0) return "polygon(" + Array(8).fill(s.x + "px " + s.y + "px").join(",") + ")";
  h = Math.min(h, 180); const pts = [s.x + "px " + s.y + "px"];
  for (let i = 0; i <= 6; i++) { const a = (s.dir - h + i * h / 3) * Math.PI / 180; pts.push((s.x + 5000 * Math.cos(a)) + "px " + (s.y + 5000 * Math.sin(a)) + "px"); }
  return "polygon(" + pts.join(",") + ")"; };
const draw = () => {
  gsap.set("#lamp, #glow", { x: s.x, y: s.y });
  gsap.set("#soft", { clipPath: wedge(s.half) });
  gsap.set("#lit", { clipPath: wedge(s.half >= 180 ? 180 : s.half - PEN) });
};
const tl = gsap.timeline({ paused: true, onUpdate: draw });
tl.to(s, { half: 19, duration: 0.25, ease: "power2.out" }, 0.2)                                   // a sliver opens upward
  .to(s, { x: 797, y: 1094, dir: 154, half: 22, duration: 0.6, ease: "power2.inOut" }, 0.5)       // sweeps down-left
  .to(s, { x: 897, y: 976, dir: 179, half: 27, duration: 0.5, ease: "power2.out" }, 1.2)
  .to(s, { x: 757, y: 558, dir: 124, half: 35, duration: 0.5, ease: "power2.inOut" }, 1.8)
  .to(s, { x: 537, y: 326, dir: 90, half: 66, duration: 0.45, ease: "power2.inOut" }, 2.4)        // settles above the words
  .to(s, { half: 180, duration: 0.35, ease: "power2.inOut" }, 3.8);                               // and lights everything
draw();
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 в видео

Композиция

Контурное имя поверх миров, меняющихся каждую половину доли

Одно слово узким акцидентным шрифтом остаётся неподвижным в центре, пока мир за ним меняется каждые 0,2 с (восьмая нота при 150 BPM): градиенты, полосы, концентрические кольца, сетка, плоский цвет. Слово состоит из трёх слоёв: жёсткая тень со смещением 9 px, контур 16 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=Manrope:wght@800&family=Anton&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; }
#world { position: absolute; inset: 0; }
#name { position: absolute; inset: 0; }
.wl { position: absolute; left: 0; top: 760px; width: 1080px; text-align: center; font: 330px/1.2 "Anton", sans-serif; }
.sh { transform: translate(9px, 9px); }
.sh, .ol { -webkit-text-stroke: 16px currentColor; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3.2" data-width="1080" data-height="1920">
  <div id="world" class="clip" data-start="0" data-duration="3.2"></div>
  <div id="name" class="clip" data-start="0" data-duration="3.2"><div class="wl sh">motion</div><div class="wl ol">motion</div><div class="wl fi">motion</div></div>
</div>
<script>
const WORLDS = [   // [background, light world?]
  ["radial-gradient(80% 60% at 40% 40%, #fe9117, #fb2d89 60%, #8e89a3)", true], ["linear-gradient(160deg, #fb2d89, #fe9117)", false],
  ["linear-gradient(#7c4dff 0 59%, #0c0a1e 59% 74%, #fb2d89 74%)", false], ["repeating-radial-gradient(circle, #1c0b5d 0 60px, #f2effa 60px 120px)", false],
  ["repeating-radial-gradient(circle, #f2effa 0 70px, #1c0b5d 70px 140px)", true], ["radial-gradient(#8f63ff, #5a2fe0)", true],
  ["repeating-linear-gradient(90deg, #17122b 0 110px, #f2effa 110px 118px)", false], ["#0c0a1e", false],
  ["#7c4dff", false], ["radial-gradient(#4a1440, #22061f)", false], ["#ffd9e6", true], ["linear-gradient(#b9b5c6, #7f7a90)", false],
  ["linear-gradient(#fb2d89, #7c4dff)", false], ["repeating-linear-gradient(45deg, #fe9117 0 60px, #f2effa 60px 120px)", true],
  ["#f7f5fc", true], ["#fb4f6a", true],
];
const tl = gsap.timeline({ paused: true });
const world = document.getElementById("world");
const [sh, ol, fi] = document.querySelectorAll(".wl");
WORLDS.forEach(([bg, light], k) => {                 // a cut every eighth note
  const t = k * 0.2;
  tl.set(world, { background: bg }, t);
  tl.set([sh, ol], { color: light ? "#ffffff" : "#0c0a1e" }, t);
  tl.set(fi, { color: light ? "#0c0a1e" : "#ffffff" }, t);
});
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:16 в видео

3D

Воксельное слово, которое собирается, дышит и взрывается

Слово, нарисованное битмапом 11x18 на каждую букву, превращается примерно в 800 инстансных кубов глубиной в три слоя. Каждый куб стартует в случайной точке с случайным поворотом и летит к своей ячейке с quartic in-out за полсекунды с задержкой до 0,18 с, пока несколько сотен частиц пролетают мимо камеры. После посадки каждая буква плавно поворачивается вокруг своего центра, а по её рядам бежит рябь; в конце каждый куб ускоряется наружу и к объективу (quadratic in), и за каждым следуют шесть более бледных копий с отставанием в несколько миллисекунд как моушн-блюр. Первая буква окрашена градиентом от розового к оранжевому сверху вниз, остальные бумажно-белые, на фиолетовом фоне.

Когда использовать Логотип или короткое слово, собирающееся из частиц в кульминации.

Библиотекиthree

Показать код

<!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>
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #7c4dff; }
#gl { position: absolute; inset: 0; width: 1080px; height: 1920px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.6" data-width="1080" data-height="1920">
  <canvas id="gl" class="clip" data-start="0" data-duration="2.6" width="1080" height="1920"></canvas>
</div>
<script type="module">
import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById("gl"), antialias: true, alpha: true, preserveDrawingBuffer: true });
renderer.setPixelRatio(1); renderer.setSize(1080, 1920, false);
const scene = new THREE.Scene(), cam = new THREE.PerspectiveCamera(30, 1080 / 1920, 10, 20000);
cam.position.set(0, 420, 3583); cam.lookAt(0, 0, 0);            // about 1 px per unit on the word's plane
scene.add(new THREE.HemisphereLight(0xffffff, 0x4a2fa0, 1.6));
const sun = new THREE.DirectionalLight(0xffffff, 2.7); sun.position.set(-600, 1400, 1800); scene.add(sun);
const G = {                                                       // 11 x 18 cells per letter ("#" = cube)
  F: ["###########", "###########", "##", "##", "##", "##", "##", "##", "#########", "#########", "##", "##", "##", "##", "##", "##", "##", "##"],
  A: [" ######### ", "###########", ...Array(6).fill("##       ##"), "###########", "###########", ...Array(8).fill("##       ##")],
  B: ["#########  ", "########## ", ...Array(5).fill("##      ## "), "########## ", "#########  ", "########## ", ...Array(6).fill("##       ##"), "###########", "########## "],
};
const P = 24, LEFT = [96, 408, 720], TOP = 744;                  // cell pitch, letter positions in the frame
let seed = 23; const rnd = () => ((seed = (Math.imul(seed, 1664525) + 1013904223) >>> 0) / 4294967296);
const cubes = [];
["F", "A", "B"].forEach((ch, li) => G[ch].forEach((row, ry) => [...row].forEach((cell, cx) => {
  if (cell !== "#") return;
  for (let dz = 0; dz < 3; dz++) cubes.push({ li, ry, color: li ? new THREE.Color(0xf2effa) : new THREE.Color(0xfb2d89).lerp(new THREE.Color(0xfe9117), ry / 17),
    tx: LEFT[li] + cx * P + P / 2 - 540, ty: 960 - (TOP + ry * P + P / 2), tz: -dz * P,
    sx: (rnd() - 0.5) * 3600, sy: (rnd() - 0.5) * 5200, sz: -3000 + rnd() * 5400, r: [rnd() * 6, rnd() * 6, rnd() * 6], delay: rnd() * 0.18, dur: 0.5 + rnd() * 0.12 });
})));
const mesh = new THREE.InstancedMesh(new THREE.BoxGeometry(21, 21, 21), new THREE.MeshStandardMaterial({ roughness: 0.55 }), cubes.length);
cubes.forEach((k, i) => mesh.setColorAt(i, k.color)); scene.add(mesh);
const centres = LEFT.map((x) => new THREE.Vector3(x + 132 - 540, 0, -P)), o = new THREE.Object3D(), v = new THREE.Vector3(), e = new THREE.Euler();
const inOut4 = (p) => (p < 0.5 ? 8 * p ** 4 : 1 - 8 * (1 - p) ** 4), c01 = (x) => Math.min(1, Math.max(0, x));
function draw(t) {
  const hold = Math.max(0, t - 0.55);
  cubes.forEach((k, i) => {
    const p = inOut4(c01((t - k.delay) / k.dur)), c = centres[k.li];
    v.set(k.tx - c.x, k.ty, k.tz - c.z + 10 * Math.sin(k.ry * 0.6 + hold * 6));                 // a ripple through the rows
    e.set(0.07 * Math.sin(hold * 3.1 + k.li * 1.7), 0.2 * Math.sin(hold * 4.2 + k.li * 0.9), 0);  // each letter turns a little
    v.applyEuler(e).add(c);
    const q = c01((t - 1.8) / 0.55), b = q * q * q;                                               // the burst
    o.position.set((k.sx + (v.x - k.sx) * p) * (1 + 3.5 * b), (k.sy + (v.y - k.sy) * p) * (1 + 3.5 * b), k.sz + (v.z - k.sz) * p + 3000 * b);
    o.rotation.set(k.r[0] * (1 - p) + 4 * b, k.r[1] * (1 - p) + 3 * b, k.r[2] * (1 - p));
    o.updateMatrix(); mesh.setMatrixAt(i, o.matrix);
  });
  mesh.instanceMatrix.needsUpdate = true;
  renderer.render(scene, cam);
}
const clock = { t: 0 };
const tl = gsap.timeline({ paused: true });
tl.to(clock, { t: 2.6, duration: 2.6, ease: "none" }, 0);
tl.eventCallback("onUpdate", () => draw(clock.t));
draw(0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Превью техники «Ирис-чёрная дыра в финальную карточку для зацикливания» — На 0:18 в видео

Переход

Ирис-чёрная дыра в финальную карточку для зацикливания

Тёмный диск вдвое больше диагонали кадра растёт от 0 в центре с power3.in за 0,37 с: он начинается точкой, пока буквы уже разлетаются, и поглощает кадр на финальном ударе. Внутри него главный шар вырастает из ничего за 0,12 с, логотип появляется за два кадра, держится и исчезает 0,75 с спустя, оставляя только шар в центре, с которого начинается первый кадр видео, так что ролик зацикливается бесшовно.

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

Показать код

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ирис-чёрная дыра в финальную карточку для зацикливания</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@800&family=Anton&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #7c4dff; }
#end { position: absolute; inset: 0; }
#hole { position: absolute; left: 540px; top: 960px; width: 2400px; height: 2400px; margin: -1200px 0 0 -1200px; border-radius: 50%; background: #0c0a1e; }
#ball { position: absolute; left: 0; top: 0; width: 142px; height: 142px; background: radial-gradient(circle at 33% 27%, rgba(255,246,236,.95) 0%, rgba(255,246,236,0) 15%), radial-gradient(circle at 38% 32%, #ffb347 0%, #fe9117 24%, #fb2d89 66%, #b0135c 90%, #7d0b40 100%); border-radius: 50%; }
#mark { position: absolute; left: 0; top: 1160px; width: 1080px; text-align: center; font: 800 110px/1 "Manrope", sans-serif; letter-spacing: -0.03em; background: linear-gradient(90deg, #fb2d89, #fe9117); -webkit-background-clip: text; background-clip: text; color: transparent; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="1.5" data-width="1080" data-height="1920">
  <div id="end" class="clip" data-start="0" data-duration="1.5"><div id="hole"></div><div id="ball"></div><div id="mark">your brand</div></div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
gsap.set("#ball", { xPercent: -50, yPercent: -50, x: 539, y: 959, scale: 0 });
tl.fromTo("#hole", { scale: 0 }, { scale: 1, duration: 0.37, ease: "power3.in" }, 0.1)                          // the hole opens
  .fromTo("#ball", { scale: 0 }, { scale: 1, duration: 0.12, ease: "power2.in", immediateRender: false }, 0.35)   // the ball grows in it
  .fromTo("#mark", { opacity: 0 }, { opacity: 1, duration: 0.067, ease: "none" }, 0.4)
  .to("#mark", { opacity: 0, duration: 0.15, ease: "none" }, 1.15);                                             // only the ball remains
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

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

Превью промпта «Рилс о продукте «Живой образец» с морфингом логотипа»

Simple MotionNPX

Рилс о продукте «Живой образец» с морфингом логотипа

placeholder

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

Превью промпта «Брендовый ролик с 3D-пролётом телефона и неоновой кинетической типографикой»

Simple MotionSYP

Брендовый ролик с 3D-пролётом телефона и неоновой кинетической типографикой

<direction> Сделай вертикальный брендовый ролик длиной 15,5 секунды (1080x1920, 30 к/с). 3D-пролёт телефона над профилем моего бренда превращается в момент с логотипом, затем кинетическая типографика, нарезанная по слогам под жёсткий трэп-бит в половинном темпе, заканчивается моим логотипом. Всё нарисовано, без снятых кадров. Используй мой логотип, а вместо примеров ниже — цвета и слова моего бренда. Образ состоит из трёх миров: градиенты от глубокого тёмно-синего до почти чёрного для 3D-части, светло-серая студия посередине и чисто чёрный фон с неоновым свечением в конце. Избегай квадратной подложки или куба за логотипом, зеркальных букв, когда слово проходит за чем-то, текста, касающегося краёв кадра, перевёрнутого кадра после резкого поворота камеры и плоского или сплюснутого голографического логотипа. Экран телефона должен точно помещаться в его рамку. </direction> <structure> 1. 0–4,3 с, пролёт телефона. 3D-телефон (экран и светящаяся серебристая задняя панель с выступом камеры) влетает маленьким и наклонённым, задней стороной вперёд. Он вращается примерно на 200 градусов и на 1,05 с встаёт вертикально экраном к зрителю (power2.out). Экран расположен по центру кадра, с ровной рамкой со всех сторон. На нём бренд показан как соцсетевой профиль: никнейм, круглый аватар с моим логотипом, имя и однострочный слоган, двухстрочное описание с сайтом, розовая главная кнопка и четыре круглых хайлайта, подписи которых не накладываются друг на друга. Под ними сетка 3x3 из чуть маленьких цветных плиток со скруглёнными углами, помещающихся на экране, с короткими подписями, которые умещаются внутри каждой плитки ("IDEAS IN MOTION", "3D", "LOGO REVEAL"; замени своими). С 1,05 с телефон откидывается назад примерно на 48 градусов и увеличивается, а плитки поднимаются над экраном к камере на разную высоту. Резкий поворот камеры на 1,95 с приближает её к шапке профиля. Камера медленно едет вниз по описанию, кренясь, пока второй резкий поворот на 3,0 с не направит её вниз на аватар. Она останавливается ровно, так что профиль читается. Три светящихся розовых кольца вырастают стопкой из аватара (back.out, с интервалом 80 мс). Из них поднимается круглая копия моего логотипа с розовой обводкой и свечением, наклоняясь к зрителю, как голограмма. 2. 4,3–6,5 с, 3D-логотип. Резкая склейка на сам знак моего логотипа, выдавленный в 3D: стопка тонких слоёв глубокого тона (например, тёмно-розового) позади освещённой лицевой стороны, без квадрата за ним. Он светится на тёмно-синем радиальном градиенте. Он влетает вращаясь из наклонного положения (power3.out, 1 с), покачивается, затем улетает вращаясь, уменьшаясь (power3.in), в склейку. Яркое слово, например "AHHHH" (замени своим), стоит на кольце чуть ниже логотипа, никогда не поверх него. Оно набрано сверхжирной гротескной гарнитурой с градиентом от оранжевого к розовому и мягким розовым свечением, буквы разрежены и никогда не зеркальные. Слово проходит перед логотипом, затем улетает вместе с ним. С 4,75 с гигантское контурное фоновое слово ("OMG") проявляется и плывёт вверх. 3. 6,5–9,2 с, набираемые слова в светлой комнате. Резкая склейка на светло-серую комнату с виньетированием. Слова набираются буква за буквой на слоги бита, в 3D-группе, по которой дрейфует камера. Сначала "yeah". Затем "she" белым на чёрном блоке, который сначала виден как тонкая линия и резко раскрывается. Потом "typed" розовым, "one" и более крупное "single prompt". На 8,1 с виньетка закрывается в горизонтальный эллипс за 0,22 с и снова открывается за 0,25 с, пока старые слова улетают влево. Новые слова падают сверху из размытия: "Now" / "it moves like". Розовое "magic" размыто поднимается снизу прямо перед склейкой. 4. 9,2–15,5 с, неоновая стопка и логотип. Склейка на чёрный фон с розовым светящимся "magic" вверху. У каждой следующей строки свой цвет, свечение и появление, и они выстраиваются в стопку: "And I'm" оранжевым, "unstoppable" фиолетовым, "might do" белым, "MOTION" розовым. Стопка медленно поворачивается в 3D, затем на 11,95 с улетает вверх и за кадр за 0,25 с. Завершающая строка появляется по слову из размытия розовым: "no" / "more" / "timelines". На 12,7 с поверх неё сверху падают пять металлических балок. На 13,25 с всё размывается, и мой логотип белым с разреженным слоганом ("YOUR TAGLINE HERE") проявляется из размытия и держится до конца. Все слова в кавычках — примеры, замени их своими. </structure> <composition> Пример палитры: тёмно-синий #1C0B5D, почти чёрный #04020C, ярко-розовый #FB2D89, оранжевый #FE9117, фиолетовый #8F7BFF, светло-серый #D2D4D9, серый для текста #4A4E56 и белый. Используй одну плотную гротескную гарнитуру, сверхжирную, с плотным трекингом (-0,045em), например Manrope ExtraBold, для каждого слова. Фоновое слово в сцене 2 — гигантский контур (text-stroke с прозрачностью около 20%). 3D-часть идёт на градиентах от глубокого тёмно-синего до почти чёрного, а сцена с логотипом — на тёмно-синем радиальном градиенте. Середина — светло-серая комната с виньетированием, а финал — чисто чёрный с неоновым свечением. Держи каждую строку текста внутри кадра с безопасными полями, особенно длинные строки "And I'm" и "unstoppable". Финальная карточка — логотип по центру белым с маленьким широко разрежённым слоганом под ним. </composition> <techniques> Резкие повороты камеры: 0,08 с размытия 14 px, скачок к новому кадру, затем 0,12 с возврата к резкости. Кольца складываются с back.out, с интервалом 80 мс. Голограмма логотипа поднимается с розовой обводкой и свечением и лёгким наклоном к камере. 3D-логотип влетает вращаясь с power3.out (1 с) и вылетает с power3.in. Каждая набираемая буква переворачивается снизу вверх (rotationX -70, back.out, 0,18 с, с интервалом 30–70 мс). Блок "she" раскрывается из тонкой линии с щелчком. Ирис-переход закрывает виньетку в горизонтальный эллипс (0,22 с) и снова открывает её (0,25 с). Появление неоновых строк: буквы "And I'm" врезаются из большого размера, "unstoppable" выезжает справа из размытия, буквы "might do" поднимаются, а буквы "MOTION" влетают слева с наклоном и шлейфом движения. Стопка уходит вверх за 0,25 с. Завершающие слова появляются из размытия по одному. Пять металлических балок падают сверху (power3.in, с интервалом 30 мс). В конце всё размывается, затем логотип проявляется из размытия 24 px (0,45 с) и медленно увеличивается на 4%, пока держится. Слова меняются каждые 0,1–0,3 с на слоги бита; держится только логотип. </techniques> <music> Около 147 BPM, трэп в половинном темпе в соль миноре, инструментал, без вокала. Под частью с телефоном играет тёмный колокольный мотив с нарастающим напряжением. Полный бит (жёсткий бас-барабан 808, искажённый саб, клэп, катящиеся хэты с триольными роллами) врывается точно на склейке на 3D-логотип на 4,33 с. Подрежь трек так, чтобы дроп пришёлся именно туда. В конце затухание. </music> <sound> Поверх музыки только саунд-дизайн: бум, когда телефон приземляется, свисты на двух резких поворотах камеры и мерцание для голографического логотипа. Добавь удар на склейке на 3D-логотип, импакт на склейке на светлую комнату и свист на ирисе. Затем бум на склейке на чёрный, свисты, когда строки въезжают и вылетают, металлический удар, когда падают балки, и глубокий бум на финальном логотипе, затем затухание. Без закадрового голоса. </sound>

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

Превью промпта «Слова, строящие конструкцию: зацикленная кинетическая типографика»

Simple MotionUKE

Слова, строящие конструкцию: зацикленная кинетическая типографика

<direction> Сделай квадратный 20-секундный фильм в стиле кинетической типографики, 1080x1080, 60 кадров/с, с музыкой и звуковым дизайном. Короткое рекламное сообщение строит конструкцию из собственных слов: тяжёлое слово давит вниз, как перемычка; другое висит на тросах и прогибает линию, на которой висит; два слова поворачиваются в вертикальные опоры; камера ныряет в просвет буквы; а завершающая фраза собирается на платформе. Видео должно зацикливаться бесшовно: последний кадр в точности равен первому. Всё нарисовано: плоский шрифт, линии и штрихи на плоском глубоком чернильном фоне. Без съёмки, фотографий, текстур, зерна, цветокоррекции и градиентов. Тяжёлые грузы не подпрыгивают; упруга только линия. Движение следует фразировке сообщения, а не танцевальному биту. Все слова на экране — примеры, которые нужно заменить своим сообщением, подбирая их по роли и длине каждого слота, чтобы композиция держалась. </direction> <structure> - Сцена 1, 0–3,3 с, перемычка: огромное тяжёлое слово, 320 px, во всю ширину кадра у верха (пример «HUNT»), его базовая линия на y 524. Под ним лежит линия, очень слегка наклонённая (y 712 слева, y 697 справа). Предложение поднимается из линии двумя группами на 0,33 с и 1,03 с, Playfair 58 px, базовая линия на 17 px выше линии (пример «No keyframes» / «to hunt for.»). Оно живёт в просвете между базовой линией большого слова, продолженной через кадр, и линией. С 0 до 2,9 с большое слово опускается на 104 px и наклоняется от -0,15 до -1,9 градуса вокруг левой точки базовой линии (power2.inOut), так что просвет сужается. На 2,93 с оно падает на линию с критически демпфированной посадкой (омега около 14 в секунду) и выравнивается по углу линии. Предложение срезается сверху своей базовой линией и исчезает. - Сцена 1→2, 3,28–4,03 с: линия прогибается на 5 px под ударом. Затем большое слово улетает прямо вверх за кадр (power2.inOut, 0,7 с, около 700 px), а линия со всем, что на ней, уезжает вверх на 230 px (power2.inOut, 0,75 с). - Сцена 2, 3,5–6,5 с, висящий груз: второе предложение поднимается из линии на 3,58 с и 4,18 с (пример «Chat instead» / «of a»). На 4,49 с две тонкие линейки (1 px, светлый цвет страницы при 45 %) спускаются от линии на x 468 и x 627 (power2.inOut, 0,34 с). На 4,79 с тяжёлое слово 138 px (пример «TIMELINE») выпадает из-за линии, обрезанное областью под ней. Оно падает критически демпфированным движением с высоты 191 px над своим местом покоя (омега 8,6 в секунду) и висит примерно в 90 px под линией. На 5,43 с линия поддаётся: полусинусоидальный прогиб между концами под действием недодемпфированной пружины (30 px, омега 11,9 в секунду, коэффициент затухания 0,30). Она один раз проскакивает до 41 px, немного отскакивает назад и успокаивается на 30 px. Линейки за 0,12 с превращаются в розовые тросы 2,5 px, и слово опускается вместе с прогибом. Каждое слово предложения едет по кривой, повёрнутое по локальному наклону. - Сцена 3, 6,43–9,47 с, первая опора: камера отъезжает до 76 % вокруг точки далеко справа от кадра (power2.inOut, 0,65 с), поэтому линия и висящее слово сдвигаются вправо, а предложение уходит в линию. На 6,96 с вверху слева поднимается фраза, 49 px на экране (пример «Describe the»). На 7,09 с тяжёлое слово поднимается из-под кадра и ложится рядом со свободным левым концом линии (критически демпфированно, 0,6 с). Его длина примерно равна высоте свободного конца линии (пример «VIDEO»). На 7,95 с оно поворачивается на 90 градусов против часовой стрелки вокруг дальнего конца (около 0,8 с) и встаёт вертикально под линией, читаясь снизу вверх. Поднимаясь, оно приподнимает левый конец линии на 61 px (power4.out, 0,53 с), и висящее слово наклоняется на +2,7 градуса. На 8,83 с под висящим словом поднимается маленькая фраза (пример «Ideas in»). На 9,02 с поднимается большое слово Playfair (152 px на экране, 0,56 с), вторая буква которого — O (пример «MOTION»). Внутри просвета буквы O уже нарисована следующая сцена примерно в 5 % её размера: линия, опора и висящее слово в их следующей компоновке. - Сцена 3→4, 9,47–10,02 с, сквозь O: камера увеличивает просвет буквы O. Натуральный логарифм масштаба растёт пропорционально квадрату времени (примерно x18 к 10,0 с), пока центр просвета скользит в центр кадра (power2.inOut). Маленькая сцена едет вместе с зумом, затем перерастает его и ложится ровно на полный кадр на 9,93 с, когда кольцо буквы O уходит за края. - Сцена 4, 10–12,5 с, уровень: вверху слева фраза поднимается на 10,22 с и 10,52 с, 64 px (пример «Edit in» / «words.»). На 10,49 с вторая вертикальная опора (то же слово) поднимается снизу у правого края на место под низким правым концом линии (критически демпфированно, 0,89 с). С 11,08 до 11,43 с линия выравнивается до идеальной горизонтали и теряет прогиб (power1.out), и висящее слово выравнивается вместе с ней. Это первый идеально горизонтальный момент фильма. С 11,4 до 11,6 с 1-пиксельная линия земли (#E9E4F2 при 18 %) прорисовывается от центра на y 965 (power2.in). Затем тишина и неподвижность. - Сцена 5, 12,5–16 с, платформа: фраза сцены 4 уходит вниз. На 12,53 с висящее слово поднимается и садится прямо под линию (критически демпфированно, 0,7 с), и тросы укорачиваются вместе с ним. На 12,93 с фраза с засечками (54 px, пример «Your idea is ready to») поднимается и ждёт примерно в 58 px над рядом, затем на 13,83 с опускается на него (критически демпфированно, 0,5 с). На 13,33 с из линии поднимается первое тяжёлое слово платформы (117 px, 0,56 с, пример «MOVE.»). На 14,17 с короткое слово с засечками поднимается и ждёт над линией, затем на 14,59 с садится на линию (первое слово [your brand]). На 14,87 с из линии поднимается последнее тяжёлое слово и садится последним (119 px, 0,58 с; последнее слово [your brand], с точкой в конце). - Сцена 6, 16–18 с: держи законченную фразу; ничего не движется. - Сцена 7, 18–20 с, петля: на 18,0 с камера ныряет под платформу к основанию штриха буквы висящего слова (E или I). Логарифм масштаба ускоряется (примерно x40 к 19 с), пока основание штриха уносится вниз за кадр, и светлый цвет штриха не заполнит кадр. На 19,05 с, под полным перекрытием, переключись на открывающий кадр сцены 1, увиденный изнутри штриха большого слова: большое слово в стартовой позиции, линия, без предложения. Метки времени снова показывают первую сцену. Отъезжай с замедляющимся логарифмическим масштабом (примерно от x22 до x1 к 20,0 с), чтобы последний кадр был точно равен первому. - Темп: примерно один новый элемент каждые 0,5–0,7 с внутри сцены, долгое медленное давление в сцене 1, краткая неподвижность после выравнивания линии и двухсекундная пауза перед петлёй. </structure> <composition> - Фон: глубокий чернильный #1C0B5D, плоский. Весь шрифт светлый цвет страницы #FAF9FF. Один структурный акцент, розовый #FB2D89, только для главной линии, тросов и метки сцены. - Тяжёлые слова: Pliant 900 с шириной 105 (широкая, очень тяжёлая гротескная гарнитура), плотный трекинг. Фразы: Playfair Display 400. Метки времени: JetBrains Mono 13 px лавандовым #F0EDFF при 47 % непрозрачности. - Поля 60 px. Главная линия — розовый штрих 4 px от x 60 до x 1020. - Метки времени на каждом кадре, вверху: - слева вверху: твой веб-адрес заглавными буквами (пример «YOURSITE.COM»); - справа вверху: промежуток текущей сцены, записанный как «06.50 — 10.00»; - под ними: 1-пиксельная линейка (#E9E4F2 при 18 %) от x 60 до x 1020 с 3-пиксельной отметкой каждую секунду и 6-пиксельной каждые пять секунд; - на этой линейке: 3-пиксельная розовая полоса, точно покрывающая промежуток текущей сцены. - Полоса и время переключаются на следующую сцену на её первом кадре. Всего семь сцен: 0–3, 3–6,5, 6,5–10, 10–12,5, 12,5–16, 16–18 и 18–20 с. </composition> <techniques> - Каждая фраза проявляется, поднимаясь из линии. Она обрезана областью над линией (или над невидимой линией примерно в 17 px под её базовой) и начинает на 1,28 размера шрифта ниже, полностью скрытая. Она садится по критически демпфированной кривой 1 - (1 + 6p)e^(-6p), нормированной так, чтобы достигать 1 за 0,5 с: быстрый старт, долгая мягкая посадка, без перелёта. - Фразы одного предложения приходят речевыми группами с интервалом 0,6–0,7 с. - Тяжёлые грузы садятся по настоящему критически демпфированному движению без отскока. Упруга только линия: недодемпфированная пружина, когда она поддаётся. - Слова на изогнутой линии поворачиваются по её локальному наклону. - Когда сцена заканчивается, её предложение уходит обратно в свою линию (power2.in, около 0,26 с). - Камера — это масштаб и позиция всей сцены: - отъезд до 76 % вокруг точки далеко справа от кадра; - зум сквозь просвет буквы, где натуральный логарифм масштаба растёт пропорционально квадрату времени, а следующая компоновка заранее нарисована внутри просвета; - нырок в штрих буквы, заканчивающийся полным перекрытием и скрывающий возврат к открывающему кадру. </techniques> <music> Минималистичная кинематографичная электронная подложка, 120 BPM, ровно 10 тактов, так что каждая граница сцены падает на долю (3, 6,5, 10, 12,5, 16 и 18 с). Глубокий пульсирующий синтезаторный бас, мягкие пэды, редкий щипковый мотив и лёгкая тикающая перкуссия. Дуга: - 0–3 с: низко и тяжело, с акцентом на 3 с; - с 3 с: подъём; - к 10 с: нарастание фильтра до сильной первой доли ровно на 10 с, в момент посадки зума; - с 11,5 с: открыто и почти неподвижно; - к 15,5 с: уверенное нарастание до полного заявления; - 16–18 с: выдержанный аккорд; - 18–20 с: волна с пиком на 19 с, которая к 20 с возвращается к открывающей фактуре, так что петля не слышна. Без вокала. </music> <sound> Звуковые эффекты только поверх подложки, без собственных ударных и баса: - мягкий деревянный тик на первом видимом кадре каждой фразы; - низкий бум с тяжёлым деревянным стуком, когда перемычка падает (3,1 с), и воздушный свист, когда она улетает; - два крошечных тика, когда падают тонкие линейки; - падающий свист, затем скрип доски с коротким саб-дропом, когда линия поддаётся; - мягкий свуш под отъезд камеры; - свисты, когда опора поднимается и поворачивается, со стуком, когда она приподнимает линию; - райзер, переходящий в колокольный удар, когда зум сквозь O приземляется на 10 с; - лёгкий металлический щелчок, когда линия встаёт ровно, и мягкий шорох, когда прорисовывается линия земли; - деревянные стуки, когда садятся слова платформы, и мягкие шлепки, когда фразы оседают; - более глубокий бум с деревянным ударом и слабым колоколом под последним словом; - райзер в белую вспышку нырка, обратный свуш на скрытой склейке и свист при отъезде. Без закадрового голоса. Микс примерно -14 LUFS, истинный пик ниже -1 dBTP. </sound> <references> Редакционная кинетическая типографика в швейцарском стиле, где слова имеют вес и работают как архитектура (перемычки, тросы, колонны, платформа). Физически смоделированный шрифт с критически демпфированными посадками и одной упругой линией. Типографические петли с бесконечным зумом, проходящие сквозь просветы и штрихи букв. </references>

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

Рассылка

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

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

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

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