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

RU

Открыть beta

Simple Motion

Гипнотический showreel «Погружение в глаз» в неоновом синтвейве

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

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

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

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

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

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

Замысел

Сделай 20-секундный психоделический гипнотический моушн-графический шоурил, 16:9, 1920x1080, 60 к/с. Всё нарисовано и сгенерировано: процедурные узоры и 3D-формы, без видеосъёмки и фотографий. Смонтируй под неоновый синтвейв-трек 120 BPM. Идея: глаз раскрывается из одной линии, а камера всё глубже ныряет сквозь него в всё более странные миры, пока не приземлится на заголовок. Каждый кадр зависит от времени. Секции сменяются на границах тактов (каждые 2 с) за белыми вспышками, а пульсации яркости на долях держат картинку «дышащей». Внешний вид: глубокие чернильные и почти чёрные тона с неоновым розовым, оранжевым, фиолетовым, бирюзовым и жёлтым, мягкое свечение (bloom), лёгкая хроматическая аберрация, мелкое зерно и виньетка, а всё обрамляет тонкий технический HUD. Все слова в кавычках — примеры, замени их своими; держи длину близкой, чтобы вёрстка не поехала. Избегай видеосъёмки и стоковых изображений, плоских нетекстурированных заливок, чистого чёрного (тёмные тона никогда не ниже #0D0B1E), пересыщенных цветов и любых реальных имён или брендов на экране.

Структура

0,0–4,0 с, глаз. Чёрный экран, затем на 0,3 с появляется тонкая светящаяся линия ресниц. Глаз — заострённый миндаль: форма линзы между двумя пересекающимися кругами, около 0,55 ширины кадра. Весь кадр вокруг заполняют контурные линии — изолинии той же двухкруговой формы с логарифмическим шагом (каждый промежуток примерно на 13% шире предыдущего). Они медленно текут наружу и гаснут с расстоянием: бледно-лавандовые, оранжевые и бирюзовые рядом с глазом, розовые дальше, поверх глубоких чернильных полос. С 0,3 до 0,85 с глаз — щель. С 0,85 до 1,33 с веки раскрываются (power2.out), а глаз вырастает с 86% до полного размера. Радужка волокнистая, с полосами оранжевого, персикового, мятного и фиолетового, с розовым краевым кольцом, бирюзовым свечением и кольцевым бликом вверху слева; у век мягкий белый внутренний ободок. Ритмичные волны проходят по линиям на 1,5, 1,75, 2,5 и 2,75 с. Центрированная подпись мелким моноширинным шрифтом с разрядкой («YOUR LINE OF TWENTY-SIX LETTERS») расшифровывается с 1,4 с со скоростью около 45 букв в секунду и рассыпается справа в 2,8–3,1 с. С 2,75 с зрачок расширяется и показывает внутри уже идущую следующую сцену, а полосы радужки смещаются к фиолетовому и жёлтому. С 3,42 до 3,98 с камера въезжает в зрачок, пока внутренняя сцена не заполнит кадр в масштабе 1:1.
4,0–8,0 с, туннель. Склейка на белой вспышке с радиальными лучами. Это туннель в перспективе из колец, расположенных так, что обратный радиус растёт на 0,75 на кольцо. В каждом кольце 18 миндалевидных глаз с бирюзовыми контурами, розовыми и фиолетовыми радужками и белым бликом. Соседние кольца сдвинуты на полклетки и вращаются в противоположные стороны. Кольца летят наружу со скоростью около 11 колец в секунду с толчком на каждую долю, а дальние кольца тают в чернильной дымке вокруг белого ядра. На каждую долю из ядра выходит светящееся кольцо и растёт, поочерёдно белое, розовое, затем бирюзовое. С 6,05 до 6,45 с глаза превращаются в полярную шахматную доску, затем в солнечный веер из 36 медленно вращающихся лучей в приглушённых цветах радуги, с яркой окружностью вокруг центра, которая раздувается после 7,0 с. С 7,45 до 7,8 с шахматка снова вспыхивает, а с 7,72 до 7,97 с всё уходит в белое.
8,0–11,33 с, хромовая капля. Белое тает за 0,5 с, открывая переливающийся хромовый метабол над тёмными концентрическими волнами. Это шесть сфер в плавном объединении: тёмное тело с тонкими масляными контурными полосами бирюзового и розового, розовый контровой свет и резкие белые блики. Он вращается и меняет форму. Вертикальная цепочка собирается в комок, две капли отделяются в 9,1–9,5 с, и он сминается в 9,5–9,9 с. С 10,0 с кадр становится калейдоскопом, который проходит через 4, 6, 3, 8, затем 10 зеркальных сегментов, а бледная дуга расходится наружу в 10,0–10,25 с.
11,33–14,0 с, спираль. Глитч-вспышка, затем двенадцать логарифмических спиральных рукавов из каплевидных ячеек. Каждая ячейка в 1,5 раза больше предыдущей вдоль рукава, а рукава закручиваются против часовой стрелки наружу. У ячеек двойные лавандовые контуры, и в них либо радужка (бирюзовая, розовая или оранжевая), либо вложенный градиентный ромб (розовый или фиолетовый). Тонкие золотые линии прочерчивают рукава и кольца, а в центре светится белое ядро. Спираль приближается к центру со скоростью около 1 лог-единицы в секунду и медленно вращается; оба движения получают толчок на каждую долю, с пульсацией яркости на каждой доле. С 13,82 до 14,0 с белое сияние растёт из центра и заполняет кадр.
14,0–15,5 с, комната сфер. Белое тает за 0,7 с в 3D-комнату. Арки сделаны из жемчужных бусин, большие переливающиеся сферы выстроены вдоль стен, а плоские напольные диски несут зигзагообразные оп-арт-полосы в пастельной радуге, всё в чернильно-фиолетовом тумане. Камера едет вперёд и кренится вправо.
15,5–16,0 с, монтаж на шестнадцатых (склейки на 15,5, 15,633, 15,75 и 15,883 с): крупный план радужки, лучи, калейдоскоп и спираль, каждый с небольшой вспышкой.
16,0–18,0 с, глаз снова. Белая вспышка с тёмным диском в центре, который сжимается до нуля за 50 мс. Камера отъезжает из зрачка, внутри которого видна комната сфер, до полного глаза к 16,32 с. Теперь контурные линии — толстые неоновые полосы: розовые рядом с глазом, затем фиолетовые, затем глубокие чернильные дальше, становящиеся бирюзовыми в 16,9–17,8 с. Радужка — пастельное радужное кольцо вокруг большого тёмного зрачка. Пульсации на долях приходятся на 16,5, 17,0 и 17,5 с. С 17,84 до 17,98 с глаз моргает: полосы выпрямляются в горизонтальные с одной яркой линией посередине. В 18,0 с всё схлопывается во тьму за 50 мс.
18,1–20,0 с, титр. Слово широким чёрным гротеском («YOUR WORD») подгоняется примерно под 1436 px в ширину и центрируется. Оно проявляется слева направо с мягким размытым краем за 0,52 с. Буквы бледные (лаванда, мята, затем румянец слева направо), заполнены зерном, с красно-синим разделением, сходящимся с 10 до 3 px, и свечением фиолетового, бирюзового и розового оттенков. В 18,62 с под ним проявляется курсивный подзаголовок («your short tagline»). В 19,1 с над ним расшифровывается крошечная моноширинная строка с разрядкой («( a short call to action )»). С 19,55 до 19,95 с слово рассыпается в шум, и кадр гаснет.

Композиция

Палитра: глубокий чернильный #1C0B5D и почти чёрный #0D0B1E для всех тёмных областей (фоны, полосы, белок глаза). Акценты: розовый #FB2D89 (основной), оранжевый #FE9117, фиолетовый #7C6CF2, бирюзовый #2DD4B0, жёлтый #FFD23F и белый #FFFFFF. Светлая лаванда #F0EDFF / #FAF9FF для бледных оттенков и текста, приглушённая лаванда #9890B4 для мелкого текста HUD и #E9E4F2 для линий. Радужные элементы чередуют розовый, фиолетовый, бирюзовый, жёлтый, оранжевый.
Грейдинг на всё: мягкое свечение ярких форм (порог около 0,7), лёгкая радиальная хроматическая аберрация к углам, мелкое зерно, виньетка и слегка приглушённая насыщенность. Тёмные тона никогда не ниже #0D0B1E.
Шрифты: Unbounded 900 (очень широкий чёрный гротеск) для заголовка, JetBrains Mono 400/700 размером 11–15 px с разрядкой около 0,3 em для HUD и Spectral Italic 400 около 43 px для подзаголовка.
HUD: лежит поверх всего с 1,0 с, проявляется за 0,5 с и гаснет в 19,6–19,9 с. Тонкие L-образные угловые скобки на расстоянии 28 px от каждого угла.

Вверху слева: название жирным моно («YOUR NAME») и слоган под ним («YOUR TAGLINE»).
Вверху справа, по правому краю: счётчик глав («01 / 07») и жирное название главы («FIRST CHAPTER»), меняющиеся в каждой секции.
Внизу слева: таймкод «TC 00:00:SS:FF», считающий кадры при 60 к/с, и «120 BPM · bar.beat.sixteenth» (например, 02.3.3).
Внизу справа: четыре квадрата 8 px, текущая доля подсвечена белым, и короткая подпись жирным (например, «YOURSITE.COM»).
Линия прогресса 1,5 px между нижними скобками заполняется вместе с воспроизведением.

Техники

Расшифровка текста: в начале каждой секции счётчик и название главы расшифровываются буква за буквой за 0,38 с. Каждая буква перебирает символы вроде # % & = + @ < | / $ со скоростью 30 смен в секунду и проявляется слева направо. Подпись и призыв к действию используют ту же расшифровку, а подпись рассыпается справа так же.
Вспышки секций: каждая белая вспышка с радиальными лучами затухает как 0.94 / (1 + (t / 0.07)^2.5).
Толчок в зрачок (3,42–3,98 с): зум ускоряется экспоненциально, лог-зум = 5.5·x² / (x + 0.1) на протяжении движения. Следующая сцена идёт внутри зрачка и заканчивается ровно в 1:1, так что склейка бесшовная. Отъезд в 16,0 с зеркален.
Толчки на долях: скорость туннеля, зум и вращение спирали, а также волны и кольца получают импульс на каждую долю, с пульсациями яркости на долях.
Морфинг вместо склеек внутри сцен: глаза в шахматку в солнечный веер, цепочка метабола в комок в капли в смятие, затем счёт зеркальных сегментов калейдоскопа 4, 6, 3, 8, 10.
Переходы: уходы в белое и появления из белого на границах тактов, глитч-вспышка в спираль, белое сияние из центра в комнату сфер, вспышки-склейки на шестнадцатых в монтаже, схлопывание во тьму за 50 мс перед титром.
Титр: мягкий вайп слева направо, RGB-разделение, сходящееся с 10 до 3 px, затем растворение в шум и затухание в конце.

Музыка

Неоновый синтвейв 120 BPM в ля миноре, один аккорд на такт (2 с): Am F для вступления, затем Am F C G Am, F в брейкдауне, G на возвращении, Am в конце. Бочка попадает точно в доли картинки (каждые 0,5 с).

0–4 с: колокольная фигура восьмыми над тёплым падом, с долгим райзером и обратной тарелкой, без ударных.
В 4,0 с: бочка «четыре четверти», бас с прыжками на октаву восьмыми и пилообразное арпеджио шестнадцатыми. Бас и арпеджио качаются от бочки.
С 8,0 с: большой снэр с ревербом на вторую и четвёртую доли, хэты на оффбите и квадратный лид с длинными нотами, со снэр-филлом в 14,0 с.
14,0–16,0 с: ударные и бас выпадают, пад нарастает, а фильтрованное арпеджио поднимается со снэр-роллом тридцать вторыми в 16,0 с.
В 16,0 с: всё врывается обратно.
Ударные останавливаются за полдоли до 18,0 с, а один звенящий аккорд Am add9 несёт финальную карточку.

Звук

Звуковые эффекты на картинку:

мягкий высокий синус в 0,3 с для линии ресниц
райзер в глубокий бум в 4,0 с
короткий райзер и бум в 8,0 с
глитч в 11,33 с
райзер и вуш в 14,0 с
четыре коротких глитч-тика на склейках монтажа
длинный райзер в бум в 16,0 с
вуш на моргании в 17,95 с
даунер и саб-дроп в 18,0 с
мягкий колокольчик при появлении титра в 18,12 с
воздушный вуш, пока титр растворяется
Без закадрового голоса. Микс примерно −14 LUFS, истинный пик ниже −1 dBTP.

Референсы

Цвета outrun и синтвейва конца 80-х, оп-арт-муар и иллюзии контурных линий, психоделические образы глаз, процедурные шоурилы в духе демосцены и шоурилы моушн-студий с техническим HUD.

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

Превью техники «Глаз-миндалина с логарифмическими контурными линиями» — На 0:02 в видео

Фигуры

Глаз-миндалина с логарифмическими контурными линиями

Глаз нарисован в одном фрагментном шейдере: веки — линза между двумя окружностями (кончики на ±0.53, половина высоты 0.237 высоты кадра), а каждая линия снаружи — изолиния расстояния до тех же двух окружностей, поэтому линии остаются заострёнными и превращаются в прямые горизонтальные полосы, когда глаз закрывается. Линии стоят на логарифмических шагах (каждый промежуток примерно на 13% шире), а их фаза течёт наружу; волокнистая радужка (70 закрученных угловых волн) в персиковых, мятных и фиолетовых полосах, кольцевой блик и мягкий внутренний ободок завершают образ. Веки открываются щелью (0.3 с), затем power2.out за 0.48 с.

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

Показать код

<!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: #000; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="6" data-width="1920" data-height="1080">
  <canvas id="gl" class="clip" data-start="0" data-duration="6" width="1920" height="1080"></canvas>
</div>
<script>
function makeShader(canvas, fs) {
  const gl = canvas.getContext("webgl2", { preserveDrawingBuffer: true });
  const vs = "#version 300 es\nin vec2 p;\nvoid main() { gl_Position = vec4(p, 0.0, 1.0); }";
  const sh = (type, src) => { const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); return s; };
  const pr = gl.createProgram();
  gl.attachShader(pr, sh(gl.VERTEX_SHADER, vs));
  gl.attachShader(pr, sh(gl.FRAGMENT_SHADER, fs));
  gl.bindAttribLocation(pr, 0, "p");
  gl.linkProgram(pr);
  gl.useProgram(pr);
  const buf = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
  gl.enableVertexAttribArray(0);
  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
  const loc = {};
  const U = (n) => (n in loc ? loc[n] : (loc[n] = gl.getUniformLocation(pr, n)));
  return (uniforms) => {
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.uniform2f(U("uRes"), canvas.width, canvas.height);
    for (const k in uniforms) {
      const v = uniforms[k];
      if (typeof v === "number") gl.uniform1f(U(k), v);
      else if (v.length === 2) gl.uniform2f(U(k), v[0], v[1]);
      else if (v.length === 3) gl.uniform3f(U(k), v[0], v[1], v[2]);
    }
    gl.drawArrays(gl.TRIANGLES, 0, 3);
  };
}

// Pointed-almond eye with log-spaced contour lines: the lids are the lens between two circles; every
// line outside is an iso-line of the same two-circle distance, spaced in log steps and flowing outward.
const FS = `#version 300 es
precision highp float;
uniform vec2 uRes;
uniform float uT, uOpen, uFlow;
out vec4 o;
float almond(vec2 q, float a, float b) {          // two-circle lens, tips at (+-a, 0), half-height b
  b = max(b, 1e-4);
  float R = (a * a + b * b) / (2.0 * b), c = R - b, k = b * (2.0 * R - b), qq = dot(q, q);
  float d1 = (qq + 2.0 * q.y * c - k) / (length(q + vec2(0.0, c)) + R);
  float d2 = (qq - 2.0 * q.y * c - k) / (length(q - vec2(0.0, c)) + R);
  return max(d1, d2);
}
void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uRes) / uRes.y;
  float px = 1.0 / uRes.y;
  float d = almond(p, 0.53, 0.237 * uOpen);
  // lines: log spacing (each step ~13% wider), phase flowing outward
  float dd = max(d, 0.0);
  float lu = log(1.0 + dd / 0.207) / 0.089 - uFlow;
  float dist = abs(fract(lu + 0.5) - 0.5) / (px / ((0.207 + dd) * 0.089));
  float idx = floor(lu + 0.5);
  vec3 lineCol = mod(idx, 3.0) < 1.0 ? vec3(0.94, 0.93, 1.0) : mod(idx, 3.0) < 2.0 ? vec3(0.94, 0.54, 0.16) : vec3(0.18, 0.77, 0.64);
  lineCol = mix(lineCol, vec3(0.88, 0.16, 0.49), smoothstep(0.08, 0.6, dd));
  float fade = exp(-dd * 2.8);
  vec3 outside = vec3(0.06, 0.02, 0.19) * (0.3 + 0.7 * fade) + lineCol * exp(-dist * dist / 0.8) * (0.15 + 0.85 * fade);
  // inside: sclera, iris bands with twisted fibres, pupil, a ring highlight
  float r = length(p), ang = atan(p.y, p.x), rp = 0.08;
  float rn = clamp((r - rp) / (0.235 - rp), 0.0, 1.0);
  float a2 = ang + 0.15 * uT + rn * 1.3;
  float fib = 0.5 + 0.5 * sin(70.0 * a2 + 4.0 * sin(11.0 * a2 + rn * 6.0) + rn * 8.0);
  float w = rn + 0.05 * (fib - 0.5);
  vec3 ic = mix(vec3(0.85, 0.48, 0.12), vec3(1.0, 0.86, 0.7), smoothstep(0.0, 0.12, w));
  ic = mix(ic, vec3(0.78, 0.95, 0.91), smoothstep(0.4, 0.5, w));
  ic = mix(ic, vec3(0.6, 0.55, 0.96), smoothstep(0.7, 0.8, w)) * (0.8 + 0.3 * fib);
  vec3 sclera = mix(vec3(0.15, 0.1, 0.32), vec3(0.03, 0.02, 0.06), smoothstep(0.1, 0.55, r));
  vec3 inside = mix(sclera, ic, smoothstep(0.235 + px, 0.235 - px, r));
  inside = mix(inside, vec3(0.23, 0.16, 0.37), smoothstep(rp + px, rp - px, r));
  inside += exp(-pow((length(p - vec2(-0.118, 0.094)) - 0.037) / 0.0035, 2.0));
  inside *= mix(0.42, 1.0, smoothstep(0.0, 0.05, -d));
  vec3 col = mix(outside, inside, smoothstep(px, -px, d));
  col += vec3(0.92, 0.9, 0.98) * (exp(-pow(d / (px * 1.6), 2.0)) * 0.85 + exp(d / (px * 5.0)) * step(d, 0.0) * 0.45);
  o = vec4(col, 1.0);
}`;
const draw = makeShader(document.getElementById("gl"), FS);
const s = { t: 0, open: 0, flow: 0 };
const tl = gsap.timeline({ paused: true });
tl.to(s, { t: 6, flow: 3.3, duration: 6, ease: "none" }, 0);           // lines flow outward ~0.55 line/s
tl.fromTo(s, { open: 0 }, { open: 0.06, duration: 0.35, ease: "sine.inOut" }, 0.3);   // a slit first
tl.to(s, { open: 1, duration: 0.48, ease: "power2.out" }, 0.85);       // then the lids open
tl.to(s, { open: 0, duration: 0.15, ease: "power2.in" }, 5.6);         // a blink at the end
tl.eventCallback("onUpdate", () => draw({ uT: s.t, uOpen: s.open, uFlow: s.flow }));
draw({ uT: 0, uOpen: 0, uFlow: 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:03 в видео

Переход

Наезд сквозь зрачок в следующую сцену

Следующая сцена уже играет внутри зрачка, уменьшенная так, что достигает ровно 1:1, когда зрачок закрывает кадр (дальше не увеличивается). Камера экспоненциально приближается к зрачку (ln zoom = 5.5 x^2 / (x + 0.1) примерно за 0.55 с), а склейка попадает на белую вспышку, затухающую как 0.94 / (1 + (t / 0.07)^2.5), с радиальными лучами, полученными 12-кратной выборкой кадра в сторону центра.

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

Показать код

<!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: #000; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080">
  <canvas id="gl" class="clip" data-start="0" data-duration="4" width="1920" height="1080"></canvas>
</div>
<script>
function makeShader(canvas, fs) {
  const gl = canvas.getContext("webgl2", { preserveDrawingBuffer: true });
  const vs = "#version 300 es\nin vec2 p;\nvoid main() { gl_Position = vec4(p, 0.0, 1.0); }";
  const sh = (type, src) => { const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); return s; };
  const pr = gl.createProgram();
  gl.attachShader(pr, sh(gl.VERTEX_SHADER, vs));
  gl.attachShader(pr, sh(gl.FRAGMENT_SHADER, fs));
  gl.bindAttribLocation(pr, 0, "p");
  gl.linkProgram(pr);
  gl.useProgram(pr);
  const buf = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
  gl.enableVertexAttribArray(0);
  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
  const loc = {};
  const U = (n) => (n in loc ? loc[n] : (loc[n] = gl.getUniformLocation(pr, n)));
  return (uniforms) => {
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.uniform2f(U("uRes"), canvas.width, canvas.height);
    for (const k in uniforms) {
      const v = uniforms[k];
      if (typeof v === "number") gl.uniform1f(U(k), v);
      else if (v.length === 2) gl.uniform2f(U(k), v[0], v[1]);
      else if (v.length === 3) gl.uniform3f(U(k), v[0], v[1], v[2]);
    }
    gl.drawArrays(gl.TRIANGLES, 0, 3);
  };
}

// Push-in through the pupil: the next scene is already playing inside the pupil, scaled so that it reaches
// 1:1 when the pupil covers the frame; the zoom is exponential (ln zoom = 5.5 x^2 / (x + 0.1)), and the cut
// lands on a white flash whose radial streaks are the same frame sampled toward the centre.
const FS = `#version 300 es
precision highp float;
uniform vec2 uRes;
uniform float uT, uZoom, uFlash;
out vec4 o;
vec3 inner(vec2 p, float t) {                       // the next scene: rings of dots flying outward
  float r = max(length(p), 1e-3), a = atan(p.y, p.x);
  float cu = (1.0 / r) / 0.75 - t * 4.0, cv = a / 6.2832 * 18.0 + floor(cu) * 0.5;
  vec2 c = vec2(fract(cv) - 0.5, (fract(cu) - 0.5) * r * 2.1);
  float dot1 = smoothstep(0.2, 0.15, length(c));
  vec3 col = mix(vec3(0.03, 0.02, 0.1), mix(vec3(0.98, 0.18, 0.54), vec3(0.18, 0.83, 0.69), mod(floor(cu), 2.0)), dot1);
  return col + vec3(0.94, 0.93, 1.0) * exp(-r / 0.06);
}
vec3 scene(vec2 p) {
  vec2 q = p / uZoom;                               // camera pushes into the pupil at the centre
  float r = length(q), px = 1.0 / (uRes.y * uZoom);
  float a = atan(q.y, q.x);
  float fib = 0.5 + 0.5 * sin(70.0 * (a + r * 5.0));
  vec3 iris = mix(vec3(1.0, 0.82, 0.25), vec3(0.49, 0.42, 0.95), smoothstep(0.12, 0.22, r)) * (0.75 + 0.35 * fib);
  vec3 col = mix(vec3(0.05, 0.03, 0.12), iris, smoothstep(0.235 + px, 0.235 - px, r));
  float rp = 0.12;                                  // pupil radius
  float k = max(1.05 / (rp * uZoom), 1.0);          // inner scene shrunk into the pupil, never past 1:1
  col = mix(col, inner(p * k, uT), smoothstep(rp + px, rp - px, r));
  return col;
}
void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uRes) / uRes.y;
  vec3 col = scene(p);
  if (uFlash > 0.0) {
    vec3 acc = vec3(0.0);
    for (int i = 0; i < 12; i++) acc += scene(p * (1.0 - uFlash * 0.3 * float(i) / 11.0));
    col = mix(col, acc / 12.0, clamp(uFlash * 1.5, 0.0, 1.0));
    col = mix(col, vec3(1.0) * (1.0 - 0.26 * dot(p, p)), uFlash);
  }
  o = vec4(col, 1.0);
}`;
const draw = makeShader(document.getElementById("gl"), FS);
const s = { t: 0 };
const D = 4.0, CUT = 2.6;                           // push-in 2.0 -> 2.6 s, flash at the cut
const tl = gsap.timeline({ paused: true });
tl.to(s, { t: D, duration: D, ease: "none" }, 0);
tl.eventCallback("onUpdate", () => {
  const t = s.t;
  const x = Math.max(0, Math.min(t, CUT) - 2.0);
  const zoom = t < CUT ? Math.exp((5.5 * x * x) / (x + 0.1)) : 9.0;
  const flash = t >= CUT ? 0.94 / (1 + Math.pow((t - CUT) / 0.07, 2.5)) : 0;
  draw({ uT: t, uZoom: zoom, uFlash: flash });
});
draw({ uT: 0, uZoom: 1, uFlash: 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:05 в видео

Фигуры

Перспективный туннель из колец иконок

Кольца иконок-миндалин расставлены на глубине 1/r = 0.75 k, поэтому сгущаются к центру, как настоящая труба; 18 иконок в кольце, соседние кольца сдвинуты на полъячейки и вращаются в противоположные стороны. Полёт — это сдвиг индекса глубины (около 11 колец в секунду), дальние кольца тают в дымке, а на каждый бит из белого ядра вылетает светящееся кольцо и растёт с power2.out.

Когда использовать Быстрый бесконечный пролёт для дропа или энергичной части.

Показать код

<!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: #000; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
</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>
function makeShader(canvas, fs) {
  const gl = canvas.getContext("webgl2", { preserveDrawingBuffer: true });
  const vs = "#version 300 es\nin vec2 p;\nvoid main() { gl_Position = vec4(p, 0.0, 1.0); }";
  const sh = (type, src) => { const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); return s; };
  const pr = gl.createProgram();
  gl.attachShader(pr, sh(gl.VERTEX_SHADER, vs));
  gl.attachShader(pr, sh(gl.FRAGMENT_SHADER, fs));
  gl.bindAttribLocation(pr, 0, "p");
  gl.linkProgram(pr);
  gl.useProgram(pr);
  const buf = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
  gl.enableVertexAttribArray(0);
  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
  const loc = {};
  const U = (n) => (n in loc ? loc[n] : (loc[n] = gl.getUniformLocation(pr, n)));
  return (uniforms) => {
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.uniform2f(U("uRes"), canvas.width, canvas.height);
    for (const k in uniforms) {
      const v = uniforms[k];
      if (typeof v === "number") gl.uniform1f(U(k), v);
      else if (v.length === 2) gl.uniform2f(U(k), v[0], v[1]);
      else if (v.length === 3) gl.uniform3f(U(k), v[0], v[1], v[2]);
    }
    gl.drawArrays(gl.TRIANGLES, 0, 3);
  };
}

// Perspective tunnel of icons: ring k sits at depth 1/r = 0.75 k, so rings crowd toward the centre like a real
// tube; N icons per ring, alternate rings turn opposite ways and sit half a cell apart; each beat sends a
// glowing ring out from the core.
const FS = `#version 300 es
precision highp float;
uniform vec2 uRes;
uniform float uFly, uSpin, uRingR, uRingI;
out vec4 o;
float almond(vec2 q, float a, float b) {
  b = max(b, 1e-4);
  float R = (a * a + b * b) / (2.0 * b), c = R - b, k = b * (2.0 * R - b), qq = dot(q, q);
  return max((qq + 2.0 * q.y * c - k) / (length(q + vec2(0.0, c)) + R), (qq - 2.0 * q.y * c - k) / (length(q - vec2(0.0, c)) + R));
}
void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uRes) / uRes.y;
  float r = max(length(p), 1e-4), a = atan(p.y, p.x);
  const float N = 18.0, DZ = 0.75;
  float cu = (1.0 / r) / DZ + uFly;                 // depth rings
  float ring = floor(cu);
  float dir = mod(ring, 2.0) < 1.0 ? 1.0 : -1.0;
  float cv = a / 6.2832 * N + uSpin * dir + ring * 0.5;
  float aspect = r * DZ * N / 6.2832;               // radial / tangential size of a cell
  vec2 c = vec2(fract(cv) - 0.5, (fract(cu) - 0.5) * aspect);
  float px = N / (6.2832 * r * uRes.y);
  float hb = min(0.22, 0.42 * aspect);
  float d = almond(c, 0.46, hb);
  float inside = smoothstep(px, -px, d);
  vec3 irisC = mod(ring, 2.0) < 1.0 ? vec3(0.91, 0.16, 0.5) : vec3(0.6, 0.56, 0.96);
  vec3 eye = mix(vec3(0.05, 0.04, 0.16), irisC, smoothstep(min(0.155, hb * 0.75) + px, min(0.155, hb * 0.75) - px, length(c)));
  vec3 col = mix(vec3(0.02, 0.02, 0.05), eye, inside);
  col += vec3(0.15, 0.71, 0.59) * exp(-pow(d / (px * 1.4 + 0.014), 2.0));
  col = mix(col, vec3(0.16, 0.08, 0.38), smoothstep(0.1, 0.4, px));     // far rings melt into haze
  col += vec3(0.94, 0.93, 1.0) * (exp(-r / 0.05) * 0.9 + exp(-r / 0.12) * 0.35);
  float rr = abs(r - uRingR);
  col += vec3(1.0, 0.35, 0.66) * (exp(-pow(rr / 0.011, 2.0)) * 1.3 + exp(-rr / 0.044) * 0.45) * uRingI;
  o = vec4(col, 1.0);
}`;
const draw = makeShader(document.getElementById("gl"), FS);
const s = { t: 0 };
const D = 5.0, BEAT = 0.5;
const tl = gsap.timeline({ paused: true });
tl.to(s, { t: D, duration: D, ease: "none" }, 0);
tl.eventCallback("onUpdate", () => {
  const t = s.t, x = (t % BEAT) / BEAT;
  const out = 1 - Math.pow(1 - x, 2);
  draw({ uFly: t * 11.0, uSpin: t * 0.35, uRingR: 0.045 + 0.062 * out, uRingI: 0.6 + 0.8 * Math.exp(-x * 3.0) });
});
draw({ uFly: 0, uSpin: 0, uRingR: 0.045, uRingI: 1.4 });
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

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

Фигуры

Скошенная лог-полярная спираль из ячеек-капель

Ячейки расположены на 12 логарифмических спиральных рукавах (угол + K ln r = const, K = -1.25) и шагают наружу в 1.5 раза вдоль каждого рукава; каждая ячейка рисуется в собственной системе координат рукава, поэтому капли, радужки и ромбы следуют спирали с двойными контурами. Приближение к центру — сдвиг ln r (около 1 в секунду), вращение — сдвиг угла, оба слегка подталкиваются на каждый бит.

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

Показать код

<!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: #000; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
</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>
function makeShader(canvas, fs) {
  const gl = canvas.getContext("webgl2", { preserveDrawingBuffer: true });
  const vs = "#version 300 es\nin vec2 p;\nvoid main() { gl_Position = vec4(p, 0.0, 1.0); }";
  const sh = (type, src) => { const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); return s; };
  const pr = gl.createProgram();
  gl.attachShader(pr, sh(gl.VERTEX_SHADER, vs));
  gl.attachShader(pr, sh(gl.FRAGMENT_SHADER, fs));
  gl.bindAttribLocation(pr, 0, "p");
  gl.linkProgram(pr);
  gl.useProgram(pr);
  const buf = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
  gl.enableVertexAttribArray(0);
  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
  const loc = {};
  const U = (n) => (n in loc ? loc[n] : (loc[n] = gl.getUniformLocation(pr, n)));
  return (uniforms) => {
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.uniform2f(U("uRes"), canvas.width, canvas.height);
    for (const k in uniforms) {
      const v = uniforms[k];
      if (typeof v === "number") gl.uniform1f(U(k), v);
      else if (v.length === 2) gl.uniform2f(U(k), v[0], v[1]);
      else if (v.length === 3) gl.uniform3f(U(k), v[0], v[1], v[2]);
    }
    gl.drawArrays(gl.TRIANGLES, 0, 3);
  };
}

// Sheared log-polar spiral: cells sit on N arms (a + K ln r = const) and step 1.5x outward along each arm;
// every cell gets a teardrop outline drawn in the arm's own frame, so the shapes follow the spiral. Zooming
// is a shift of ln r, turning a shift of the angle; both pulse on the beat.
const FS = `#version 300 es
precision highp float;
uniform vec2 uRes;
uniform float uZoom, uRot;
out vec4 o;
float hash(vec2 p) { vec3 q = fract(vec3(p.xyx) * 0.1031); q += dot(q, q.yzx + 33.33); return fract((q.x + q.y) * q.z); }
void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uRes) / uRes.y;
  float r = max(length(p), 1e-4), a = atan(p.y, p.x);
  const float N = 12.0, DU = 0.405, K = -1.25;
  float u = log(r) + uZoom;
  float cu = u / DU, cv = (a + uRot + K * u) / 6.2832 * N;
  float cw = 6.2832 / N;
  float sd = (fract(cu) - 0.5) * DU, td = (fract(cv) - 0.5) * cw - K * sd;
  vec2 dir = normalize(vec2(-K, 1.0));
  float halfW = 0.5 * cw / sqrt(1.0 + K * K), L = 0.5 * DU * sqrt(1.0 + K * K) / halfW;
  vec2 c = vec2(dot(vec2(td, sd), vec2(dir.y, -dir.x)), dot(vec2(td, sd), dir)) / halfW;
  float px = 1.0 / (r * uRes.y * halfW);
  float h = hash(vec2(mod(floor(cv), N), mod(floor(cu), 61.0)));
  float egg = length(vec2(c.x / 0.86, c.y / (L * 0.86 + 0.1 * c.y))) - 1.0;
  float inside = smoothstep(px, -px, egg);
  vec3 fill = h < 0.5
    ? mix(vec3(0.06, 0.04, 0.15), h < 0.25 ? vec3(0.16, 0.74, 0.62) : vec3(0.94, 0.16, 0.5), smoothstep(0.6, 0.5, length(c)))
    : mix(vec3(0.99, 0.76, 0.86), vec3(0.98, 0.18, 0.54), smoothstep(0.0, 1.0, abs(c.x) / 0.62 + abs(c.y) / (L * 0.62)));
  vec3 col = mix(vec3(0.01, 0.01, 0.02), fill, inside);
  col += vec3(0.77, 0.74, 0.94) * (exp(-pow(egg / (px * 1.2 + 0.01), 2.0)) * 0.85 + exp(-pow((egg + 0.13) / (px * 1.2 + 0.008), 2.0)) * 0.4 * inside);
  col = mix(col, vec3(0.7, 0.5, 0.8), smoothstep(0.06, 0.25, px));
  col += vec3(0.98, 0.98, 1.0) * exp(-r / 0.06) * 1.1;
  o = vec4(col, 1.0);
}`;
const draw = makeShader(document.getElementById("gl"), FS);
const s = { t: 0 };
const D = 5.0;
const tl = gsap.timeline({ paused: true });
tl.to(s, { t: D, duration: D, ease: "none" }, 0);
tl.eventCallback("onUpdate", () => {
  let burst = 0;
  for (let b = 0.5; b < s.t; b += 0.5) burst += 1 - Math.pow(1 - Math.min(1, (s.t - b) / 0.3), 2);
  draw({ uZoom: -(s.t * 1.0 + burst * 0.3), uRot: -s.t * 0.5 - burst * 0.08 });
});
draw({ uZoom: 0, uRot: 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>

Превью техники «HUD, который отсчитывает время и расшифровывает подписи» — На 0:04 в видео

Типографика

HUD, который отсчитывает время и расшифровывает подписи

Рамка в стиле эфира из мелкого моноширинного шрифта с разрядкой: угловые скобки, название и слоган, счётчик и подпись раздела, которые расшифровываются по буквам (каждая буква проявляется слева направо за 0.38 с, перебирая символы 30 раз в секунду), таймкод в кадрах при 60 fps, такт.доля.шестнадцатая при 120 BPM, четыре квадрата битов и линия прогресса.

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

Показать код

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HUD, который отсчитывает время и расшифровывает подписи</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;700&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(60% 60% at 50% 50%, #1c0b5d, #0d0b1e); }
#hud { position: absolute; inset: 0; font-family: "JetBrains Mono", monospace; white-space: pre; }
.br { position: absolute; width: 21px; height: 21px; border: 0 solid #e9e4f2; }
.tl { left: 28px; top: 28px; border-left-width: 1.5px; border-top-width: 1.5px; }
.tr { right: 27px; top: 28px; border-right-width: 1.5px; border-top-width: 1.5px; }
.bl { left: 28px; bottom: 27px; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.bbr { right: 27px; bottom: 27px; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.big { position: absolute; font-size: 15px; line-height: 15px; font-weight: 700; letter-spacing: 4.9px; color: #faf9ff; }
.small { position: absolute; font-size: 11px; line-height: 11px; letter-spacing: 3.4px; color: #9890b4; }
.bright { color: #faf9ff; opacity: 0.8; }
#name { left: 46px; top: 45px; } #tag { left: 46px; top: 69px; }
#num { right: 45px; top: 49px; } #label { right: 44px; top: 68px; }
#tc { left: 46px; top: 1007px; } #bpm { left: 46px; top: 1027px; } #credit { right: 44px; top: 1024px; }
#track { position: absolute; left: 106px; top: 1051px; width: 1709px; height: 1.5px; background: rgba(233, 228, 242, 0.2); }
#fill { width: 100%; height: 100%; background: rgba(233, 228, 242, 0.72); transform-origin: 0 50%; transform: scaleX(0); }
.sq { position: absolute; top: 1008px; width: 8px; height: 8px; background: rgba(233, 228, 242, 0.26); }
.sq.on { background: #ffffff; }
#sq0 { left: 1818px; } #sq1 { left: 1834px; } #sq2 { left: 1850px; } #sq3 { left: 1866px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="6" data-width="1920" data-height="1080">
  <div id="hud" class="clip" data-start="0" data-duration="6">
    <div class="br tl"></div><div class="br tr"></div><div class="br bl"></div><div class="br bbr"></div>
    <div id="name" class="big">"YOUR NAME"</div>
    <div id="tag" class="small">"YOUR TAGLINE"</div>
    <div id="num" class="small">01 / 03</div>
    <div id="label" class="big">"FIRST"</div>
    <div id="tc" class="small bright">TC 00:00:00:00</div>
    <div id="bpm" class="small">120 BPM · 01.1.1</div>
    <div class="sq" id="sq0"></div><div class="sq" id="sq1"></div><div class="sq" id="sq2"></div><div class="sq" id="sq3"></div>
    <div id="credit" class="big">"SITE.COM"</div>
    <div id="track"><div id="fill"></div></div>
  </div>
</div>
<script>
// A HUD that keeps time: timecode in frames of 60 fps, bar.beat.sixteenth at 120 BPM, four beat squares,
// a progress line, and section labels that decode letter by letter (each letter resolves left to right
// over 0.38 s; until then it shows a glyph that changes 30 times a second).
const SECTIONS = [{ t: 0, n: "01", label: '"FIRST"' }, { t: 2, n: "02", label: '"SECOND"' }, { t: 4, n: "03", label: '"THIRD"' }];
const D = 6, GLYPHS = "#%&=+@<>|\\/$*Z0X1";
const $ = (id) => document.getElementById(id);
const pad = (n) => String(n).padStart(2, "0");
const hash = (a, b) => { const h = Math.sin(a * 127.1 + b * 311.7) * 43758.5453; return h - Math.floor(h); };
function decode(text, t, t0, dur, seed) {
  let out = "";
  for (let i = 0; i < text.length; i++) {
    const ch = text[i];
    if (" /()".includes(ch)) { out += ch; continue; }
    out += t >= t0 + ((i + 0.6) * dur) / text.length ? ch : GLYPHS[Math.floor(hash(i + seed * 13.7, Math.floor(t * 30)) * GLYPHS.length) % GLYPHS.length];
  }
  return out;
}
function render(t) {
  let si = 0;
  SECTIONS.forEach((s, i) => { if (t >= s.t) si = i; });
  const s = SECTIONS[si];
  $("num").textContent = si ? decode(s.n + " / 03", t, s.t, 0.38, si) : s.n + " / 03";
  $("label").textContent = si ? decode(s.label, t, s.t, 0.38, si + 7) : s.label;
  const fr = Math.floor(t * 60 + 1e-4);
  $("tc").textContent = "TC 00:00:" + pad(Math.floor(fr / 60)) + ":" + pad(fr % 60);
  const sx = Math.floor(t * 8 + 1e-4), beat = Math.floor((sx % 16) / 4) + 1;
  $("bpm").textContent = "120 BPM · " + pad(Math.floor(sx / 16) + 1) + "." + beat + "." + ((sx % 4) + 1);
  for (let i = 0; i < 4; i++) $("sq" + i).classList.toggle("on", i === beat - 1);
  $("fill").style.transform = "scaleX(" + (t / D).toFixed(4) + ")";
}
const s = { t: 0 };
const tl = gsap.timeline({ paused: true });
tl.fromTo("#hud", { opacity: 0 }, { opacity: 1, duration: 0.5, ease: "power1.inOut" }, 0.1);
tl.to(s, { t: D, duration: D, ease: "none" }, 0);
tl.eventCallback("onUpdate", () => render(s.t));
render(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>

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

Типографика

Светящийся зернистый логотип-слово с вайпом, RGB-сдвигом и растворением

Слово один раз рисуется в текстуру с мипмапами; шейдер читает её чётко для букв с красно-синим расщеплением, оседающим с 10 до 3 px, и на трёх уровнях размытия для свечения, окрашенного слева направо в фиолетовый, бирюзовый и розовый. Буквы залиты зерном, появляются слева направо вайпом с мягким размытым краем за 0.52 с, а в конце съедаются шумом за 0.4 с.

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

Показать код

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Светящийся зернистый логотип-слово с вайпом, RGB-сдвигом и растворением</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=Unbounded:wght@900&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3.5" data-width="1920" data-height="1080">
  <canvas id="gl" class="clip" data-start="0" data-duration="3.5" width="1920" height="1080"></canvas>
</div>
<script>
function makeShader(canvas, fs) {
  const gl = canvas.getContext("webgl2", { preserveDrawingBuffer: true });
  const vs = "#version 300 es\nin vec2 p;\nvoid main() { gl_Position = vec4(p, 0.0, 1.0); }";
  const sh = (type, src) => { const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); return s; };
  const pr = gl.createProgram();
  gl.attachShader(pr, sh(gl.VERTEX_SHADER, vs));
  gl.attachShader(pr, sh(gl.FRAGMENT_SHADER, fs));
  gl.bindAttribLocation(pr, 0, "p");
  gl.linkProgram(pr);
  gl.useProgram(pr);
  const buf = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
  gl.enableVertexAttribArray(0);
  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
  const loc = {};
  const U = (n) => (n in loc ? loc[n] : (loc[n] = gl.getUniformLocation(pr, n)));
  return (uniforms) => {
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.uniform2f(U("uRes"), canvas.width, canvas.height);
    for (const k in uniforms) {
      const v = uniforms[k];
      if (typeof v === "number") gl.uniform1f(U(k), v);
      else if (v.length === 2) gl.uniform2f(U(k), v[0], v[1]);
      else if (v.length === 3) gl.uniform3f(U(k), v[0], v[1], v[2]);
    }
    gl.drawArrays(gl.TRIANGLES, 0, 3);
  };
}

// Glowing grain wordmark: the word is drawn once into a mipmapped texture; the shader reads it sharp for the
// letters (with a red/blue split), at three blur levels for a glow tinted left-to-right, fills the letters
// with grain, wipes them in left to right with a soft blurred edge, and at the end eats them with noise.
const FS = `#version 300 es
precision highp float;
uniform vec2 uRes;
uniform sampler2D uText;
uniform float uReveal, uDiss, uSplit, uSeed;
uniform vec2 uBox;   // left and right edge of the word, 0..1
out vec4 o;
float hash(vec2 p) { vec3 q = fract(vec3(p.xyx) * 0.1031); q += dot(q, q.yzx + 33.33); return fract((q.x + q.y) * q.z); }
void main() {
  vec2 uv = gl_FragCoord.xy / uRes;
  float tx = (uv.x - uBox.x) / (uBox.y - uBox.x);
  float rev = smoothstep(uReveal + 0.05, uReveal - 0.03, tx);
  float lod = (1.0 - rev) * 2.5;
  float sp = uSplit / uRes.x;
  vec3 core = vec3(textureLod(uText, uv - vec2(sp, 0.0), lod).r, textureLod(uText, uv, lod).r, textureLod(uText, uv + vec2(sp, 0.0), lod).r);
  float glow = textureLod(uText, uv, 3.0).r * 0.35 + textureLod(uText, uv, 4.6).r * 0.55 + textureLod(uText, uv, 6.0).r * 0.55;
  vec3 tint = mix(mix(vec3(0.94, 0.93, 1.0), vec3(0.88, 1.0, 0.96), smoothstep(0.15, 0.5, tx)), vec3(1.0, 0.88, 0.93), smoothstep(0.55, 0.92, tx));
  vec3 gcol = mix(mix(vec3(0.49, 0.42, 0.95), vec3(0.18, 0.83, 0.69), smoothstep(0.15, 0.48, tx)), vec3(0.98, 0.18, 0.54), smoothstep(0.58, 0.95, tx));
  float g = hash(floor(gl_FragCoord.xy) + uSeed * 17.0);
  float keep = smoothstep(uDiss - 0.1, uDiss + 0.1, g);
  vec3 col = core * tint * (0.74 + 0.34 * g) * keep + gcol * glow * 0.55 * (0.35 + 0.65 * keep);
  o = vec4(vec3(0.05, 0.04, 0.12) + col * rev, 1.0);
}`;
const canvas = document.getElementById("gl");
const W = canvas.width, H = canvas.height;
const WORD = "YOUR WORD";
document.fonts.load('900 100px "Unbounded"', WORD).then(() => {
  const c = document.createElement("canvas");
  c.width = W; c.height = H;
  const g = c.getContext("2d");
  g.fillStyle = "#000"; g.fillRect(0, 0, W, H);
  g.font = '900 100px "Unbounded"';
  const size = (100 * 1436) / g.measureText(WORD).width;   // fit the word to 1436 px
  g.font = `900 ${size}px "Unbounded"`;
  g.textAlign = "center";
  const m = g.measureText(WORD);
  g.fillStyle = "#fff";
  g.fillText(WORD, W / 2, H / 2 + m.actualBoundingBoxAscent / 2);
  const box = [(W / 2 - m.actualBoundingBoxLeft) / W, (W / 2 + m.actualBoundingBoxRight) / W];
  const gl = canvas.getContext("webgl2", { preserveDrawingBuffer: true });
  const draw = makeShader(canvas, FS);
  const tex = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, tex);
  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
  gl.generateMipmap(gl.TEXTURE_2D);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
  const s = { t: 0 };
  const D = 3.5;
  const tl = gsap.timeline({ paused: true });
  tl.to(s, { t: D, duration: D, ease: "none" }, 0);
  const frame = () => {
    const t = s.t;
    const e = (x) => 1 - Math.pow(1 - Math.min(1, Math.max(0, x)), 1.6);
    draw({ uReveal: -0.08 + 1.18 * e((t - 0.1) / 0.52), uDiss: -0.2 + 1.3 * Math.pow(Math.min(1, Math.max(0, (t - 3.0) / 0.4)), 1.4),
           uSplit: 10 - 7 * e((t - 0.1) / 0.8), uSeed: Math.floor(t * 24), uBox: box });
  };
  tl.eventCallback("onUpdate", frame);
  frame();
  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. Выбор можно изменить внизу страницы.

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