your AI motion designer

EN

Simple Motion

Hypnotic Eye Dive Showreel in Neon Synthwave

A fully drawn psychedelic reel: an eye opens, the camera dives through its pupil into a tunnel of eyes, a chrome blob and a spiral, then lands on a title.

Published 10 November 2026

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 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.

Structure

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.
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.
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.
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.
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.
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.
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.
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.

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.

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.

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.

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.

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.

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 “Pointed-almond eye with log-spaced contour lines” technique — At 0:02 in the video

Shapes

Pointed-almond eye with log-spaced contour lines

An eye drawn in one fragment shader: the lids are the lens between two circles (tips at +-0.53, half-height 0.237 of the frame height), and every line outside is an iso-line of the same two-circle distance, so the lines stay pointed and turn into straight horizontal stripes when the eye closes. The lines sit on log steps (each gap about 13% wider) and their phase flows outward; a fibrous iris (70 twisted angular waves) in peach, mint and violet bands, a ring highlight and a soft inner rim complete it. The lids open as a slit (0.3 s) then power2.out over 0.48 s.

When to use A hypnotic hero shape that can open, blink and close into lines on the beat.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pointed-almond eye with log-spaced contour lines</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>

Preview of the “Push-in through the pupil into the next scene” technique — At 0:03 in the video

Transition

Push-in through the pupil into the next scene

The next scene already plays inside the pupil, shrunk so it reaches exactly 1:1 when the pupil covers the frame (never magnified past that). The camera zooms exponentially into the pupil (ln zoom = 5.5 x^2 / (x + 0.1) over about 0.55 s) and the cut lands on a white flash that decays as 0.94 / (1 + (t / 0.07)^2.5), with radial streaks made by sampling the frame 12 times toward the centre.

When to use Any time one world should open into the next through a hole, a lens or an eye.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Push-in through the pupil into the next scene</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>

Preview of the “Perspective tunnel of icon rings” technique — At 0:05 in the video

Shapes

Perspective tunnel of icon rings

Rings of almond icons placed at depth 1/r = 0.75 k so they crowd toward the centre like a real tube; 18 icons per ring, alternate rings half a cell apart and turning opposite ways. Flying is a shift of the depth index (about 11 rings a second), the far rings melt into a haze, and on every beat a glowing ring leaves the white core and grows with power2.out.

When to use A fast, endless fly-through for a drop or a high-energy section.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Perspective tunnel of icon 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>
#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>

Preview of the “Sheared log-polar spiral of teardrop cells” technique — At 0:12 in the video

Shapes

Sheared log-polar spiral of teardrop cells

Cells sit on 12 log-spiral arms (angle + K ln r constant, K = -1.25) and step 1.5x outward along each arm; every cell is drawn in its arm's own frame, so teardrops, irises and diamonds follow the spiral with double outlines. Zooming toward the centre is a shift of ln r (about 1 per second) and turning is a shift of the angle, both pushed a little on every beat.

When to use A mesmerising vortex that keeps drawing the eye to the centre.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sheared log-polar spiral of teardrop cells</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>

Preview of the “HUD that keeps time and decodes its labels” technique — At 0:04 in the video

Typography

HUD that keeps time and decodes its labels

A broadcast-style frame in small letter-spaced mono type: corner brackets, a name and tagline, a section counter and label that decode letter by letter (each letter resolves left to right over 0.38 s, scrambling through glyphs 30 times a second), a timecode in 60 fps frames, bar.beat.sixteenth at 120 BPM, four beat squares and a progress line.

When to use To frame a reel or showreel with chapters, tempo and a running clock.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HUD that keeps time and decodes its labels</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>

Typography

Glowing grain wordmark with wipe, RGB split and dissolve

The word is drawn once into a mipmapped texture; the shader reads it sharp for the letters with a red/blue split that settles from 10 to 3 px, and at three blur levels for a glow tinted violet, teal and pink from left to right. The letters are filled with grain, wiped in left to right with a soft blurred edge over 0.52 s, and at the end eaten by noise in 0.4 s.

When to use An end card or title that should glow like light burned into the eye.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Glowing grain wordmark with wipe, RGB split and dissolve</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>

More prompts

Preview of the “Living Math Showreel with Glitch Cuts on the Beat” prompt

Living Math Showreel with Glitch Cuts on the Beat

<direction> Make a 20-second motion graphics showreel built entirely from mathematics: every frame is generated from the running time t, with no photos, footage or pictures. Landscape 1920x1080 at 60 fps. It should feel like a precise lab instrument that suddenly becomes beautiful: dark, glowing, exact, with one glitch cut every two seconds on the beat. Eight math scenes play inside a fixed instrument-style frame (corner brackets, wordmark, scene counter and label, beat dot, running clock, progress line, live equation), then an end card with the brand. Avoid grain, stock imagery and any decoration that isn't drawn from the math. </direction> <structure> Cuts at 2, 4, 8, 10, 12, 14, 16 and 18 s, all on beats. 1) 0-2 s, origin: a faint teal ring grows from the centre to r 238 px (0-0.45 s, ease out); axes with ticks every 60 px grow out from a glowing centre point; a ripple ring leaves the point on each beat. A wide-tracked line like "YOUR AI MOTION DESIGNER" resolves from random characters (0.3-0.78 s); a short serif line like "Ideas in motion" types in letter by letter beside the origin (0.5-1.12 s). From 1.35 to 1.95 s a teal arc of r 220 winds once around the origin with a white dot at its tip, and the words fade. 2) 2-4 s, unit circle: a teal circle (r 220) on the left, the angle growing at 4.52 rad/s. White radius, teal cosine leg, pink sine leg, an orange angle arc labelled θ, a dashed pink line to a pink dot at x 820 where the sine is written; the history of the angle trails to the right as a glowing pink sine (104 px per radian) with a faint teal cosine beside it and dotted +1/-1 guides. Live readouts "θ = 4.524 rad" and "sin θ = -0.982". Equation: y = sin θ. 3) 4-8 s, Fourier epicycles: a chain of 180 rotating circles (sorted by size, faint lavender rings, white radii) draws the outline of a big π in glowing orange over 4.3-7.2 s (sine in-out progress), then the shape fills with a soft pink-to-violet gradient while the chain fades. On the left a spectrum of |cₙ| for n = -24...24 (bar heights by the square root of the amplitude) lights up from the centre outward as the drawing progresses; readouts "K = 180 terms" and "t/2π = 0.527". Equation: f(t) = Σ cₙ e^{int}. 4) 8-10 s, a 3D Lissajous knot (sin 3t, sin 2t, sin 5t) traced in 0.6 s, then turning in perspective: a ribbon whose colour runs teal-violet-pink along the curve and whose width and brightness follow depth. On the right a 3x3 grid of small plane Lissajous figures labelled 1:1, 2:3, 4:5, 1:2, 3:4, 5:6, 1:3, 3:5, 3:2 draws in one by one with drifting phase; the last one turns teal inside a thin box. 5) 10-12 s, a wireframe ripple surface z = cos(kr - ωt)/(1 + r) on a 48x48 grid seen from 67° above, revealed outward from the centre in 0.55 s and slowly turning, lines coloured by height from teal through violet to pink. An orange probe dot rides the surface at r = 3.2 with a leader line and live readouts "r = 3.200", "z = 0.276". 6) 12-14 s, a Julia set z² + c filling the frame, opened by a circular portal that expands from the centre with a white rim. c = 0.7885·e^{iα} slides along its circle (sine in-out), so the fractal morphs from separate spirals into a connected shape with a black interior; slow zoom in and rotation. Colours by escape time: indigo, violet, pink, orange, pale cream to white. An inset shows c moving on its circle with "Re c" and "Im c" readouts. 7) 14-16 s, phyllotaxis: 1500 seeds at θₙ = n·137.508°, rₙ = c√n appear from the centre outward and spin, white at first, then pink, violet and teal. On the left φ = 1.6180339887... writes itself digit by digit, a Fibonacci row grows (21 and 34 in teal), with "seeds n = 1500" and "spirals 21 ⟲ 34 ⟳". 8) 16-18 s, Euler's identity: the seeds swirl into a ring that becomes a teal unit circle on the left; a point sweeps from 1 to -1 leaving an orange arc over the top; e^{iπ} appears large, then "+", "1", "=" one by one on the beats, a ring pulses at -1, and "0" lands at 18 s in a pink ring. 9) 18-20 s, end card: the identity shrinks to the top; a big wide-tracked wordmark like "YOUR BRAND" (replace with yours) rises letter by letter from below inside a clip (0.06 s stagger), a teal-violet-pink underline draws across it, a tracked line like "IDEAS IN MOTION × [your web address]" scrambles in, and an italic serif line like "From idea to video in one chat" fades in. Everything fades to black from 19.35 to 19.95 s. </structure> <composition> Background: a deep indigo-black radial glow, centre #10063A fading to #03030A at the edges, no grain. Accents: pink #FB2D89 (main), orange #FE9117, violet #7C6CF2, teal #2DD4B0 and white. Lines and labels in lavender greys: #9A98A4 for labels, #57516F for dim captions, #433E53 for axes. Strokes glow softly with a 12-16 px blur of their own colour. Type: equations in a Computer Modern-like serif (Old Standard TT, variables italic, functions upright); every readout, counter and caption in a monospace (Liberation Mono or similar), small and wide-tracked; the brand name in a bold grotesk with very wide tracking. A fixed frame stays on the whole time, fading in over 0.15-0.9 s: thin corner brackets 27 px long, 47 px in from each corner. Top left: a wordmark like "YOUR BRAND" (bold, 22 px, tracking about 0.35 em) with a tiny tracked line under it like "IDEAS IN MOTION · [your web address]". Top right: a scene counter "01 / 08" and under it a short label per scene, for example "DESCRIBE YOUR IDEA", "EDIT IN WORDS", "NO KEYFRAMES", "3D EFFECTS", "LIVE PREVIEW", "SHAPES AND SOUND", "MUSIC TO THE RHYTHM", "MP4 EXPORT" (replace with your taglines), with a small pink dot to its left. Bottom right: a running clock "t = 03.35 s" (two decimals) and a tiny line with the frame number. Bottom: a 1 px progress line from x 80 to 1840 that fills with a teal-violet-pink gradient as time runs, with small tick marks at every scene boundary. Bottom left: the equation of the current scene. </composition> <techniques> Every cut is a 0.2 s glitch: the outgoing picture is cut into horizontal bands shifted sideways, 3-6 thin full-width lines in teal, pink, orange and white flicker, the whole frame flashes white at about 14% and decays over 0.25 s, and the frame's labels scramble through random characters for a few frames. The pink beat dot flashes bright on every beat and decays over half a beat. The scene's equation fades in 0.1-0.35 s after each cut. Readouts, the clock and the counters update live with the animation. Tracked lines resolve from random characters; serif lines type in letter by letter; the end wordmark rises from below inside a clip with a 0.06 s stagger. Draw-ons and morphs use ease-out or sine in-out progress as given per scene. </techniques> <music> An uplifting electronic track at 120 BPM (piano chords, warm pads, synth bass, four-on-the-floor beat), exactly 20 s long, with every cut landing on a beat. Soft and filtered for the first two seconds with a riser into a boom at 2 s, full drive until 16 s, a filtered breakdown with a riser into a final boom at 18 s, then fading out by 20 s. Mix to about -14 LUFS with true peak below -1 dBTP. </music> <sound> A soft whoosh and three glitch ticks on each cut, and a deeper whoosh and boom when the fractal portal opens at 12 s, all sitting on top of the music on the beat grid. No voice-over. </sound> <references> Math explainer animations crossed with generative creative-coding art and a sci-fi oscilloscope or lab-instrument HUD: thin glowing lines on near-black, monospaced readouts, textbook serif equations. </references>

Low-poly logo assembly with typed name lockup

<direction> Make a 21-second landscape logo reveal, 1920x1080 at 60 fps. It slowly assembles my logo out of low-poly facets and ends on a horizontal lockup with my brand name typed out and a tagline under it. The idea is one long, quiet build with no cuts for fourteen seconds, a release on the music's drop within two seconds, then a calm typed ending. The look is a near-black background with a soft circular vignette, flat brand colours and clean grotesk type. Avoid gradients on the logo, visible seams between the triangles, cuts during the build and anything busy behind the logo. </direction> <structure> 1. 0–2.6 s, the wireframe: a low-poly wireframe of my logo's outline draws itself from the bottom of the logo outward. It has about 35–45 vertices and 90 thin lines. 2. 1.9–13.3 s, the assembly: the logo is cut into about 55 triangles along that wireframe, and they fly in piece by piece from outside the frame. Landings start slow at the bottom of the logo and get denser toward the top. The last piece lands at 13.3 s, and the logo is then complete and exact. Hold the finished logo for about one second. 3. 14.38 s, the flash, exactly on the music's drop. A light burst, an expanding orange ring and a bright flash on the logo all fire together. 0.1 s after the hit, a deep-ink plate grows behind the logo and squares off into an app icon. Hold the centred icon for one second. 4. 15.74–16.15 s, the slide: the icon shrinks to about 42% and moves to the left third, making room for the name. 5. 16.1–21 s, the name: a pink cursor appears to the right of the icon and the name types out, for example "Brand Name" (replace with your brand). At 18.15 s the tagline sweeps in under it, for example "Your tagline here" (replace with yours). The cursor blinks three times on the beat and disappears at 19.9 s. Hold the lockup to the end. </structure> <composition> Background: a near-black radial vignette, #0D0B1E in the centre darkening to #040308 at the corners. Palette: - Deep ink #1C0B5D for the icon plate. - Pink #FB2D89 as the main accent. - Orange #FE9117. - White #FFFFFF. - Light lavender #E9E4F2 and #F0EDFF for lines and soft text. - Violet #7C6CF2 only in the background glow. The logo stays in flat colours with no gradients. Wireframe: lines in lavender #E9E4F2 at 60% opacity, 1.3 px thick; vertex dots in #F0EDFF with a 2.6 px radius. Icon plate: a 676 px circle that becomes a rounded square with a 24% corner radius and a soft drop shadow. Type: the name in a bold grotesk (Golos Text 700, about 155 px, white). The tagline sits under it in a light grotesk (Onest 400, about 49 px, lavender at 74% opacity). Cursor: a pink #FB2D89 bar, 10 x 128 px, with a soft pink glow. The final lockup (icon on the left, name and tagline on the right) is centred as a whole in the frame. </composition> <techniques> Push-in: the opening sits on a very slow push-in about the frame's centre, from scale 0.886 at 0 s to 0.998 at 11 s, then still. Wireframe draw: each line grows linearly from its earlier vertex to its later one in 0.08–0.45 s. A small dot fades in on each vertex as a line reaches it. Fly-in: each piece is one to three triangles. It comes in fast on a curving path and decelerates into place in about 0.5 s, tumbling in 3D. Spin, flip and tilt all ease to zero as it arrives. In flight it is dimmed to about 60% and slightly soft; on landing it is sharp and fully lit. Each triangle shows exactly its part of the flat logo, so the finished assembly is seamless. Glow: a faint pink #FB2D89 glow, under 10% opacity and blooming into violet #7C6CF2, grows behind the logo as it fills. Flash at 14.38 s: - A screen-blended pink-mauve light burst flares around the logo and fades over 0.8 s. - A thin warm-orange ring, 7 px, starts at a 300 px radius and races out of the frame at constant speed in 0.38 s. - The logo flashes bright and settles in 0.3 s. Plate: 0.1 s after the hit, the #1C0B5D plate grows from a dot to the 676 px circle in 0.21 s (sine ease-out). It is lit at first, then its corners square to the 24% radius. Slide: the icon scales to about 42% and moves to the left third in 0.415 s (power3 ease-in-out). It blurs up to 7 px at its fastest and lands sharp. Afterwards it keeps growing very slowly, about 3% over five seconds. Typing: one letter every sixteenth note of the music (0.156 s at 96 BPM). Each letter fades in over 0.05 s while the cursor jumps after it. Tagline: it sweeps in from left to right in about 0.2 s, character by character. </techniques> <music> An instrumental at 96 BPM, hopeful and modern, exactly 21 seconds long. - Start: a soft music-box glockenspiel over warm pads. - Around 4.4 s: a full upbeat arrangement comes in (drums, bass, strings, a bright glockenspiel line). A filter opens up over two bars and builds toward the flash. - 14.38 s: a cymbal crash and a big chord land exactly on the flash. - After the drop: the music box returns over sustained pads under the lockup and fades to silence at 21 s. Keep it on the beat grid so the typing and the cursor blinks fall on sixteenths and beats. </music> <sound> Sound effects on top of the music: - A soft riser into the first triangle landing. - A riser into the flash, then a deep boom and a light glass impact on it. - A short whoosh as the ring races out, and another as the icon slides. - A soft key click for every letter typed, and a faint one when the tagline appears. No voice-over. Overall loudness about -14 LUFS, true peak below -1 dBTP. </sound> <references> A premium tech or app-launch logo sting: a low-poly wireframe-to-solid assembly in the style of a 3D facet build, released on the drop into an app-icon reveal, with a terminal-style typed name lockup. </references>

Preview of the “Beat-synced motion design showreel” prompt

Beat-synced motion design showreel

<direction> Make a 15-second motion design showreel for [your brand], 1920x1080 landscape at 60 fps, entirely drawn: animated type, shapes, particles, a 3D point cloud and a dashboard, no footage. The idea: a fast product reel where every scene change lands on a house beat at 128.57 BPM. One beat is exactly 28 frames (0.4667 s), every cut sits on that grid, and the first big hit lands at 1.867 s (beat 4). The look alternates near-black and light lavender-white scenes, with hot pink as the main accent plus violet and orange. Titles use a heavy grotesque, captions a mono, and the statement a serif italic. A broadcast-style frame sits over the whole reel until a final glitch. Use my logo mark on the end card and replace every quoted text with my own words, keeping each one about the same length so the layout holds. Avoid photos, stock footage, soft generic crossfades and anything that drifts off the beat grid. </direction> <structure> 1. 0–1.85 s, intro on near-black. A thin ruler line (1440 px wide, light at 22 % opacity) grows from its centre at 0.34 s (expo.out, 0.65 s), then 13 ticks appear left to right, one frame apart. A pink 80 px ball falls in from the top left and drifts to the centre (power2.out, 1.25 s). It bounces three times on the ruler, squashing on every impact and stretching in every fall, with a little motion blur when fast. A mono line types in under the ruler, one character every 1.56 frames, followed by a blinking block cursor (example "no keyframes.", replace with yours). At 1.28 s the ball squeezes to 0.8x, then swells on an expo-in curve until it fills the frame pink by 1.82 s. 2. 1.82–3.70 s, four words, one per beat. Each heavy 300 px word sits on its own background with a mono comment line under it (examples "// describe your idea", "// live preview", "// refine in words", "// mp4 export"). Behind them, two rows of outlined 205 px copies of the four words scroll at the top and bottom at 760 px/s in opposite directions. The outlines are stroked in the scene's type colour at 7–14 % opacity. - Word 1 (example "DESCRIBE"), deep indigo on pink: the word lands from 1.39x scale on expo.out (0.33 s) while its letters appear 0.03 s apart with a quick un-blur. - Word 2 (example "PREVIEW"), light on near-black at 2.333 s: tracking closes from 150 px to tight on expo.out (0.45 s), fading in over 3 frames. - Word 3 (example "REFINE"), violet on the light page at 2.8 s: letters rise 340 px from behind a mask line 40 px under the baseline on back.out(2.2), 0.3 s each, 0.035 s apart. - Word 4 (example "EXPORT"), light on violet at 3.267 s: letters pop in on 1/32 notes (3.5 frames apart), each from 0.6x up to a 1.13x hop 50 px high, then settling. 3. 3.46–4.02 s, stripe wipe. Eight 240 px vertical stripes, alternating pink and light page, rise from the bottom (power2.inOut, 0.18 s, 0.7 frame apart, left first). They hold, then keep going up and off, revealing the next scene from below. 4. 3.70–5.60 s, shapes on near-black. A 120 px grid of small muted rounded squares (one fifth are outlines) with tiny crosses between them. A wave leaves the centre on every beat (3.73, 4.2, 4.67 and 5.13 s) at 2000 px/s. Where its front passes, each cell grows from 42 to 74 px, rounds towards a circle, turns 38 degrees and goes pink. The first wave reveals the grid, and the grid slowly rotates anticlockwise, faster and faster. After the last wave the cells empty out and fade by 5.47 s. 5. 5.55–7.42 s, particles. A white flash point with a thin shock ring appears at 5.62 s, then 7000 tiny squares burst from the centre. They gather into one huge 590 px word (example "IDEA") coloured across its width from orange to lavender to violet, shimmering by a pixel. From 7.0 s they stream off to the right with streaks, the left of the word first. A soft pink radial glow sits behind. 6. 7.42–9.45 s, 3D on a deep indigo radial background. A Fibonacci sphere of 1700 points (radius 362 px) turns slowly over a perspective floor of thin violet lines whose rows creep towards the viewer. Points are pink or violet, bigger and brighter in front. From 8.12 s every point travels to its place on a (2,3) torus knot (cubic in-out, random delays up to 0.16 s), and the knot keeps turning. 7. 9.08–9.65 s, a second stripe wipe like scene 3, in violet, pink and light page. 8. 9.27–11.1 s, dashboard on the light page with faint vertical guide lines. - Steps: three rows of 180 px heavy step numbers count up on expo.out ("01", "02", "03", the third in pink) with mono captions (example "PICK A TEMPLATE"). Each row rises into its own clipped box, 0.08 s apart. - Card: a white card (880x740, 26 px corner radius, soft indigo shadow) lifts in 90 px (power3.out, 0.45 s). It holds a bold lowercase title, a small "LIVE" pill, and a ring that fills on power3.out with a short label inside. - Chart: fourteen orange bars grow from the base 0.031 s apart, the last one solid pink. A violet line draws itself over them on sine.inOut (0.72 s), with a dot, a halo and a dark tag riding its head (example "No keyframes"). 9. 10.96–11.45 s, bar wipe. Eight horizontal bands, alternating near-black and pink, sweep in from the left (power3.inOut, 0.2 s, one frame apart, top first) and carry on out to the right. 10. 11.07–13.07 s, statement on near-black. Four bundles of 28 hair-thin lines flow across the frame as ribbons, blended additively: pink to orange at the top, then pink to violet, violet, and violet to pink at the bottom. A two-line statement in 290 px serif italic comes in letter by letter. Each letter moves up 36 px and un-blurs over 0.16 s, 0.02 s apart on line one and 0.035 s apart on line two. Line one is light and starts at x 334 (example "Ideas in"); line two is pink and ends at x 1438 (example "motion."). 11. 12.73–13.07 s, glitch. Slices of the type jump sideways, the frame inverts twice, small violet, yellow and pink blocks flicker, and the type splits into pink and teal. The broadcast frame and its counters disappear. 12. 13.07–15.0 s, end card on near-black. - A pale flash dies away (0.26 s). - A heavy 260 px wordmark ("[your brand]") rises letter by letter from behind its baseline (back.out(1.6), 0.32 s, 0.05 s apart). - My logo mark drops in from above like the intro ball, squashes on landing at 13.51 s and settles as the wordmark's full stop. - A thin rule draws under the lockup (power3.out, 0.3 s). - A widely tracked mono line decodes under it from scrambled pink characters to light letters (13.76–14.6 s). - A pink serif italic call to action fades up at 14.33 s (example "try it free."). - A dim row of four short features fades in at the bottom. Hold the end card to 15 s. </structure> <composition> - Palette: - Near-black #0D0B1E for dark backgrounds. - Deep indigo #1C0B5D for dark type and the 3D scene. - Light page #FAF9FF for light backgrounds and light type. - Lavender #F0EDFF for soft panels. - Muted #6B6385 for captions, and #E9E4F2 for lines. - Accents: main pink #FB2D89, second violet #7C6CF2, warm orange #FE9117, plus white. - Yellow #FFD23F and teal #2DD4B0 only as glitch flecks. - If I give brand colours, swap them in by role. - Fonts: Roboto Flex at weight 900 with tight tracking (-0.035 em) for every title. JetBrains Mono for the frame, captions and comment lines. Instrument Serif Italic for the two-line statement and the call to action. - A soft side vignette, darker only at the left and right edges: about -8 % at mid-edge and -12 % in the corners. - A broadcast-style frame over everything until the glitch: - 26 px corner brackets. - A title top left (example "[YOUR BRAND] / YOUR TAGLINE"). - A running timecode top right (00:00:SS:FF at 60 fps). - The current chapter name bottom left. - A frame counter "NNN / 900" with a 300 px progress bar bottom right. - Every part is light at 0.9 opacity in exclusion blend, so it turns dark on light scenes and tinted on pink or violet. The frame fades in at 0.3 s. </composition> <techniques> - Every scene change sits on the 28-frame beat grid. Scenes and wipes overlap by a few frames, so no frame is ever empty. - Vary the transitions: the ball swelling into the next background, hard colour cuts between the four words, vertical stripe wipes, a horizontal bar wipe, a flash with a shock ring, and an RGB-split glitch into the end card. - Give the ball and the logo mark physical motion: squash on impact, stretch in the fall, slight motion blur at speed. - Use letter-by-letter entrances throughout, each word with its own ease (expo.out landings, back.out rises from a mask, pops on 1/32 notes), un-blurring as the letters arrive. - Keep everything crisp and vector: particles, points and lines are tiny and sharp, and the glows stay soft and behind the type. </techniques> <music> Make an original house bed at 128.57 BPM, exactly 15 s long, laid on the beat grid. - Intro: an airy pad with bubbly plucks. - From the hit at 1.867 s: the full groove, with a four-on-the-floor kick, claps, hats and sidechained bass. - End: a riser and glitch into one big final hit at 13.07 s, then the closing chord ringing out to 15 s. </music> <sound> On top of the bed, add hits composed for the cut: - a riser into a boom on the 1.867 s fill - short whooshes peaking on each word cut and each wipe - soft clicks on the shape waves - a small boom and a glass tick on the particle flash - a streak whoosh as the particles leave - a sub drop into the 3D scene - a riser and digital glitch ticks into the final boom at 13.07 s - a bell as the logo mark lands at 13.51 s No voice-over. Mix to about -14 LUFS, true peak below -1 dBTP. </sound> <references> A tech product launch showreel in the vein of sleek animated brand reels: a broadcast HUD overlay, kinetic typography, generative particles, a rotating 3D point cloud and a clean UI dashboard. </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