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

RU

Открыть beta

Simple Motion

Одна точка: бесшовная петля фигур одним кадром

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

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

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

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

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

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

Замысел

Сделай 29-секундный горизонтальный фильм 1920x1080, 60 к/с, снятый одним планом. Одна напечатанная точка превращается в череду фигур: линию, круг, глянцевую сферу, стеклянную линзу, прыгающий мяч, рой частиц и глобус. Фильм заканчивается точкой в конце финальной фразы, поэтому последний кадр плавно переходит в первый, и фильм зацикливается. Склеек нет вообще: каждая фигура вырастает из предыдущей, а камера не останавливается ни на миг. Всё нарисовано: шрифт, штрихи и 3D-фигуры на светлой странице, без видеосъёмки, фото и стоков. Настроение тихое, редакционное, как фигуры в учебнике: бледная страница, рисунок и шрифт глубокого чернильного цвета и один розовый акцент. Избегай склеек, лишних цветов и декоративного мусора. Ни текст, ни фигура, ни след не должны выходить за края кадра или заходить на верхний колонтитул.

Структура

0–2 с, точка. 5-пиксельная розовая каретка стоит на пустой странице. На 0,5 с она печатает точку в 14 px ровно там, где будет точка финальной фразы (правее центра, чуть ниже), шагает вправо и исчезает за 0,12 с. Камера ныряет в точку: её масштаб интерполируется в логарифмическом пространстве от 14 px до диска в 130 px, пока точка скользит в точный центр, обе операции на одной кривой sine.inOut с 0,53 до 1,98 с.
2–4,5 с, линия. Точка движется шагами power2.inOut: вправо примерно на 390 px (2,0–2,5 с), далеко влево (2,5–3,5 с), назад в центр (3,5–4,0 с), снова вправо (4,0–4,5 с). Штрих, который она оставляет, — это просто диапазон, который она посетила. Тем временем камера плавно отъезжает с масштаба 1 до 0,655.
4,5–6 с, круг. Один поворот power2.inOut длиной 1 с проводит точку против часовой стрелки по полному кругу, который сам рисуется за ней. Затем точка возвращается в центр (5,5–6,0 с). Появляются две маленькие розовые курсивные подписи с тонкими линиями-выносками: «bigger» над диаметром (4,6 с) и «slower» в верхней левой части круга (5,6 с).
6–8,2 с, сфера. Страница наклоняется в пол: за 2,2 с, с мягким началом и долгим затуханием, камера облетает от вида строго сверху до примерно 62° от вертикали, поворачивается примерно на 20° по азимуту и приближается. Плоский диск становится глянцевой сферой глубокого чернильного цвета с мягкой тенью справа. Подписи остаются вертикальными, закреплёнными на своих местах на полу, и уходят на 7,8 с.
8,2–11,2 с, линза. Диаметр стирается от центра к краям за 0,15 с, а круг рассыпается пятнами шума. Блок из восьми моноширинных строк проявляется радиально по полу за шаром. Примеры строк (замени своими): «Describe your idea», «Tell the chat what to show.», «The agent builds the animation.», «No keyframes to hunt for.», «Say what should change.», «“Bigger”, “slower”, “another colour”:», «the preview updates as you talk.», «Refine in words, then export». Шар становится прозрачным стеклом за 0,2 с и катится влево по словам за 2,4 с (sine.inOut), камера следует за ним. Слова на полу мягко гаснут, не доходя до левого и правого краёв кадра. Рядом с шаром розовая подпись «another colour». На 11,0 с слова гаснут, и шар снова глубокого чернильного цвета.
11,2–16 с, шар. Камера отъезжает. Шар приседает на 0,15 с и прыгает вправо с коэффициентом восстановления 0,75: полёты по 0,98 с × 0,75ⁿ, так что он останавливается точно на 16 с. Он оставляет розовую пунктирную траекторию, а вершина первой дуги остаётся ниже колонтитула. Камера следует за шаром и приближается по мере того, как прыжки уменьшаются. Подпись «sound effects» висит над второй дугой и исчезает до того, как та достигнет края кадра.
16–20,6 с, стая. Шар стирается сверху вниз за 0,6 с, пока 8192 маленькие точки глубокого чернильного цвета слетают с его поверхности в том же порядке, поднимаются и роятся. Они образуют плотное облако, которое растягивается, поворачивается и складывается в полумесяцы, с мягкой широкой тенью на полу. Подпись «shapes».
20,6–23,4 с, мир. Точки садятся, с разбросом в 0,3 с, на сушу глобуса, который затем проявляется. Розовая ось получает подпись «vertical». Глобус вращается с запада на восток, и на 22 с Африка обращена к камере.
23,2–25,1 с, назад к странице. Глобус уменьшается и темнеет до плоского диска, пока орбита выравнивается обратно до вида строго сверху. Затем камера отъезжает обратным нырком (sine.inOut, около 1,1 с), пока диск снова не станет точкой в 14 px.
25–29 с, точка. Финальная фраза печатается по одному символу на кадр с розовой кареткой, в две строки, последняя из которых заканчивается этой точкой. Пример: «Describe the video.», затем «The agent animates it» (замени своей двустрочной фразой). На 26,08 с каретка перепрыгивает через точку и мигает с частотой 1 Гц до конца, а вся фраза сдвигается на 3% к точке. Подпись «MP4 export» печатается на 26 с. На 26,6 с проявляется нижний колонтитул с твоим призывом к действию и адресом сайта, по центру внизу, например «TRY IT FREE · [YOUR ADDRESS]». Последний кадр совпадает с первым, так что фильм зацикливается.
Подписи начинаются на тактах музыки (замени их своими короткими парами «метка и фраза»):

«IDEAS in motion» на 0,6 с
«CHAT instead of a timeline» на 2 с
«EDIT in words» на 4 с
«3D effects» на 6 с
«LIVE preview» на 8 с
«MUSIC to the rhythm» на 12 с
«NO keyframes» на 16 с
«FONTS for every script» на 21 с, исчезает на 24 с
«MP4 export» на 26 с

Композиция

Палитра:

Страница #FAF9FF с очень мягкой лавандовой виньеткой к краям (глубокие чернила около 5% по краям).
Глубокие чернила #1C0B5D для всех рисунков и тёмного шрифта.
Розовый #FB2D89 как единственный акцент: для подписей, кареток, пунктирного следа и оси глобуса.
Приглушённый #6B6385 для маленьких верхнего и нижнего колонтитулов.
Шрифты:
Spectral regular для большой финальной фразы.
Spectral italic для фраз в подписях и надписей у фигур.
Spectral semibold капителью для меток подписей, колонтитулов и нижней строки.
JetBrains Mono для слов, напечатанных на полу.
Неизменные элементы кадра на весь фильм: вверху слева «[YOUR BRAND]», вверху справа короткий дескриптор, например «YOUR AI MOTION DESIGNER» (замени своим). Оба набраны полужирными заглавными по 21 px с трекингом 0,14em, приглушённым цветом, на 80 px от краёв. Под каждой фигурой стоит подпись по центру постоянного размера: розовая метка капителью, затем курсивная фраза. Надписи у фигур — маленький розовый курсив с тонкими линиями-выносками. Финальная фраза — две строки Spectral 129 px, начинающиеся с одного x. Блок центрирован по горизонтали, его вертикальный центр немного выше середины кадра. Сначала измерь обе строки и поставь точку там, где заканчивается центрированный блок, чтобы начало фильма печатало свою точку точно на этом месте. Держи все подписи, надписи, слова на полу и следы внутри кадра и вдали от колонтитула.

Техники

Подписи печатаются слева со скоростью 20 символов в секунду, тонкая розовая каретка остаётся ещё 0,35 с после последнего символа. Каждая стирается по одному символу на кадр перед сменой следующей подписью.
Штрихи толщиной около 12 px с слегка шероховатым чернильным краем. Каждый движется в такт.
У сферы глубокого чернильного цвета студийные отражения: большой мягкий софтбокс вверху слева, тонкая полоса справа и пол в нижней половине.
Стеклянный шар преломляет, переходя в сферу и обратно, и отражает пол, так что слова видны в нём вверх ногами. Его тень несёт яркую каустику.
Прыгающий шар немного сплющивается и вытягивается при каждом касании. Его след роняет одну розовую точку каждые 1/30 с.
У глобуса континенты из полутоновых точек глубокого чернильного цвета на бледной сфере с освещением сверху слева. Слабая розовая сетка каждые 30°, чёткий контур и розовая ось с наклоном 23,4°, торчащая на обоих полюсах.
Надписи остаются вертикальными и закреплёнными на своих местах на полу, пока камера облетает.
Кривые: sine.inOut для нырков и стеклянного качения, power2.inOut для шагов линии и поворота круга, мягкий старт с долгим затуханием для наклона.
Масштаб нырков интерполируется в логарифмическом пространстве, чтобы зум ощущался равномерным.

Музыка

Используй 120 BPM, доля каждые полсекунды, подписи на тактах, штрихи на долях. Сделай яркую бодрую подложку в стиле synthwave/chiptune длиной ровно 29 с:

один мягкий колокольчик, когда печатается точка
быстрые арпеджио с 2 с
тёплые пэды и мягкое тиканье с 6 с
короткий провал на 12 с
райзер в самую энергичную часть на 16 с, с напористыми ударными и басом под роем и глобусом
бит уходит около 23 с
лёгкая кода с мягким пэдом под печать, затухающая в последние полсекунды
Цель: около -14 LUFS, true peak ниже -1 dBTP.

Звук

Звуковые эффекты только на то, что происходит в кадре, под музыкой:

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

Референсы

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

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

Превью техники «Печатная подпись с задерживающейся кареткой» — На 0:02 в видео

Типографика

Печатная подпись с задерживающейся кареткой

Метка капителью акцентного цвета и курсивная фраза, выровненные по центру всей подписи, печатаются слева со скоростью 20 символов в секунду. Каретка держится 0,35 с после последнего символа и исчезает; перед следующей подписью стирается по одному символу за кадр, а метка меняется в тот момент, когда текст пуст.

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

Показать код

<!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=Spectral:ital,wght@0,600;1,400&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #faf9ff; font-family: "Spectral", serif; }
#page { position: absolute; inset: 0; background: radial-gradient(ellipse 72% 105% at 50% 50%, rgba(28,11,93,0) 62%, rgba(28,11,93,0.05) 100%); }
#cap { position: absolute; left: 0; top: 500px; height: 70px; white-space: nowrap; }
#lab { position: absolute; top: 22px; font-size: 27px; line-height: 1; font-weight: 600; letter-spacing: 0.12em; color: #fb2d89; }
#txt { position: absolute; top: 5px; font-size: 48px; line-height: 1; font-style: italic; color: #1c0b5d; }
#car { position: absolute; top: 10px; width: 2.5px; height: 46px; background: #fb2d89; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="5" data-width="1920" data-height="1080">
  <div id="page" class="clip" data-start="0" data-duration="5"></div>
  <div id="cap" class="clip" data-start="0" data-duration="5"><span id="lab"></span><span id="txt"></span><span id="car"></span></div>
</div>
<script>
// A caption typed like a figure label: 20 characters a second, the caret stays 0.35 s after the last one,
// then the text is backspaced one character a frame so the next caption can type in its place.
const CAPS = [ // start (s), label, text; each caption ends where the next one starts
  { t: 0.3, l: "IDEAS", s: "in motion" },
  { t: 2.5, l: "CHAT", s: "instead of a timeline" },
  { t: 5.0 },
];
const RATE = 0.05;   // seconds per typed character
const HOLD = 0.35;   // the caret stays this long after the last character
const FPS = 60;      // the backspace removes one character per frame
const GAP = 32;      // px between the label and the text
const lab = document.getElementById("lab"), txt = document.getElementById("txt"), car = document.getElementById("car"), cap = document.getElementById("cap");
const probe = document.createElement("span"); probe.style.cssText = "position:absolute;visibility:hidden;white-space:nowrap"; document.getElementById("root").appendChild(probe);
function width(text, ref) { const cs = getComputedStyle(ref); probe.style.font = cs.font; probe.style.letterSpacing = cs.letterSpacing; probe.textContent = text; return probe.getBoundingClientRect().width; }
function draw(t) {
  let k = -1; for (let i = 0; i < CAPS.length - 1; i++) if (t >= CAPS[i].t) k = i;
  if (k < 0) { cap.style.opacity = 0; return; }
  const c = CAPS[k], next = CAPS[k + 1].t, n = c.s.length;
  let shown = Math.min(n, Math.floor((t - c.t) / RATE));
  let caret = t < c.t + n * RATE + HOLD;
  if (t >= next - (n + 1) / FPS) { shown = Math.max(0, Math.min(n, Math.round((next - t) * FPS) - 1)); caret = false; }
  const lw = width(c.l, lab), full = lw + GAP + width(c.s, txt);
  cap.style.opacity = 1;
  cap.style.transform = `translateX(${Math.round(960 - full / 2)}px)`; // centred on the whole caption, typed from the left
  lab.textContent = c.l; txt.textContent = c.s.slice(0, shown); txt.style.left = `${lw + GAP}px`;
  car.style.left = `${lw + GAP + width(c.s.slice(0, shown), txt) + 4}px`; car.style.opacity = caret ? 1 : 0;
}
const tl = gsap.timeline({ paused: true });
const clock = { t: 0 };
tl.to(clock, { t: 5, duration: 5, ease: "none", onUpdate: () => draw(clock.t) }, 0);
document.fonts.ready.then(() => draw(tl.time()));
window.__timelines = window.__timelines || {}; window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Превью техники «Погружение в точку» — На 0:01 в видео

Камера

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

Камера приближается к точке в конце напечатанного предложения: масштаб интерполируется в логарифмическом пространстве от точки 14 px до диска 130 px, а положение точки на экране линейно смещается к центру; всё это на одной кривой sine.inOut длительностью около 1,45 с, поэтому рост выглядит как равномерное погружение. В обратном направлении кадр отъезжает к той же точке в конце, что замыкает цикл.

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

Показать код

<!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=Spectral:wght@400&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #faf9ff; font-family: "Spectral", serif; }
#cam { position: absolute; inset: 0; transform-origin: 0 0; }
#line { position: absolute; right: 559px; top: 528px; font-size: 129px; line-height: 1; color: #1c0b5d; white-space: nowrap; }
#stop { position: absolute; left: 1363.5px; top: 614.4px; width: 14px; height: 14px; border-radius: 50%; background: #1c0b5d; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080">
  <div id="cam" class="clip" data-start="0" data-duration="4"><div id="line">“The agent animates it</div><div id="stop"></div></div>
</div>
<script>
// The camera dives into the full stop of a sentence: its scale is interpolated in log space and the dot's place on screen
// linearly, both on one sine.inOut, so the dot grows at a steady rate and arrives in the centre as a 130 px disc.
const STOP = { x: 1370.5, y: 621.4, d: 14 };  // the dot at rest, on screen
const END = { x: 960, y: 540, d: 130 };       // where the dive ends
const T0 = 1.0, T1 = 2.45;                    // the dive, seconds
const cam = document.getElementById("cam"), line = document.getElementById("line");
const sio = (u) => -(Math.cos(Math.PI * u) - 1) / 2;
function draw(t) {
  const u = sio(Math.min(1, Math.max(0, (t - T0) / (T1 - T0))));
  const s = Math.pow(END.d / STOP.d, u);                 // log-space zoom
  const x = STOP.x + (END.x - STOP.x) * u, y = STOP.y + (END.y - STOP.y) * u; // where the dot is now
  cam.style.transform = `translate(${x}px, ${y}px) scale(${s}) translate(${-STOP.x}px, ${-STOP.y}px)`;
  line.style.opacity = 1 - Math.min(1, Math.max(0, (t - T0) / 0.5)); // the words leave as the dot takes over
}
const tl = gsap.timeline({ paused: true });
const clock = { t: 0 };
tl.to(clock, { t: 4, duration: 4, ease: "none", onUpdate: () => draw(clock.t) }, 0);
draw(0);
window.__timelines = window.__timelines || {}; window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Превью техники «Точка, рисующая свою линию и круг» — На 0:04 в видео

Фигуры

Точка, рисующая свою линию и круг

Точка движется полусекундными шагами power2.inOut (вправо, далеко влево, назад, вправо), а штрих — это просто пройденный ею диапазон; затем один поворот в 1 с с power2.inOut рисует за ней круг, и точка возвращается в центр ещё одним шагом в 0,5 с. Смещение на основе фрактального шума придаёт каждому штриху неровный чернильный край.

Когда использовать Объяснения по геометрии и построение логотипов, где движущийся элемент должен наглядно рисовать фигуру.

Показать код

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Точка, рисующая свою линию и круг</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #faf9ff; }
#ink { position: absolute; inset: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="5" data-width="1920" data-height="1080">
  <svg id="ink" class="clip" data-start="0" data-duration="5" width="1920" height="1080" viewBox="0 0 1920 1080">
    <defs><filter id="rough" x="-5%" y="-5%" width="110%" height="110%"><feTurbulence type="fractalNoise" baseFrequency="0.09" numOctaves="2" seed="7" /><feDisplacementMap in="SourceGraphic" scale="3.5" /></filter></defs>
    <g filter="url(#rough)" stroke="#1c0b5d" stroke-width="8.5" stroke-linecap="round" fill="none">
      <line id="seg" x1="960" y1="540" x2="960" y2="540" />
      <circle id="arc" cx="960" cy="540" r="256" transform="rotate(0 960 540) scale(1 -1) translate(0 -1080)" />
    </g>
    <circle id="dot" cx="960" cy="540" r="42.5" fill="#1c0b5d" />
  </svg>
</div>
<script>
// A dot draws with its own path: power2.inOut moves on half-second steps (right, far left, centre, right), the line is
// the range the dot has visited, then one power2.inOut turn of 1 s draws the circle behind it and the dot returns to the centre.
const R = 256, C = { x: 960, y: 540 };                       // circle radius and centre, px
const seg = document.getElementById("seg"), arc = document.getElementById("arc"), dot = document.getElementById("dot");
const CIRC = 2 * Math.PI * R;
arc.setAttribute("stroke-dasharray", `0 ${CIRC}`);
const tl = gsap.timeline({ paused: true });
const p = { x: 0, a: 0, lo: 0, hi: 0 };                       // dot x offset, swept angle, visited range
const draw = () => {
  p.lo = Math.min(p.lo, p.x); p.hi = Math.max(p.hi, p.x);
  const onCircle = p.a > 0 && p.a < Math.PI * 2;
  const dx = onCircle ? R * Math.cos(p.a) : p.x, dy = onCircle ? -R * Math.sin(p.a) : 0;
  dot.setAttribute("cx", C.x + dx); dot.setAttribute("cy", C.y + dy);
  seg.setAttribute("x1", C.x + p.lo); seg.setAttribute("x2", C.x + p.hi);
  arc.setAttribute("stroke-dasharray", `${(p.a / (Math.PI * 2)) * CIRC} ${CIRC}`);
};
const step = (x, at, d) => tl.to(p, { x, duration: d, ease: "power2.inOut", onUpdate: draw }, at);
step(R, 0.0, 0.5); step(-R, 0.5, 1.0); step(0, 1.5, 0.5); step(R, 2.0, 0.5);
tl.to(p, { a: Math.PI * 2, duration: 1.0, ease: "power2.inOut", onUpdate: draw }, 2.5);
tl.to(p, { x: 0, duration: 0.5, ease: "power2.inOut", onUpdate: draw }, 3.5);
window.__timelines = window.__timelines || {}; window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

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

3D

Стеклянный шар, преломляющий текст на полу

Шейдер шара аналитически трассирует луч взгляда: преломление внутрь при n = 1,5, пересечение хорды 2R·dot(t1, −N), преломление наружу, затем попадание в плоскость пола и считывание текстуры текста, поэтому слова видны внутри шара вверх ногами; Френель подмешивает отражение. Под шаром аналитическая мягкая тень несёт яркую каустику там, где шар фокусирует свет.

Когда использовать Крупные планы стекла или линзы над текстом или интерфейсом, эффект «взгляда сквозь» без трассировщика путей.

Библиотеки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>
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #faf9ff; }
#gl { position: absolute; inset: 0; width: 1920px; height: 1080px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="5" data-width="1920" data-height="1080">
  <canvas id="gl" class="clip" data-start="0" data-duration="5" width="1920" height="1080"></canvas>
</div>
<script type="module">
// A glass ball rolls over words printed on the floor. Its shader traces the view ray analytically: refract into the sphere,
// cross it along the chord, refract out, then hit the floor plane and read the text there, so the words show upside down
// inside the ball. A soft shadow with a bright caustic (the ball focusing the light) sits on the floor.
import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
THREE.ColorManagement.enabled = false;
const R = 64, IOR = 1.5;                                  // ball radius (world units) and index of refraction
const LIGHT = new THREE.Vector3(-0.95, 1.0, -0.42).normalize();
const PAPER = new THREE.Color(0xf3f1fc), INK = new THREE.Color(0x1c0b5d);
const LINES = ["“Tell the chat what to show.”", "  “The agent builds the animation.”", "  “No keyframes to hunt for.”", "  “Say what should change.”", "“Bigger”, “slower”, “another colour”"];
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById("gl"), antialias: true, alpha: true, preserveDrawingBuffer: true });
renderer.setPixelRatio(1); renderer.setSize(1920, 1080, false); renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
const scene = new THREE.Scene(), camera = new THREE.PerspectiveCamera(27, 1920 / 1080, 1, 20000);
camera.position.set(-330, 540, 900); camera.lookAt(-30, 40, 0);
const textCanvas = document.createElement("canvas"); textCanvas.width = 2048; textCanvas.height = 512;
const textTex = new THREE.CanvasTexture(textCanvas);
const RECT = new THREE.Vector4(-620, -300, 1156, 288);    // where the text lies on the floor: x, z, width, depth
const floorGLSL = `uniform sampler2D uText; uniform vec4 uRect; uniform vec3 uC; uniform vec3 uL; uniform vec3 uPaper; uniform vec3 uInk;
  float textAt(vec2 p){ vec2 uv=(p-uRect.xy)/uRect.zw; if(uv.x<0.||uv.y<0.||uv.x>1.||uv.y>1.) return 0.; return texture2D(uText, vec2(uv.x,1.-uv.y)).a*.86; }
  float shadowAt(vec2 p){ vec3 cp=uC-vec3(p.x,0.,p.y); float s=dot(cp,uL); if(s<=0.) return 0.; float d=length(cp-uL*s); float w=max(2.,s*.09); return (1.-smoothstep(${R}.-w,${R}.+w,d))*.55; }
  float causticAt(vec2 p){ vec3 cp=uC-vec3(p.x,0.,p.y); float s=dot(cp,uL); if(s<=0.) return 0.; return exp(-pow(length(cp-uL*s)/(${R}.*.36),2.)); }
  vec3 floorAt(vec2 p){ vec3 c=uPaper*(1.-shadowAt(p)); c=mix(c,vec3(.165,.09,.4),textAt(p)); return c; }`;
const U = { uText: { value: textTex }, uRect: { value: RECT }, uC: { value: new THREE.Vector3(0, R, 0) }, uL: { value: LIGHT }, uPaper: { value: PAPER }, uInk: { value: INK }, uCam: { value: camera.position } };
const floor = new THREE.Mesh(new THREE.PlaneGeometry(6000, 6000).rotateX(-Math.PI / 2), new THREE.ShaderMaterial({ uniforms: U, transparent: true,
  vertexShader: `varying vec2 vP; void main(){ vec4 w=modelMatrix*vec4(position,1.); vP=w.xz; gl_Position=projectionMatrix*viewMatrix*w; }`,
  fragmentShader: `${floorGLSL} varying vec2 vP; void main(){ float t=textAt(vP), sh=shadowAt(vP), ca=causticAt(vP)*.85;
    float a=max(t,sh); vec3 col=mix(uInk*.6,vec3(.165,.09,.4),t/max(a,1e-4));
    gl_FragColor=vec4(mix(col,vec3(1.),ca), max(a,ca*.9)); }` }));
scene.add(floor);
const ball = new THREE.Mesh(new THREE.SphereGeometry(R, 128, 96), new THREE.ShaderMaterial({ uniforms: U,
  vertexShader: `varying vec3 vW; void main(){ vec4 w=modelMatrix*vec4(position,1.); vW=w.xyz; gl_Position=projectionMatrix*viewMatrix*w; }`,
  fragmentShader: `${floorGLSL} uniform vec3 uCam; varying vec3 vW;
    vec3 trace(vec3 p, vec3 d){ if(d.y<-.0005){ vec3 h=p+d*(-p.y/d.y); return floorAt(h.xz);} return vec3(.95,.945,.99); }
    void main(){ vec3 N=normalize(vW-uC), V=normalize(vW-uCam); float cosi=clamp(dot(-V,N),0.,1.);
      vec3 t1=refract(V,N,1./${IOR.toFixed(2)}); float chord=2.*${R}.*dot(t1,-N); vec3 P2=vW+t1*chord; vec3 N2=(P2-uC)/${R}.;
      vec3 t2=refract(t1,-N2,${IOR.toFixed(2)}); if(dot(t2,t2)<.001) t2=reflect(t1,-N2);
      float fr=.04+.96*pow(1.-cosi,5.); gl_FragColor=vec4(mix(trace(P2,t2), trace(vW+N*.5, reflect(V,N)), fr),1.); }` }));
scene.add(ball);
function draw(t) {
  const x = -60 - 480 * (-(Math.cos(Math.PI * Math.min(1, t / 5)) - 1) / 2); // rolls left across the words, sine.inOut
  ball.position.set(x, R, 0); U.uC.value.copy(ball.position);
  renderer.render(scene, camera);
}
const tl = gsap.timeline({ paused: true });
const clock = { t: 0 };
tl.to(clock, { t: 5, duration: 5, ease: "none", onUpdate: () => draw(clock.t) }, 0);
document.fonts.load('400 52px "JetBrains Mono"').then(() => {
  const g = textCanvas.getContext("2d"); g.font = '400 52px "JetBrains Mono"'; g.fillStyle = "#000";
  LINES.forEach((l, i) => g.fillText(l, 12, 70 + i * 92)); textTex.needsUpdate = true; draw(tl.time());
});
draw(0);
window.__timelines = window.__timelines || {}; window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

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

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

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

<direction> Сделай 20-секундный моушн-шоуриль, целиком построенный на математике: каждый кадр генерируется из текущего времени t, без фото, видеозаписей и картинок. Горизонтальный формат 1920x1080, 60 кадров/с. Он должен ощущаться как точный лабораторный прибор, который вдруг становится прекрасным: тёмный, светящийся, точный, с одной глитч-склейкой каждые две секунды в такт. Восемь математических сцен идут внутри неподвижной рамки в стиле прибора (угловые скобки, логотип, счётчик и название сцены, точка ритма, бегущие часы, линия прогресса, живое уравнение), затем финальная карточка с брендом. Избегай зерна, стоковых изображений и любого декора, не взятого из математики. </direction> <structure> Склейки на 2, 4, 8, 10, 12, 14, 16 и 18 с, все в такт. 1) 0–2 с, начало координат: бледное бирюзовое кольцо растёт из центра до r 238 px (0–0,45 с, ease out); оси с делениями каждые 60 px растут из светящейся центральной точки; на каждом ударе от точки уходит кольцо-рябь. Широко разрежённая строка вроде "YOUR AI MOTION DESIGNER" проявляется из случайных символов (0,3–0,78 с); короткая строка с засечками вроде "Ideas in motion" печатается буква за буквой рядом с началом координат (0,5–1,12 с). С 1,35 до 1,95 с бирюзовая дуга радиуса 220 один раз обвивает начало координат, на её конце белая точка, а слова гаснут. 2) 2–4 с, единичная окружность: бирюзовая окружность (r 220) слева, угол растёт со скоростью 4,52 рад/с. Белый радиус, бирюзовый катет косинуса, розовый катет синуса, оранжевая дуга угла с подписью θ, пунктирная розовая линия к розовой точке при x 820, где записан синус; история угла тянется вправо светящейся розовой синусоидой (104 px на радиан) с бледной бирюзовой косинусоидой рядом и пунктирными направляющими +1/-1. Живые показания "θ = 4.524 rad" и "sin θ = -0.982". Уравнение: y = sin θ. 3) 4–8 с, эпициклы Фурье: цепочка из 180 вращающихся кругов (по убыванию размера, бледные лавандовые кольца, белые радиусы) рисует контур большого π светящимся оранжевым с 4,3 до 7,2 с (прогресс sine in-out), затем фигура заливается мягким градиентом от розового к фиолетовому, а цепочка гаснет. Слева спектр |cₙ| для n = -24...24 (высота столбцов по квадратному корню амплитуды) загорается от центра к краям по мере рисования; показания "K = 180 terms" и "t/2π = 0.527". Уравнение: f(t) = Σ cₙ e^{int}. 4) 8–10 с, 3D-узел Лиссажу (sin 3t, sin 2t, sin 5t) прорисовывается за 0,6 с, затем вращается в перспективе: лента, цвет которой идёт от бирюзового через фиолетовый к розовому вдоль кривой, а ширина и яркость зависят от глубины. Справа сетка 3x3 из маленьких плоских фигур Лиссажу с подписями 1:1, 2:3, 4:5, 1:2, 3:4, 5:6, 1:3, 3:5, 3:2 рисуется по одной с плавающей фазой; последняя становится бирюзовой в тонкой рамке. 5) 10–12 с, каркасная волновая поверхность z = cos(kr - ωt)/(1 + r) на сетке 48x48 под углом 67° сверху, проявляется от центра к краям за 0,55 с и медленно поворачивается, линии окрашены по высоте от бирюзового через фиолетовый к розовому. Оранжевая точка-зонд скользит по поверхности при r = 3.2 с выносной линией и живыми показаниями "r = 3.200", "z = 0.276". 6) 12–14 с, множество Жюлиа z² + c на весь кадр, открывающееся круглым порталом, который расширяется из центра с белой каймой. c = 0.7885·e^{iα} скользит по своей окружности (sine in-out), так что фрактал превращается из отдельных спиралей в связную фигуру с чёрной серединой; медленное приближение и вращение. Цвета по времени выхода: индиго, фиолетовый, розовый, оранжевый, бледно-кремовый до белого. Врезка показывает движение c по окружности с показаниями "Re c" и "Im c". 7) 14–16 с, филлотаксис: 1500 семян при θₙ = n·137.508°, rₙ = c√n появляются от центра к краям и вращаются, сначала белые, потом розовые, фиолетовые и бирюзовые. Слева φ = 1.6180339887... записывается цифра за цифрой, растёт ряд Фибоначчи (21 и 34 бирюзовым), с "seeds n = 1500" и "spirals 21 ⟲ 34 ⟳". 8) 16–18 с, тождество Эйлера: семена закручиваются в кольцо, которое становится бирюзовой единичной окружностью слева; точка движется от 1 к -1, оставляя оранжевую дугу над верхом; e^{iπ} появляется крупно, затем "+", "1", "=" по одному в такт, в точке -1 пульсирует кольцо, а "0" приземляется на 18 с в розовом кольце. 9) 18–20 с, финальная карточка: тождество уменьшается и уходит наверх; большой широко разрежённый логотип вроде "YOUR BRAND" (замени на свой) поднимается снизу буква за буквой внутри маски (задержка 0,06 с), под ним прорисовывается бирюзово-фиолетово-розовое подчёркивание, разрежённая строка вроде "IDEAS IN MOTION × [your web address]" проявляется из случайных символов, а курсивная строка с засечками "From idea to video in one chat" плавно появляется. Всё гаснет до чёрного с 19,35 до 19,95 с. </structure> <composition> Фон: глубокое индиго-чёрное радиальное свечение, центр #10063A, к краям #03030A, без зерна. Акценты: розовый #FB2D89 (основной), оранжевый #FE9117, фиолетовый #7C6CF2, бирюзовый #2DD4B0 и белый. Линии и подписи в лавандово-серых тонах: #9A98A4 для подписей, #57516F для тусклых пояснений, #433E53 для осей. Штрихи мягко светятся с размытием 12–16 px собственного цвета. Шрифты: уравнения шрифтом в духе Computer Modern (Old Standard TT, переменные курсивом, функции прямым); все показания, счётчики и подписи моноширинным (Liberation Mono или похожим), мелким и разрежённым; название бренда жирной гротескной гарнитурой с очень широким трекингом. Неподвижная рамка остаётся всё время, появляясь за 0,15–0,9 с: тонкие угловые скобки длиной 27 px, на 47 px от каждого угла. Слева сверху: логотип вроде "YOUR BRAND" (жирный, 22 px, трекинг около 0,35 em) с крошечной разрежённой строкой под ним вроде "IDEAS IN MOTION · [your web address]". Справа сверху: счётчик сцен "01 / 08" и под ним короткое название каждой сцены, например "DESCRIBE YOUR IDEA", "EDIT IN WORDS", "NO KEYFRAMES", "3D EFFECTS", "LIVE PREVIEW", "SHAPES AND SOUND", "MUSIC TO THE RHYTHM", "MP4 EXPORT" (замени на свои слоганы), слева от него маленькая розовая точка. Справа снизу: бегущие часы "t = 03.35 s" (два знака после запятой) и крошечная строка с номером кадра. Внизу: линия прогресса толщиной 1 px от x 80 до x 1840, заполняющаяся бирюзово-фиолетово-розовым градиентом по ходу времени, с маленькими засечками на границах сцен. Слева снизу: уравнение текущей сцены. </composition> <techniques> Каждая склейка это 0,2-секундный глитч: уходящая картинка режется на горизонтальные полосы, сдвинутые вбок, мерцают 3–6 тонких линий во всю ширину бирюзового, розового, оранжевого и белого цвета, весь кадр вспыхивает белым примерно на 14% и затухает за 0,25 с, а подписи рамки на несколько кадров прокручивают случайные символы. Розовая точка ритма ярко вспыхивает на каждом ударе и затухает за полтакта. Уравнение сцены появляется через 0,1–0,35 с после каждой склейки. Показания, часы и счётчики обновляются вместе с анимацией. Разрежённые строки проявляются из случайных символов; строки с засечками печатаются буква за буквой; финальный логотип поднимается снизу внутри маски с задержкой 0,06 с. Прорисовки и трансформации используют ease-out или sine in-out, как указано для каждой сцены. </techniques> <music> Энергичный электронный трек 120 BPM (фортепианные аккорды, тёплые пэды, синтезаторный бас, бит four-on-the-floor), ровно 20 с, каждая склейка попадает на удар. Мягкий и фильтрованный первые две секунды с райзером к буму на 2 с, полный драйв до 16 с, фильтрованный брейкдаун с райзером к финальному буму на 18 с, затем затухание к 20 с. Микс около -14 LUFS, истинный пик ниже -1 dBTP. </music> <sound> Мягкий вуш и три глитч-щелчка на каждой склейке, а также более глубокий вуш и бум, когда на 12 с открывается портал фрактала, всё поверх музыки и по сетке ритма. Без закадрового голоса. </sound> <references> Математические объясняющие анимации в сочетании с генеративным креативным кодингом и sci-fi интерфейсом осциллографа или лабораторного прибора: тонкие светящиеся линии на почти чёрном фоне, моноширинные показания, учебниковые уравнения с засечками. </references>

Превью промпта «Сборка лого из low-poly граней с набором названия»

Сборка лого из low-poly граней с набором названия

<direction> Сделай 21-секундный горизонтальный логотип-реveal, 1920x1080, 60 кадров/с. Он медленно собирает мой логотип из low-poly граней и завершается горизонтальным лого-блоком: название бренда набирается как текст, под ним слоган. Идея: одна долгая спокойная сборка без склеек четырнадцать секунд, разрядка на дропе музыки в течение двух секунд, затем спокойный финал с набором текста. Вид: почти чёрный фон с мягкой круглой виньеткой, плоские фирменные цвета и чистый гротеск. Избегай градиентов на логотипе, видимых швов между треугольниками, склеек во время сборки и всего, что загромождает фон за логотипом. </direction> <structure> 1. 0–2,6 с, каркас: low-poly каркас контура моего логотипа сам прорисовывается от низа логотипа наружу. В нём около 35–45 вершин и 90 тонких линий. 2. 1,9–13,3 с, сборка: логотип разрезан примерно на 55 треугольников вдоль этого каркаса, и они влетают по частям из-за пределов кадра. Приземления начинаются медленно внизу логотипа и становятся чаще к верху. Последний фрагмент встаёт на место на 13,3 с, и логотип становится целым и точным. Задержи готовый логотип примерно на одну секунду. 3. 14,38 с, вспышка, точно на дроп музыки. Световой всплеск, расширяющееся оранжевое кольцо и яркая вспышка на логотипе срабатывают одновременно. Через 0,1 с после удара за логотипом вырастает тёмно-чернильная плашка и превращается в квадрат с закруглёнными углами — иконку приложения. Задержи иконку по центру на одну секунду. 4. 15,74–16,15 с, сдвиг: иконка уменьшается примерно до 42% и уходит в левую треть, освобождая место для названия. 5. 16,1–21 с, название: справа от иконки появляется розовый курсор, и набирается название, например "Brand Name" (замени на свой бренд). На 18,15 с под ним выезжает слоган, например "Your tagline here" (замени на свой). Курсор мигает три раза в такт и исчезает на 19,9 с. Держи лого-блок до конца. </structure> <composition> Фон: почти чёрная радиальная виньетка, #0D0B1E в центре, темнеющая до #040308 в углах. Палитра: - Глубокий чернильный #1C0B5D для плашки иконки. - Розовый #FB2D89 как основной акцент. - Оранжевый #FE9117. - Белый #FFFFFF. - Светлая лаванда #E9E4F2 и #F0EDFF для линий и мягкого текста. - Фиолетовый #7C6CF2 только в фоновом свечении. Логотип остаётся в плоских цветах без градиентов. Каркас: линии лавандовые #E9E4F2 с непрозрачностью 60%, толщина 1,3 px; точки вершин #F0EDFF радиусом 2,6 px. Плашка иконки: круг 676 px, который становится квадратом со скруглением 24% и мягкой тенью. Шрифт: название жирным гротеском (Golos Text 700, около 155 px, белый). Слоган под ним лёгким гротеском (Onest 400, около 49 px, лавандовый с непрозрачностью 74%). Курсор: розовая полоса #FB2D89, 10 x 128 px, с мягким розовым свечением. Итоговый лого-блок (иконка слева, название и слоган справа) центрирован в кадре целиком. </composition> <techniques> Приближение: начало идёт на очень медленном наезде к центру кадра, от масштаба 0,886 на 0 с до 0,998 на 11 с, затем неподвижно. Прорисовка каркаса: каждая линия растёт линейно от более ранней вершины к более поздней за 0,08–0,45 с. Маленькая точка проявляется на каждой вершине, когда до неё доходит линия. Пролёт: каждый фрагмент состоит из одного-трёх треугольников. Он влетает быстро по изогнутой траектории и замедляется до места примерно за 0,5 с, кувыркаясь в 3D. Вращение, переворот и наклон плавно сходят к нулю. В полёте он затемнён примерно до 60% и слегка размыт; при посадке чёткий и полностью освещённый. Каждый треугольник показывает именно свою часть плоского логотипа, так что готовая сборка бесшовна. Свечение: слабое розовое свечение #FB2D89, менее 10% непрозрачности, переходящее в фиолетовое #7C6CF2, нарастает за логотипом по мере его заполнения. Вспышка на 14,38 с: - Розово-лиловый световой всплеск в режиме screen вспыхивает вокруг логотипа и гаснет за 0,8 с. - Тонкое тёплое оранжевое кольцо, 7 px, стартует с радиуса 300 px и с постоянной скоростью вылетает за кадр за 0,38 с. - Логотип ярко вспыхивает и успокаивается за 0,3 с. Плашка: через 0,1 с после удара плашка #1C0B5D вырастает из точки до круга 676 px за 0,21 с (sine ease-out). Сначала она подсвечена, затем её углы скругляются до радиуса 24%. Сдвиг: иконка уменьшается примерно до 42% и уходит в левую треть за 0,415 с (power3 ease-in-out). В момент максимальной скорости размывается до 7 px и останавливается чёткой. Потом продолжает очень медленно расти, примерно на 3% за пять секунд. Набор: одна буква на каждую шестнадцатую ноту музыки (0,156 с при 96 BPM). Каждая буква проявляется за 0,05 с, а курсор прыгает за ней. Слоган: выезжает слева направо примерно за 0,2 с, символ за символом. </techniques> <music> Инструментал 96 BPM, обнадёживающий и современный, ровно 21 секунда. - Начало: мягкий глокеншпиль как в музыкальной шкатулке на тёплых пэдах. - Около 4,4 с: вступает полная бодрая аранжировка (ударные, бас, струнные, яркая партия глокеншпиля). Фильтр открывается на два такта и нарастает к вспышке. - 14,38 с: удар тарелки и большой аккорд точно на вспышке. - После дропа: музыкальная шкатулка возвращается на тянущихся пэдах под лого-блоком и затихает до тишины на 21 с. Держи всё на сетке долей, чтобы набор текста и мигание курсора попадали на шестнадцатые и доли. </music> <sound> Звуковые эффекты поверх музыки: - Мягкий райзер к первому приземлению треугольника. - Райзер к вспышке, затем глубокий бум и лёгкий стеклянный удар на ней. - Короткий свист, когда кольцо вылетает, и ещё один при сдвиге иконки. - Мягкий щелчок клавиши на каждую набранную букву и слабый — при появлении слогана. Без закадрового голоса. Общая громкость около -14 LUFS, true peak ниже -1 dBTP. </sound> <references> Премиальная техно- или app-launch заставка с логотипом: сборка из low-poly каркаса в твёрдую форму в стиле 3D-граней, разряжающаяся на дропе в появление иконки приложения, с набором названия в стиле терминала. </references>

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

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

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

<direction> Сделай 15-секундный шоурил моушн-дизайна для [your brand], 1920x1080 горизонтально, 60 fps, полностью нарисованный: анимированный текст, фигуры, частицы, 3D-облако точек и дашборд, без съёмки. Идея: быстрый продуктовый ролик, где каждая смена сцены попадает на хаус-бит 128,57 BPM. Один бит равен ровно 28 кадрам (0,4667 с), каждая склейка стоит на этой сетке, а первый сильный удар приходится на 1,867 с (бит 4). Образ чередует почти чёрные и светлые лавандово-белые сцены, главный акцент — ярко-розовый, плюс фиолетовый и оранжевый. Заголовки — плотная гротескная гарнитура, подписи — моно, а утверждение — курсивный антиква. Поверх всего ролика лежит рамка в стиле телетрансляции до финального глитча. Используй мой знак логотипа на финальной карточке и замени весь текст в кавычках моими словами, сохраняя примерно ту же длину, чтобы вёрстка не поехала. Избегай фото, стокового видео, мягких банальных наплывов и всего, что уходит с битовой сетки. </direction> <structure> 1. 0–1,85 с, вступление на почти чёрном. Тонкая линия-линейка (шириной 1440 px, светлая, 22 % непрозрачности) вырастает из центра на 0,34 с (expo.out, 0,65 с), затем слева направо появляются 13 засечек с интервалом в один кадр. Розовый шар 80 px падает сверху слева и смещается к центру (power2.out, 1,25 с). Он трижды отскакивает от линейки, сплющиваясь при каждом ударе и вытягиваясь при каждом падении, с лёгким смазом на скорости. Под линейкой печатается моно-строка, по одному символу каждые 1,56 кадра, затем мигает блочный курсор (пример "no keyframes.", замени своим). На 1,28 с шар сжимается до 0,8x, затем раздувается по кривой expo-in, пока к 1,82 с не зальёт кадр розовым. 2. 1,82–3,70 с, четыре слова, по одному на бит. Каждое плотное слово 300 px стоит на своём фоне, под ним моно-строка комментария (примеры "// describe your idea", "// live preview", "// refine in words", "// mp4 export"). Позади две строки контурных копий этих четырёх слов по 205 px движутся сверху и снизу со скоростью 760 px/с в противоположные стороны. Контуры обведены цветом текста сцены при 7–14 % непрозрачности. - Слово 1 (пример "DESCRIBE"), тёмно-индиго на розовом: слово прилетает с масштаба 1,39x по expo.out (0,33 с), а буквы появляются с интервалом 0,03 с с быстрым снятием размытия. - Слово 2 (пример "PREVIEW"), светлое на почти чёрном на 2,333 с: трекинг сжимается со 150 px до плотного по expo.out (0,45 с), с появлением за 3 кадра. - Слово 3 (пример "REFINE"), фиолетовое на светлой странице на 2,8 с: буквы поднимаются на 340 px из-за линии маски в 40 px под базовой линией по back.out(2.2), по 0,3 с каждая, с интервалом 0,035 с. - Слово 4 (пример "EXPORT"), светлое на фиолетовом на 3,267 с: буквы выскакивают на 1/32 долях (через 3,5 кадра), каждая с 0,6x до прыжка 1,13x на высоту 50 px, затем оседает. 3. 3,46–4,02 с, шторка из полос. Восемь вертикальных полос по 240 px, чередуя розовый и светлый цвет страницы, поднимаются снизу (power2.inOut, 0,18 с, с интервалом 0,7 кадра, первой левая). Они задерживаются, потом продолжают подниматься и уходят, открывая снизу следующую сцену. 4. 3,70–5,60 с, фигуры на почти чёрном. Сетка 120 px из маленьких приглушённых скруглённых квадратов (каждый пятый — контур) с крошечными крестиками между ними. Волна выходит из центра на каждый бит (3,73, 4,2, 4,67 и 5,13 с) со скоростью 2000 px/с. Там, где проходит её фронт, каждая ячейка вырастает с 42 до 74 px, скругляется к кругу, поворачивается на 38 градусов и становится розовой. Первая волна открывает сетку, а сетка медленно вращается против часовой стрелки, всё быстрее и быстрее. После последней волны ячейки опустошаются и затухают к 5,47 с. 5. 5,55–7,42 с, частицы. Белая вспышка с тонким кольцом ударной волны появляется на 5,62 с, затем из центра вырываются 7000 крошечных квадратиков. Они собираются в одно огромное слово 590 px (пример "IDEA"), окрашенное по ширине от оранжевого к лавандовому и фиолетовому, мерцающее на пиксель. С 7,0 с они утекают вправо со шлейфами, сначала левая часть слова. Позади лежит мягкое розовое радиальное свечение. 6. 7,42–9,45 с, 3D на глубоком индиго радиальном фоне. Сфера Фибоначчи из 1700 точек (радиус 362 px) медленно вращается над перспективным полом из тонких фиолетовых линий, ряды которых ползут к зрителю. Точки розовые или фиолетовые, спереди крупнее и ярче. С 8,12 с каждая точка движется на своё место на торическом узле (2,3) (cubic in-out, случайные задержки до 0,16 с), и узел продолжает вращаться. 7. 9,08–9,65 с, вторая шторка из полос, как в сцене 3, в фиолетовом, розовом и светлом цвете страницы. 8. 9,27–11,1 с, дашборд на светлой странице с едва заметными вертикальными направляющими. - Шаги: три строки плотных номеров шагов по 180 px отсчитываются по expo.out ("01", "02", "03", третий розовый) с моно-подписями (пример "PICK A TEMPLATE"). Каждая строка поднимается в свой обрезанный блок с интервалом 0,08 с. - Карточка: белая карточка (880x740, скругление 26 px, мягкая индиго-тень) въезжает на 90 px (power3.out, 0,45 с). На ней жирный заголовок строчными, маленькая плашка "LIVE" и кольцо, которое заполняется по power3.out с короткой подписью внутри. - График: четырнадцать оранжевых столбцов вырастают от основания с интервалом 0,031 с, последний сплошной розовый. Фиолетовая линия рисует себя поверх них по sine.inOut (0,72 с), а на её острие едут точка, ореол и тёмная метка (пример "No keyframes"). 9. 10,96–11,45 с, шторка из полос-лент. Восемь горизонтальных полос, чередуя почти чёрный и розовый, въезжают слева (power3.inOut, 0,2 с, с интервалом в один кадр, первой верхняя) и уходят вправо. 10. 11,07–13,07 с, утверждение на почти чёрном. Четыре пучка по 28 тончайших линий текут через кадр лентами с аддитивным смешиванием: розово-оранжевый вверху, затем розово-фиолетовый, фиолетовый и фиолетово-розовый внизу. Утверждение из двух строк курсивной антиквой 290 px появляется по буквам. Каждая буква поднимается на 36 px и теряет размытие за 0,16 с, с интервалом 0,02 с в первой строке и 0,035 с во второй. Первая строка светлая и начинается с x 334 (пример "Ideas in"); вторая розовая и заканчивается на x 1438 (пример "motion."). 11. 12,73–13,07 с, глитч. Срезы текста прыгают вбок, кадр дважды инвертируется, мерцают маленькие фиолетовые, жёлтые и розовые блоки, а текст расщепляется на розовый и бирюзовый. Рамка трансляции и её счётчики исчезают. 12. 13,07–15,0 с, финальная карточка на почти чёрном. - Бледная вспышка затухает (0,26 с). - Плотный логотип-слово 260 px ("[your brand]") поднимается по буквам из-за базовой линии (back.out(1.6), 0,32 с, с интервалом 0,05 с). - Мой знак логотипа падает сверху, как шар во вступлении, сплющивается при приземлении на 13,51 с и становится точкой в конце слова. - Под блоком логотипа рисуется тонкая линия (power3.out, 0,3 с). - Под ней расшифровывается широко разрежённая моно-строка: из перемешанных розовых символов в светлые буквы (13,76–14,6 с). - Розовый курсивный призыв к действию проявляется на 14,33 с (пример "try it free."). - Внизу проявляется приглушённый ряд из четырёх коротких преимуществ. Держи финальную карточку до 15 с. </structure> <composition> - Палитра: - Почти чёрный #0D0B1E для тёмных фонов. - Глубокий индиго #1C0B5D для тёмного текста и 3D-сцены. - Светлая страница #FAF9FF для светлых фонов и светлого текста. - Лавандовый #F0EDFF для мягких панелей. - Приглушённый #6B6385 для подписей и #E9E4F2 для линий. - Акценты: основной розовый #FB2D89, второй фиолетовый #7C6CF2, тёплый оранжевый #FE9117, плюс белый. - Жёлтый #FFD23F и бирюзовый #2DD4B0 только как крапинки глитча. - Если я дам фирменные цвета, подставь их по ролям. - Шрифты: Roboto Flex с весом 900 и плотным трекингом (-0,035 em) для всех заголовков. JetBrains Mono для рамки, подписей и строк комментариев. Instrument Serif Italic для двухстрочного утверждения и призыва к действию. - Мягкая боковая виньетка, темнее только по левому и правому краям: около -8 % на середине края и -12 % в углах. - Рамка в стиле телетрансляции поверх всего до глитча: - Угловые скобки 26 px. - Заголовок вверху слева (пример "[YOUR BRAND] / YOUR TAGLINE"). - Бегущий таймкод вверху справа (00:00:SS:FF при 60 fps). - Название текущей главы внизу слева. - Счётчик кадров "NNN / 900" с индикатором прогресса 300 px внизу справа. - Каждая часть светлая при 0,9 непрозрачности в режиме смешивания exclusion, поэтому на светлых сценах она тёмная, а на розовых и фиолетовых окрашена. Рамка появляется на 0,3 с. </composition> <techniques> - Каждая смена сцены стоит на 28-кадровой битовой сетке. Сцены и шторки перекрываются на несколько кадров, так что ни один кадр не пустой. - Разнообразь переходы: шар, раздувающийся в следующий фон, жёсткие цветовые склейки между четырьмя словами, вертикальные шторки из полос, горизонтальная шторка из полос, вспышка с кольцом ударной волны и RGB-глитч в финальную карточку. - Дай шару и знаку логотипа физическое движение: сплющивание при ударе, вытягивание при падении, лёгкий смаз на скорости. - Используй появление по буквам везде, у каждого слова своё сглаживание (посадки expo.out, подъёмы из маски back.out, выскакивания на 1/32 долях), с потерей размытия по мере появления букв. - Сохраняй всё чётким и векторным: частицы, точки и линии крошечные и резкие, а свечения остаются мягкими и за текстом. </techniques> <music> Сделай оригинальную хаус-подложку 128,57 BPM, ровно 15 с, уложенную на битовую сетку. - Вступление: воздушный пэд с пузырчатыми щипками. - С удара на 1,867 с: полный грув с бочкой четыре четверти, клэпами, хэтами и басом с сайдчейном. - Финал: райзер и глитч в один большой финальный удар на 13,07 с, затем завершающий аккорд звучит до 15 с. </music> <sound> Поверх подложки добавь удары, сочинённые под монтаж: - райзер в бум на заполнении 1,867 с - короткие вушы с пиком на каждой смене слова и каждой шторке - мягкие щелчки на волнах фигур - небольшой бум и стеклянный тик на вспышке частиц - вуш-шлейф, когда частицы уходят - саб-дроп в 3D-сцену - райзер и цифровые глитч-тики в финальный бум на 13,07 с - колокольчик, когда знак логотипа приземляется на 13,51 с Без закадрового голоса. Микс около -14 LUFS, true peak ниже -1 dBTP. </sound> <references> Шоурил запуска технологического продукта в духе стильных анимированных брендовых роликов: HUD-рамка трансляции, кинетическая типографика, генеративные частицы, вращающееся 3D-облако точек и чистый UI-дашборд. </references>

Рассылка

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

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

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

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