your AI motion designer

EN

Simple Motion

Motion Design Chain Reaction Showreel

A 15-second all-drawn showreel: a point becomes a line, type, shapes, 3D, chrome, ink and particles, then rewinds to your brand's end card.

Prompt code NJCPublished 11 November 2026Used 2 times

The prompt opens in the app: add your own materials and the agent builds the video.

Report this prompt

Use with your agentYour agent

Direction

Make a 15-second horizontal brand showreel, 1920x1080 at 60 fps, that walks through the elements of motion design in one unbroken chain, each scene born from the last one's main shape: a point becomes a line, the line becomes type, flat shapes morph and burst into tiles, the same shapes turn 3D and melt into a chrome ball, the ball turns to swirling ink, the ink explodes into particles, the particles flash into a word, the reel rewinds, and an iris opens on my brand's end card. Everything is drawn (type, shapes, 3D, a procedural ink effect and particles), with no footage. The look: near-black and pale light-page grounds, pink, orange and violet accents, a variable grotesk pushed from extended black to extra-condensed, small letter-spaced mono labels, fine grain. Use my brand name, my web address, a few short taglines and feature lines, and my square mark in the slots below, replacing every quoted example with my words of the same length so the layout holds. Avoid letters that are stretched or squashed (widths come only from the font's width axis), text leaving the frame or its slot, decoding text that does not resolve to the right words, and an end card that collapses or fades before the last frame.

Structure

0-1.25 s, the point. A white point of light with a thin violet-white anamorphic streak across the frame, on a 25 px dot grid. At 0.03 s a soft blurred ring fires from the point (radius 45 to 1080 px in 0.3 s, fading) and lights the grid dots it crosses. At 0.45 s a 5-letter word, e.g. "IDEAS", appears spelled in bright grid dots across the full width (cap height 300 px). A second ring fires at 0.48 s, and the word fades out by 1.0 s. From 1.0 s the point runs right along the streak, the grid stretches into short vertical dashes and the streak burns white behind it.
1.25-3.65 s, the line to type. The streak is now one bright line. It wobbles with a travelling sine for 0.2 s, then splits into seven lines that spread from the centre to 135 px apart (expo-out, 0.26 s, motion-blurred). A 4-letter word, e.g. "TYPE", in extra-condensed heavy, 810 px tall and about 1700 px wide, slides in as six horizontal strips between the lines. Its width is set by the font's width axis, never by stretching. The strips come from alternating sides, staggered 1.85-1.95 s, expo-out over 0.2 s with horizontal motion blur, and land with a few pixels of jitter. At 2.4-2.75 s the strips slip sideways by up to 260 px, narrowing on the width axis and dropping weight per strip, then realign. From 2.8 s every other strip turns hairline and translucent and the strips drift apart. At 3.32-3.65 s eight bands of orange, pink and violet bars wipe across from alternating sides, each followed by the light page.
3.65-5.63 s, flat shapes. The light page shows a faint 120 px grid. A violet circle (radius 194 px), a pink rounded square (325 px) and an orange triangle (363 px wide) pop in with an overshoot at 3.75, 3.89 and 4.0 s, centred at x 476, 960 and 1455. A mono header types on above them, e.g. "KINETIC TYPE / SHAPES / 3D EFFECTS / SOUND". Each shape has a mono step label under it, e.g. "01 PICK A TEMPLATE", "02 DESCRIBE YOUR IDEA", "03 REFINE IN WORDS". At 4.25, 4.51 and 4.73 s every shape morphs into the next one (circle to square to triangle to circle) by interpolating its outline. Each shape starts 50 ms after the one on its left, its colour switches a third of the way in, and the labels re-decode with their shapes. On the third morph a grid of quarter-circle tiles (mostly deep ink, some pink, orange and violet) bursts out from the centre to fill the frame by 4.92 s, and a few tiles spin 90 degrees. At 5.25 s the tiles implode back to the centre and vanish, taking the header and the labels with them.
5.63-7.45 s, volume. Match cut to the same three shapes, exactly where the flat shapes were, now a glossy 3D sphere, rounded cube and triangular prism over a dark violet reflective grid floor. They land with a small squash on the beat. Light them with a studio softbox above, pink and orange rim lights and an orange glow on the floor. The camera swings right and low (field of view 35 to 50 degrees) while the cube rises and tumbles and the prism turns its long face to us. At 6.63 s the shapes slide together into one capsule shaded violet to pink to orange. It relaxes into a sphere and becomes a dark chrome ball reflecting the softbox, a violet and a pink strip light, and the grid. The camera pushes in until the ball fills the frame at 7.45 s.
7.45-9.7 s, ink. The ball's own reflections (the softbox, the violet and pink strips) melt first. Then its surface turns into swirling ink inside a wobbling circle with a warm rim: violet, pink, orange, white and deep ink, tight eddies, dark seams between the colours and a glossy sheen. At 7.85-8.05 s a 5-letter word, e.g. "WORDS", 1500 px wide in extended black, types on as clear glass letters. The ink spreads past the frame by 9.2 s and the view sinks into it. The letters leave from the left at 9.1-9.3 s, and grain rises at the end.
9.7-10.95 s, particles. The ink bursts into radial streaks, and a sparse then dense warp field rushes past under a pink-violet haze. Three streams (violet, orange, pink) spiral into a vortex at the centre and flash white at 10.65-10.85 s.
10.75-12.2 s, the word. Out of the flash an extended black word, e.g. "MOTION", 1470 px wide, writes on from the left, with a smoky ghost behind it. A two-frame grey flash hits at 11.25 s. At 11.5 s the word squashes to a condensed 680 px through the width axis (expo in-out, 0.13 s), with violet, pink and orange outline copies trailing the width change 45, 90 and 135 ms late. At 11.75 s it stretches to 3700 px, past both edges. At 12.05 s pink and violet copies split left and right, and the word blinks out on one frame.
12.2-12.95 s, rewind. The reel's own scenes flash backwards in eight bursts of about 0.1 s each (the vortex, the ink and glass word, the chrome ball, the 3D shapes, the tiles, the flat shapes, the strip word, the line), with an RGB shift and noise.
12.95-15 s, end card. The point returns, and a ring closes in on it. At 13.15 s a light-page disc with a soft deep-ink rim opens from the point and fills the frame by 13.35 s. My web address types in letter by letter, one every 26 ms, 1415 px wide in extended black deep ink. Each letter is blurred as it lands, and the line stays centred as it grows, e.g. "BRANDNAME" with a small pink superscript tag ".APP" that pops in at 13.55 s. My mark pops above it in parts at 13.4-13.55 s. Two thin rules grow 37 px either side of a mono subline that decodes between them and resolves completely by 14.2 s, e.g. "DESCRIBE THE VIDEO. THE AGENT ANIMATES IT." The card then holds, whole and readable, to the last frame while the corner overlay fades out at 14.5-14.75 s.

Composition

Palette: near-black #0D0B1E for dark grounds, a light page #FAF9FF, deep ink #1C0B5D for dark type, white #FFFFFF for light, and three accents: pink #FB2D89 (the main one), orange #FE9117 and violet #7C6CF2.
Type: a variable grotesk with width and weight axes (Roboto Flex), extended black for the big words and extra-condensed heavy for the strip word. JetBrains Mono Bold at 15-16 px, letter-spaced, for every small label.
Finish: a fine animated grain, a very light vignette, and a 1 px red/cyan fringe on the small labels.
A corner overlay of mono labels runs over the whole film. It is light on dark scenes and deep ink with a faint halo of the page colour on the light pages.

Corners: 16 px brackets at all four corners, 26 px from the edges.
Top left: my mark at 17 px and my brand name, e.g. "BRAND NAME".
Top right: a running timecode "TC 00:00:SS:FF" counting 60 frames a second.
Bottom left: a 10-dash progress bar that fills over the 15 s, with a chapter label under it, e.g. "01 — PICK A TEMPLATE", then "02 — DESCRIBE YOUR IDEA" from 5.65 s, "03 — REFINE IN WORDS" from 11.25 s and "03 — MP4 EXPORT" from 13.1 s.
Bottom right: a short feature line per scene, e.g. "LIVE PREVIEW", "FONTS FOR EVERY SCRIPT", "VERTICAL, HORIZONTAL OR SQUARE", "3D EFFECTS", "NO KEYFRAMES", "YOUR OWN FOOTAGE, PHOTOS AND LOGOS", "MUSIC TO THE RHYTHM", "EDIT IN WORDS <<" during the rewind and "TRY IT FREE" at the end.

Techniques

Every scene grows out of the last one's main shape: the point's streak becomes the line, the lines carry the strip word, a colour-bar wipe opens the light page, the flat shapes match-cut to 3D in the same spots, the chrome ball melts into ink, the ink bursts into particles, the flash gives the word, and an iris opens the end card.
Every time a scene starts, the chapter label and the feature line re-decode in 0.26 s: random glyphs resolving left to right, always ending on the correct words. The overlay decodes in at 0.25 s and fades out at 14.5-14.75 s.
Width and weight changes go only through the font's axes, never by scaling the letters.
Fast moves are expo-out with motion blur, pops overshoot, and shape morphs interpolate the outlines.
Glass letters have a thin light rim, a faint frosted fill and a soft shadow cast from the rim only.
The rewind flashes use an RGB shift and noise.

Music

A driving synthwave bed at 128 BPM, exactly 15 s long, with the first beat at 0.045 s. It has four-on-the-floor drums, deep side-chained bass, bright arpeggios and wide chords. The arc:

A short drumless pickup.
The drop at 1.45 s as the line arrives.
A beat of air before the 3D cut, then the biggest drop at 5.67 s, carrying through to the particles.
A long tape stop on the rewind that runs down into one last hit at 13.17 s as the end card opens. A reversed splash and a riser lead into it, so the level never drops out.
A ringing chord to the end.
The 3D cut and the end card's hit sit on beats, and the pops land on beats or half beats. Keep an even level throughout, about -14 LUFS, with peaks below -1 dBTP.

Sound

Sound effects on the picture, in order:

The point: a boom and a metallic ring as it fires, a whoosh on its run.
The line and strips: whooshes on the lines, a punch as the strips land, a glitch on the slip, a riser and swoosh into the colour wipe.
Flat shapes: a click for each shape, glitches on the morphs, a crunch on the tile burst.
3D: a swoosh and a low boom on the 3D cut, a glass tap on the merge, a whoosh on the push-in.
Ink: a stutter on the glass letters, a sub drop as the ink spreads.
Particles: a riser and a big boom.
The word: a plate hit as it writes on, a chirp on the grey flash, a scratch and whoosh on the stretch.
Rewind: a vinyl rewind under the flashbacks.
End card: a crunch and boom as it opens, soft ticks under the typing, clicks for the mark and the tag.

What to prepare

Your square mark or app icon, ideally a vector file, shown top left and above the address on the end card.
Your brand name, web address and a few short taglines and feature lines to replace the quoted examples.

The motion-design moves the video is built from, each with standalone code you can open in a browser or hand to your agent.

Preview of the “Dot-grid word lit by shock rings” technique — At 0:00 in the video

Typography

Dot-grid word lit by shock rings

A point of light with a thin anamorphic streak sits on a 25 px dot grid. A soft blurred ring fires from it (radius 45 to 1080 px in 0.3 s, fading), lighting the grid dots it passes; a word drawn in grid dots (the word's glyphs sampled at every grid point) fades in on the next beat as a second ring fires, then fades out. Everything is drawn on one canvas from the timeline's time.

When to use An opening that starts from nothing: a single point that grows into a word.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dot-grid word lit by shock rings</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=Roboto+Flex:opsz,wdth,[email protected],25..151,100..1000&family=JetBrains+Mono:wght@700&display=swap");
html,body{margin:0;width:1920px;height:1080px;overflow:hidden;background:#0d0b1e}
#root{position:relative;width:100%;height:100%;overflow:hidden}
#c{position:absolute;inset:0;width:100%;height:100%}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080"><canvas id="c" class="clip" data-start="0" data-duration="3" width="1920" height="1080"></canvas></div>
<script>
const WORD = "IDEAS";          // the word drawn in dots
const PITCH = 25, CX = 960, CY = 540; // grid pitch and the point
const RINGS = [0.15, 0.95];     // when the rings fire (s)
const ctx = document.getElementById("c").getContext("2d");
const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
const smooth = (a, b, v) => { const k = clamp((v - a) / (b - a), 0, 1); return k * k * (3 - 2 * k); };
let lit = [];
function build() {
  const o = document.createElement("canvas").getContext("2d");
  o.canvas.width = 1920; o.canvas.height = 1080;
  o.fillStyle = "#fff"; o.font = '800 380px "Roboto Flex"'; o.textAlign = "center";
  o.fillText(WORD, CX, CY + 140);
  const d = o.getImageData(0, 0, 1920, 1080).data;
  lit = [];
  for (let y = CY % PITCH; y < 1080; y += PITCH) for (let x = 12.5; x < 1920; x += PITCH)
    if (d[(Math.round(y) * 1920 + Math.round(x)) * 4] > 128) lit.push([x, y]);
}
function draw(t) {
  ctx.fillStyle = "#0d0b1e"; ctx.fillRect(0, 0, 1920, 1080);
  const rings = RINGS.map((t0) => ({ u: t - t0 })).filter((r) => r.u >= 0 && r.u < 0.32)
    .map((r) => ({ r: 45 + 1035 * (1 - Math.pow(1 - r.u / 0.32, 2)), a: 1 - r.u / 0.32 }));
  ctx.globalCompositeOperation = "lighter";
  for (const rg of rings) { ctx.save(); ctx.filter = "blur(11px)"; ctx.strokeStyle = "rgba(210,205,235," + 0.5 * rg.a + ")"; ctx.lineWidth = 46; ctx.beginPath(); ctx.arc(CX, CY, rg.r, 0, 7); ctx.stroke(); ctx.restore(); }
  for (let y = CY % PITCH; y < 1080; y += PITCH) for (let x = 12.5; x < 1920; x += PITCH) {
    const dd = Math.hypot(x - CX, y - CY);
    let a = 0.25 * smooth(0.1, 0.3, t);
    for (const rg of rings) a += 0.9 * rg.a * Math.exp(-Math.pow((dd - rg.r) / 22, 2));
    ctx.fillStyle = "rgba(230,228,245," + clamp(a, 0, 1) + ")"; ctx.fillRect(x - 1, y - 1, 2, 2);
  }
  const wa = smooth(0.9, 1.0, t) * (1 - smooth(2.0, 2.5, t));
  ctx.fillStyle = "rgba(250,249,255," + wa + ")";
  for (const [x, y] of lit) { ctx.beginPath(); ctx.arc(x, y, 3, 0, 7); ctx.fill(); }
  const g = ctx.createLinearGradient(0, 0, 1920, 0);
  g.addColorStop(0, "rgba(160,150,240,.45)"); g.addColorStop(0.5, "rgba(240,240,255,.95)"); g.addColorStop(1, "rgba(160,150,240,.45)");
  ctx.fillStyle = g; ctx.fillRect(0, CY - 1, 1920, 2);
  const c = ctx.createRadialGradient(CX, CY, 0, CX, CY, 70);
  c.addColorStop(0, "#fff"); c.addColorStop(0.15, "#fff"); c.addColorStop(0.3, "rgba(240,240,255,.4)"); c.addColorStop(1, "rgba(200,200,230,0)");
  ctx.fillStyle = c; ctx.fillRect(CX - 70, CY - 70, 140, 140);
  ctx.globalCompositeOperation = "source-over";
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 3 });
tl.eventCallback("onUpdate", () => draw(tl.time()));
document.fonts.load('800 380px "Roboto Flex"').then(() => { build(); draw(tl.time()); });
draw(0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Preview of the “Slit-strip word assembly with weight slip” technique — At 0:02 in the video

Typography

Slit-strip word assembly with weight slip

A giant condensed word is cut into six 135 px horizontal strips (each strip a copy of the word clipped to its band, thin lines between them). One scale sets the cap height; the font's width axis (and, past its narrow end, its counter-width axis XTRA) makes the word span the box, so the letters are never stretched. The strips slide in from alternating sides with an expo-out ease over 0.2 s and a horizontal blur proportional to their speed, land with a few pixels of jitter, then slip sideways while each strip narrows on the width axis and drops weight; finally alternate strips turn hairline (their width axis chosen so the thin word is as wide as the heavy one) and drift apart.

When to use Revealing one bold word with mechanical, glitchy energy.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Slit-strip word assembly with weight slip</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=Roboto+Flex:opsz,wdth,[email protected],25..151,100..1000&family=JetBrains+Mono:wght@700&display=swap");
html,body{margin:0;width:1920px;height:1080px;overflow:hidden;background:#0d0b1e}
#root{position:relative;width:100%;height:100%;overflow:hidden}
.strip{position:absolute;left:0;width:1920px;height:135px;overflow:hidden;border-top:2px solid rgba(250,249,255,.6)}
.w{position:absolute;left:0;top:0;white-space:nowrap;color:#faf9ff;font-family:'Roboto Flex';font-size:400px;line-height:400px;font-stretch:62.5%;font-weight:880;transform-origin:0 0}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3.5" data-width="1920" data-height="1080"><svg width="0" height="0" style="position:absolute"><defs id="defs"></defs></svg><div id="strips" class="clip" data-start="0" data-duration="3.5"></div></div>
<script>
const WORD = "TYPE";                 // the word
const BOX = { x0: 128, x1: 1825, y0: 135, y1: 945 }; // where its ink sits
const ENTER = [0.1, 0.14, 0.08, 0.16, 0.12, 0.18]; // slide-in start per strip (s)
const host = document.getElementById("strips"), defs = document.getElementById("defs");
const words = [], blurs = [];
for (let i = 0; i < 6; i++) {
  defs.insertAdjacentHTML("beforeend", '<filter id="mb' + i + '" x="-20%" width="140%"><feGaussianBlur stdDeviation="0 0"/></filter>');
  blurs.push(defs.lastElementChild.firstElementChild);
  const s = document.createElement("div"); s.className = "strip"; s.style.top = BOX.y0 + i * 135 + "px";
  const w = document.createElement("div"); w.className = "w"; w.textContent = WORD; s.appendChild(w); host.appendChild(s); words.push(w);
}
const hash = (a, b) => { const s = Math.sin(a * 127.1 + b * 311.7) * 43758.5453; return s - Math.floor(s); };
const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
let fit = null;
function measure() {
  const m = document.createElement("canvas").getContext("2d"); m.font = '880 extra-condensed 400px "Roboto Flex"';
  const mt = m.measureText(WORD), w0 = words[0];
  const k = (BOX.y1 - BOX.y0) / mt.actualBoundingBoxAscent;                 // one scale: the cap height
  const lsbF = -mt.actualBoundingBoxLeft / mt.width, rsbF = (mt.width - mt.actualBoundingBoxRight) / mt.width;
  const adv = (st, wt, x) => { w0.style.fontWeight = wt; w0.style.fontStretch = st + "%"; w0.style.fontVariationSettings = '"XTRA" ' + x; return w0.offsetWidth; };
  const solve = (target, wt, x) => { let lo = 25, hi = 151; for (let n = 0; n < 16; n++) { const mid = (lo + hi) / 2; if (adv(mid, wt, x) < target) lo = mid; else hi = mid; } return (lo + hi) / 2; };
  const target = (BOX.x1 - BOX.x0) / k / (1 - lsbF - rsbF);
  let xtra = 468, s = 25;
  if (adv(25, 880, 468) > target) { let lo = 323, hi = 468; for (let n = 0; n < 14; n++) { const mid = (lo + hi) / 2; if (adv(25, 880, mid) > target) hi = mid; else lo = mid; } xtra = lo; }
  else s = solve(target, 880, xtra);
  const base = (400 - mt.fontBoundingBoxAscent - mt.fontBoundingBoxDescent) / 2 + mt.fontBoundingBoxAscent;
  fit = { k, s, sThin: solve(adv(s, 880, xtra), 150, xtra), xtra, left: lsbF * adv(s, 880, xtra), cap: base - mt.actualBoundingBoxAscent };
}
function update(u) {
  if (!fit) return;
  words.forEach((w, i) => {
    const dir = i % 2 ? -1 : 1, jit = (hash(i, 3) - 0.5) * 34, from = dir * (2100 + 300 * hash(i, 9));
    const e = clamp((u - ENTER[i]) / 0.2, 0, 1), ease = e >= 1 ? 1 : 1 - Math.pow(2, -10 * e);
    let x = from + (jit - from) * ease, blur = e > 0 && e < 1 ? Math.abs(from) * 0.12 * Math.pow(2, -10 * e) : 0, weight = 880, wscale = 1, zoom = 1;
    const sl = clamp((u - 0.9) / 0.35, 0, 1), env = Math.sin(sl * Math.PI);
    if (sl > 0 && sl < 1) { x += env * (hash(i, 21) - 0.5) * 520; wscale = 1 - 0.28 * env * hash(i, 22); weight = 880 - 560 * env * hash(i, 23); blur = 6 * env; }
    const hd = clamp((u - 1.4) / 0.05, 0, 1);
    if (hd > 0) { weight = i % 2 ? 150 : 880; x += (i % 2 ? -1 : 1) * (u - 1.4) * 130; zoom = 1 + 0.14 * hd; blur = Math.max(blur, 3.5 * hd); }
    const thin = weight < 600;
    w.style.visibility = u < ENTER[i] ? "hidden" : "visible";
    w.style.fontWeight = weight; w.style.color = thin ? "rgba(250,249,255,.5)" : "#faf9ff";
    w.style.fontStretch = (thin ? fit.sThin : fit.s) * wscale + "%"; w.style.fontVariationSettings = '"XTRA" ' + fit.xtra;
    const S = fit.k * zoom, capTop = 540 + (BOX.y0 - 540) * zoom;
    w.style.transform = "translate(" + (960 + (BOX.x0 - 960) * zoom - fit.left * S + x) + "px," + (capTop - BOX.y0 - i * 135 - fit.cap * S) + "px) scale(" + S + ")";
    blurs[i].setAttribute("stdDeviation", blur.toFixed(2) + " 0"); w.style.filter = blur > 0.2 ? "url(#mb" + i + ")" : "none";
  });
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 3.5 });
tl.eventCallback("onUpdate", () => update(tl.time()));
document.fonts.load('880 400px "Roboto Flex"').then(() => { measure(); update(tl.time()); });
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Preview of the “Polar shape morph cycle with tile burst” technique — At 0:04 in the video

Shapes

Polar shape morph cycle with tile burst

Three flat shapes (circle, rounded square, triangle) are each stored as 120 radii around their centre, so any shape morphs into any other by interpolating radii; each slot steps to the next shape three times with an in-out cubic ease while its colour switches (not blends) a third of the way in, with a slight squash. On the third morph a grid of quarter-circle tiles bursts out from the centre to fill the frame, spins a few cells by 90 degrees and implodes back.

When to use Showing form and colour as a system: shapes that trade places by turning into each other.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Polar shape morph cycle with tile burst</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=Roboto+Flex:opsz,wdth,[email protected],25..151,100..1000&family=JetBrains+Mono:wght@700&display=swap");
html,body{margin:0;width:1920px;height:1080px;overflow:hidden;background:#0d0b1e}
#root{position:relative;width:100%;height:100%;overflow:hidden}
#c{position:absolute;inset:0;width:100%;height:100%}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080"><canvas id="c" class="clip" data-start="0" data-duration="2" width="1920" height="1080"></canvas></div>
<script>
const COLS = ["#7c6cf2", "#fb2d89", "#fe9117"], INK = "#1c0b5d", PAGE = "#faf9ff"; // shape colours, tile ink, page
const SLOTS = [476, 960, 1455], N = 120, CELL = 123.6;
const MORPHS = [[0.6, 0.75], [0.86, 1.03], [1.08, 1.2]]; // morph windows (s)
const TH = Array.from({ length: N }, (_, i) => (i / N) * Math.PI * 2 - Math.PI / 2);
const circle = TH.map(() => 194);
const square = TH.map((a) => 162.5 / Math.pow(Math.pow(Math.abs(Math.cos(a)), 14) + Math.pow(Math.abs(Math.sin(a)), 14), 1 / 14));
const V = [[0, -210], [181.5, 105], [-181.5, 105]];
const triangle = TH.map((a) => { const dx = Math.cos(a), dy = Math.sin(a); let best = 1e9;
  for (let i = 0; i < 3; i++) { const [x1, y1] = V[i], [x2, y2] = V[(i + 1) % 3], ex = x2 - x1, ey = y2 - y1, den = dx * ey - dy * ex;
    if (Math.abs(den) < 1e-9) continue; const r = (x1 * ey - y1 * ex) / den, u = (x1 * dy - y1 * dx) / den; if (r > 0 && u >= -1e-6 && u <= 1 + 1e-6) best = Math.min(best, r); }
  return best; });
const SH = [circle, square, triangle];
const hash = (a, b) => { const s = Math.sin(a * 127.1 + b * 311.7) * 43758.5453; return s - Math.floor(s); };
const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
const inOut = (k) => (k < 0.5 ? 4 * k * k * k : 1 - Math.pow(-2 * k + 2, 3) / 2);
const ctx = document.getElementById("c").getContext("2d");
const tiles = [];
for (let j = 0; j < 9; j++) for (let i = 0; i < 16; i++) { const c = hash(i + 7, j + 3);
  tiles.push({ x: 960 + (i - 7.5) * CELL, y: 540 + (j - 4) * CELL, col: c < 0.62 ? INK : COLS[Math.floor(hash(i, j) * 3)], rot: Math.floor(hash(i + 5, j + 2) * 4), s: hash(i + 1, j + 1) }); }
function draw(u) {
  ctx.fillStyle = PAGE; ctx.fillRect(0, 0, 1920, 1080);
  if (u > 1.04 && u < 1.75) for (const t of tiles) {
    const d = Math.hypot(t.x - 960, t.y - 540), kin = clamp((u - 1.05 - d / 1100 * 0.11) / 0.09, 0, 1), kout = clamp((u - 1.6 - (1 - d / 1100) * 0.07) / 0.07, 0, 1);
    if (kin <= 0 || kout >= 1) continue;
    const e = 1 - Math.pow(1 - kin, 3), pull = clamp(((1 - e) + kout * kout) * 0.85, 0, 1);
    ctx.save(); ctx.translate(t.x + (960 - t.x) * pull, t.y + (540 - t.y) * pull);
    ctx.rotate(t.rot * Math.PI / 2 + (1 - e) * (t.s - 0.5) * 6 + (t.s > 0.6 ? inOut(clamp((u - 1.3) / 0.12, 0, 1)) * Math.PI / 2 : 0));
    const sc = (0.25 + 0.75 * e) * (1 - kout * 0.7); ctx.scale(sc, sc);
    ctx.fillStyle = t.col; ctx.beginPath(); ctx.moveTo(-CELL / 2, -CELL / 2); ctx.arc(-CELL / 2, -CELL / 2, CELL, 0, Math.PI / 2); ctx.closePath(); ctx.fill(); ctx.restore();
  }
  for (let s = 0; s < 3; s++) {
    let from = s, k = 0;
    for (const [a, b] of MORPHS) { if (u >= b) from = (from + 1) % 3; else if (u > a) { k = inOut((u - a) / (b - a)); break; } }
    const to = (from + 1) % 3, p = 1 + 0.06 * Math.sin(k * Math.PI);
    ctx.save(); ctx.translate(SLOTS[s], 540); ctx.scale(p, 1 / p); ctx.beginPath();
    TH.forEach((a, i) => { const r = SH[from][i] + (SH[to][i] - SH[from][i]) * k; i ? ctx.lineTo(Math.cos(a) * r, Math.sin(a) * r) : ctx.moveTo(Math.cos(a) * r, Math.sin(a) * r); });
    ctx.closePath(); ctx.shadowColor = "rgba(28,11,93,.16)"; ctx.shadowBlur = 28; ctx.shadowOffsetY = 10;
    ctx.fillStyle = k > 0.33 ? COLS[to] : COLS[from]; ctx.fill(); ctx.restore();
  }
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 2 });
tl.eventCallback("onUpdate", () => draw(tl.time()));
draw(0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Preview of the “Width-axis squash with lagging outline echoes” technique — At 0:11 in the video

Typography

Width-axis squash with lagging outline echoes

An extended black-weight word squashes from 1470 px to a condensed 680 px with an expo in-out ease over 0.13 s, holds, then stretches to 3700 px, past both frame edges. Every width up to the font's limits is drawn by the variable width axis (found by bisection on the measured widths), so the letters keep their true proportions; only the final stretch past the frame scales the word. Three outline-only copies in the accent colours follow the width curve 45, 90 and 135 ms late, so each change leaves a trail of coloured outlines; at the end colour copies split left and right and the word blinks out on one frame.

When to use Punctuating a beat with type that feels elastic and loud.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Width-axis squash with lagging outline echoes</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=Roboto+Flex:opsz,wdth,[email protected],25..151,100..1000&family=JetBrains+Mono:wght@700&display=swap");
html,body{margin:0;width:1920px;height:1080px;overflow:hidden;background:#0d0b1e}
#root{position:relative;width:100%;height:100%;overflow:hidden}
#stage{position:absolute;inset:0}
.w{position:absolute;left:0;top:0;white-space:nowrap;font-family:'Roboto Flex';font-weight:1000;font-size:309px;line-height:1;transform-origin:0 0}
.echo{-webkit-text-fill-color:transparent;-webkit-text-stroke:2.5px currentColor}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080"><div id="stage" class="clip" data-start="0" data-duration="2"><div class="w echo" style="color:#7c6cf2">MOTION</div><div class="w echo" style="color:#fb2d89">MOTION</div><div class="w echo" style="color:#fe9117">MOTION</div><div class="w" id="r" style="color:#fb2d89">MOTION</div><div class="w" id="b" style="color:#7c6cf2">MOTION</div><div class="w" id="m" style="color:#faf9ff">MOTION</div></div></div>
<script>
const CAP = 220; // cap height of the word (px)
const widthAt = (u) => { // the word's width over time (px)
  const ei = (k) => (k <= 0 ? 0 : k >= 1 ? 1 : k < 0.5 ? Math.pow(2, 20 * k - 10) / 2 : (2 - Math.pow(2, -20 * k + 10)) / 2);
  const sm = (a, b) => Math.max(0, Math.min(1, (u - a) / (b - a)));
  return u < 0.75 ? 1470 : u < 0.99 ? 1470 - 790 * ei(sm(0.75, 0.88)) : 680 + 3020 * ei(sm(1.0, 1.25)); };
const els = [...document.querySelectorAll(".w")], main = document.getElementById("m"), R = document.getElementById("r"), B = document.getElementById("b");
const nat = {}; let capTop = 0;
function measure() {
  [25, 50, 75, 100, 125, 151].forEach((s) => { main.style.fontStretch = s + "%"; nat[s] = main.offsetWidth; });
  const m = document.createElement("canvas").getContext("2d"); m.font = '1000 309px "Roboto Flex"'; const t = m.measureText("MOTION");
  capTop = (309 - t.fontBoundingBoxAscent - t.fontBoundingBoxDescent) / 2 + t.fontBoundingBoxAscent - t.actualBoundingBoxAscent;
}
const natW = (s) => { const k = [25, 50, 75, 100, 125, 151]; for (let i = 1; i < k.length; i++) if (s <= k[i]) return nat[k[i - 1]] + (nat[k[i]] - nat[k[i - 1]]) * (s - k[i - 1]) / (k[i] - k[i - 1]); return nat[151]; };
const stretchFor = (w) => { let lo = 25, hi = 151; for (let n = 0; n < 14; n++) { const m = (lo + hi) / 2; if (natW(m) < w) lo = m; else hi = m; } return (lo + hi) / 2; };
function place(el, w, dx, allowScale) { // the width axis draws the width; only the stretch past the frame may scale
  const wd = allowScale ? Math.max(w, natW(25)) : Math.max(natW(25), Math.min(natW(151), w));
  const s = stretchFor(Math.max(natW(25), Math.min(natW(151), wd))); el.style.fontStretch = s + "%";
  el.style.transform = "translate(" + (960 - wd / 2 + dx) + "px," + (540 - CAP / 2 - capTop) + "px) scale(" + wd / natW(s) + ",1)"; }
function update(u) {
  if (!nat[151]) return;
  const ek = u > 0.74 && u < 1.32 ? 1 : 0, gl = u > 1.29 ? 1 : 0, jump = gl * (Math.sin(Math.floor(u * 60) * 12.9898) * 0.5) * 120;
  els.slice(0, 3).forEach((e, i) => { const ue = u - 0.045 * (i + 1); e.style.opacity = ek; place(e, widthAt(ue) * (i ? 1.02 : 1.08), 0, ue >= 0.99); });
  place(main, widthAt(u), jump, u >= 0.99); place(R, widthAt(u), jump - 28, u >= 0.99); place(B, widthAt(u), jump + 28, u >= 0.99);
  R.style.opacity = B.style.opacity = 0.85 * gl * (u < 1.43 ? 1 : 0); main.style.opacity = u < 1.43 ? 1 : 0;
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 2 });
tl.eventCallback("onUpdate", () => update(tl.time()));
document.fonts.load('1000 309px "Roboto Flex"').then(() => { measure(); update(tl.time()); });
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Preview of the “Iris disc reveal with centred type-on” technique — At 0:13 in the video

Transition

Iris disc reveal with centred type-on

On a dark frame a page-coloured disc opens from a point (clip-path circle from 230 to 1200 px in 0.21 s, with a soft dark rim). The title types in letter by letter every 26 ms, each letter arriving blurred, and because the line is a centred flex row the word re-centres as it grows; a small mark pops above with an overshoot, a superscript tag pops after the last letter, two rules grow and a mono subline decodes between them. Every decoding letter resolves before the decode ends, and the card then holds to the last frame.

When to use End cards and title reveals that should land on one hit.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Iris disc reveal with centred type-on</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=Roboto+Flex:opsz,wdth,[email protected],25..151,100..1000&family=JetBrains+Mono:wght@700&display=swap");
html,body{margin:0;width:1920px;height:1080px;overflow:hidden;background:#0d0b1e}
#root{position:relative;width:100%;height:100%;overflow:hidden}
#page{position:absolute;inset:0;background:#faf9ff;clip-path:circle(0 at 960px 540px)}
#rim{position:absolute;inset:0}
#mark{position:absolute;left:925px;top:283px;width:70px;height:70px;border-radius:17px;background:#1c0b5d;box-shadow:inset 0 0 0 14px #fb2d89}
#title{position:absolute;left:0;top:402px;width:1920px;display:flex;justify-content:center;align-items:flex-start;white-space:nowrap}
#word{font-family:'Roboto Flex';font-weight:1000;font-size:202px;line-height:1;font-stretch:120%;color:#1c0b5d}
#word span,#tag{display:inline-block}
#tag{font-family:'Roboto Flex';font-weight:1000;font-size:89px;line-height:1;font-stretch:120%;color:#fb2d89;margin:12px 0 0 24px}
.rule{position:absolute;top:685px;width:179px;height:2px;background:#1c0b5d}
#r0{left:462px}#r1{left:1279px}
#sub{position:absolute;left:960px;top:678px;transform:translateX(-50%);white-space:pre;color:#1c0b5d;font:700 16px/1 'JetBrains Mono',monospace;letter-spacing:4.6px}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080"><div id="page" class="clip" data-start="0" data-duration="3"><div id="mark"></div><div id="title"><div id="word"></div><div id="tag">.APP</div></div><div class="rule" id="r0"></div><div class="rule" id="r1"></div><div id="sub"></div><div id="rim"></div></div></div>
<script>
const TITLE = "MOTIONFAB", SUB = "DESCRIBE THE VIDEO. THE AGENT ANIMATES IT."; // example copy
const word = document.getElementById("word"), tag = document.getElementById("tag"), page = document.getElementById("page");
const letters = TITLE.split("").map((c) => { const s = document.createElement("span"); s.textContent = c; word.appendChild(s); return s; });
const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
const sm = (a, b, v) => { const k = clamp((v - a) / (b - a), 0, 1); return k * k * (3 - 2 * k); };
const back = (k) => 1 + 3.2 * Math.pow(k - 1, 3) + 2.2 * Math.pow(k - 1, 2);
function update(u) {
  const open = sm(0.15, 0.36, u), R = open > 0 ? 230 + 970 * open : 0; // the card holds once open
  page.style.clipPath = "circle(" + R + "px at 960px 540px)";
  document.getElementById("rim").style.background = "radial-gradient(circle at 960px 540px, rgba(28,11,93,0) " + Math.max(0, R - 90) + "px, rgba(28,11,93,.5) " + R + "px)";
  letters.forEach((el, i) => { const k = clamp((u - 0.29 - i * 0.026) / 0.06, 0, 1); el.style.display = k > 0 ? "inline-block" : "none"; el.style.filter = k < 1 ? "blur(" + (1 - k) * 9 + "px)" : "none"; });
  const tk = clamp((u - 0.6) / 0.12, 0, 1); tag.style.display = tk > 0 ? "inline-block" : "none"; tag.style.transform = "scale(" + (tk ? back(tk) : 0) + ")";
  const mk = clamp((u - 0.45) / 0.12, 0, 1); document.getElementById("mark").style.transform = "scale(" + (mk ? back(mk) : 0) + ")";
  ["r0", "r1"].forEach((id) => (document.getElementById(id).style.transform = "scaleX(" + sm(0.66, 0.85, u) + ")"));
  const sk = clamp((u - 0.7) / 0.55, 0, 1); let s = "";
  for (let i = 0; i < SUB.length; i++) { const at = (i / SUB.length) * 0.88; // the last letter resolves before sk reaches 1
    s += sk > 0 && (sk >= at + 0.08 || SUB[i] === " ") ? SUB[i] : sk > 0 && sk >= at ? "#%&<>=/"[(i + Math.floor(u * 30)) % 7] : " "; }
  document.getElementById("sub").textContent = sk >= 1 ? SUB : s;
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 3 });
tl.eventCallback("onUpdate", () => update(tl.time()));
update(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>

Preview of the “Eddy-swirl ink shader inside a growing sphere mask” technique — At 0:08 in the video

Texture

Eddy-swirl ink shader inside a growing sphere mask

A full-screen fragment shader at half resolution: the coordinates are spun around ten drifting centres (rotation falling off exponentially with distance, alternating directions) and warped by noise, then coloured by two low-frequency noise fields that pick one of five inks with dark seams between them and a glossy highlight from the field's slope. The ink starts inside a circle with a wobbling edge and a warm rim, then the circle grows past the frame while the view slowly zooms in.

When to use Liquid, marbled colour that keeps moving without a fluid simulation.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Eddy-swirl ink shader inside a growing sphere mask</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=Roboto+Flex:opsz,wdth,[email protected],25..151,100..1000&family=JetBrains+Mono:wght@700&display=swap");
html,body{margin:0;width:1920px;height:1080px;overflow:hidden;background:#0d0b1e}
#root{position:relative;width:100%;height:100%;overflow:hidden}
#c{position:absolute;inset:0;width:100%;height:100%}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080"><canvas id="c" class="clip" data-start="0" data-duration="3" width="960" height="540"></canvas></div>
<script>
const INKS = [[0.49, 0.42, 0.95], [0.98, 0.18, 0.54], [1.0, 0.57, 0.09], [0.96, 0.95, 0.99], [0.11, 0.04, 0.36]]; // five inks
const gl = document.getElementById("c").getContext("webgl", { preserveDrawingBuffer: true });
const FS = `precision highp float; uniform vec2 R; uniform float T, RAD, Z; uniform vec3 c0, c1, c2, c3, c4;
float h(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
float n(vec2 p){ vec2 i = floor(p), f = fract(p), u = f * f * (3. - 2. * f); return mix(mix(h(i), h(i + vec2(1, 0)), u.x), mix(h(i + vec2(0, 1)), h(i + vec2(1, 1)), u.x), u.y); }
float fbm(vec2 p){ float v = 0., a = .5; for (int i = 0; i < 4; i++){ v += a * n(p); p = mat2(1.6, 1.2, -1.2, 1.6) * p; a *= .5; } return v; }
vec2 rot(vec2 v, float a){ return vec2(cos(a) * v.x - sin(a) * v.y, sin(a) * v.x + cos(a) * v.y); }
void main(){ vec2 px = vec2(gl_FragCoord.x, R.y - gl_FragCoord.y) * (1920. / R.x), d = px - vec2(1000, 480); vec2 p = d / (620. * Z);
  for (int i = 0; i < 10; i++){ float fi = float(i); vec2 c = vec2(sin(fi * 2.31 + T * .19), cos(fi * 1.73 - T * .15)) * (.35 + .45 * fract(fi * .618));
    vec2 e = p - c; p = c + rot(e, (mod(fi, 2.) < 1. ? 1. : -1.) * (5. + 2. * sin(fi * 3.1 + T * .5)) * exp(-length(e) / (.07 + .05 * fract(fi * .37)))); }
  float a = n(p * 3.4 + 1.7), b = n(p * 3.4 - 4.3); vec3 col = c0;
  col = mix(col, c1, smoothstep(.42, .56, a)); col = mix(col, c3, smoothstep(.64, .76, b)); col = mix(col, c2, smoothstep(.66, .78, a) * (1. - smoothstep(.48, .58, b))); col = mix(col, c4, smoothstep(.32, .26, b));
  col *= (.45 + .55 * smoothstep(0., .04, min(abs(a - .5), abs(b - .69)))) * (.72 + .5 * fbm(p * 7.));
  float edge = RAD + 20. * sin(atan(d.y, d.x) * 5. + T * 3.); float inside = 1. - smoothstep(edge - 3., edge + 3., length(d));
  gl_FragColor = vec4(mix(vec3(.05, .043, .118), col, inside), 1.); }`;
const sh = (t, s) => { const o = gl.createShader(t); gl.shaderSource(o, s); gl.compileShader(o); return o; };
const pr = gl.createProgram(); gl.attachShader(pr, sh(gl.VERTEX_SHADER, "attribute vec2 p; void main(){ gl_Position = vec4(p, 0., 1.); }")); gl.attachShader(pr, sh(gl.FRAGMENT_SHADER, FS)); gl.linkProgram(pr); gl.useProgram(pr);
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
const loc = gl.getAttribLocation(pr, "p"); gl.enableVertexAttribArray(loc); gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
const U = (k) => gl.getUniformLocation(pr, k);
gl.uniform2f(U("R"), 960, 540); INKS.forEach((c, i) => gl.uniform3fv(U("c" + i), c));
const sm = (a, b, v) => { const k = Math.max(0, Math.min(1, (v - a) / (b - a))); return k * k * (3 - 2 * k); };
function draw(t) { gl.uniform1f(U("T"), 1.5 + t * 1.1); gl.uniform1f(U("RAD"), 600 + 1100 * sm(0.6, 2.2, t)); gl.uniform1f(U("Z"), 1 - 0.45 * sm(1.6, 3, t)); gl.drawArrays(gl.TRIANGLES, 0, 3); }
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 3 });
tl.eventCallback("onUpdate", () => draw(tl.time()));
draw(0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Preview of the “Three-stream spiral particle vortex” technique — At 0:10 in the video

Particles

Three-stream spiral particle vortex

Thousands of additive streaks, each a pure function of time: first a warp field (streaks born near the centre race outward with an accelerating radius), then three coloured streams spiral into the centre from three angles on a log-spiral path, each streak drawn along its tangent, turning white at the core under a soft glow that swells into a white flash.

When to use A high-energy hand-off between two scenes, ending in a flash to cut on.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Three-stream spiral particle vortex</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=Roboto+Flex:opsz,wdth,[email protected],25..151,100..1000&family=JetBrains+Mono:wght@700&display=swap");
html,body{margin:0;width:1920px;height:1080px;overflow:hidden;background:#0d0b1e}
#root{position:relative;width:100%;height:100%;overflow:hidden}
#c{position:absolute;inset:0;width:100%;height:100%}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080"><canvas id="c" class="clip" data-start="0" data-duration="2" width="1920" height="1080"></canvas></div>
<script>
const ARMS = [[[124, 108, 242], 2.35], [[254, 145, 23], -1.75], [[251, 45, 137], 0.15]]; // colour and entry angle per stream
const NP = 9000, CX = 960, CY = 540;
const hash = (a, b) => { const s = Math.sin(a * 127.1 + b * 311.7) * 43758.5453; return s - Math.floor(s); };
const sm = (a, b, v) => { const k = Math.max(0, Math.min(1, (v - a) / (b - a))); return k * k * (3 - 2 * k); };
const P = Array.from({ length: NP }, (_, i) => ({ a: hash(i, 1) * 6.283, r: hash(i, 2), s: hash(i, 3), k: hash(i, 5), arm: i % 3 }));
const ctx = document.getElementById("c").getContext("2d");
function draw(u) {
  ctx.globalCompositeOperation = "source-over"; ctx.fillStyle = "#08070b"; ctx.fillRect(0, 0, 1920, 1080);
  ctx.globalCompositeOperation = "lighter"; ctx.lineCap = "round";
  for (const p of P) {
    let x, y, dx, dy, len, al, c;
    if (u < 0.5) { const life = 0.22; let age = (u - (p.k * 7.3 % 1) * 0.3) % life; if (age < 0) age += life;
      const r = 20 + Math.pow(age / life, 2.2) * 1300 * (0.6 + 0.6 * p.s); x = CX + Math.cos(p.a) * r; y = CY + Math.sin(p.a) * r * 0.75;
      dx = x - CX; dy = y - CY; len = 10 + r * 0.16; al = Math.min(1, r / 160) * 0.8; c = ARMS[p.arm][0]; }
    else { const [col, a0] = ARMS[p.arm], ph = ((u - 0.5) / 0.5 + p.k) % 1, r = 1250 * Math.pow(1 - ph, 1.6) + 10;
      const ang = a0 + ph * 2.6 + (p.s - 0.5) * 0.55 * (1 - ph), spread = (p.r - 0.5) * 760 * (1 - ph);
      x = CX + Math.cos(ang) * (r + spread); y = CY + Math.sin(ang) * (r + spread) * 0.8;
      dx = Math.cos(ang + 1.571); dy = Math.sin(ang + 1.571) * 0.8; len = 30 + 110 * (1 - ph); al = 0.6 + 0.4 * ph; c = ph > 0.8 ? [255, 255, 255] : col; }
    const d = Math.hypot(dx, dy) || 1;
    ctx.strokeStyle = "rgba(" + c + "," + al * 0.55 * (1 - sm(1.5, 1.8, u)) + ")"; ctx.lineWidth = 3;
    ctx.beginPath(); ctx.moveTo(x - dx / d * len, y - dy / d * len); ctx.lineTo(x, y); ctx.stroke();
  }
  const core = sm(0.3, 0.6, u) * 0.35 + sm(1.3, 1.45, u) * 1.4 * (1 - sm(1.55, 1.8, u));
  const g = ctx.createRadialGradient(CX, CY, 0, CX, CY, 160 + 380 * sm(1.3, 1.5, u));
  g.addColorStop(0, "rgba(255,255,255," + Math.min(1, core) + ")"); g.addColorStop(1, "rgba(255,255,255,0)");
  ctx.fillStyle = g; ctx.fillRect(0, 0, 1920, 1080);
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 2 });
tl.eventCallback("onUpdate", () => draw(tl.time()));
draw(0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

More prompts

Preview of the “Eight-Technique Motion Design Showreel” prompt

Simple MotionONO

Eight-Technique Motion Design Showreel

<direction> Make a 15-second landscape motion-design showreel, 1920x1080 at 60 fps. Use eight scenes: seven of exactly 2 seconds and a 1-second end card. Every cut lands on a downbeat of a 120 BPM house track. It should feel like the reel of a precise, playful motion designer, with a different technique in every scene. Use hard cuts only and no fades between scenes, except the final fade to black. Use flat graphic pages, one pink accent, heavy tight grotesk type and a shutter smear on every fast move. Avoid photos, footage and voice. No letter may run over a cube edge. Type-wall words must never line up in columns. No particles may linger after the burst. </direction> <structure> 1. 0-2 s, title on the light page. A 1500 x 6 px near-black rule grows from the centre of the frame (scaleX, expo.out 0.45 s). At 0.5 s the first word, for example "SHOW", rises out of the rule from below. At 1.0 s the second word, for example "REEL", drops out of it from above (replace both with yours). Each word sits in a box clipped at the rule: travel 290 px, expo.out 0.45 s, Geist Bold 248 px, centred. At 1.5 s three corner labels fade in over 0.1 s: a name top left, a running frame-accurate timecode (HH:MM:SS:FF) top right, and a feature list such as "TYPE / SHAPES / 3D / SOUND" bottom left in a faint muted tone. From 1.6 s the whole layer zooms from 1x to 41x in 0.4 s with expo.in, into a point inside a thick stroke of the top word (the bar of a T works). The frame ends filled with near-black and cuts unseen into the next scene. 2. 2-4 s, shapes on near-black, chapter label such as "01 / FIRST STEP". A pink circle springs in from nothing to 512 px across with one soft overshoot, r = 256(1 - e^(-9t) cos 11t). Every half second it morphs into the next shape: a square (338 px side), then a triangle (circumradius 266), then a soft five-armed starfish. Each outline is drawn from 240 points whose blend to the next shape starts a few hundredths of a second apart, so the edge wobbles for 0.1 s. The frame keeps turning clockwise: a quick power2.inOut spin of 30 to 45 degrees as each shape lands, and a slow drift in between. Every quarter second a thin pale ring leaves the shape at 300 px radius and expands to 980 px (expo.out, 0.95 s) while fading out. 3. 4-6 s, LED grid, chapter label such as "02 / SECOND STEP". The frame becomes a 32 x 18 grid of 56 px light tiles on a 60 px pitch, with near-black lines between them. Each tile flips like a card (height x |cos|, 180 degrees, power2.inOut 0.23 s) and changes colour halfway through. The flips run as a wave from the middle cell outward, 0.028 s per cell, with vertical distance counted 1.2x. The wave reveals deep-ink empty cells and a big pixel number in pink cells 13 cells tall, for example "02". At 5.45 s a vertical sweep runs right to left in 0.37 s and briefly squeezes only the empty cells to a quarter of their height. 4. 6-8 s, particles on near-black, chapter label such as "03 / THIRD STEP". About 2,800 light and pink dots (3 to 6 px) drift over the whole frame. They then gather into a word such as "IDEAS" in Geist Bold, spaced to fill x 395-1520 with cap height from y 382 to 668, using sine.inOut over 0.42 s with each dot a little late. They hold with a one-pixel jitter. At 7.5 s they burst outward from the centre with accelerating speed, and every dot is out of the frame by 7.8 s. Dots streak along their path when they move fast. 5. 8-10 s, liquid on pink, small near-black label "LIVE PREVIEW". Seven light metaball drops, one big in the middle and six around it, orbit and breathe, bridging and merging when close. At 8.45 s they are sucked into one drop (power2.in 0.17 s), which holds small. At 9.05 s they are flung out again with back.out. 6. 10-12 s, type wall on the light page, label "KINETIC TYPE". Eight rows of Geist Bold 152 px on a 150 px pitch cover the frame. Words alternate loud near-black and quiet faint grey, with a little extra word space, for example "MOTION IDEAS TYPE SHAPES SOUND PREVIEW" repeating (replace with your feature words). The even rows are offset by most of a word cycle so the words never line up in columns. Even rows run left and odd rows run right, each row 60 px/s faster than the one above (900 to 1320 px/s). At 11.0 s all rows stop dead, then lurch on by about 0.17 s of travel (power3.inOut 0.28 s). At the same moment a full-width pink band 300 px tall opens from its centre across the middle (scaleY expo.out 0.35 s). A name in white Geist Bold 262 px, for example "STUDIO NAME", rises into the band from its lower edge (expo.out 0.33 s). 7. 12-14 s, 3D cube on near-black, label "3D EFFECTS". A 514 px cube sits in perspective (2400 px), tilted -14.5 degrees so its deep-ink top shows. It rests at a three-quarter view and turns a quarter turn every half second (power3.out 0.3 s), each face landing at the same angle. Four faces carry one heavy word each, for example: "TYPE" near-black on light, "3D" white on pink, "SHAPES" light on near-black, "SOUND" pink on light. Short words are 200 px. Longer words are scaled to about 85% of the face, so every word fits inside its face with margins. 8. 14-15 s, end card on near-black. A two-word name in Geist Bold 224 px, for example "Studio Name", with the first word light and the second pink, rises out of a hard edge just under its baseline (expo.out 0.45 s). At 14.15 s a sentence such as "your tagline · your website" follows in Geist Medium 44 px. At 14.25 s a tiny call to action such as "TRY IT FREE" appears in Geist Mono. From 14.55 s the whole card fades linearly to black, reaching black on the last frame. </structure> <composition> Palette: - Light page #FAF9FF. - Near-black #0D0B1E for dark pages and dark type. - Deep ink #1C0B5D for dark panels, empty grid cells and the cube top. - One accent pink #FB2D89. - White #FFFFFF for type on pink. - Muted #6B6385 for small labels on light pages, and at 24% opacity for the quiet words of the type wall. - Chapter labels on near-black in #E9E4F2 at 55% opacity. Type: - Geist Bold for everything big, set tight: letter-spacing -0.07em, line-height 1. - Geist Medium only for the end-card sentence. - Geist Mono 22 px for corner labels, placed 64 px from the left and 60 px from the top. Big elements stay centred on the frame, with generous empty space around the single hero element of each scene. </composition> <techniques> Every fast move carries a shutter smear. Render three copies of the moving layer sampled a quarter frame apart (t - 1/240 s, t, t + 1/240 s) and stack them at opacity 1, 1/2 and 1/3. This averages them, so motion leaves stepped grey ghosts. Canvas-drawn scenes (morph, grid, particles, liquid) average three passes the same way. Words enter by rising or dropping out of hard clipping edges with expo.out, never by fading. The first cut is hidden by the expo.in zoom into a letter stroke. All other changes are hard cuts on the downbeat. The end card's linear fade to black is the only fade. </techniques> <music> An original house track at 120 BPM, exactly 15 seconds long, with one bar per scene, all on the composition's beat grid. It has a four-on-the-floor kick, claps on 2 and 4, open hats on the off-beats, a funky bouncy bassline and bright off-beat chord stabs. The first bar, under the title, is a quiet build-up. A riser and a short whoosh run into the zoom, and the full groove drops at 2.0 s with a boom. Every kick falls on the grid, so each cut lands on a downbeat. The track fades over the last half second. Mix to about -14 LUFS, true peak under -1 dBTP. </music> <sound> Hits laid on the picture, on top of the music: - a light tick as each shape lands - a glitch when the grid appears and a swish on the grid sweep - a swoosh into the particles, a short riser as they gather and a whoosh on the burst - a bell impact into the liquid, a downer as the drops are sucked in and a pop as they fly out - a swoosh into the type wall and a boom when the pink band opens - a swish on every cube turn - a riser and a deep boom on the end card No voice-over. </sound>

Preview of the “Kinetic Type Manifesto Tied by One Moving Line” prompt

Simple MotionTQW

Kinetic Type Manifesto Tied by One Moving Line

<direction> Make a 46-second vertical (1080x1920) kinetic typography video that carries a short mission statement from two titles, through three paragraphs, to three calls to action and a closing card. The idea: one single coloured line moves through the whole piece and connects every scene as one visual narrative, taking a different form each time (a loop, a knot, a frame, a lifting page, a path the camera follows). The style is minimal and modern, with vibrant flat colours and all text in Montserrat, a clean sans serif. Set the text word for word, exactly as written. It should feel like an award-level motion design identity piece: emotional, contemporary, artistic, precise and human. Every scene must look different from the others. Avoid anything that looks like a slide presentation, a Canva template, a generic NGO advert or stock footage. Use no photos, footage or illustrations that interpret the words, and add no related or paraphrased words: the typography and the line are the whole visual. Use soft original music with no voice-over. </direction> <structure> Approximate timing, with the full paragraphs as the narrative backbone: 1. Title one (about 0–5 s): "THREADS OF HOPE." (replace with yours) on an off-white background. A magenta line loops in and reveals each title line from underneath, then ties a knot. Blue floods out of the knot and fills the screen. 2. Title two (about 5–10 s): "ROOTS OF PEACE." (replace with yours). A yellow line draws a square frame around the words while the letters of the first word rise one by one. 3. First paragraph (about 10–18 s): the line lifts into a full yellow page carrying "Across [your country], we are weaving new connections through psychological support, collective action, and community-led initiatives." (replace with yours). Highlight the key phrases circleling with a connected line, such as "weaving new connections", "psychological support", "collective action" and "community-led initiatives". 4. Second paragraph (about 18–27 s): a dark-blue scene with "We bring together professionals, organizations, and communities to rebuild the social fabric, strengthen psychosocial well-being, and cultivate cultures of peace rooted in empathy, solidarity, dialogue, and mutual care." (replace with yours). The key phrase "cultures of peace" gets its own moment. It sits on its own line at about 1.5 times the size of the surrounding text, in bright yellow, and it grows in from slightly small to full size. As the following lines arrive, the rest of the paragraph fades back to lower opacity, but this phrase stays at full brightness to the end of the scene. "emphaty" is picked out in magenta, "solidarity" is picked out in light blue, "dialogue" is picked out in green and "mutual care" is picked out in lavanda so that yellow belongs only to the key phrase here. 5. Third paragraph (about 27–35 s): a green scene where the camera travels along the line as "From individual healing to collective transformation, we are creating opportunities for communities to reconnect, grow, and shape more peaceful futures." everything in bold (replace with yours) unfolds along its path. 6. Calls to action (about 35–41 s): three highlighted invitations, each appearing in turn: "Explore our work.", "Connect with our mission.", "Help cultivate cultures of peace." (replace with yours). The last one can echo the yellow highlight of "cultures of peace". 7. Closing card (about 41–46 s): "Know More about" / "[your brand]" / "[your website]". The line comes to rest and the piece ends on a calm, still frame. </structure> <composition> Use vertical framing with generous margins and lots of negative space. Each scene has its own layout so that no two look alike: centred titles, a framed title, a full-bleed coloured page, a dark field with a strong hierarchy, and a travelling path. Set all text in Montserrat. Titles are in bold uppercase, exactly as written. Body text is in a lighter weight, set in short, readable lines. Make key words stand out through colour, weight or size rather than decoration. The palette is vibrant and flat: an off-white base, with magenta, saturated blue, yellow, dark blue and green as scene colours. Light blue is a secondary accent, and bright yellow is reserved for the key phrase "cultures of peace". The line always contrasts with the background it crosses. </composition> <techniques> The continuous line is the main device. It draws on with a stroke reveal and works as a mask that reveals the text from underneath. It ties a knot that releases a full-screen colour flood as the transition into the next scene. It draws a square frame. It lifts like a sheet of paper into the next page. Finally, it becomes a path the camera follows through the green scene. Every transition is handed off by the line itself, never by generic cuts or wipes. Text motion: letters rise one by one with a stagger. Words and lines reveal in reading order. Key phrases settle slightly later and stronger. The highlighted phrase scales up from a little smaller to full size, while finished lines fade back in opacity. Keep all motion smooth and precise, with soft ease-out arrivals and no bounces. Use calm pacing that leaves time to read every paragraph. </techniques>

Preview of the “Hypnotic Eye Dive Showreel in Neon Synthwave” prompt

Simple MotionPHY

Hypnotic Eye Dive Showreel in Neon Synthwave

<direction> Make a 20-second psychedelic, hypnotic motion-graphics showreel, 16:9 at 1920x1080 and 60 fps. Everything is drawn and generated: procedural patterns and 3D-rendered forms, no footage and no photos. Cut it to a 120 BPM neon synthwave track. The idea: an eye opens out of a single line, and the camera keeps diving through it into stranger and stranger worlds before it lands on a title. Every frame is driven by time. Sections change on bar lines (every 2 s) behind white flashes, and brightness pulses on the beats keep the picture breathing. The look is deep ink and near-black with neon pink, orange, violet, teal and yellow, soft bloom, light chromatic aberration, fine grain and a vignette, with a thin technical HUD framing everything. All quoted words are examples to replace with yours; keep their lengths close so the layout holds. Avoid footage and stock imagery, flat untextured fills, pure black (darks never go below #0D0B1E), oversaturated colour, and any real names or brands on screen. </direction> <structure> 1. 0.0-4.0 s, the eye. Black, then at 0.3 s a thin glowing lash line appears. The eye is a pointed almond: the lens shape between two overlapping circles, about 0.55 of the frame width. The whole frame around it fills with its contour lines, which are iso-lines of the same two-circle shape on logarithmic steps (each gap about 13% wider than the last). They flow slowly outward and fade with distance: pale lavender, orange and teal near the eye, pink further out, over deep-ink bands. From 0.3 to 0.85 s the eye is a slit. From 0.85 to 1.33 s the lids open (power2.out) while the eye grows from 86% to full size. The iris is fibrous, in orange, peach, mint and violet bands, with a pink edge ring, a teal glow and a ring-shaped highlight upper left; the lids have a soft white inner rim. Beat ripples run out through the lines at 1.5, 1.75, 2.5 and 2.75 s. A centred caption in small letter-spaced mono ("YOUR LINE OF TWENTY-SIX LETTERS") decodes in from 1.4 s at about 45 letters a second and falls apart from the right at 2.8-3.1 s. From 2.75 s the pupil dilates and shows the next scene already playing inside it, while the iris bands shift to violet and yellow. From 3.42 to 3.98 s the camera pushes into the pupil until the inner scene fills the frame at 1:1. 2. 4.0-8.0 s, the tunnel. Cut on a white flash with radial streaks. This is a perspective tunnel of rings spaced so that inverse radius grows by 0.75 per ring. Each ring holds 18 almond eyes with teal outlines, pink and violet irises and a white highlight. Alternate rings sit half a cell apart and turn opposite ways. The rings fly outward at about 11 rings a second with a push on each beat, and the far rings melt into an ink haze around a white core. On every beat a glowing ring leaves the core and grows, in turn white, pink, then teal. From 6.05 to 6.45 s the eyes morph into a polar checkerboard, then into a sunburst of 36 slowly turning rays in muted rainbow colours, with a bright ring around the centre that swells after 7.0 s. From 7.45 to 7.8 s the checker flashes back, and from 7.72 to 7.97 s everything whites out. 3. 8.0-11.33 s, the chrome blob. The white fades away over 0.5 s to reveal an iridescent chrome metaball over dark concentric ripples. It is six spheres in a smooth union: a dark body with thin oil-slick contour bands in teal and pink, a pink rim light and sharp white speculars. It turns and morphs. A vertical chain gathers into a lump, two droplets split off at 9.1-9.5 s, and it crumples at 9.5-9.9 s. From 10.0 s the frame becomes a kaleidoscope stepping through 4, 6, 3, 8, then 10 mirror folds, and a pale arc sweeps outward at 10.0-10.25 s. 4. 11.33-14.0 s, the spiral. A glitch flash, then twelve logarithmic-spiral arms of teardrop cells. Each cell is 1.5x the previous one along its arm, and the arms turn counter-clockwise outward. The cells have double lavender outlines and hold either an iris (teal, pink or orange) or a nested gradient diamond (pink or violet). Thin gold lines trace the arms and rings, and a white core glows at the centre. The spiral zooms toward the centre at about 1 log-unit a second and turns slowly; both moves get a push on each beat, with a brightness pulse on every beat. From 13.82 to 14.0 s a white bloom grows from the centre to fill the frame. 5. 14.0-15.5 s, the sphere room. The white fades over 0.7 s into a 3D room. Arches are made of pearl-like beads, big iridescent spheres line the walls, and flat floor discs carry zigzag op-art stripes in pastel rainbow, all in ink-violet fog. The camera dollies forward and banks to the right. 6. 15.5-16.0 s, montage on sixteenth notes (cuts at 15.5, 15.633, 15.75 and 15.883 s): an iris close-up, the rays, the kaleidoscope and the spiral, each with a small flash. 7. 16.0-18.0 s, the eye again. A white flash with a dark disc at the centre that shrinks to nothing in 50 ms. The camera pulls out of the pupil, with the sphere room visible inside it, to the full eye by 16.32 s. Now the contour lines are thick neon bands: pink near the eye, then violet, then deep ink further out, turning teal over 16.9-17.8 s. The iris is a pastel rainbow ring around a large dark pupil. Beat pulses land at 16.5, 17.0 and 17.5 s. From 17.84 to 17.98 s the eye blinks shut: the bands straighten into horizontal stripes with one bright line in the middle. At 18.0 s everything collapses to dark in 50 ms. 8. 18.1-20.0 s, the title. A word in the wide black grotesk ("YOUR WORD") is fitted to about 1436 px wide and centred. It wipes in left to right with a soft blurred edge over 0.52 s. Its letters are pale (lavender, mint, then blush from left to right) and filled with grain, with a red/blue split settling from 10 to 3 px and a glow tinted violet, teal and pink. At 18.62 s an italic subtitle fades in under it ("your short tagline"). At 19.1 s a tiny letter-spaced mono line decodes above it ("( a short call to action )"). From 19.55 to 19.95 s the word dissolves into noise and the frame fades out. </structure> <composition> Palette: deep ink #1C0B5D and near-black #0D0B1E for every dark area (backgrounds, bands, the white of the eye). The accents are pink #FB2D89 (main), orange #FE9117, violet #7C6CF2, teal #2DD4B0, yellow #FFD23F and white #FFFFFF. Use light lavender #F0EDFF / #FAF9FF for pale tints and text, muted lavender #9890B4 for small HUD text, and #E9E4F2 for lines. Rainbow elements cycle pink, violet, teal, yellow, orange. Grade over everything: soft bloom on bright shapes (threshold about 0.7), light radial chromatic aberration toward the corners, fine grain, a vignette and slightly muted saturation. Darks never go below #0D0B1E. Fonts: Unbounded 900 (a very wide black grotesk) for the title, JetBrains Mono 400/700 at 11-15 px with letter-spacing about 0.3 em for the HUD, and Spectral Italic 400 at about 43 px for the subtitle. HUD: it sits on top of everything from 1.0 s, fades in over 0.5 s and fades out at 19.6-19.9 s. Thin L-shaped corner brackets sit 28 px from each corner. - Top left: a name in bold mono ("YOUR NAME") with a tagline under it ("YOUR TAGLINE"). - Top right, right-aligned: a chapter counter ("01 / 07") and a bold chapter label ("FIRST CHAPTER"), changing at each section. - Bottom left: a timecode "TC 00:00:SS:FF" counting frames at 60 fps, and "120 BPM · bar.beat.sixteenth" (for example 02.3.3). - Bottom right: four 8 px squares with the current beat lit white, and a short credit in bold (for example "YOURSITE.COM"). - A 1.5 px progress line runs between the bottom brackets and fills with the playhead. </composition> <techniques> - Decode text: at every section start the chapter counter and label decode letter by letter in 0.38 s. Each letter scrambles through glyphs like # % & = + @ < | / $ at 30 changes a second and resolves left to right. The caption and the call to action use the same decode, and the caption falls apart from the right the same way. - Section flashes: each white flash with radial streaks decays as 0.94 / (1 + (t / 0.07)^2.5). - Pupil push (3.42-3.98 s): the zoom accelerates exponentially, with log zoom = 5.5·x² / (x + 0.1) over the move. The next scene plays inside the pupil and ends exactly at 1:1, so the cut is seamless. The pull-out at 16.0 s mirrors it. - Beat pushes: the tunnel speed, the spiral zoom and turn, and the ripples and rings get a kick on every beat, with brightness pulses on the beats. - Morphs instead of cuts inside scenes: eyes to checkerboard to sunburst, the metaball chain to lump to droplets to crumple, then the kaleidoscope fold counts stepping 4, 6, 3, 8, 10. - Transitions: white-outs and fades from white on bar lines, a glitch flash into the spiral, a white bloom from the centre into the sphere room, sixteenth-note flash cuts in the montage, a 50 ms collapse to dark before the title. - Title: a left-to-right soft-edged wipe, an RGB split easing from 10 to 3 px, then a noise dissolve and fade at the end. </techniques> <music> Neon synthwave at 120 BPM in A minor, one chord per bar (2 s): Am F for the intro, then Am F C G Am, F in the breakdown, G on the return, Am at the end. The kick lands exactly on the picture's beats (every 0.5 s). - 0-4 s: a bell figure in eighths over a warm pad, with a long riser and a reversed cymbal, no drums. - At 4.0 s: a four-on-the-floor kick, an octave-jumping eighth-note bass and a saw arpeggio in sixteenths. The bass and arpeggio pump with the kick. - From 8.0 s: a big reverbed snare on two and four, off-beat hats and a square lead holding long notes, with a snare fill into 14.0 s. - 14.0-16.0 s: the drums and bass drop out, the pad swells, and a filtered arpeggio rises with a 32nd-note snare roll into 16.0 s. - At 16.0 s: everything slams back. - The drums stop half a beat before 18.0 s, and one ringing A minor add9 chord carries the end card. </music> <sound> Sound effects on the picture: - a soft high sine at 0.3 s for the lash line - a riser into a deep boom at 4.0 s - a short riser and boom at 8.0 s - a glitch at 11.33 s - a riser and whoosh into 14.0 s - four short glitch ticks on the montage cuts - a long riser into a boom at 16.0 s - a whoosh on the blink at 17.95 s - a downer and sub drop at 18.0 s - a soft bell when the title appears at 18.12 s - an airy whoosh as the title dissolves No voice-over. Mix to about -14 LUFS, with true peak below -1 dBTP. </sound> <references> Late-80s outrun and synthwave colour, op-art moiré and contour-line illusions, psychedelic eye imagery, demoscene-style procedural showreels, and motion-design studio reels framed by a technical HUD. </references>

Newsletter

We email the best new community prompts with their videos. No spam, and every letter has an unsubscribe link.

We use your email only for this newsletter. Privacy Policy

Essential cookies remember your site settings. With your permission, Google Analytics helps us understand how people use Motion Fab. You can change your choice in the footer.

Your privacy choices under applicable US state privacy laws. Privacy Policy