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

RU

Открыть beta

Simple Motion

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

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

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

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

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

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

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

Замысел

Сделай вертикальный брендовый ролик длиной 15,5 секунды (1080x1920, 30 к/с). 3D-пролёт телефона над профилем моего бренда превращается в момент с логотипом, затем кинетическая типографика, нарезанная по слогам под жёсткий трэп-бит в половинном темпе, заканчивается моим логотипом. Всё нарисовано, без снятых кадров. Используй мой логотип, а вместо примеров ниже — цвета и слова моего бренда. Образ состоит из трёх миров: градиенты от глубокого тёмно-синего до почти чёрного для 3D-части, светло-серая студия посередине и чисто чёрный фон с неоновым свечением в конце. Избегай квадратной подложки или куба за логотипом, зеркальных букв, когда слово проходит за чем-то, текста, касающегося краёв кадра, перевёрнутого кадра после резкого поворота камеры и плоского или сплюснутого голографического логотипа. Экран телефона должен точно помещаться в его рамку.

Структура

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 мс). Из них поднимается круглая копия моего логотипа с розовой обводкой и свечением, наклоняясь к зрителю, как голограмма.
4,3–6,5 с, 3D-логотип. Резкая склейка на сам знак моего логотипа, выдавленный в 3D: стопка тонких слоёв глубокого тона (например, тёмно-розового) позади освещённой лицевой стороны, без квадрата за ним. Он светится на тёмно-синем радиальном градиенте. Он влетает вращаясь из наклонного положения (power3.out, 1 с), покачивается, затем улетает вращаясь, уменьшаясь (power3.in), в склейку. Яркое слово, например "AHHHH" (замени своим), стоит на кольце чуть ниже логотипа, никогда не поверх него. Оно набрано сверхжирной гротескной гарнитурой с градиентом от оранжевого к розовому и мягким розовым свечением, буквы разрежены и никогда не зеркальные. Слово проходит перед логотипом, затем улетает вместе с ним. С 4,75 с гигантское контурное фоновое слово ("OMG") проявляется и плывёт вверх.
6,5–9,2 с, набираемые слова в светлой комнате. Резкая склейка на светло-серую комнату с виньетированием. Слова набираются буква за буквой на слоги бита, в 3D-группе, по которой дрейфует камера. Сначала "yeah". Затем "she" белым на чёрном блоке, который сначала виден как тонкая линия и резко раскрывается. Потом "typed" розовым, "one" и более крупное "single prompt". На 8,1 с виньетка закрывается в горизонтальный эллипс за 0,22 с и снова открывается за 0,25 с, пока старые слова улетают влево. Новые слова падают сверху из размытия: "Now" / "it moves like". Розовое "magic" размыто поднимается снизу прямо перед склейкой.
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") проявляется из размытия и держится до конца. Все слова в кавычках — примеры, замени их своими.

Композиция

Пример палитры: тёмно-синий #1C0B5D, почти чёрный #04020C, ярко-розовый #FB2D89, оранжевый #FE9117, фиолетовый #8F7BFF, светло-серый #D2D4D9, серый для текста #4A4E56 и белый. Используй одну плотную гротескную гарнитуру, сверхжирную, с плотным трекингом (-0,045em), например Manrope ExtraBold, для каждого слова. Фоновое слово в сцене 2 — гигантский контур (text-stroke с прозрачностью около 20%). 3D-часть идёт на градиентах от глубокого тёмно-синего до почти чёрного, а сцена с логотипом — на тёмно-синем радиальном градиенте. Середина — светло-серая комната с виньетированием, а финал — чисто чёрный с неоновым свечением. Держи каждую строку текста внутри кадра с безопасными полями, особенно длинные строки "And I'm" и "unstoppable". Финальная карточка — логотип по центру белым с маленьким широко разрежённым слоганом под ним.

Техники

Резкие повороты камеры: 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 с на слоги бита; держится только логотип.

Музыка

Около 147 BPM, трэп в половинном темпе в соль миноре, инструментал, без вокала. Под частью с телефоном играет тёмный колокольный мотив с нарастающим напряжением. Полный бит (жёсткий бас-барабан 808, искажённый саб, клэп, катящиеся хэты с триольными роллами) врывается точно на склейке на 3D-логотип на 4,33 с. Подрежь трек так, чтобы дроп пришёлся именно туда. В конце затухание.

Звук

Поверх музыки только саунд-дизайн: бум, когда телефон приземляется, свисты на двух резких поворотах камеры и мерцание для голографического логотипа. Добавь удар на склейке на 3D-логотип, импакт на склейке на светлую комнату и свист на ирисе. Затем бум на склейке на чёрный, свисты, когда строки въезжают и вылетают, металлический удар, когда падают балки, и глубокий бум на финальном логотипе, затем затухание. Без закадрового голоса.

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

Ваш логотип в формате SVG или PNG с прозрачным фоном; он появляется в аватаре, голограмме, сцене с 3D-логотипом и на финальной карточке.

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

Превью техники «Кувырок телефона со спины к экрану» — На 0:00 в видео

3D

Кувырок телефона со спины к экрану

CSS-телефон (две стороны в одном контейнере preserve-3d) влетает маленьким и наклонённым, показывая светящуюся серебристую заднюю панель, поворачивается на 200 градусов по оси Y с power2.out примерно за 1 с и останавливается в вертикальном положении экраном к зрителю. Вложенное 3D игнорирует backface-visibility, поэтому стороны меняются местами через opacity в момент, когда телефон проходит ребром к зрителю (rotationY 90, здесь 0,3 с).

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

Показать код

<!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>
#stage{position:absolute;inset:0;perspective:1600px;background:radial-gradient(75% 55% at 50% 45%,#2a1585,#04020c)}
#cam{position:absolute;left:540px;top:960px;transform-style:preserve-3d}
#phone{position:absolute;left:-280px;top:-580px;width:560px;height:1160px;transform-style:preserve-3d}
.face{position:absolute;inset:0;border-radius:86px}
.front{background:#0d0b16;border:12px solid #5b5868;opacity:0}
.front .ui{color:#fff;font:800 60px sans-serif;text-align:center;margin-top:400px}
.back{transform:rotateY(180deg);background:linear-gradient(140deg,#fff,#bdbbc8);box-shadow:0 0 120px rgba(255,255,255,.55)}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3.0" data-width="1080" data-height="1920" style="position:relative;width:1080px;height:1920px;overflow:hidden;background:#000"><div id="stage"><div id="cam"><div id="phone"><div class="face back"></div><div class="face front"><div class="ui">"Your app"</div></div></div></div></div></div>
<script>
const tl = gsap.timeline({ paused: true });
// start pose: small, tilted, back to camera (rotationY 200)
tl.fromTo('#cam', { scale: 0.2, rotationY: 200, rotationZ: 38, rotationX: 18, y: -120 },
  { scale: 0.62, rotationY: 0, rotationZ: 0, rotationX: 6, y: 0, duration: 1.05, ease: 'power2.out' }, 0);
// swap faces when the spin passes edge-on (solve 200*(1-p)=90 for the ease)
tl.fromTo('.front', { opacity: 0 }, { opacity: 1, duration: 0.01 }, 0.3);
tl.fromTo('.back', { opacity: 1 }, { opacity: 0, duration: 0.01 }, 0.3);
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 в видео

Камера

Камера с точкой фокуса и размытием при резком панорамировании

Камера — это пустая точка preserve-3d в центре кадра; 3D-объект внутри неё смещён так, что выбранная точка фокуса (в собственных пикселях объекта) совпадает с этой точкой. Анимация точки фокуса даёт панораму, анимация масштаба и поворотов рига даёт наезд и крен, а blur(12-14px) длительностью 0,08-0,15 с на обёртке скрывает жёсткие склейки при резких проводках (здесь их две: на 1,95 с и на 3,0 с).

Когда использовать Пролёт камеры над экраном телефона, интерфейсом или 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>
#wrap{position:absolute;inset:0;background:#0b0620}
#stage{position:absolute;inset:0;perspective:1600px}
#cam{position:absolute;left:540px;top:960px;transform-style:preserve-3d}
#obj{position:absolute;left:0;top:0;width:560px;height:1160px;background:#14121c;border-radius:80px}
.a,.b{position:absolute;color:#fff;font:800 40px sans-serif}
.a{left:60px;top:200px}.b{left:60px;top:700px;color:#fb2d89}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3.7" data-width="1080" data-height="1920" style="position:relative;width:1080px;height:1920px;overflow:hidden;background:#000"><div id="wrap"><div id="stage"><div id="cam"><div id="obj"><div class="a">"Header"</div><div class="b">"Avatar"</div></div></div></div></div></div>
<script>
const tl = gsap.timeline({ paused: true });
const focus = (fx, fy) => ({ x: -fx, y: -fy }); // object pixel that sits on the camera point
tl.set('#obj', focus(280, 580), 0);
tl.fromTo('#cam', { scale: 0.6, rotationX: 6 }, { scale: 1.35, rotationX: 48, rotationZ: -14, duration: 0.9, ease: 'power2.in' }, 0);
// whip: blur in, jump the rig, blur out
tl.to('#wrap', { filter: 'blur(14px)', duration: 0.08, ease: 'none' }, 0.85);
tl.set('#cam', { scale: 2.6, rotationX: 34, rotationZ: -20 }, 0.93);
tl.set('#obj', focus(160, 220), 0.93);
tl.to('#wrap', { filter: 'blur(0px)', duration: 0.12, ease: 'power1.out' }, 0.98);
// slow track to the next focus point
tl.to('#obj', { ...focus(160, 720), duration: 1.4, ease: 'sine.inOut' }, 1.1);
tl.to('#cam', { rotationZ: -30, duration: 1.4, ease: 'sine.inOut' }, 1.1);
window.__timelines = window.__timelines || {}; window.__timelines['main'] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Превью техники «Объёмный логотип с вращающимся кольцом из слова» — На 0:05 в видео

3D

Объёмный логотип с вращающимся кольцом из слова

Плоский знак логотипа превращается в объёмный 3D-объект: 15 его копий, сложенных с шагом 2,5 px в группе preserve-3d; передняя — в полном цвете со свечением, остальные — одного глубокого тона, последняя развёрнута, чтобы читалась и обратная сторона. Группа въезжает с вращением из наклонённой позы с power3.out за 1 с, покачивается и улетает уменьшаясь с power3.in. Под ней буквы одного жирного слова (extra-bold, градиентная заливка от оранжевого к розовому, свечение) расположены на цилиндре (rotateY(i*22deg) translateZ(380px), обратная сторона скрыта); кольцо поворачивается на 200 градусов, слово проносится по передней части, затем улетает. Огромное контурное слово на фоне плавно появляется и уплывает вверх.

Когда использовать Момент с логотипом, у которого есть настоящая глубина из плоского SVG, без 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>
#bg{position:absolute;left:-200px;top:300px;font:800 330px sans-serif;color:transparent;-webkit-text-stroke:3px rgba(255,140,200,.22);white-space:nowrap;opacity:0}
#stage{position:absolute;inset:0;perspective:1400px;background:radial-gradient(70% 50% at 50% 50%,#3a1aa8,#07031a)}
#mark,#ring{position:absolute;left:540px;top:960px;transform-style:preserve-3d}
#ring{top:1250px}
.lay{position:absolute;left:-150px;top:-150px;width:300px;height:300px;border-radius:50% 50% 50% 8%;background:#7c1650}
.lay.front{background:conic-gradient(from 200deg,#fb2d89,#fe9117,#fff 60%,#fb2d89);box-shadow:0 0 40px rgba(251,45,137,.85)}
#ring span{backface-visibility:hidden;position:absolute;left:-65px;top:-95px;width:130px;text-align:center;font:800 190px/190px sans-serif;background:linear-gradient(180deg,#ffe2a8,#fe9117 38%,#fb2d89);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 16px rgba(251,45,137,.75))}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3.1" data-width="1080" data-height="1920" style="position:relative;width:1080px;height:1920px;overflow:hidden;background:#000"><div id="bg">"WOW WOW"</div><div id="stage"><div id="mark"></div><div id="ring"></div></div></div>
<script>
const mark = document.getElementById('mark');
const ring = document.getElementById('ring');
const layers = 14, gap = 2.5; // depth layers and the distance between them (px)
for (let k = 0; k <= layers; k++) { const d = document.createElement('div'); d.className = 'lay' + (k === 0 ? ' front' : ''); d.style.transform = `translateZ(${-k * gap}px)` + (k === layers ? ' rotateY(180deg)' : ''); mark.appendChild(d); }
const word = 'AHHHH', step = 22, radius = 380; // letter spacing in degrees, ring radius
[...word].forEach((c, i) => { const s = document.createElement('span'); s.textContent = c; s.style.transform = `rotateY(${(i - (word.length - 1) / 2) * step}deg) translateZ(${radius}px)`; ring.appendChild(s); });
const tl = gsap.timeline({ paused: true });
tl.fromTo('#mark', { scale: 0.45, rotationX: 25, rotationY: -150, rotationZ: 20 }, { scale: 1, rotationX: 8, rotationY: 0, rotationZ: -4, duration: 1, ease: 'power3.out' }, 0);
tl.to('#mark', { rotationY: 12, rotationX: -6, rotationZ: 3, duration: 0.56, ease: 'sine.inOut' }, 1);
tl.to('#mark', { scale: 0.35, rotationY: 120, rotationZ: -45, rotationX: 30, duration: 0.56, ease: 'power3.in' }, 1.57);
tl.fromTo('#ring', { rotationY: -200, rotationZ: -18, rotationX: 12, scale: 0.5 }, { rotationY: 0, rotationZ: -6, scale: 1, duration: 1.4, ease: 'power2.out' }, 0);
tl.to('#ring', { rotationY: 160, rotationZ: 30, scale: 0.4, duration: 0.73, ease: 'power2.in' }, 1.4);
tl.fromTo('#bg', { opacity: 0, y: 0 }, { opacity: 1, y: -140, duration: 2.1, ease: 'power1.out' }, 0.4);
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-комнате, с ирисовой диафрагмой» — На 0:07 в видео

Типографика

Буквы, набранные в 3D-комнате, с ирисовой диафрагмой

Каждое слово разбито на буквы, которые подпрыгивают из rotationX -70 и y +40 с back.out(2) за 0,18 с с шагом 30-70 мс, в такт слогам; одно слово стоит в чёрной плашке, которая сначала появляется тонкой линией (scaleX 0.03) и раскрывается за 0,16 с, одно слово выделено акцентным цветом. Вся группа слов — слой preserve-3d, над которым камера дрейфует тремя движениями по 0,6 с с sine. Чёрная накладка с радиальной градиентной маской, управляемой CSS-переменными, закрывается до эллипса за 0,22 с и снова открывается за 0,25 с при смене строки, пока старые слова уходят влево за 0,2 с.

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

Показать код

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Буквы, набранные в 3D-комнате, с ирисовой диафрагмой</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>
#room{position:absolute;inset:0;background:radial-gradient(62% 44% at 50% 48%,#f6f6f8,#d2d4d9 48%,#6b6f77)}
#stage{position:absolute;inset:0;perspective:1300px}
#grp{position:absolute;left:540px;top:960px;transform-style:preserve-3d}
.w{position:absolute;white-space:nowrap;font:800 140px/1 sans-serif;letter-spacing:-.045em;color:#4a4e56}
.ch{display:inline-block}
#w1{left:-330px;top:-260px}#w2{left:-290px;top:-120px}#w3{left:-320px;top:30px;color:#fb2d89;font-size:170px}
#w2t{position:relative;color:#fff;padding-left:40px}
#box{position:absolute;left:-10px;top:-12px;width:300px;height:160px;background:#17181c;transform-origin:0 50%}
#iris{position:absolute;inset:0;background:#000;--rx:1500px;--ry:1500px;-webkit-mask-image:radial-gradient(var(--rx) var(--ry) at 50% 50%,transparent 97%,#000 100%);mask-image:radial-gradient(var(--rx) var(--ry) at 50% 50%,transparent 97%,#000 100%)}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3.8" data-width="1080" data-height="1920" style="position:relative;width:1080px;height:1920px;overflow:hidden;background:#000"><div id="room"><div id="stage"><div id="grp"><div class="w" id="w1">"yeah"</div><div class="w" id="w2"><div id="box"></div><span id="w2t">"she"</span></div><div class="w" id="w3">"typed"</div></div></div><div id="iris"></div></div></div>
<script>
const w1 = document.getElementById('w1');
const w2t = document.getElementById('w2t');
const w3 = document.getElementById('w3');
const tl = gsap.timeline({ paused: true });
const split = (el) => { const t = el.textContent.replace(/"/g, ''); el.textContent = ''; return [...t].map((c) => { const s = document.createElement('span'); s.className = 'ch'; s.textContent = c; el.appendChild(s); return s; }); };
// at: first letter, gap: seconds between letters
const type = (chars, at, gap) => chars.forEach((c, i) => tl.fromTo(c, { opacity: 0, y: 40, rotationX: -70 }, { opacity: 1, y: 0, rotationX: 0, duration: 0.18, ease: 'back.out(2)' }, at + i * gap));
type(split(w1), 0.05, 0.07);
tl.fromTo('#box', { opacity: 0, scaleX: 0.03 }, { opacity: 1, scaleX: 0.03, duration: 0.01 }, 0.45);
tl.to('#box', { scaleX: 1, duration: 0.16, ease: 'power3.out' }, 0.52);
type(split(w2t), 0.62, 0.04);
type(split(w3), 0.85, 0.035);
tl.fromTo('#grp', { rotationY: -28, rotationX: 14, rotationZ: -10, z: -220 }, { rotationY: 8, rotationX: 8, rotationZ: 0, z: -20, duration: 1.2, ease: 'sine.inOut' }, 0);
tl.to('#grp', { rotationY: 16, z: 40, duration: 0.6, ease: 'sine.inOut' }, 1.2);
// the lens closes to an ellipse and opens again
tl.to('#iris', { '--rx': '560px', '--ry': '240px', duration: 0.22, ease: 'power2.in' }, 1.65);
tl.to('#iris', { '--rx': '1500px', '--ry': '1500px', duration: 0.25, ease: 'power2.out' }, 1.93);
window.__timelines = window.__timelines || {}; window.__timelines['main'] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

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

Типографика

Стопка светящихся строк с цветовой кодировкой, планками и размытой заставкой

На чёрном фоне каждая строка текста получает свой цвет и свечение (text-shadow 30 px того же оттенка) и своё появление: буквы врываются с scale 1.8 и z 200, целое слово влетает с x +500 из размытия 12 px, буквы поднимаются на 60 px, буквы врываются с x -160 со skewX -25 и шлейфом из смещённых text-shadow. Стопка находится в медленно вращающейся 3D-группе (scale 1.35) и улетает вверх за 0,25 с с power3.in. Последняя строка появляется по словам из размытия, пять металлических планок (цилиндры с горизонтальным градиентом) падают поверх неё с power3.in с шагом 30 мс, всё растворяется в размытии за 0,25 с, а белый логотип проявляется из размытия 24 px и масштаба 1.08 за 0,45 с, затем медленно сдвигается к 1.04.

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

Показать код

<!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>
#stage{position:absolute;inset:0;perspective:1300px;background:#000}
#grp{position:absolute;left:540px;top:960px;transform-style:preserve-3d}
.g{position:absolute;white-space:nowrap;font:800 120px/1 sans-serif;letter-spacing:-.045em}
.ch{display:inline-block}
#l1{left:-300px;top:-200px;color:#fe9117;text-shadow:0 0 30px rgba(254,145,23,.7)}
#l2{left:-300px;top:-60px;font-size:100px;color:#8f7bff;text-shadow:0 0 26px rgba(120,95,255,.85)}
#l3{left:-260px;top:70px;font-size:150px;color:#fb2d89;text-shadow:-26px 0 0 rgba(251,45,137,.35),-52px 0 0 rgba(251,45,137,.15),0 0 30px rgba(251,45,137,.8)}
#bars{position:absolute;inset:0}
.bar{position:absolute;top:-40px;width:64px;height:2000px;border-radius:32px;background:linear-gradient(90deg,#07080b,#3b3f48 35%,#9aa0ab 50%,#3b3f48 65%,#07080b)}
#end{position:absolute;left:0;right:0;top:880px;text-align:center;font:800 150px sans-serif;color:#fff;text-shadow:0 0 30px rgba(255,255,255,.45);opacity:0}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="5.0" data-width="1080" data-height="1920" style="position:relative;width:1080px;height:1920px;overflow:hidden;background:#000"><div id="stage"><div id="grp"><div class="g" id="l1">"And I'm"</div><div class="g" id="l2">"unstoppable"</div><div class="g" id="l3">"MOTION"</div></div></div><div id="bars"></div><div id="end">"BRAND"</div></div>
<script>
const l1 = document.getElementById('l1');
const l3 = document.getElementById('l3');
const bars = document.getElementById('bars');
[110, 310, 517, 724, 924].forEach((x) => { const b = document.createElement('div'); b.className = 'bar'; b.style.left = x + 'px'; bars.appendChild(b); });
const tl = gsap.timeline({ paused: true });
const split = (el) => { const t = el.textContent.replace(/"/g, ''); el.textContent = ''; return [...t].map((c) => { const s = document.createElement('span'); s.className = 'ch'; s.textContent = c; el.appendChild(s); return s; }); };
const type = (chars, at, gap, from) => chars.forEach((c, i) => tl.fromTo(c, { opacity: 0, ...from }, { opacity: 1, x: 0, y: 0, z: 0, scale: 1, skewX: 0, duration: 0.2, ease: 'power3.out' }, at + i * gap));
tl.fromTo('#grp', { rotationY: -18, rotationX: 10, scale: 1.35 }, { rotationY: 10, rotationX: 4, scale: 1.35, duration: 2.6, ease: 'sine.inOut' }, 0);
type(split(l1), 0.1, 0.04, { scale: 1.8, z: 200 });
tl.fromTo('#l2', { x: 500, opacity: 0, filter: 'blur(12px)' }, { x: 0, opacity: 1, filter: 'blur(0px)', duration: 0.3, ease: 'power3.out' }, 0.8);
type(split(l3), 1.5, 0.05, { x: -160, skewX: -25 });
tl.to('#grp', { y: -1300, rotationX: 30, duration: 0.25, ease: 'power3.in' }, 2.6);
tl.fromTo('.bar', { y: -2100 }, { y: 0, duration: 0.3, ease: 'power3.in', stagger: 0.03 }, 2.9);
tl.to('#bars', { opacity: 0, filter: 'blur(18px)', duration: 0.25, ease: 'power2.in' }, 3.5);
tl.fromTo('#end', { opacity: 0, scale: 1.08, filter: 'blur(24px)' }, { opacity: 1, scale: 1, filter: 'blur(0px)', duration: 0.45, ease: 'power2.out' }, 3.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>

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

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

Simple MotionNPX

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

placeholder

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

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

Simple MotionMOV

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

<direction> Сделай вертикальный бренд-ролик длиной 19,2 секунды (1080x1920, 30 fps) с бесшовным зацикливанием. Это чистая моушн-графика, смонтированная под бит 150 BPM (0,4 с на удар, 12 тактов). Идея: один глянцевый шар — герой всего фильма. Он прыгает по манифесту-хуку «слово на удар», становится грузом маятника, превращается в лампу, которая освещает страницу, пережидает быстрый монтаж за названием твоего бренда и остаётся один на финальной карточке ровно там, где начинается первый кадр. Стиль: смелая редакционная типографика на плоских фонах цвета глубокой ночи и бумаги, розово-оранжевый градиентный акцент и фиолетовый второй акцент. Темп: безумный первые 3,2 с, затем две длинные дышащие сцены на пульсе в два удара, 3,2 с всплеска монтажа на восьмых, 2 с кульминации и тихая точка зацикливания. Избегай съёмок, закадрового голоса, мягких наплывов и любых склеек мимо бита: каждая склейка приходится на удар или полудар. Слова акцентного цвета должны быть того же начертания ExtraBold, что и остальные, никогда не тоньше. </direction> <structure> 1. Хук, 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). Замени их своими строками манифеста. Фон переключается между тёмным и бумажным на каждой склейке. На «свет» и «глубину» шар улетает вверх и за край в левом верхнем углу. 2. Маятник, 3,2–8,0 с. Бумажный фон. Шар становится грузом (112 px) тонкого тёмного стержня, подвешенного к оси в 380 px над верхним центром (длина плеча 1317 px). Размытая тень стержня и груза смещена вправо. Двустрочный заголовок капсом стоит посередине и меняется при каждом взмахе: «СДЕЛАНО / ВРУЧНУЮ?» → «СДЕЛАНО / КОДОМ.» (вторая строка акцентом) → «НИКАКОГО / ТАЙМЛАЙНА.» → «НИКАКИХ / КЛЮЧЕВЫХ КАДРОВ.» → «ТОЛЬКО / СЛОВА.» (акцент) → «И / СВЕТ.». Это примеры, замени их. На 7,2 с свет гаснет за линией стержня, а последний взмах тянет темноту через весь кадр. 3. Лампа, 8,0–12,8 с. Тёмный #14112E. Шар становится светящейся лампой, конус света которой открывает бумажную страницу. На странице написано «СВЕТ — / ЭТО ВСЕГО / ЛИШЬ МАТЕМАТИКА.» капсом (пример; последняя строка фиолетовая) и небольшой логотип около y 1430: градиентная точка и твой логотип-надпись чернилами. С 12,27 с вся страница освещена. 4. Монтаж, 12,8–16,0 с. На дропе «[твой бренд]» шрифтом Anton (около 260 px высотой, по центру) неподвижен, а мир позади него меняется на каждую восьмую (0,2 с). Миры по порядку: - глянцевый мраморный розово-оранжевый 3D-блоб с хорошо видимым краем на сером - тот же блоб ближе - плоские блоки: фиолетовые, тёмные и бумажные квадраты и акцентный градиент - гипнотические чернильно-бумажные кольца, которые приближаются и вращаются - пустая бумажная бирка, качающаяся на нитке на фиолетовом - поле тёмных клавиш сверху, несколько розовых и оранжевых клавиш нажимаются - тор из чётких полутоновых точек на тёмном - плоский фиолетовый с едва заметной сеткой - игрушечные 3D-фигуры, кувыркающиеся на тёмно-сливовом (кубы, шары, кольца, конусы и капсулы цветов палитры плюс жёлтый #FFD23F) - те же фигуры, размытые, на пастельно-розовом - стеклянный телефон на сером - блоб на фиолетовом - пол из белых кубов, из которого растут розовые и оранжевые колонны - полутоновый тор из чернильных точек на белом - плоский коралловый с сеткой 5. Воксельный финал, 16,0–18,2 с. Фиолетовый фон. Короткое слово (твой продукт или вторая половина названия бренда) собирается из маленьких кубов. Полностью сформировано к 16,6 с, дышит, затем разлетается с 17,72 с, пока из центра открывается чёрная дыра и заполняет кадр к 18,17 с. 6. Финальная карточка, 18,2–19,2 с. Тёмная. Шар вырастает из ничего в центре (142 px, x 539, y 959). Твой логотип-надпись в розово-оранжевом градиенте появляется под ним на 18,1 с, держится и исчезает на 18,85 с. Остаётся только шар ровно там, где начинается первый кадр, поэтому цикл бесшовный. </structure> <composition> Палитра: - глубокая ночь #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. </composition> <techniques> Хук: - Каждое слово появляется за четыре кадра с сильным 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 с. </techniques> <music> Создай оригинальный тёмный, ударный инструментальный электронный трек на 150 BPM в ре миноре с ощущением half-time (бочка на раз, снейр на три). В нём искажённый пульсирующий бас на восьмых, чёткие ударные и напряжённые пэды, а также обработанная вокальная нарезка без слов как текстура, без пения. Играет с первого кадра. Его бочки и снейры падают на склейки слов и взмахи маятника, а дроп наступает на 12,8 с. Заканчивается тяжёлым ударом с тёмным аккордом точно на чёрной дыре на 18,0 с, который звучит под финальной карточкой. Обрежь до 19,2 с по такту. </music> <sound> Накладывай поверх музыки: - тихий клик на каждую вспышку слова - свист на каждый взмах - райзер перед маятником - падающий свип, когда гаснет свет - колокольчик, когда шар загорается - райзер в бум на монтаже на 12,8 с - тихий тик на каждый новый мир - свист, когда кубы влетают - небольшой бум, когда слово встаёт на место - райзер в глубокий бум под чёрной дырой Без голоса. </sound>

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

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

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. Выбор можно изменить внизу страницы.

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