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

RU

Открыть beta

Simple Motion

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

Логотип собирается из нарисованного каркаса и летящих low-poly треугольников, вспыхивает на дропе в иконку приложения, рядом набираются название и слоган.

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

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

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

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

Замысел

Сделай 21-секундный горизонтальный логотип-реveal, 1920x1080, 60 кадров/с. Он медленно собирает мой логотип из low-poly граней и завершается горизонтальным лого-блоком: название бренда набирается как текст, под ним слоган. Идея: одна долгая спокойная сборка без склеек четырнадцать секунд, разрядка на дропе музыки в течение двух секунд, затем спокойный финал с набором текста. Вид: почти чёрный фон с мягкой круглой виньеткой, плоские фирменные цвета и чистый гротеск. Избегай градиентов на логотипе, видимых швов между треугольниками, склеек во время сборки и всего, что загромождает фон за логотипом.

Структура

0–2,6 с, каркас: low-poly каркас контура моего логотипа сам прорисовывается от низа логотипа наружу. В нём около 35–45 вершин и 90 тонких линий.
1,9–13,3 с, сборка: логотип разрезан примерно на 55 треугольников вдоль этого каркаса, и они влетают по частям из-за пределов кадра. Приземления начинаются медленно внизу логотипа и становятся чаще к верху. Последний фрагмент встаёт на место на 13,3 с, и логотип становится целым и точным. Задержи готовый логотип примерно на одну секунду.
14,38 с, вспышка, точно на дроп музыки. Световой всплеск, расширяющееся оранжевое кольцо и яркая вспышка на логотипе срабатывают одновременно. Через 0,1 с после удара за логотипом вырастает тёмно-чернильная плашка и превращается в квадрат с закруглёнными углами — иконку приложения. Задержи иконку по центру на одну секунду.
15,74–16,15 с, сдвиг: иконка уменьшается примерно до 42% и уходит в левую треть, освобождая место для названия.
16,1–21 с, название: справа от иконки появляется розовый курсор, и набирается название, например "Brand Name" (замени на свой бренд). На 18,15 с под ним выезжает слоган, например "Your tagline here" (замени на свой). Курсор мигает три раза в такт и исчезает на 19,9 с. Держи лого-блок до конца.

Композиция

Фон: почти чёрная радиальная виньетка, #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, с мягким розовым свечением.
Итоговый лого-блок (иконка слева, название и слоган справа) центрирован в кадре целиком.

Техники

Приближение: начало идёт на очень медленном наезде к центру кадра, от масштаба 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 с, символ за символом.

Музыка

Инструментал 96 BPM, обнадёживающий и современный, ровно 21 секунда.

Начало: мягкий глокеншпиль как в музыкальной шкатулке на тёплых пэдах.
Около 4,4 с: вступает полная бодрая аранжировка (ударные, бас, струнные, яркая партия глокеншпиля). Фильтр открывается на два такта и нарастает к вспышке.
14,38 с: удар тарелки и большой аккорд точно на вспышке.
После дропа: музыкальная шкатулка возвращается на тянущихся пэдах под лого-блоком и затихает до тишины на 21 с.
Держи всё на сетке долей, чтобы набор текста и мигание курсора попадали на шестнадцатые и доли.

Звук

Звуковые эффекты поверх музыки:

Мягкий райзер к первому приземлению треугольника.
Райзер к вспышке, затем глубокий бум и лёгкий стеклянный удар на ней.
Короткий свист, когда кольцо вылетает, и ещё один при сдвиге иконки.
Мягкий щелчок клавиши на каждую набранную букву и слабый — при появлении слогана.
Без закадрового голоса. Общая громкость около -14 LUFS, true peak ниже -1 dBTP.

Референсы

Премиальная техно- или app-launch заставка с логотипом: сборка из low-poly каркаса в твёрдую форму в стиле 3D-граней, разряжающаяся на дропе в появление иконки приложения, с набором названия в стиле терминала.

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

Превью техники «Wireframe that draws itself from one point outward» — На 0:01 в видео

Фигуры

Wireframe that draws itself from one point outward

A low-poly outline of the logo is drawn as thin lavender lines (#E9E4F2 at 62%, 1.3 px) with small dots on the vertices. Every vertex gets a time from its distance to a start point, every line draws (stroke-dashoffset, linear) from its earlier vertex to its later one in 0.08-0.45 s, and a dot fades in in 0.08 s when the first line reaches it. Under it the whole drawing scales 0.886 to 0.91 about the frame's centre, a push-in too slow to notice.

Когда использовать To open a logo reveal or a diagram with the structure before the surface.

Показать код

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wireframe that draws itself from one point outward</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>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #040308; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(circle at 960px 540px, #0D0B1E 0, #0D0B1E 250px, #0a0817 500px, #06050f 600px, #040308 900px); }
#w { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 960px 540px; }
#w line { stroke: #E9E4F2; stroke-opacity: 0.62; stroke-width: 1.3; fill: none; }
#w circle { fill: #F0EDFF; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080"><svg id="w" viewBox="0 0 1920 1080"></svg></div>
<script>
const tl = gsap.timeline({ paused: true });
const NS = "http://www.w3.org/2000/svg", svg = document.getElementById("w");
let seed = 3; const rnd = () => (seed = (seed * 16807) % 2147483647) / 2147483647;
// vertices of a rough disc (any low-poly outline works the same)
const pts = [];
for (let r = 0; r <= 4; r++) { const n = r ? r * 6 : 1; for (let i = 0; i < n; i++) { const a = (i / n) * Math.PI * 2 + r, R = r * 55 + rnd() * 18; pts.push([960 + R * Math.cos(a), 540 + R * Math.sin(a)]); } }
const START = [960, 760], SPEED = 160; // where the drawing starts, how fast it spreads (px/s)
const t = pts.map(([x, y]) => 0.3 + Math.hypot(x - START[0], y - START[1]) / SPEED);
const seen = new Set();
pts.forEach((p, i) => {
  pts.map((q, j) => [Math.hypot(q[0] - p[0], q[1] - p[1]), j]).sort((a, b) => a[0] - b[0]).slice(1, 4).forEach(([d, j]) => {
    const key = i < j ? i + "," + j : j + "," + i; if (seen.has(key)) return; seen.add(key);
    const [a, b] = t[i] <= t[j] ? [i, j] : [j, i];
    const ln = document.createElementNS(NS, "line");
    ln.setAttribute("x1", pts[a][0]); ln.setAttribute("y1", pts[a][1]); ln.setAttribute("x2", pts[b][0]); ln.setAttribute("y2", pts[b][1]);
    ln.setAttribute("stroke-dasharray", d + " " + (d + 2)); ln.setAttribute("stroke-dashoffset", d);
    svg.appendChild(ln);
    tl.to(ln, { attr: { "stroke-dashoffset": 0 }, duration: Math.max(0.08, Math.min(0.45, t[b] - t[a])), ease: "none" }, t[a]);
  });
});
pts.forEach(([x, y], i) => {
  const c = document.createElementNS(NS, "circle"); c.setAttribute("cx", x); c.setAttribute("cy", y); c.setAttribute("r", 2.6); c.setAttribute("opacity", 0);
  svg.appendChild(c); tl.to(c, { attr: { opacity: 1 }, duration: 0.08, ease: "none" }, t[i]);
});
tl.fromTo(svg, { scale: 0.886 }, { scale: 0.912, duration: 4, ease: "none" }, 0); // the slow push-in
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

Low-poly facets that fly in, tumble and settle into the exact logo

The finished flat logo is cut into triangles; each triangle is its own layer showing only its window onto the logo (an SVG mask of the triangle grown 1.1 px on every side about its incentre, so neighbours overlap and meet without seams). Each piece flies in from off-screen on a decelerating path (expo.out, about 0.6 s), tumbling in 3D (rotation 70-220 deg, rotationY 40-120 deg, rotationX 20-80 deg, perspective 900 px) down to zero, dimmed and slightly soft in flight (brightness 0.58, blur 2.4 px) and sharp on landing. They land one after another from the bottom of the logo to the top over about eleven seconds; when the last one lands the logo is pixel-exact.

Когда использовать To assemble a logo, a product or an illustration from its own pieces.

Показать код

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Low-poly facets that fly in, tumble and settle into the exact logo</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>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #040308; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(circle at 960px 540px, #0D0B1E 0, #0D0B1E 250px, #0a0817 500px, #06050f 600px, #040308 900px); }
#pieces { position: absolute; inset: 0; }
.piece { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; opacity: 0; will-change: transform; }
.piece svg { position: absolute; left: 0; top: 0; overflow: visible; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="6" data-width="1920" data-height="1080"><div id="pieces"></div></div>
<script>
const tl = gsap.timeline({ paused: true });
const host = document.getElementById("pieces");
// the finished logo, flat (any vector mark): an orange halo, a white disc, a pink play triangle
const LOGO = '<circle cx="960" cy="540" r="230" fill="#FE9117"/><circle cx="960" cy="540" r="200" fill="#FFFFFF"/><path d="M905 445 L1060 540 L905 635 Z" fill="#FB2D89"/>';
let seed = 11; const rnd = () => (seed = (seed * 16807) % 2147483647) / 2147483647;
const N = 6, X0 = 720, Y0 = 300, S = 480 / N, P = []; // a jittered grid over the logo's box, two triangles a cell
for (let j = 0; j <= N; j++) for (let i = 0; i <= N; i++) P.push([X0 + i * S + (i % N ? (rnd() - 0.5) * 30 : 0), Y0 + j * S + (j % N ? (rnd() - 0.5) * 30 : 0)]);
const tris = [];
for (let j = 0; j < N; j++) for (let i = 0; i < N; i++) { const a = j * (N + 1) + i, b = a + 1, c = a + N + 1, d = c + 1; tris.push([a, b, d], [a, d, c]); }
const used = tris.filter((t) => t.some((k) => Math.hypot(P[k][0] - 960, P[k][1] - 540) < 240));
used.sort((u, v) => Math.max(...v.map((k) => P[k][1])) - Math.max(...u.map((k) => P[k][1]))); // bottom first
const SPAN = 4.6, FLY = 0.6; // seconds over which pieces land, seconds each flight takes
used.forEach((t, n) => {
  const [A, B, C] = t.map((k) => P[k]);
  const la = Math.hypot(B[0] - C[0], B[1] - C[1]), lb = Math.hypot(A[0] - C[0], A[1] - C[1]), lc = Math.hypot(A[0] - B[0], A[1] - B[1]), per = la + lb + lc;
  const ix = (la * A[0] + lb * B[0] + lc * C[0]) / per, iy = (la * A[1] + lb * B[1] + lc * C[1]) / per;
  const r = Math.abs((B[0] - A[0]) * (C[1] - A[1]) - (C[0] - A[0]) * (B[1] - A[1])) / per, g = (r + 1.1) / r; // grow 1.1 px a side
  const win = [A, B, C].map(([x, y]) => [ix + (x - ix) * g, iy + (y - iy) * g]);
  const el = document.createElement("div"); el.className = "piece"; el.style.transformOrigin = ix + "px " + iy + "px";
  el.innerHTML = '<svg width="1920" height="1080" viewBox="0 0 1920 1080"><defs><mask id="m' + n + '" maskUnits="userSpaceOnUse" x="0" y="0" width="1920" height="1080"><polygon fill="#fff" points="' + win.map((q) => q.join(",")).join(" ") + '"/></mask></defs><g mask="url(#m' + n + ')">' + LOGO + '</g></svg>';
  host.appendChild(el);
  const land = FLY + 0.2 + (n * SPAN) / used.length, ang = rnd() * Math.PI * 2, sgn = () => (rnd() < 0.5 ? -1 : 1);
  tl.set(el, { opacity: 1 }, land - FLY);
  tl.fromTo(el, { x: Math.cos(ang) * 1300, y: Math.sin(ang) * 1300, rotation: sgn() * (70 + 150 * rnd()), rotationY: sgn() * (40 + 80 * rnd()), rotationX: sgn() * (20 + 60 * rnd()), transformPerspective: 900, filter: "brightness(0.58) blur(2.4px)" },
    { x: 0, y: 0, rotation: 0, rotationY: 0, rotationX: 0, filter: "brightness(1) blur(0px)", duration: FLY, ease: "expo.out", immediateRender: false }, land - FLY);
});
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>

Превью техники «Light burst and racing ring that grow an app-icon plate» — На 0:14 в видео

Переход

Light burst and racing ring that grow an app-icon plate

On the hit a screen-blended radial burst (pink-mauve, strongest around the logo) appears at once and fades over 0.8 s (power2.out); a 7 px warm ring starts at a 300 px radius and races out at constant speed to 1150 px in 0.38 s; the logo flashes (brightness 1.45, saturation 0.65, back in 0.3 s). 0.1 s after the hit the icon plate grows from a dot behind the logo (scale 0.02 to 1 in 0.21 s, sine.out), lit at first (brightness 1.35, settling in 0.25 s), and turns from a circle into a rounded square (border-radius 50% to 24% in 0.08 s).

Когда использовать To turn a free-floating logo into an app icon on the drop.

Показать код

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Light burst and racing ring that grow an app-icon plate</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>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #040308; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(circle at 960px 540px, #0D0B1E 0, #0D0B1E 250px, #0a0817 500px, #06050f 600px, #040308 900px); }
#flash { position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen; background: radial-gradient(circle at 960px 500px, rgb(185, 85, 135) 0, rgb(160, 68, 115) 220px, rgb(104, 40, 74) 330px, rgb(66, 26, 48) 450px, rgb(26, 10, 19) 640px, #000 860px); }
#ring { position: absolute; left: 660px; top: 240px; width: 600px; height: 600px; border-radius: 50%; border: 7px solid rgb(60, 34, 6); mix-blend-mode: screen; opacity: 0; }
#plate { position: absolute; left: 622px; top: 202px; width: 676px; height: 676px; border-radius: 50%; background: #1C0B5D; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); opacity: 0; }
#logo { position: absolute; left: 780px; top: 360px; width: 360px; height: 360px; border-radius: 50%; background: #FFFFFF; box-shadow: inset 0 0 0 40px #FE9117; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080"><div id="flash"></div><div id="ring"></div><div id="plate"></div><div id="logo"></div></div>
<script>
const tl = gsap.timeline({ paused: true });
const T = 1.0; // the hit
tl.set("#flash", { opacity: 1 }, T).to("#flash", { opacity: 0, duration: 0.8, ease: "power2.out" }, T);
const ring = (r) => ({ left: 960 - r, top: 540 - r, width: 2 * r, height: 2 * r }); // grow the box, not the scale, so the line keeps its width
tl.set("#ring", { opacity: 1, ...ring(300) }, T).to("#ring", { ...ring(1150), duration: 0.382, ease: "none" }, T).set("#ring", { opacity: 0 }, T + 0.382);
tl.fromTo("#logo", { filter: "brightness(1.45) saturate(0.65)" }, { filter: "brightness(1) saturate(1)", duration: 0.3, ease: "power2.out", immediateRender: false }, T);
tl.set("#plate", { opacity: 1, scale: 0.02, filter: "brightness(1.35)" }, T + 0.097)
  .to("#plate", { scale: 1, duration: 0.21, ease: "sine.out" }, T + 0.097)
  .to("#plate", { filter: "brightness(1)", duration: 0.25, ease: "power1.out" }, T + 0.18)
  .to("#plate", { borderRadius: "24%", duration: 0.08, ease: "power2.inOut" }, T + 0.257);
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>

Превью техники «Icon shrinks aside with a motion blur to make room for the name» — На 0:15 в видео

Композиция

Icon shrinks aside with a motion blur to make room for the name

The centred 676 px icon scales to 0.417 and slides to the left third in 0.415 s (power3.inOut, about the frame's centre), blurring up to 7 px at its fastest moment and sharp again as it lands; afterwards it keeps growing by 2.8% over five seconds so the lockup never freezes. The name then starts where the icon made room.

Когда использовать To go from a hero icon to a horizontal logo lockup.

Показать код

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Icon shrinks aside with a motion blur to make room for the name</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>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #040308; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(circle at 960px 540px, #0D0B1E 0, #0D0B1E 250px, #0a0817 500px, #06050f 600px, #040308 900px); }
#wrap { position: absolute; inset: 0; transform-origin: 960px 540px; }
#icon { position: absolute; left: 622px; top: 202px; width: 676px; height: 676px; border-radius: 24%; background: #1C0B5D; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); }
#icon i { position: absolute; left: 158px; top: 158px; width: 360px; height: 360px; border-radius: 50%; background: #FFFFFF; box-shadow: inset 0 0 0 40px #FE9117; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080"><div id="wrap"><div id="icon"><i></i></div></div></div>
<script>
const tl = gsap.timeline({ paused: true });
const AT = 0.6, X = -438, Y = -18.5, S = 0.417; // when, where the icon's centre goes (px from the centre), how small
tl.to("#wrap", { scale: S, x: X, y: Y, duration: 0.415, ease: "power3.inOut" }, AT);
tl.fromTo("#wrap", { filter: "blur(0px)" }, { filter: "blur(7px)", duration: 0.2, ease: "power2.in", immediateRender: false }, AT + 0.015);
tl.to("#wrap", { filter: "blur(0px)", duration: 0.2, ease: "power2.out" }, AT + 0.215);
tl.to("#wrap", { scale: S * 1.028, duration: 3, ease: "none" }, AT + 0.415); // keeps breathing
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>

Типографика

Wordmark typed on sixteenth notes with a cursor that blinks on the beat

A pink cursor bar (10 x 128 px, soft glow) appears, then the name types one letter every sixteenth note at 96 BPM (0.156 s), each letter fading in over 0.05 s while the cursor jumps to its advance edge plus 16 px. Typed, the cursor blinks on the beat (off 0.28 s, on 0.34 s) three times and goes; meanwhile the tagline sweeps in left to right, each character fading in over 0.06 s as a front passes at about 3000 px/s. Bold grotesk for the name (Golos Text 700, 155 px), light text for the tagline (Onest 400, 49 px, lavender at 74%).

Когда использовать For a logo lockup or a title that should feel typed live, in time with the music.

Показать код

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wordmark typed on sixteenth notes with a cursor that blinks on the beat</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=Golos+Text:wght@700&family=Onest:wght@400&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #040308; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(circle at 960px 540px, #0D0B1E 0, #0D0B1E 250px, #0a0817 500px, #06050f 600px, #040308 900px); }
#word { position: absolute; left: 720px; top: 395px; white-space: nowrap; font-family: "Golos Text", sans-serif; font-weight: 700; font-size: 155px; letter-spacing: -1.45px; color: #FFFFFF; }
#tag { position: absolute; left: 724px; top: 600px; white-space: nowrap; font-family: "Onest", sans-serif; font-weight: 400; font-size: 49px; letter-spacing: -0.95px; color: rgba(233, 228, 242, 0.74); }
#word span, #tag span { opacity: 0; }
#cursor { position: absolute; left: 0; top: 446px; width: 10px; height: 128px; border-radius: 1px; background: #FB2D89; box-shadow: 0 0 14px rgba(251, 45, 137, 0.45); opacity: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="5" data-width="1920" data-height="1080"><div id="word"></div><div id="cursor"></div><div id="tag"></div></div>
<script>
const tl = gsap.timeline({ paused: true });
const WORD = "Brand Name", TAG = "Your tagline goes here";
const BEAT = 60 / 96, STEP = BEAT / 4, T0 = 0.4; // the music's beat, a sixteenth, when typing starts
const word = document.getElementById("word"), tag = document.getElementById("tag"), cur = document.getElementById("cursor");
const spans = (el, s) => [...s].map((c) => { const e = document.createElement("span"); e.textContent = c; el.appendChild(e); return e; });
const L = spans(word, WORD), G = spans(tag, TAG);
document.fonts.ready.then(() => {
  const x0 = word.offsetLeft, edge = L.map((s) => x0 + s.offsetLeft + s.offsetWidth + 16);
  tl.set(cur, { x: x0 + 9, opacity: 1 }, T0 - 0.15);
  L.forEach((s, k) => { const t = T0 + k * STEP; tl.to(s, { opacity: 1, duration: 0.05, ease: "none" }, t); tl.set(cur, { x: edge[k] - 5 }, t); });
  const done = T0 + L.length * STEP;
  for (let b = 0; b < 3; b++) { tl.set(cur, { opacity: 0 }, done + 0.5 + b * BEAT); tl.set(cur, { opacity: 1 }, done + 0.78 + b * BEAT); }
  tl.set(cur, { opacity: 0 }, done + 0.5 + 3 * BEAT);
  G.forEach((s) => tl.to(s, { opacity: 1, duration: 0.06, ease: "none" }, done + 0.48 + s.offsetLeft / 3050));
  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> Сделай 15-секундный горизонтальный моушн-графический промо-ролик 1920x1080 для [your brand], построенный так, будто лендинг оживает. Монтаж под электронный трек 128 BPM без закадрового голоса. Идея в том, что здесь никогда нет простой склейки: каждая сцена передаёт эстафету следующей через объект (точку, выбор в барабане, телефон, выигравшую плитку). Сохрани чистый светлый стиль продуктового UI: светлые фоны, скруглённые пилюли, карточки, телефон, дашборд и видеостена, все подписи — тёмным текстом на белых плашках, а мои фирменные цвета используются по ролям. Избегай резких склеек, наплывов, голоса, белого текста на светлом или полосатом фоне и подписей, которые перекрывают кольца или соседние фигуры. </direction> <structure> Пять битов примерно равной длины, около 3 секунд каждый, каждая передача попадает в долю. 1. Открытие: одна точка появляется в центре и вырастает в горизонтальную пилюлю с рядом кругов: маленькие портреты и иконки, например "Aa", простые фигуры и куб. Каждая иконка полностью видна и не закрыта соседним кругом. Камера отъезжает и открывает заголовок из двух строк, обе строки по центру. Первая строка вроде "No … keyframes." (замени на свою). Последнее слово заголовка постоянно перебирает варианты, как барабан игрового автомата. 2. Зум ныряет в вертящийся барабан портретов авторов и карточек. Барабан замедляется и останавливается на одном выборе, который подсвечивается. 3. Выбор превращается в телефон, и вокруг него веером раскрываются карточки функций. На одной карточке написано "Edit in words", крупное число "03" и маленький тег "Live preview" прямо рядом с числом (замени на свои функции). Подписи карточек лежат на белых плашках. 4. Резкий свайп-пэн ведёт к дашборду из видеоплиток с подписями на белых плашках. Он оценивает их и выбирает выигравшее видео, которое подсвечивается. 5. Выигравшая плитка раскрывается в наклонную стену видео с подписями на белых плашках. Затем стена складывается в мой логотип для финальной карточки, рядом с логотипом на белой плашке "[your website]". </structure> <composition> Центрированная симметричная композиция для заголовка и финальной карточки с логотипом. Элементы UI расположены как на настоящем лендинге: ряд пилюль, карточки с крупными числами и маленькими тегами, макет телефона, сетка дашборда и стена в перспективе. Используй мои фирменные цвета по ролям: тона фона (светлые, с некоторыми полосатыми заливками), один акцент для подсветки, выделений и колец и тёмный цвет текста. Каждая подпись на карточках, плитках и стене — тёмный текст на белой скруглённой плашке, чтобы читалась на любом фоне. Используй одно чистое семейство без засечек: жирный заголовок, подписи обычного начертания и жирные подписи кнопок. Оставь щедрые отступы, чтобы текст не касался колец или краёв. </composition> <techniques> Каждый переход — это объект, превращающийся в следующую сцену, никогда не склейка. Точка увеличивается в пилюлю с плавным ease-out, а круги выскакивают с небольшой задержкой друг за другом. Отъезд камеры — плавное уменьшение масштаба, открывающее заголовок. Меняющееся слово — вертикальный слот-ролл, перебирающий слова по кругу. Зум проходит сквозь пилюлю в барабан. Барабан быстро вращается и замедляется длинным ease-out, чтобы точно остановиться на выбранном. Выбор масштабируется и перестраивается в телефон, а карточки веером раскрываются вокруг него с поочерёдным поворотом и скольжением. Свайп-пэн — быстрое горизонтальное движение с размытием в движении и резким in-out. Выбор в дашборде — кольцо подсветки и увеличение победителя. Победитель разворачивается в наклонную 3D-стену, которая складывается и схлопывается в логотип с финальной посадкой. Все ключевые движения и остановки попадают в сетку бита. </techniques> <music> Сделай оригинальный бодрый электронный трек 128 BPM длиной ровно 15 секунд с чёткой дугой: лёгкое начало, нарастание через сцены с барабаном и телефоном, дроп около свайп-пэна и чистое завершение на логотипе. Положи его на сетку бита монтажа, с акцентами, написанными поверх для каждой передачи, райзером перед дропом и финальным ударом, когда стена складывается в логотип. Мастеринг примерно -14 LUFS, true peak ниже -1 dBTP. </music> <sound> Без закадрового голоса. Добавь вуши на зуме и свайп-пэне, короткий тик-и-стоп, когда барабан останавливается, и мягкий удар на логотипе. Держи все звуки тише музыки и в долю. </sound> <references> Лендинг SaaS, анимированный в продуктовое промо: карточки UI, макет телефона, аналитический дашборд и видеостена, в стиле современных роликов о запуске приложений с бесшовными переходами от объекта к объекту. </references>

Превью промпта «Промо с билетом, чемоданом и форматами и появлением логотипа»

Промо с билетом, чемоданом и форматами и появлением логотипа

<direction> Сделай 15-секундный горизонтальный (1920x1080, 60 к/с) моушн-промо для [your brand], продукта, который превращает описание в готовое видео (адаптируй слова под свой продукт). Идея: запрос превращается в билет, билет раскрывается обещанием, чемодан по одному выдаёт шаги, три формата проносятся мимо, и всё приходит к моему логотипу. Закадрового голоса нет: слова на экране, а ритм задаёт музыка. Всё нарисовано: плоская 2D-графика с одной карточкой, наклонённой в 3D, без съёмки. Стиль светлый, чистый и энергичный: один розовый акцент на светлой странице и глубокое тёмно-чернильное поле. Избегай съёмки, голоса, размытия внутри текстовых масок и любого дрейфа или искажения логотипа. Логотип формируется целиком, точно как нарисован, и остаётся абсолютно неподвижным примерно с 13,3 с до конца. </direction> <structure> 1. 0–1,9 с, запрос. Слева маленький розовый заголовок-кикер с разрядкой «YOUR AI MOTION DESIGNER» над трёхстрочным заголовком около 180 px: «Describe» / «the» / «video.» (замени на свой; последняя строка розовая). Строки поднимаются от своих базовых линий одна за другой. Первая уже движется на кадре 0, остальные следуют с интервалом 0,13 с, линейно, по 0,17 с каждая. Справа белая карточка-билет, наклонённая в перспективе, левой стороной ближе. На ней розовая шапка «FROM IDEA TO VIDEO» и мой небольшой логотип с «[your brand]» рядом. Два поля, «FROM IDEA · Your idea» и «TO MP4 · Video», соединены пунктирной линией с розовым треугольником play. Также есть маленькие надписи «EDIT WORDS», «STEP 03», «EFFECTS 3D» и «PREVIEW LIVE», штрихкод и «03» на корешке. Карточка влетает справа на 0,23 с (power3.out, 0,35 с), проскакивает примерно на 125 px влево и возвращается (sine.inOut, 0,37 с). Тем временем код «MP4» перебирает случайные буквы 15 раз в секунду и фиксируется буква за буквой на 0,67, 0,8 и 0,93 с. На 1,17 с розовый контурный штамп «MP4 EXPORT», наклонённый на -14°, прихлопывается с масштаба 2,4x за 8 кадров с лёгким отскоком. На 1,67 с треугольник play сжимается в розовую точку, которая вырастает в круговую шторку с центром в ней, а двумя бледно-розовыми кольцами идут чуть снаружи её края. Радиус проходит значения 15, 36, 66, 120, 210, 330, 540, 900 и 1500 px, шаг каждые два кадра. Строки заголовка уходят вверх по порядку, пока растёт круг. 2. 1,9–4,0 с, обещание, на полностью розовом поле (радиальный, светлее в центре). Белый треугольник play, чуть длиннее, чем шире, чтобы указывать направление, рождается внутри круга. Он делает одну петлю вокруг слов, повёрнутый вдоль пути: вверх, влево по верху, вниз по левой стороне, вдоль низа, вверх по правой стороне и наружу в правом верхнем углу. За собой он рисует пунктирную белую орбиту, чьи старые точки растворяются в тонкую бледную линию. На фоне два больших бледных круга. «No keyframes.» (около 220 px, белый) влетает буква за буквой с интервалом 0,03 с по дуге снизу справа, начиная с 38° и выпрямляясь. На 2,8 с оно улетает вверх и прочь буква за буквой. Одновременно «The agent animates it.» (около 157 px) поднимается от базовой линии буква за буквой с интервалом 16 мс. На 3,03 с белая скруглённая плашка выезжает слева за словами «animates it.» за 0,18 с, и эти слова становятся розовыми внутри неё. На 3,77 с слова размываются и исчезают. Глубокий тёмно-чернильный чемодан с розовым ремнём и биркой «MP4» падает сверху и приземляется на 4,02 с с небольшим сплющиванием. 3. 4,0–8,95 с, шаги. Из чемодана раскрывается светлый круг с двумя бледно-розовыми кольцами, а от его основания расходятся два розовых эллипса-ряби. Вверху поднимается «Edit in words.» (приглушённый, около 56 px). Затем слово за словом поднимается «Your idea is ready to move.» (около 93 px), «move.» розовым, а под ним рисуется розовое подчёркивание от руки. Над чемоданом одна за другой каждые 0,58 с появляются шесть белых карточек шагов. Каждая карточка 900x165 px, скруглённая, с плиткой-иконкой слева и чипом статуса справа. Каждая поднимается из-за чемодана (на 100 px ниже и с размером 72%, 0,3 с, power2.inOut) с лавандовым чипом «Animating» и спиннером. Затем она загорается в два такта: сначала розовая рамка и мягкое внешнее свечение, через 0,07 с плитка-иконка становится розовой, а чип превращается в розовый «✓ Ready». Когда приходит следующая карточка, прежняя сдвигается вверх на 40 px и гаснет за 0,15 с. Карточки гласят: «Kinetic type», «Shapes», «3D effects», «Sound», «Your own footage», «Fonts for every script» (замени на свои). Под чемоданом шесть точек и счётчик меняются с каждой карточкой, от «1 / 6 in motion» до «6 / 6 in motion». На 7,9 с последняя карточка на месте меняется на «Ready to move.» с плиткой-галочкой и розовым чипом «6 / 6». Счётчик заменяется на «✓ Live preview. MP4 export.» На 8,4 с всё, кроме чемодана, уходит вверх и растворяется в размытии. На 8,7 с камера ныряет в чемодан, пока его глубокое тёмно-чернильное тело не заполнит кадр. 4. 8,95–11,4 с, форматы. Группа из трёх наклонных полос проносится справа налево за 0,2 с и открывает за своим задним краем панель на весь кадр. Полосы наклонены примерно на 18°: тёмно-розовая узкая, широкая розовая и светло-розовая узкая. Тот же проход повторяется на 9,76 с и 10,5 с. Три панели — мягкие градиентные блоки с горизонтом: - от лавандового к фиолетовому, с тёплым светом в нижней половине; - фиолетовое небо над глубоким тёмно-чернильным «морем»; - оранжевое небо над глубоким чернильным цветом с полосой бирюзовой дымки. Каждая панель медленно приближается с 1,07 до 1 и имеет глубокий тёмно-чернильный градиент внизу. Её название поднимается буква за буквой внизу слева, около 226 px, белым: «Vertical», «Horizontal», «Square». Вверху слева маленький HUD с разрядкой: «01 / 03» светло-розовым, затем «9:16», затем «MP4 EXPORT» печатается, а под ним растёт розовое подчёркивание. Он меняется на «02 / 03 · 16:9 · LIVE PREVIEW», а затем на «03 / 03 · 1:1 · NO KEYFRAMES». 5. 11,4–12,5 с, сетка. Последняя панель сжимается в правую карточку, а две другие вплывают слева. Вместе они образуют три портретные карточки (580x780 px, с промежутком 30 px) на глубоком тёмно-чернильном поле. Сетка мягко приближается до 1,05 и возвращается за полсекунды. Над ней белым поднимается «Vertical, horizontal or square.» Когда сетка успокоится, на карточках проявляются маленькие названия («Vertical», «Horizontal», «Square»), хорошо внутри кадра. 6. 12,2–15 с, логотип. Из средней карточки вырастает розовая точка с бледными кольцами-ореолами, пока сетка уменьшается до 0,9 на белой странице. Её радиус задан ключами каждые два кадра от 12 до 1150 px. Затем точка быстро уменьшается и замедляется (260, 125, 90, 75 px), перемещаясь левее центра. Там она прямо раскрывается в фоновую форму моего логотипа, не перекрывая сам логотип, а внутренние части логотипа вырастают как единое целое, точно как нарисован логотип. На 13,03 с «[your brand]» выезжает из-за логотипа вправо (power3.out, 0,32 с), а вокруг логотипа расходится тонкое розовое кольцо и гаснет. Название около 150 px, тёмно-чернильное, его буквы центрированы по средней линии логотипа, а весь блок центрирован в кадре. Затем под ним слово за словом поднимается «Describe the video. The agent animates it.», второе предложение розовым. Выскакивают три лавандовых чипа: «• Vertical», «• Horizontal», «• Square». «[your website]» поднимается приглушённым серым. Логотип остаётся абсолютно неподвижным примерно с 13,3 с, и всё держится до конца. </structure> <composition> Основа — светлая страница #FAF9FF с едва заметной точечной сеткой 40 px #E9E4F2 и мягкими розовыми радиальными свечениями. Глубокий чернильный #1C0B5D — для тёмного текста, тёмных объектов и тёмного поля. Один акцент, розовый #FB2D89, — для выделений, акцентного поля и прогресса. Приглушённый #6B6385 — для второстепенных строк, а лавандовый #F0EDFF — для мягких чипов. Оранжевый #FE9117, фиолетовый #7C6CF2 и бирюзовый #2DD4B0 встречаются только на трёх панелях форматов (и в моём логотипе, если он их использует). Заголовки — плотный геометрический гротеск Manrope ExtraBold с узким трекингом около -0,05em. Мелкие надписи, HUD и сайт — чистый гротеск Inter SemiBold. Композиция по сценам: - Сцена 1: заголовок слева, наклонённый билет справа. - Сцена 2: слова по центру розового поля. - Сцена 3: карточки шагов стопкой над чемоданом, точки и счётчик под ним, заголовок вверху. - Сцена 4: названия форматов внизу слева, HUD вверху слева. - Сцена 6: финальный логотип по центру, ниже слоган, чипы и сайт. </composition> <techniques> Появления чистые. Текст поднимается от собственной базовой линии внутри обрезки, которая движется вместе с ним, никогда не размытие внутри маски. Уходы ускоряются и завершаются примерно за 0,1 с. - Круговые шторки растут ступенчатыми радиусами с ключами каждые два кадра, с бледно-розовыми кольцами чуть снаружи края. - Код на билете перебирает буквы и фиксируется буква за буквой. - Штамп прихлопывается с масштаба 2,4x с лёгким отскоком. - Буквы входят по вращающейся дуге, а плашка-выделение выезжает за словами, которые меняют цвет внутри неё. - Карточки шагов загораются в два такта: сначала рамка и свечение, потом плитка и чип. - Камера ныряет в чемодан с масштабом 1,5, 3,1, 6,2 и 7 за четверть секунды. - Наклонные трёхполосные проходы осуществляют переходы между панелями форматов, и каждая панель медленно приближается. - Одна панель схлопывается в сетку из трёх карточек. - Точка путешествует и раскрывается в логотип, который строится как единое целое и после формирования не двигается и не деформируется. </techniques> <music> Используй оригинальный бодрый, оптимистичный электронный хаус-трек на 120 BPM, ровно 15 с. Полный грув играет с первого кадра, бочка на каждой доле примерно на x,05 и x,55 с. Он остаётся ровным под карточками и форматами. Ударные пропадают на 12,55 с, когда точка поглощает сетку, остаются тёплый пэд и нарастающее арпеджио, затухающие к 15 с. Склейки и ключевые акценты попадают в сетку долей. </music> <sound> Звуковой дизайн лежит поверх трека, без дополнительных ударных: - свист, когда билет влетает; - мягкие щелчки, когда код фиксируется; - мягкий удар на штампе; - свисты на каждой круговой шторке и плашке-выделении; - глухой удар, когда приземляется чемодан; - писк, поднимающийся по высоте, когда каждая карточка становится розовой; - перезвон, когда приземляется последняя карточка; - нарастание перед погружением и удар, когда открывается первая панель; - свисты на каждом проходе полос и когда карточки собираются вместе; - нарастание перед дропом; - колокольчик, когда формируется логотип; - мягкие щелчки на чипах. Сведи примерно к -14 LUFS с истинным пиком ниже -1 dBTP. </sound> <references> Современная рекламаприложения в плоском векторном стиле, построенная на кинетической типографике и метафоре путешествия: посадочный талон, чемодан и панели с горизонтом. Заканчивается чистым логотипом по центру. </references>

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

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

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

<direction> Сделай 12-секундную горизонтальную сплит-скрин заставку для моего приложения, 1920x1080, 59,94 кадра/с. Две квадратные панели рядом проигрывают одну и ту же яркую анимацию интерфейса. Левая панель шагает с ощущением 29,97 кадра/с, а правая идёт с полной частотой кадров, чтобы была видна разница в плавности. Семь быстрых планов ложатся на бит: курсор кликает по моему логотипу в окне приложения, значок взрывается орбитой квадратов, клик в строке меню выпускает стеклянное поле запроса, в котором печатается текст, страница текста пролистывается вместе с карточкой, две карточки стопкой плывут вверх, мой логотип остаётся один, а светящийся логотип-надпись врывается на почти чёрном фоне. Стиль чистый и яркий, с мягкими тенями и размытием движения на каждом перемещении. Избегай статичных стартов, кросс-фейдов, зерна и закадрового голоса. </direction> <structure> 1. 0,00–2,39 с, заголовок и клик. Фиолетовая дымка за 0,9 с рассеивается до белой страницы и оставляет лавандовое свечение внизу. Однострочный заголовок поднимается примерно с y 930 до 537 по экспоненциальному ease-out (около 1,2 с), вначале сильно размытый. В нём мой логотип в лавандовом диске 132 px, название «[ваш бренд]» шрифтом Inter Medium цвета глубокой туши и капсула глубокой туши «Открыть приложение». Название появляется на втором кадре уже размытым. Капсула идёт следом через два кадра, сдвигаясь на 15 px влево по мере того, как становится чёткой. С 0,45 с вокруг заголовка проявляется белое окно приложения с радиусом углов 93 px (53%, 70%, затем 100% к 0,78 с). Внутри него лавандовая поисковая «таблетка» «Опиши видео», колонка приглушённых значков и карточка поверх обложки от глубокой туши к фиолетовому. Карточка в левой панели гласит «Твоя идея готова к движению» / «Живой предпросмотр · экспорт в MP4», а в правой — «Чат вместо таймлайна». Обложка гласит «От идеи до видео в одном чате» или «Опиши свою идею». На 0,88 с справа вверху появляется чёрный курсор-стрелка с белой обводкой и скользит влево, замедляясь. Он поворачивается на -85 градусов, чтобы смотреть вниз при заходе, садится на логотип вертикально и вырастает в 1,55 раза, пока вокруг диска загорается мягкое розовое кольцо. Камера наезжает до 1,2 относительно центра (ease-in-out, 0,47 с) и держится один кадр. Затем отъезжает до 1,04 по ускоряющейся кривой, пока курсор нажимает (уменьшается на 15%), прямо в склейку. 2. 2,39–3,35 с, значок и орбита. Жёсткая склейка на дроп музыки: мой логотип как значок приложения появляется размером 276 px и сжимается до 178 px (expo out, 0,47 с). Четыре скруглённых квадрата, размытых движением и опережающих на 32 градуса, занимают места крестом вокруг него на радиусе 222 px (expo out, 0,9 с). Слева они фиолетовый, бирюзовый, розовый и жёлтый, а справа розовый, оранжевый, бирюзовый и белый. За значком за 0,2 с вырастает двухцветный лавандовый диск. С 3,12 с квадраты складываются в ряд справа и уменьшаются, а значок сжимается примерно до 70 px под нарастающим размытием. 3. 3,35–5,29 с, строка меню и запрос. Склейка на правый верхний угол экрана компьютера под белой страницей. Видны почти чёрная рамка 46 px и тёмная полупрозрачная строка меню со значками wifi, батареи и управления, моим логотипом, тремя акцентными точками, «[ваш бренд]» и «Открыть приложение». Обои идут от глубокой туши к фиолетовому, слева диагональные световые полосы, розовое свечение, тонкая сетка и блик справа. Курсор поднимается к логотипу и кликает (масштаб 0,82 на 0,1 с). Матовое стеклянное поле запроса выскакивает из значка: 740 x 226 px, радиус 56 px, полупрозрачное лавандовое с белой тонкой рамкой. Оно масштабируется от 0,18 до 1 с перелётом за 0,19 с, его размытие падает с 9 px до 0, пока камера смещается на 115 px вправо. Текст печатается со скоростью 27 символов в секунду за белой кареткой: «Редактируй словами, без ключевых кадров» слева, «Крупнее, медленнее, другой цвет» справа. В нижнем ряду розовая круглая кнопка отправки и три маленьких значка. План уплывает вверх и уходит по вертикальной ступени размытия, пока лавандовая вуаль поднимается до 75%. 4. 5,29–7,16 с, страница ответа и карточка. Из лавандовой вспышки снизу, с отступа 291 px, прокручивается вверх страница серо-фиолетового текста шрифтом Inter 42–45 px. Она движется по экспоненциальной кривой (постоянная времени 0,2 с), с вертикальным размытием, привязанным к скорости. Одна фраза глубокой тушью SemiBold стоит под маленьким вертикальным курсором: «ИИ-моушн-дизайнер» слева, ««медленнее», «другой цвет»» справа. Примеры строк: «От идеи до видео в одном чате», «01 Выбери шаблон», «02 Опиши свою идею», «03 Доработай словами и экспортируй», «Скажи чату, что показать. Агент соберёт анимацию.», «Кинетическая типографика, фигуры, 3D-эффекты и звук». На 6,22 с у нижнего края выскакивает размытая карточка. Она поднимается по быстрому ease-out на фоне ровного дрейфа вверх 158 px/с, пока страница тускнеет до 45% и размывается на 3 px. Слева на карточке абстрактный треугольник глубокой туши, фиолетового, оранжевого и жёлтого цветов с подписью «Идеи в движении» / «[ваш сайт]». Справа на ней обложка от глубокой туши к фиолетовому с белой карточкой «Опиши свою идею» и подписью «Чат вместо таймлайна» / «Живой предпросмотр · экспорт в MP4». С 6,9 с она ускоренно уходит вверх, уменьшается до 0,9 и растворяется в размытии. 5. 7,16–8,16 с, стопка карточек. Размытое растворение за три кадра вводит две карточки стопкой (534 x 343 px, радиус 51 px). Они приходят на 165 px ниже, на 15% крупнее и размытыми, устраиваются за 0,3 с и продолжают дрейфовать вверх, затем уходят ускоренным движением и ступенью размытия. На каждой гигантский белый заголовок с непрозрачностью 60%, обрезанный нижним краем. Слева заголовки «Шрифты» и «Музыка» поверх графики с треугольником и «таблетки» «Открыть приложение». Справа «Фигуры» и «Звук» поверх обложек от глубокой туши к фиолетовому с «таблетками» «02» и «03» и белыми внутренними карточками «Кинетическая типографика, фигуры» и «Музыка и звуковые эффекты»; у второй карточки розово-оранжевое свечение. 6. 8,16–10,03 с, логотип один. Склейка через размытие на мой логотип в лавандовом диске 167 px на белом. Он поднимается на 115 px на место по экспоненциальной кривой (0,17 с), держится, затем сжимается в склейку. 7. 10,03–12,00 с, финальная карточка. Жёсткая склейка на почти чёрный фон с радиальным свечением глубокой туши. Белый логотип-надпись с мягким двухслойным свечением врывается с масштаба 3,85x: «[ваш бренд]» слева, «[ваш сайт]» справа. Его горизонтальное размытие гаснет за 0,1 с. Он оседает до 1x примерно за секунду на всё замедляющейся кривой, затем медленно отъезжает и ускоряется до 0,72x на последнем кадре. </structure> <composition> Фон почти чёрный #0D0B1E. Две квадратные панели по 930 x 930 px стоят рядом на y 100 (левая на x 20, правая на x 970). Над каждой небольшая подпись шрифтом Inter SemiBold 28 px светло-лавандового цвета #E9E4F2: «Живой предпросмотр» над левой панелью и «[ваш бренд] · экспорт в MP4» над правой. Обе панели одновременно проигрывают одни и те же семь планов с одинаковым таймингом и движением. Левая панель показывает новую картинку каждый второй кадр, а правая каждый кадр. Различаются только некоторые слова, как отмечено в планах. Внутри панели всё выкладывается на сцене 1080 x 1080, масштабируемой по размеру. Палитра: светлая страница #FAF9FF; лавандовый #F0EDFF для мягких панелей и свечений; линии #E9E4F2; приглушённый серо-фиолетовый #6B6385 для второстепенного текста; глубокая тушь #1C0B5D для тёмного текста и тёмных поверхностей; почти чёрный #0D0B1E. Акценты: розовый #FB2D89 (основной) и оранжевый #FE9117, с фиолетовым #7C6CF2, бирюзовым #2DD4B0 и жёлтым #FFD23F там, где нужны четыре цвета. Везде используй Inter 400/500/600/700. Мой логотип — значок приложения везде, где появляется логотип. Лучше всего подходит скруглённый квадратный значок, например квадрат глубокой туши с розово-оранжево-белым вихрем и розовым треугольником play. </composition> <techniques> Ничто не начинается со статичного кадра. Каждый элемент входит уже в движении по экспоненциальному ease-out и уходит ускоренным движением или ступенью размытия. Размытие движения следует скорости и направлению каждого перемещения. Кросс-фейдов нет: планы меняются жёсткими склейками, склейками через размытие и коротким растворением через размытие, всё на бит. Камера наезжает до 1,2 (ease-in-out, 0,47 с), держится один кадр и отъезжает до 1,04 по ускоряющейся кривой в плане 1, и смещается на 115 px вправо в плане 3. Курсор — чёрная стрелка с белой обводкой; его клики уменьшают его (на 15% или до 0,82 на 0,1 с). Печать идёт со скоростью 27 символов в секунду за белой кареткой. Появления выскакивают с перелётом. Уходы вверх используют вертикальные ступени размытия, а врыв финальной карточки использует горизонтальное размытие. </techniques> <music> Сделай бодрую фанковую хаус-подложку 124 BPM длиной ровно 12 секунд. Она открывается фильтрованным вступлением под первым планом. Полный грув (бочка четыре четверти, клэпы, слэп-бас, щипковые аккорды) вступает на склейке к значку на 2,39 с. Фильтрованный брейкдаун звучит под одиноким логотипом, а реверберационный хвост идёт после удара финальной карточки. Каждая склейка приходится на бит. Сведи примерно до -14 LUFS с true peak ниже -1 dBTP. </music> <sound> Поверх музыки добавь такие звуковые эффекты: - райзер перед дропом и бум на нём - мягкий щелчок, когда курсор нажимает на логотип, и ещё один на значке в строке меню - поп, когда выскакивает поле запроса - лёгкие тики печати - свуш на складывании в строку меню и на проносе к странице с текстом - свиши, когда поднимается карточка и когда растворяются стопкой карточки - лёгкий удар на одиноком логотипе - бум с падающим тоном на финальной карточке Без голоса. </sound> <references> Отполированная заставка запуска приложения в стиле современной моушн-графики для продуктовых интерфейсов: яркие макеты интерфейса, кинетические движения камеры, сильное направленное размытие движения и склейки на бит. Она устроена как сравнение частоты кадров. </references>

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

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