your AI motion designer

EN

Simple Motion

Living Math Showreel with Glitch Cuts on the Beat

A 20-second glowing math showreel: sine wave, Fourier π, 3D knot, ripple surface, fractal, sunflower spiral and Euler's identity, glitch-cut on the beat.

Published 10 November 2026

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

Report this prompt

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.

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.

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.

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.

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.

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.

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.

What to prepare

Your brand name, a short tagline for each of the eight scene labels and the end card, and your web address.

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 “Glitch cut: sliced bands, colour lines and a white flash” technique — At 0:02 in the video

Transition

Glitch cut: sliced bands, colour lines and a white flash

The outgoing and incoming scenes are drawn to an offscreen canvas; for 0.13 s around the cut it is copied back in horizontal bands 18-128 px tall, about half shifted sideways by up to 70 px (seeded by the frame number, shrinking to zero). 3-6 full-width lines of 1-2 px in teal, pink, orange and white flicker for 0.15 s, and a white layer at 14% decays linearly over 0.25 s.

When to use A hard cut that feels digital and energetic, every two seconds 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>Glitch cut: sliced bands, colour lines and a white flash</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%;background:#03030a;overflow:hidden}#c{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="c" class="clip" data-start="0" data-duration="4" width="1920" height="1080"></canvas></div>
<script>
const W=1920,H=1080,TAU=Math.PI*2,c=document.getElementById('c'),X=c.getContext('2d');
const clamp=(v,a=0,b=1)=>Math.min(b,Math.max(a,v)),seg=(t,a,b)=>clamp((t-a)/(b-a)),sio=u=>(1-Math.cos(Math.PI*u))/2;
const L=document.createElement('canvas');L.width=W;L.height=H;const S=L.getContext('2d');
const CUT=2.0, SLICE=0.13, LINES=0.15, FLASH=0.25, FLASH_ALPHA=0.137; // cut time and glitch phases (s)
const COLORS=['#2DD4B0','#FB2D89','#FE9117','#FFFFFF'];
function rng(a){return()=>{a=(a+0x6d2b79f5)|0;let t=Math.imul(a^(a>>>15),1|a);t=(t+Math.imul(t^(t>>>7),61|t))^t;return((t^(t>>>14))>>>0)/4294967296;};}
function sceneA(g,t){g.strokeStyle='#2DD4B0';g.lineWidth=4;g.shadowColor='#2DD4B0';g.shadowBlur=16;g.beginPath();g.arc(960,540,220,0,-Math.min(1,t/1.8)*TAU,true);g.stroke();}
function sceneB(g,t){g.strokeStyle='#FB2D89';g.lineWidth=5;g.shadowColor='#FB2D89';g.shadowBlur=16;g.beginPath();for(let x=200;x<=1720;x+=4){const y=540-220*Math.sin((x-200)/104-(t-CUT)*4.5);x===200?g.moveTo(x,y):g.lineTo(x,y);}g.stroke();}
function draw(t){const fr=Math.round(t*60),u=t-CUT;X.fillStyle='#03030a';X.fillRect(0,0,W,H);S.clearRect(0,0,W,H);S.save();(t<CUT?sceneA:sceneB)(S,t);S.restore();
 if(u>-0.04&&u<SLICE){const amp=u<0?0.6:1-u/SLICE,r=rng(fr*13+1);let y=0;while(y<H){const h=18+(r()*110|0),dx=r()<0.55?(r()*2-1)*70*amp:0;X.drawImage(L,0,y,W,h,dx,y,W,h);y+=h;}}else X.drawImage(L,0,0);
 if(u>=0&&u<FLASH){X.fillStyle=`rgba(255,255,255,${FLASH_ALPHA*(1-u/FLASH)})`;X.fillRect(0,0,W,H);}
 if(u>-0.04&&u<LINES){const r=rng(fr*7+3),n=3+(r()*4|0);for(let i=0;i<n;i++){X.globalAlpha=0.35+0.5*r();X.fillStyle=COLORS[r()*4|0];X.fillRect(0,r()*H|0,W,r()<0.7?1:2);}X.globalAlpha=1;}}
const tl=gsap.timeline({paused:true});const st={t:0};tl.to(st,{t:4,duration:4,ease:'none'},0);
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 “Fourier epicycles drawing a closed outline” technique — At 0:05 in the video

Shapes

Fourier epicycles drawing a closed outline

A closed outline is resampled to 180 points and turned into 180 Fourier terms; the circles are chained largest first from the centroid, each turning n times per lap, and the tip leaves a glowing trail. Progress runs sine in-out over about 3 s, faint rings and white radii show the machine, and the outline fills with a soft gradient once it closes while the chain fades.

When to use To draw any logo, glyph or path as if a machine of circles were tracing it.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fourier epicycles drawing a closed outline</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%;background:#03030a;overflow:hidden}#c{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="c" class="clip" data-start="0" data-duration="4" width="1920" height="1080"></canvas></div>
<script>
const W=1920,H=1080,TAU=Math.PI*2,c=document.getElementById('c'),X=c.getContext('2d');
const clamp=(v,a=0,b=1)=>Math.min(b,Math.max(a,v)),seg=(t,a,b)=>clamp((t-a)/(b-a)),sio=u=>(1-Math.cos(Math.PI*u))/2;
const POLY=[[700,300],[1500,300],[1500,400],[1320,400],[1320,820],[1440,780],[1460,860],[1300,920],[1220,880],[1220,400],[960,400],[900,820],[780,920],[700,880],[800,760],[860,400],[700,400]]; // any closed outline
const N=180, DRAW=[0.3,3.2]; // terms, drawing window (s)
function resample(p,n){const seg=[];let L=0;for(let i=0;i<p.length;i++){const a=p[i],b=p[(i+1)%p.length],l=Math.hypot(b[0]-a[0],b[1]-a[1]);seg.push([a,b,l]);L+=l;}const out=[];for(let k=0;k<n;k++){let d=k*L/n;for(const[a,b,l]of seg){if(d<=l){out.push([a[0]+(b[0]-a[0])*d/l,a[1]+(b[1]-a[1])*d/l]);break;}d-=l;}}return out;}
const S=resample(POLY,N),CO=[];for(let n=-N/2;n<N/2;n++){let re=0,im=0;S.forEach(([x,y],k)=>{const a=-TAU*n*k/N;re+=x*Math.cos(a)-y*Math.sin(a);im+=x*Math.sin(a)+y*Math.cos(a);});CO.push({n,re:re/N,im:im/N,a:Math.hypot(re,im)/N});}
const C0=CO.find(c=>c.n===0),CH=CO.filter(c=>c.n!==0).sort((a,b)=>b.a-a.a);
const at=u=>{let x=C0.re,y=C0.im;for(const c of CH){const a=TAU*c.n*u;x+=c.re*Math.cos(a)-c.im*Math.sin(a);y+=c.re*Math.sin(a)+c.im*Math.cos(a);}return[x,y];};
const PATH=[];for(let i=0;i<=600;i++)PATH.push(at(i/600));
function draw(t){const u=sio(seg(t,DRAW[0],DRAW[1])),fill=seg(t,3.2,3.6),chain=1-seg(t,3.25,3.8);X.fillStyle='#03030a';X.fillRect(0,0,W,H);
 if(fill>0){X.beginPath();PATH.forEach(([x,y],i)=>i?X.lineTo(x,y):X.moveTo(x,y));const g=X.createLinearGradient(700,300,1460,920);g.addColorStop(0,'rgba(251,45,137,.3)');g.addColorStop(1,'rgba(124,108,242,.3)');X.globalAlpha=fill;X.fillStyle=g;X.fill();X.globalAlpha=1;}
 if(chain>0){let x=C0.re,y=C0.im;X.lineWidth=1;for(const c of CH.slice(0,48)){const a=TAU*c.n*u,nx=x+c.re*Math.cos(a)-c.im*Math.sin(a),ny=y+c.re*Math.sin(a)+c.im*Math.cos(a);X.strokeStyle=`rgba(150,140,210,${0.22*chain})`;X.beginPath();X.arc(x,y,c.a,0,TAU);X.stroke();X.strokeStyle=`rgba(255,255,255,${0.75*chain})`;X.beginPath();X.moveTo(x,y);X.lineTo(nx,ny);X.stroke();x=nx;y=ny;}}
 const n=Math.floor(u*600);if(n>0){X.beginPath();for(let i=0;i<=n;i++){const[x,y]=PATH[i];i?X.lineTo(x,y):X.moveTo(x,y);}X.strokeStyle='#FE9117';X.lineWidth=4.5;X.lineJoin='round';X.shadowColor='#FE9117';X.shadowBlur=16;X.stroke();X.shadowBlur=0;}}
const tl=gsap.timeline({paused:true});const st={t:0};tl.to(st,{t:4,duration:4,ease:'none'},0);
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 “Unit circle feeding a scrolling sine trace” technique — At 0:03 in the video

Data

Unit circle feeding a scrolling sine trace

A point turns on a glowing circle at a constant angular speed; its cosine and sine legs are drawn as coloured segments and a dashed line carries its height to a dot at the start of a graph. The whole history of the angle trails to the right at about 104 px per radian, so the sine grows out of the circle in real time, with a faint cosine beside it and live readouts.

When to use To explain a periodic signal, a rhythm or any value that cycles.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Unit circle feeding a scrolling sine trace</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%;background:#03030a;overflow:hidden}#c{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="c" class="clip" data-start="0" data-duration="4" width="1920" height="1080"></canvas></div>
<script>
const W=1920,H=1080,TAU=Math.PI*2,c=document.getElementById('c'),X=c.getContext('2d');
const clamp=(v,a=0,b=1)=>Math.min(b,Math.max(a,v)),seg=(t,a,b)=>clamp((t-a)/(b-a)),sio=u=>(1-Math.cos(Math.PI*u))/2;
const CX=500,CY=540,R=220,X0=820,K=103.8,OMEGA=4.524; // circle, graph start, px per radian, rad/s
function draw(t){const th=OMEGA*t,px=CX+R*Math.cos(th),py=CY-R*Math.sin(th);X.fillStyle='#03030a';X.fillRect(0,0,W,H);X.lineCap='round';
 X.fillStyle='#433E53';X.fillRect(180,539,1640,2);X.fillRect(499,230,2,620);
 const glow=(col,w,b)=>{X.strokeStyle=col;X.lineWidth=w;X.shadowColor=col;X.shadowBlur=b;X.stroke();X.shadowBlur=0;};
 X.beginPath();X.arc(CX,CY,R,0,TAU);glow('#2DD4B0',3,16);
 X.beginPath();X.arc(CX,CY,52,0,-Math.min(th,TAU),true);glow('#FE9117',2.2,6);
 X.beginPath();X.moveTo(CX,CY);X.lineTo(px,CY);glow('#2DD4B0',4,8);X.beginPath();X.moveTo(px,CY);X.lineTo(px,py);glow('#FB2D89',4,8);
 X.beginPath();X.moveTo(CX,CY);X.lineTo(px,py);glow('#FFFFFF',2,0);
 X.setLineDash([5,6]);X.beginPath();X.moveTo(px,py);X.lineTo(X0,py);glow('rgba(251,45,137,.7)',1.5,0);X.setLineDash([]);
 const span=Math.min(th,(1820-X0)/K);
 for(const[fn,col,w,b]of[[Math.cos,'rgba(45,212,176,.45)',1.6,0],[Math.sin,'#FB2D89',4,14]]){X.beginPath();for(let d=0;d<=span;d+=0.02){const x=X0+K*d,y=CY-R*fn(th-d);d===0?X.moveTo(x,y):X.lineTo(x,y);}glow(col,w,b);}
 X.fillStyle='#FFFFFF';X.beginPath();X.arc(px,py,7,0,TAU);X.fill();X.fillStyle='#FB2D89';X.beginPath();X.arc(X0,py,7,0,TAU);X.fill();
 X.font='18px monospace';X.fillStyle='#ABA6BB';X.fillText('θ = '+th.toFixed(3)+' rad',281,839);X.fillText('sin θ = '+Math.sin(th).toFixed(3),281,869);}
const tl=gsap.timeline({paused:true});const st={t:0};tl.to(st,{t:4,duration:4,ease:'none'},0);
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 “Phyllotaxis seed field that swirls into a ring” technique — At 0:16 in the video

Particles

Phyllotaxis seed field that swirls into a ring

1500 seeds sit at angle n·137.508° and radius c·√n; they appear from the centre outward with an ease-out count, spin, and turn from white to a pink-violet-teal cycle. On cue each seed moves in polar coordinates (centre, radius and angle interpolated with a cubic in-out and a small stagger by n) onto a smaller circle elsewhere, then the dots give way to a solid stroke.

When to use Organic growth that resolves into a clean shape: a reveal, a logo ring or a loading state.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Phyllotaxis seed field that swirls into a ring</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%;background:#03030a;overflow:hidden}#c{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="c" class="clip" data-start="0" data-duration="4" width="1920" height="1080"></canvas></div>
<script>
const W=1920,H=1080,TAU=Math.PI*2,c=document.getElementById('c'),X=c.getContext('2d');
const clamp=(v,a=0,b=1)=>Math.min(b,Math.max(a,v)),seg=(t,a,b)=>clamp((t-a)/(b-a)),sio=u=>(1-Math.cos(Math.PI*u))/2;
const GA=137.508*Math.PI/180,N=1500,C=10.6,COLS=['#FB2D89','#7C6CF2','#5A4CE0','#2DD4B0','#7C6CF2']; // golden angle, count, spacing
const io=u=>u<.5?4*u*u*u:1-Math.pow(-2*u+2,3)/2;
function draw(t){X.fillStyle='#03030a';X.fillRect(0,0,W,H);const count=Math.floor(N*(1-Math.pow(1-seg(t,0,1.4),2))),spin=0.9*t,col=seg(t,1.3,1.6);
 for(let n=1;n<=count;n++){const r=C*Math.sqrt(n),a0=n*GA+spin;let x=960+r*Math.cos(a0),y=540+r*Math.sin(a0);
  const u=io(seg(t,2.1+n/N*0.2,2.5+n/N*0.2));if(u>0){const a1=n/N*TAU*3+Math.PI,cx=960-400*u,cy=540-60*u,rr=r+(191-r)*u,aa=a0+(a1-a0)*u+1.2*u;x=cx+rr*Math.cos(aa);y=cy+rr*Math.sin(aa);}
  const al=1-seg(t,2.75,2.9);if(al<=0)continue;X.globalAlpha=al;X.fillStyle=col>0.5?COLS[n%5]:'#E1DEEB';X.beginPath();X.arc(x,y,2+2*Math.sqrt(n/N),0,TAU);X.fill();}
 X.globalAlpha=seg(t,2.7,2.9);X.strokeStyle='#2DD4B0';X.lineWidth=2.6;X.shadowColor='#2DD4B0';X.shadowBlur=12;X.beginPath();X.arc(560,480,191,0,TAU);X.stroke();X.shadowBlur=0;X.globalAlpha=1;}
const tl=gsap.timeline({paused:true});const st={t:0};tl.to(st,{t:4,duration:4,ease:'none'},0);
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>

Typography

Wordmark letters rising through a clip, with a drawn gradient rule

Each letter of a wide-tracked bold wordmark sits in its own clip box and rises from one cap height below (0.36 s, power3.out, 0.06 s stagger); a 3 px teal-violet-pink rule draws across under it (0.4 s, power3.inOut), a tracked monospace tagline resolves from random characters and an italic serif line fades in last.

When to use An end card or a title that should land letter by letter with confidence.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wordmark letters rising through a clip, with a drawn gradient rule</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=Inter:wght@700&family=JetBrains+Mono&family=Old+Standard+TT:ital@1&display=swap");#root{position:relative;width:100%;height:100%;background:radial-gradient(circle at 50% 50%,#10063a 0,#03030a 800px);overflow:hidden}#card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#eae7f9}#word{font:700 170px/1 Inter,sans-serif;letter-spacing:.16em;margin:0 0 30px .16em;display:flex}#word span{display:inline-block;clip-path:inset(0 -0.2em 0 -0.2em)}#word i{display:inline-block;font-style:normal}#rule{width:1200px;height:3px;background:linear-gradient(90deg,#2DD4B0,#7C6CF2,#FB2D89);transform-origin:0 50%}#tag{font:400 17px "JetBrains Mono",monospace;letter-spacing:.55em;white-space:pre;margin:40px 0 0}#motto{font:italic 400 34px "Old Standard TT",serif;color:#bdb6d6;margin:26px 0 0}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080"><div id="card" class="clip" data-start="0" data-duration="3"><h1 id="word"></h1><div id="rule"></div><p id="tag">IDEAS IN MOTION   ×   STUDIO.APP</p><p id="motto">From idea to video in one chat</p></div></div>
<script>
const WORD='STUDIO NAME', TAG=document.getElementById('tag').textContent, G='ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#%&*+=';
const word=document.getElementById('word');[...WORD].forEach(ch=>{const s=document.createElement('span');const i=document.createElement('i');i.textContent=ch===' '?'\u00a0':ch;s.appendChild(i);word.appendChild(s);});
const tl=gsap.timeline({paused:true});
tl.fromTo('#word i',{yPercent:110},{yPercent:0,duration:0.36,ease:'power3.out',stagger:0.06},0.05); // rise per letter
tl.fromTo('#rule',{scaleX:0},{scaleX:1,duration:0.4,ease:'power3.inOut'},0.55);
const sc={p:0};tl.fromTo(sc,{p:0},{p:1,duration:0.4,ease:'power2.out',onUpdate:()=>{const k=Math.floor(sc.p*TAG.length);let o='';for(let i=0;i<TAG.length;i++){const c=TAG[i];o+=i<k||c===' '?c:G[(i*7+Math.round(tl.time()*60)*13)%G.length];}document.getElementById('tag').textContent=o;}},0.5);
tl.fromTo('#tag',{opacity:0},{opacity:1,duration:0.1},0.45);
tl.fromTo('#motto',{opacity:0},{opacity:1,duration:0.28,ease:'none'},0.72);
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

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>

Preview of the “Seamless 15-second app showreel in pure motion graphics” prompt

Seamless 15-second app showreel in pure motion graphics

<direction> Make a 15-second horizontal motion graphics showreel for my app, 1920x1080 at 60 fps. Everything is drawn graphics with no footage. The only thing I bring is my app's logo mark (a rounded-square app icon). The idea is one continuous move where every section hands its last object to the next one. A dot becomes the logo, the logo becomes the name, the letters become dots, the dots become racing balls, a ball floods the frame, a shape breaks into tiles, the tiles become a 3D point cloud, and then come kinetic words and an end card. Each section shows off one motion skill. Use flat colours, crisp vector shapes and a camera-viewfinder HUD over everything, with cuts locked to a 128 BPM track. Avoid footage, gradients and textures, voice-over, and any section that starts from nothing instead of growing out of the previous one. </direction> <structure> 1. 0–1.9 s, near-black: a pink dot sits in a thin grey ring, and the ring opens with expo.out. A second ring rolls out to a faint large circle (0.45 s, expo.out). At 0.5 s my logo mark grows out of the dot, its layers popping in one after another with back.out. It settles bigger at 0.92 s while turning gently. A thin pink ring of circling mono text ("APP NAME · IDEAS IN MOTION · APPNAME.APP ·", replace with yours) appears around it and turns slowly. At 1.7 s the mark shrinks with a little blur back into a small light dot. 2. 1.9–3.5 s: on the drop at 1.93 s two discs burst out of the dot, light first and pink 30 ms behind it (expo.out, 0.3 s), so a thin light ring rides the pink edge. My app's name in the wide grotesque rises letter by letter from the baseline: each letter is clipped to its own box, with a 30 ms stagger and 0.26 s expo.out. The name always fills the same 1640 px width. A thin dark rule draws out from the centre above it, with "01" typing in on the left and my web address on the right. From 2.55 s a width wave runs through the letters: each one squeezes from 150% to about 55% width and back over 0.6 s, 0.1 s after the previous one. The word is refitted to 1640 px every frame, so narrow letters grow taller. At 2.84 s a light serif italic tagline ("ideas in motion") rises word by word under it. At 3.3 s the letters collapse into dark dots and the tagline drops out. 3. 3.5–5.6 s: a diagonal light wipe comes from the bottom right (0.16 s). Six dark dots swoop in a curve to the start of six rows (power2.inOut, staggered) and take the row colours. A serif italic title types in from the left ("Chat instead of a timeline."), with a mono note at the right ("NO KEYFRAMES · LIVE PREVIEW") and track labels "IDEA" and "MP4" at the two ends. - Each row has a pink number, a mono name ("animated type", "shapes", "transitions", "3D effects", "sound", "live preview"), a tiny curve icon that draws itself, and a track line drawing from left to right. - At 4.215 s six balls (dark, violet, pink, repeating) race 1040 px in exactly 0.94 s, each with its own ease: linear, power2.inOut, expo.out, back.out(1.7), elastic.out(1, 0.3) and bounce.out. - Ticks above each track mark where the ball was at every 1/16 of the run. Three fading ghost rings trail each ball, the balls stretch along their speed, a dot rides each curve icon in sync, and each ball gets an outline halo when it arrives. - At 5.3 s the rows fade, the balls fly into the centre and merge, and the violet one swells to fill the frame. 4. 5.6–7.5 s, violet: a light circle springs up from a dot (elastic.out, 0.45 s). Twelve satellite dots shoot out to an orbit (expo.out, 12 ms apart). - Behind them sit thin crosshair guide lines, a dotted orbit circle with tick marks and the labels "270°" and "90°". - Mono readouts sit at the sides: "SHAPES NO KEYFRAMES" on the left, and quoted edit requests on the right ("“BIGGER” “SLOWER”", "“ANOTHER COLOUR”"). - Pink ripple rings pulse around the circle. - The shape then morphs circle → triangle → star → square. Each morph takes 0.26–0.3 s on back.out(2.2) with a 120° turn, and pink echo outlines trail the shape only while it spins. - The satellites morph a beat later, one after another, and vanish at 7.22 s. It settles as an upright 360 px square. 5. 7.5–9.75 s, near-black: the square splits into nine 120 px tiles. A truchet maze grows ring by ring to fill the frame (back.out, about 30 ms per ring); each tile holds two quarter-circle arcs in opposite corners, drawn as 20 px light lines. Pink waves cross it: first two bands sweeping from left to right, then a ring closing in on the centre. Tiles inside a wave turn by 90 or 180 degrees, shrink to 80% and go pink, so the lines break into dashes, then return once the band has passed. A small mono label types in at the bottom ("SHAPES · TRANSITIONS · NO KEYFRAMES"). From 9.45 s the tiles collapse from the centre outwards. 6. 9.5–11.25 s: a 24 x 24 grid of points appears where the tiles were, seen from above. It tilts into a perspective plane and folds into a sphere, a vase, a squashed blob and a torus while turning about its vertical axis. Between shapes it moves on power2.inOut, with faint lines between neighbours, about one point in nine pink, and points dimmer with depth. A mono label sits below ("3D EFFECTS · LIVE PREVIEW · MP4 EXPORT"). It zooms through the camera and fades at 11 s. 7. 11.25–13.0 s, kinetic words: one word every 0.23 s, each on its own flat background and each filling the width in a different width of the same font. Replace the six words with your own phrase. - "IDEA": dark on pink, slides in from the left, scale 1.3 to 1, blur clearing in 0.14 s. - "IN.": light on near-black with a pink full stop, in from the right with blur, and a small mono note at the top left ("EDIT IN WORDS ↗"). - "VIDEO": ultra-condensed violet on the light page, letters rising from below 25 ms apart. - "OUT.": light on violet, in from the left with blur, with a note at the top right ("↘ MP4 EXPORT"). - "NO": dark on yellow. The letters drop in at angles with back.out, then outlined copies of the word fill rows above and below and scroll in alternate directions while the main row drifts left. - "KEYFRAMES.": light on near-black, sliding left at a constant speed with a thin diagonal line, then leaving fast with blur. 8. 13.0–15 s, end card: pink floods in from the right and a light ring rolls out from the centre (0.42 s). My logo mark spins in at the centre (back.out) with a small confetti burst of dots, rings and triangles in dark, light and violet, then moves to the left of the lockup. My app's name drops in letter by letter beside it, blurred to sharp, 0.22 s each. A serif italic tagline rises under it ("your AI motion designer"). A rule draws, and a mono line types in under it: "PICK A TEMPLATE · DESCRIBE YOUR IDEA · MP4 EXPORT", a small record dot, then my web address at the right. Hold for the last second. </structure> <composition> Palette, all flat: - deep near-black #0d0b1e - hot pink #fb2d89 (the main accent) - light page #faf9ff - soft violet #7c6cf2 - warm yellow #ffd23f, for one kinetic cut only Fonts: - A wide variable grotesque with a width axis (Anybody, weight 900, width 50–150%) for the name and the kinetic words. - A condensed editorial serif italic (Instrument Serif Italic) for titles and taglines. - A mono (JetBrains Mono) for the interface labels, 14 px, letter-spacing 0.16em. A camera-viewfinder HUD sits over the whole video: - Thin 2 px corner brackets, 44 px in from each corner. - Top left: my app's name in bold mono caps with a dimmer tagline after it ("APP NAME IDEAS IN MOTION"). - Top right: the current section label ("01 — APP NAME", "02 — NO KEYFRAMES", "03 — SHAPES", "04 — EDIT IN WORDS", "05 — 3D EFFECTS", "06 — KINETIC TYPE", "07 — TRY IT FREE"). - Bottom left: a running timecode with frames ("00:00:03:09") and a short tagline ("LIVE PREVIEW"). - Bottom right: another tagline ("NO KEYFRAMES"), four small squares that light up one per beat, and "MP4". - Along the bottom edge: a 2 px progress line growing with the time. The HUD switches between dark and light ink on every cut so it reads on any background. All on-screen words are examples to replace with your own. </composition> <techniques> - Every section ends on an object the next one grows from: dot to logo, logo back to dot, discs to name, letters to dots, dots to balls, ball to violet flood, square to tiles, tiles to point grid, point cloud zooming through the camera into the kinetic words. - Each new HUD section label types itself in over 0.3 s, with random glyphs running ahead of the cursor. The other mono lines type in too. - Variable-width type: animate each letter's width axis and refit the whole word to a fixed width every frame. - Letter reveals are clipped to each letter's own box. - Use light motion blur on fast moves only, and a faint violet colour fringe on the big iris wipe. - Echo outlines, ghost rings and halos are thin pink or matching-colour strokes that fade quickly. </techniques> <music> Energetic electronic synth-pop at 128 BPM, beat one at 0.06 s, exactly 15 s long: - Soft bell-like pad chords in the first bar. - After the drop at 1.93 s, a four-on-the-floor kick with claps on 2 and 4, off-beat hats, a punchy synth bass and short chord stabs under the sections. - A break from about 10 s that builds into the kinetic section. - A ringing final pad chord on the end card. Sections change on bar lines, the name lands on the drop at 1.93 s, and the kinetic word cuts sit on eighth notes. </music> <sound> No voice. Hits on top of the music: - a riser through the first bar - a boom on the drop at 1.93 s - a riser from about 10 s into a punch hit at 11.25 s - a kick and a short whoosh on every kinetic word cut - a cymbal crash at 12.71 s - a boom with the ringing pad chord as the end card lands - a small blip at 14.1 s The music carries the track and the hits land clearly on top. </sound> <references> A motion designer's showreel crossed with a tech product launch sizzle. It combines a camera-viewfinder overlay, bold Swiss-style kinetic typography, easing-curve demonstrations, generative truchet tile patterns and a rotating 3D point cloud. </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