your AI motion designer

EN

Simple Motion

Self-Demonstrating Motion Principles Showreel

A fully drawn 15-second showreel where a pink dot bounces, titles spring from the floor, an easing graph bends and a loader fills, cut to 128 BPM.

Published 10 November 2026Used 3 times

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

Report this prompt

Direction

Make a 15-second landscape motion graphics showreel, 1920x1080 at 30 fps, fully drawn with no footage, that shows off animation craft by demonstrating the principles of motion on itself: squash and stretch, onion skin, overshoot, easing, follow-through and anticipation. It alternates light and dark scenes. One pink dot ties every scene together: a bouncing ball, the period of a title, the head of a trail, the centre of a loader. Small handwritten notes with hand-drawn arrows comment on what is happening. Cut it to a 128 BPM track so the ball's contacts, the title drop and the cuts land on beats. Use flat colour throughout; it should feel playful and precise. Avoid footage or photos, glossy gradients and drop shadows, blur anywhere except the whip pan, arrows that touch the letters of their notes, notes with different tilts, and extra drums layered on top of the music's own.

Structure

0-3.7 s, light page. A hand-drawn floor line draws itself left to right in 0.3 s. A pink ball drops in from the top left and bounces across in three shrinking arcs. Its contacts fall one beat apart, at 0.43, 0.90, 1.37 and 1.83 s. It squashes flat on each contact (about 1.5 wide by 0.55 tall) and stretches along its speed in the air. Every frame of flight leaves a thin pink outline ghost that fades over 0.6 s, and a dotted line traces the path. Notes write on with arrows (examples to replace): "ideas in motion" at the top of the first arc, "try it free!" under the second contact, "live preview" by the last arc. The ball lands at the right and stays as the title's period. On the downbeat at 1.9 s the big word "MOVE" grows out of the floor letter by letter, right to left, 45 ms apart. Each letter rises from behind the floor line, stretches to 1.2 times its height, hops 45 px clear of the floor, lands with a small squash and settles in half a second. The floor line then retracts. The line above, "READY TO" (replace with yours), drops in letter by letter from the left; each letter is tilted up to 20 degrees and straightens with a slight overshoot. A pink brush underline draws under MOVE, and a note "edit in words" points at the top line. At 2.8 s a wave runs through the letters of MOVE, left to right, each stretching 11 percent and back. At the same moment the dot hops 95 px and lands with a squash, and "MP4 export" is written under it. In the last 0.2 s the whole title squashes down onto its baseline (88 percent tall, 106 percent wide), then hard cut.
3.7-5.5 s, dark page. "SHAPES" in white drops in letter by letter, one frame apart, each letter bouncing twice before it settles; note "and sound". At 4.2 s it is squeezed in one frame into a narrow sliver and becomes "KINETIC" in pink. KINETIC springs out wide, frame by frame through 0.09, 0.28, 0.56, 0.85, 1.10, 1.27 and 1.37 times its width, then back through 1.06 to 0.87, with its height moving against its width; note "no keyframes". At 4.65 s "TYPE" appears letter by letter. Each letter turns one and a quarter times on its vertical axis in 0.3 s on an ease-out, and is pink whenever its back faces us; note "3D effects". At 5.13 s comes one frame of a full orange flash with the next word tilted in deep ink. Then "FONTS" in orange sits perfectly still inside thin orange guide lines with small square handles at its corners, with no easing at all; note "for every script". The light page wipes up from the bottom in three frames with a soft stepped edge.
5.5-8.4 s, light page. A graph draws itself: axes labelled "idea" and "video", a deep ink diamond at each end, and a straight pink line between them with two orange handle dots on it. Below, a deep ink rounded square runs along a track left to right at constant speed, while a translucent pink playhead and a dot ride the line. The square leaves eleven evenly spaced orange outline ghosts, each with a tick under the track. A note "keyframes to hunt for" writes on with a long arrow to the line. A mouse cursor fades in, grabs the lower handle and drags both handles out in a quarter second, bending the line into an ease in-out S. The note is then struck through with one clean straight line through the middle of its letters, following its tilt to the last letter. The orange ghosts fade, and "chat instead of a timeline" writes on in pink with a hand-drawn check mark. The square runs again in one second on the new curve, and its pink ghosts bunch at both ends and spread in the middle. As it arrives, a note "open app!" points at it. The whole page then pushes out to the left in six frames with a strong horizontal blur as the dark page pushes in.
8.4-13.1 s, dark page. A pink head races a figure eight across the frame, one loop a second, trailing a chain of fourteen fading circles. A grid of small dots every 60 px reacts. Dots near the head are pushed away and turn orange, dots it passed a moment ago turn pink and dark pink, and untouched dots stay grey-violet, so the field keeps moving after the head has gone. A note "from idea to video" points with an arrow to the tail. From 10.6 s the whole field tips over in 3D, turns, shrinks into a small pink card and collapses into a dot at the centre. The dot grows, a thick ring swells around it and thins to a hairline, and a dial of sixty ticks and fourteen small squares spins in. A white progress arc and a counter run from 2 to 100 percent in about 1.4 s while the squares fill pink one by one. At 100 percent the loader shrinks away and the dot crouches into a flat oval on its floor (anticipation). The note "the agent animates it" sits to the right of the ring, clear of it, with a long arrow to the dot. The dot then shoots up stretched and out of frame, and falls back down into the next shot.
13.1-15 s, light page. The light page opens as a fast circle from where the dot lands. A name block is centred in the frame, with [your brand] set in two lines. The first line drops in letter by letter with tilt, like READY TO. The second line grows out of the floor below it, right to left, with the same spring as MOVE, and the pink dot is its period. A short call to action such as "try it free: [your website]" writes on beneath, with an arrow up to the dot. The dot hops once and settles to end.

Composition

Two pages. The light page is #FAF9FF in the middle, fading to lavender #F0EDFF with a soft violet vignette at the corners. The dark page is deep ink #1C0B5D with a slightly darker vignette. Both have a faint dot grid every 48 px. Titles are set in a heavy condensed grotesque (Anton). Notes and labels are in a marker handwriting (Playpen Sans, semi-bold), every one tilted the same 2 degrees: pink on the light page, light pink on the dark page. Palette: main accent pink #FB2D89, second accent orange #FE9117, type and solid shapes in deep ink #1C0B5D, white type on the dark page, and muted grey-violet #6B6385 for the interface. Hand-drawn arrows start a little away from their note and never touch its letters. Notes never overlap titles or shapes. Two elements are always on screen. At the top right, a running timecode (e.g. "00:00:03:11") in condensed bold, muted grey-violet, about 31 px. Along the bottom, a chapter timeline: a thin line with small ticks every 55 px, a diamond at each chapter start, a darker progress line behind a small playhead, and the current chapter's name handwritten above it ("describe", "type", "refine", "3D effects", "preview", "export"; replace with yours). The interface colours switch with the light and dark scenes. Title blocks sit centred in the frame.

Techniques

Notes write on stroke by stroke, and their arrows draw from tail to head right after. Each chapter name writes on in 0.17 s while the previous one wipes off. Each timeline diamond fills and pops when the playhead reaches it. Squash and stretch on every contact: the dot flattens on landing and stretches along its velocity in the air. Letters growing from the floor rise from behind the line, overshoot to 1.2 times their height, hop clear and settle with a small squash in half a second, staggered 45 ms right to left. Dropping letters come in from the left, tilted up to 20 degrees, and straighten with a slight overshoot. Transitions: at 3.7 s, a hard cut from light to dark right after the title squashes; at 5.5 s, a three-frame wipe up from the bottom with a soft stepped edge; at 8.4 s, a six-frame horizontal push with strong horizontal motion blur; at 13.1 s, the dot launches out of frame, falls into the next shot and opens the light page as a fast circle. Everything else stays flat with no blur.

Music

An energetic synthwave/electro track at 128 BPM, exactly 15 seconds long, whose own drums carry the beat. Arc: a short filtered intro under the bouncing ball, then the drop exactly when MOVE springs up at 1.9 s, with the track's kick on every beat. The full groove runs to about 5.6 s, followed by a breakdown without kick under the easing graph. A build leads back in, with the groove returning on the whip at 8.5 s. A riser plays while the loader fills, and a final boom with a sub drop lands on the downbeat as the light opens on the name (about 13.2 s). The groove rides out with a short fade at the end. Do not layer any extra kick, clap or hats on top of the track: one kick per beat, no flams.

Sound

Sound effects on the picture's moments: a boom on the drop at 1.9 s, a swoosh on the cut to the dark page at 3.7 s, and a clap on the one-frame orange flash at 5.13 s. A whoosh on the wipe at 5.5 s and a bigger one on the whip at 8.4 s. A soft click when the cursor grabs the handle, a short whoosh when the dot launches, and the final boom with a sub drop at about 13.2 s. No voice-over. Mix at about -14 LUFS with the true peak below -1 dBTP.

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 “Bouncing ball with onion skin and squash” technique — At 0:01 in the video

Shapes

Bouncing ball with onion skin and squash

A ball drops in and bounces across a hand-drawn floor in arcs that lose height each time. Every frame of flight leaves a thin outline ghost that fades over 0.6 s, a dotted line traces the path, and the ball squashes flat (about 1.5 x 0.55) on each contact and stretches along its speed in the air. The contacts sit a beat apart (0.47 s at 128 BPM) so every landing is a hit.

When to use Teach or show timing and spacing, or open a piece with a playful object that lands where the title will be.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bouncing ball with onion skin and squash</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=Anton&family=Playpen+Sans:wght@600&display=swap");
html,body{margin:0;width:1920px;height:1080px;overflow:hidden}
#root{position:relative;width:1920px;height:1080px;overflow:hidden}
#root{background:radial-gradient(circle at 50% 47%,#faf9ff 0,#faf9ff 300px,#f0edff 600px,#dad4ef 960px,#cfc8e7 1100px)}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080">
  <svg id="stage" class="clip" data-start="0" data-duration="4" viewBox="0 0 1920 1080" width="1920" height="1080">
    <line x1="140" y1="816" x2="1780" y2="816" stroke="#1c0b5d" stroke-width="3" stroke-linecap="round" />
    <polyline id="trail" fill="none" stroke="rgba(107,99,133,0.45)" stroke-width="2.2" stroke-linecap="round" stroke-dasharray="0.1 7.5" />
    <g id="ghosts" fill="none" stroke="#fb2d89" stroke-width="2"></g>
    <ellipse id="ball" fill="#fb2d89" />
  </svg>
</div>
<script>
const DUR = 4;
const clamp = (v, a = 0, b = 1) => Math.min(b, Math.max(a, v));
const lerp = (a, b, p) => a + (b - a) * p;
const EASE = { linear: (p) => p, in2: (p) => p * p, out2: (p) => 1 - (1 - p) * (1 - p), inOut2: (p) => (p < 0.5 ? 2 * p * p : 1 - (-2 * p + 2) ** 2 / 2) };
// keyframes [[time, value, ease of the segment ending here], ...]
const key = (keys, t) => { if (t <= keys[0][0]) return keys[0][1]; for (let i = 1; i < keys.length; i++) { const [t1, v1, e] = keys[i]; if (t <= t1) { const [t0, v0] = keys[i - 1]; return lerp(v0, v1, (EASE[e] || EASE.linear)((t - t0) / (t1 - t0))); } } return keys[keys.length - 1][1]; };
const FLOOR = 816, R = 46;                       // floor line and ball radius
const X0 = 160, X1 = 1472;                        // where the ball enters and where it rests
const HITS = [0.43, 0.9, 1.37, 1.83];            // contacts, one beat apart
const APEX = [380, 270, 175];                     // height of each bounce
const xAt = (t) => lerp(X0, X1, clamp(t / HITS[3]));
const yAt = (t) => {
  const rest = FLOOR - R;
  if (t < HITS[0]) return rest - 860 * (1 - (t / HITS[0]) ** 2);        // the drop from above
  for (let i = 0; i < 3; i++) if (t < HITS[i + 1]) { const u = (t - HITS[i]) / (HITS[i + 1] - HITS[i]); return rest - 4 * APEX[i] * u * (1 - u); }
  return rest;
};
const NS = "http://www.w3.org/2000/svg";
const ghosts = [];
for (let f = 2; f <= 55; f++) { const c = document.createElementNS(NS, "circle"); c.setAttribute("r", R); document.getElementById("ghosts").appendChild(c); ghosts.push({ c, t: f / 30 }); }
function render(t) {
  const x = xAt(t), y = yAt(t);
  const vy = (yAt(t + 0.005) - yAt(t - 0.005)) / 0.01;
  const contact = Math.min(...HITS.map((h) => Math.abs(t - h)));
  let sx = 1, sy = 1;
  if (contact < 0.035 && t < HITS[3] + 0.05) { sx = 1.5; sy = 0.55; }           // squash on the floor
  else { sy = 1 + Math.min(0.25, Math.abs(vy) / 6000); sx = 1 / sy; }            // stretch with speed
  const ball = document.getElementById("ball");
  ball.setAttribute("cx", x); ball.setAttribute("cy", y + R * (1 - sy));
  ball.setAttribute("rx", R * sx); ball.setAttribute("ry", R * sy);
  ball.style.opacity = t > 0.05 ? 1 : 0;
  const fade = 1 - clamp((t - 2.2) / 0.3);
  ghosts.forEach(({ c, t: gt }) => {                                             // one outline per frame of flight
    c.setAttribute("cx", xAt(gt)); c.setAttribute("cy", yAt(gt));
    c.setAttribute("stroke-opacity", t > gt ? (0.62 * clamp(1 - (t - gt) / 0.6) * fade).toFixed(3) : 0);
  });
  const pts = [];
  for (let s = 0.1; s <= Math.min(t, HITS[3]); s += 1 / 60) pts.push(`${xAt(s).toFixed(1)},${yAt(s).toFixed(1)}`);
  document.getElementById("trail").setAttribute("points", pts.join(" "));
  document.getElementById("trail").style.opacity = fade;
}
const tl = gsap.timeline({ paused: true });
const clock = { t: 0 };
tl.to(clock, { t: DUR, duration: DUR, ease: "none", onUpdate: () => render(clock.t) }, 0);
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>

Preview of the “Letters spring out of a floor line” technique — At 0:02 in the video

Typography

Letters spring out of a floor line

A big word grows out of the floor line letter by letter, right to left, 45 ms apart: each letter rises from below a clip at the baseline, overshoots by stretching to about 1.2 times its height, hops 45 px clear of the floor, lands with a small squash and settles within half a second. The line above drops in letter by letter with a random tilt that straightens with a slight overshoot, so the two lines arrive as one gesture.

When to use Land a title on a bounce or a beat with a physical, toy-like energy instead of a fade.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Letters spring out of a floor line</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=Anton&family=Playpen+Sans:wght@600&display=swap");
html,body{margin:0;width:1920px;height:1080px;overflow:hidden}
#root{position:relative;width:1920px;height:1080px;overflow:hidden}
#root{background:#faf9ff}
.line{position:absolute;white-space:nowrap;font-family:Anton,sans-serif;line-height:1;color:#1c0b5d}
#top{left:452px;top:170px;font-size:210px}
#clip{position:absolute;left:0;top:0;width:1920px;height:816px;clip-path:inset(-400px -400px 0 -400px)}
#big{left:449px;top:368px;font-size:484px}
.ch{display:inline-block;transform-origin:50% 92%}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <div id="title" class="clip" data-start="0" data-duration="3">
    <div id="top" class="line"></div>
    <div id="clip"><div id="big" class="line"></div></div>
  </div>
</div>
<script>
const DUR = 3;
const clamp = (v, a = 0, b = 1) => Math.min(b, Math.max(a, v));
const lerp = (a, b, p) => a + (b - a) * p;
const EASE = { linear: (p) => p, in2: (p) => p * p, out2: (p) => 1 - (1 - p) * (1 - p), inOut2: (p) => (p < 0.5 ? 2 * p * p : 1 - (-2 * p + 2) ** 2 / 2) };
// keyframes [[time, value, ease of the segment ending here], ...]
const key = (keys, t) => { if (t <= keys[0][0]) return keys[0][1]; for (let i = 1; i < keys.length; i++) { const [t1, v1, e] = keys[i]; if (t <= t1) { const [t0, v0] = keys[i - 1]; return lerp(v0, v1, (EASE[e] || EASE.linear)((t - t0) / (t1 - t0))); } } return keys[keys.length - 1][1]; };
const TOP = "MAKE IT", BIG = "MOVE";                // example text
const STAGGER = 45 / 1000 * 30;                         // 45 ms, in frames
const split = (el, s) => [...s].map((ch) => { const e = document.createElement("span"); e.className = "ch"; e.textContent = ch === " " ? "\u00a0" : ch; el.appendChild(e); return e; });
const top = split(document.getElementById("top"), TOP).filter((e) => e.textContent.trim());
const big = split(document.getElementById("big"), BIG);
const TILT = [-18, 14, -10, 22, -16, 12, -20, 16, -12, 20];
function render(t) {
  const f = t * 30 - 6;                                   // frames since the first letter
  big.forEach((e, i) => {                                 // right to left out of the floor
    const r = f - (big.length - 1 - i) * STAGGER;
    const y = key([[0, 440], [4, 0], [8, 0], [9, -45, "out2"], [10, -20, "in2"], [11, 0, "in2"]], r);
    const sy = key([[0, 1], [4, 1], [5, 1.144, "out2"], [6, 1.2, "out2"], [7, 1.19], [8, 1.134, "in2"], [9, 0.966], [11, 0.97], [13, 1.01, "inOut2"], [16, 1, "inOut2"]], r);
    e.style.transform = `translateY(${y.toFixed(2)}px) scaleY(${sy.toFixed(4)})`;
  });
  top.forEach((e, i) => {                                 // the line above drops in, left to right
    const r = f - 2.5 - i;
    const y = key([[0, -230], [4, 0, "in2"], [5, 6, "out2"], [7, 0, "inOut2"]], r);
    const back = r <= 0 ? 0 : r >= 7 ? 1 : 1 + 2.70158 * (r / 7 - 1) ** 3 + 1.70158 * (r / 7 - 1) ** 2;
    e.style.opacity = clamp(r / 2.2);
    e.style.transform = `translateY(${y.toFixed(2)}px) rotate(${(TILT[i % TILT.length] * (1 - back)).toFixed(2)}deg)`;
  });
}
const tl = gsap.timeline({ paused: true });
const clock = { t: 0 };
tl.to(clock, { t: DUR, duration: DUR, ease: "none", onUpdate: () => render(clock.t) }, 0);
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>

Preview of the “Squeeze to a sliver, swap the word, spring out” technique — At 0:04 in the video

Typography

Squeeze to a sliver, swap the word, spring out

A settled word is squeezed horizontally to about 9 percent of its width in one frame, and in that sliver it becomes the next word in another colour. The new word then springs out on a measured elastic curve: 0.09, 0.28, 0.56, 0.85, 1.10, 1.27, 1.37 (peak, five frames in), back through 1.06 to 0.87 at frame thirteen. Its height moves against its width (scaleY = scaleX to the power -0.12), anchored on the baseline, so it reads like rubber.

When to use Swap one word for the next in a kinetic list without a cut or a fade, with an elastic hit 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>Squeeze to a sliver, swap the word, spring out</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=Anton&family=Playpen+Sans:wght@600&display=swap");
html,body{margin:0;width:1920px;height:1080px;overflow:hidden}
#root{position:relative;width:1920px;height:1080px;overflow:hidden}
#root{background:#1c0b5d}
.word{position:absolute;left:0;width:1920px;top:280px;text-align:center;font:477px/1 Anton,sans-serif;white-space:nowrap;transform-origin:50% 92%}
#a{color:#ffffff}#b{color:#fb2d89}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <div id="a" class="word clip" data-start="0" data-duration="3">SOFT</div>
  <div id="b" class="word clip" data-start="0" data-duration="3">ELASTIC</div>
</div>
<script>
const DUR = 3;
const clamp = (v, a = 0, b = 1) => Math.min(b, Math.max(a, v));
const lerp = (a, b, p) => a + (b - a) * p;
const EASE = { linear: (p) => p, in2: (p) => p * p, out2: (p) => 1 - (1 - p) * (1 - p), inOut2: (p) => (p < 0.5 ? 2 * p * p : 1 - (-2 * p + 2) ** 2 / 2) };
// keyframes [[time, value, ease of the segment ending here], ...]
const key = (keys, t) => { if (t <= keys[0][0]) return keys[0][1]; for (let i = 1; i < keys.length; i++) { const [t1, v1, e] = keys[i]; if (t <= t1) { const [t0, v0] = keys[i - 1]; return lerp(v0, v1, (EASE[e] || EASE.linear)((t - t0) / (t1 - t0))); } } return keys[keys.length - 1][1]; };
const SWAP = 0.8;                                      // the frame the word turns into the sliver
// width of the new word against its rest width, frame by frame after the swap (measured)
const SPRING = [0.089, 0.275, 0.557, 0.853, 1.104, 1.272, 1.37, 1.37, 1.27, 1.167, 1.055, 0.961, 0.897, 0.871, 0.9, 0.96, 1.0];
function render(t) {
  const f = (t - SWAP) * 30;
  const a = document.getElementById("a"), b = document.getElementById("b");
  a.style.visibility = f < 0 ? "visible" : "hidden";
  b.style.visibility = f >= 0 ? "visible" : "hidden";
  const i = Math.max(0, Math.min(SPRING.length - 1, f));
  const lo = Math.floor(i), hi = Math.min(SPRING.length - 1, lo + 1);
  const sx = lerp(SPRING[lo], SPRING[hi], i - lo);
  b.style.transform = `scale(${sx.toFixed(4)}, ${Math.pow(sx, -0.12).toFixed(4)})`;
}
const tl = gsap.timeline({ paused: true });
const clock = { t: 0 };
tl.to(clock, { t: DUR, duration: DUR, ease: "none", onUpdate: () => render(clock.t) }, 0);
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>

Preview of the “Letters flip 450 degrees with a coloured back face” technique — At 0:04 in the video

3D

Letters flip 450 degrees with a coloured back face

Each letter turns on its own vertical axis from edge-on through one and a quarter turns (rotateY -450 to 0) in nine frames on an ease-out, 45 ms after the letter before it, under a 1400 px perspective. While a letter shows its back (cosine of the angle below zero) it is painted in the accent colour, so the word flickers between two colours as it lands front-facing.

When to use Reveal a short word with a 3D flourish that still ends perfectly flat and readable.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Letters flip 450 degrees with a coloured back face</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=Anton&family=Playpen+Sans:wght@600&display=swap");
html,body{margin:0;width:1920px;height:1080px;overflow:hidden}
#root{position:relative;width:1920px;height:1080px;overflow:hidden}
#root{background:#1c0b5d}
#w{position:absolute;left:0;width:1920px;top:280px;text-align:center;font:477px/1 Anton,sans-serif;perspective:1400px;white-space:nowrap}
.l{display:inline-block}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <div id="w" class="clip" data-start="0" data-duration="3"></div>
</div>
<script>
const DUR = 3;
const clamp = (v, a = 0, b = 1) => Math.min(b, Math.max(a, v));
const lerp = (a, b, p) => a + (b - a) * p;
const EASE = { linear: (p) => p, in2: (p) => p * p, out2: (p) => 1 - (1 - p) * (1 - p), inOut2: (p) => (p < 0.5 ? 2 * p * p : 1 - (-2 * p + 2) ** 2 / 2) };
// keyframes [[time, value, ease of the segment ending here], ...]
const key = (keys, t) => { if (t <= keys[0][0]) return keys[0][1]; for (let i = 1; i < keys.length; i++) { const [t1, v1, e] = keys[i]; if (t <= t1) { const [t0, v0] = keys[i - 1]; return lerp(v0, v1, (EASE[e] || EASE.linear)((t - t0) / (t1 - t0))); } } return keys[keys.length - 1][1]; };
const WORD = "FLIP";                                   // example text
const FRONT = "#ffffff", BACK = "#fb2d89";
const letters = [...WORD].map((ch) => { const e = document.createElement("span"); e.className = "l"; e.textContent = ch; document.getElementById("w").appendChild(e); return e; });
function render(t) {
  const f = t * 30 - 6;
  letters.forEach((e, i) => {
    const p = EASE.out2(clamp((f - i * 1.33) / 9));          // 45 ms apart, nine frames each
    const ang = -450 * (1 - p);
    e.style.transform = `rotateY(${ang.toFixed(2)}deg)`;
    e.style.color = Math.cos((ang * Math.PI) / 180) < 0 ? BACK : FRONT;
    e.style.visibility = f >= i * 1.33 ? "visible" : "hidden";
  });
}
const tl = gsap.timeline({ paused: true });
const clock = { t: 0 };
tl.to(clock, { t: DUR, duration: DUR, ease: "none", onUpdate: () => render(clock.t) }, 0);
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>

Preview of the “Live easing graph with onion-skin spacing” technique — At 0:07 in the video

Data

Live easing graph with onion-skin spacing

A position-over-time graph draws itself, then a square runs along a track below it twice. First with a straight line: outline ghosts are left at ten equal time steps and sit evenly spaced. Then the two bezier handles are dragged out to an ease in-out (0.72, 0, 0.28, 1) and the run repeats in one second: the ghosts bunch at both ends and spread in the middle, while a translucent playhead and a dot ride the curve. The note on the straight line is struck through with one clean line inside the note itself, so it follows the note's tilt and ends at its last letter.

When to use Explain easing, pacing or before-and-after timing so a viewer sees the difference instead of reading it.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Live easing graph with onion-skin spacing</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=Anton&family=Playpen+Sans:wght@600&display=swap");
html,body{margin:0;width:1920px;height:1080px;overflow:hidden}
#root{position:relative;width:1920px;height:1080px;overflow:hidden}
#root{background:#faf9ff}
.note{position:absolute;font:600 50px/1 "Playpen Sans",cursive;white-space:nowrap;color:#fb2d89;transform-origin:0 77%;transform:rotate(-2deg)}
#strike{position:absolute;left:1px;right:2px;top:25px;height:3.6px;border-radius:2px;background:#fb2d89;transform-origin:0 50%;transform:scaleX(0)}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="5" data-width="1920" data-height="1080">
  <svg id="g" class="clip" data-start="0" data-duration="5" viewBox="0 0 1920 1080" width="1920" height="1080">
    <path d="M180 630 L180 190 M180 630 L860 630" stroke="#1c0b5d" stroke-width="2.6" fill="none" />
    <path d="M208 871 L1705 871" stroke="#1c0b5d" stroke-width="3" />
    <rect id="play" x="-5" y="226" width="10" height="376" fill="rgba(251,45,137,0.16)" />
    <line id="h1" stroke="#1c0b5d" stroke-width="1.6" /><line id="h2" stroke="#1c0b5d" stroke-width="1.6" />
    <path id="curve" fill="none" stroke="#fb2d89" stroke-width="5" stroke-linecap="round" />
    <circle id="p1" r="9" fill="#fe9117" /><circle id="p2" r="9" fill="#fe9117" /><circle id="dot" r="8" fill="#fb2d89" />
    <g id="ghosts" fill="none" stroke-width="2"></g>
    <rect id="box" x="-51" y="-51" width="102" height="102" rx="11" fill="#1c0b5d" />
  </svg>
  <div class="note" style="left:943px;top:289px">"linear"<i id="strike"></i></div>
  <div class="note" style="left:948px;top:447px">"ease in-out"</div>
</div>
<script>
const DUR = 5;
const clamp = (v, a = 0, b = 1) => Math.min(b, Math.max(a, v));
const lerp = (a, b, p) => a + (b - a) * p;
const EASE = { linear: (p) => p, in2: (p) => p * p, out2: (p) => 1 - (1 - p) * (1 - p), inOut2: (p) => (p < 0.5 ? 2 * p * p : 1 - (-2 * p + 2) ** 2 / 2) };
// keyframes [[time, value, ease of the segment ending here], ...]
const key = (keys, t) => { if (t <= keys[0][0]) return keys[0][1]; for (let i = 1; i < keys.length; i++) { const [t1, v1, e] = keys[i]; if (t <= t1) { const [t0, v0] = keys[i - 1]; return lerp(v0, v1, (EASE[e] || EASE.linear)((t - t0) / (t1 - t0))); } } return keys[keys.length - 1][1]; };
const S = [218, 592], E = [822, 228];                       // start and end keys on the graph
const L1 = [419, 471], L2 = [621, 349], C1 = [652, 592], C2 = [387, 228];   // handles: straight, then ease in-out
const BX0 = 301.5, BX1 = 1611.5;                               // the square's run on the track
const RUN1 = [0.4, 1.2], RUN2 = [2.6, 3.6], DRAG = [1.5, 1.8]; // straight run, eased run, handle drag (s)
const bez = (a, b, c, d, s) => { const u = 1 - s; return u * u * u * a + 3 * u * u * s * b + 3 * u * s * s * c + s * s * s * d; };
const yAtX = (x, c1, c2) => { let lo = 0, hi = 1; for (let i = 0; i < 30; i++) { const m = (lo + hi) / 2; if (bez(S[0], c1[0], c2[0], E[0], m) < x) lo = m; else hi = m; } return bez(S[1], c1[1], c2[1], E[1], (lo + hi) / 2); };
const NS = "http://www.w3.org/2000/svg";
const ghost = (x, color) => { const r = document.createElementNS(NS, "rect"); r.setAttribute("x", x - 50); r.setAttribute("y", 770); r.setAttribute("width", 100); r.setAttribute("height", 100); r.setAttribute("rx", 11); r.setAttribute("stroke", color); document.getElementById("ghosts").appendChild(r); return r; };
const frac = (tau, c1, c2) => (yAtX(S[0] + (E[0] - S[0]) * tau, c1, c2) - S[1]) / (E[1] - S[1]);
const even = [...Array(11)].map((_, k) => ghost(BX0 + (BX1 - BX0) * k / 10, "#feac4f"));
const eased = [...Array(11)].map((_, k) => ghost(BX0 + (BX1 - BX0) * frac(k / 10, C1, C2), "#fc6aaa"));
const $ = (id) => document.getElementById(id);
function render(t) {
  const m = EASE.inOut2(clamp((t - DRAG[0]) / (DRAG[1] - DRAG[0])));
  const p1 = [lerp(L1[0], C1[0], m), lerp(L1[1], C1[1], m)], p2 = [lerp(L2[0], C2[0], m), lerp(L2[1], C2[1], m)];
  $("curve").setAttribute("d", `M${S} C${p1} ${p2} ${E}`);
  $("p1").setAttribute("cx", p1[0]); $("p1").setAttribute("cy", p1[1]); $("p2").setAttribute("cx", p2[0]); $("p2").setAttribute("cy", p2[1]);
  [["h1", S, p1], ["h2", E, p2]].forEach(([id, a, b]) => { $(id).setAttribute("x1", a[0]); $(id).setAttribute("y1", a[1]); $(id).setAttribute("x2", b[0]); $(id).setAttribute("y2", b[1]); });
  let tau = -1, frc = 0;
  if (t >= RUN1[0] && t < RUN1[1]) { tau = (t - RUN1[0]) / (RUN1[1] - RUN1[0]); frc = tau; }
  else if (t >= RUN2[0]) { tau = clamp((t - RUN2[0]) / (RUN2[1] - RUN2[0])); frc = frac(tau, C1, C2); }
  $("box").setAttribute("transform", `translate(${lerp(BX0, BX1, frc).toFixed(1)} 820)`);
  const px = S[0] + (E[0] - S[0]) * Math.max(0, tau);
  $("play").setAttribute("transform", `translate(${px} 0)`); $("play").style.opacity = tau >= 0 ? 1 : 0;
  $("dot").setAttribute("cx", px); $("dot").setAttribute("cy", yAtX(px, p1, p2)); $("dot").style.opacity = tau >= 0 ? 1 : 0;
  even.forEach((g, k) => { g.style.opacity = t >= RUN1[0] + k * (RUN1[1] - RUN1[0]) / 10 ? 0.75 * (1 - clamp((t - DRAG[0]) / 0.15)) : 0; });
  eased.forEach((g, k) => { g.style.opacity = t >= RUN2[0] + k * (RUN2[1] - RUN2[0]) / 10 ? 0.75 : 0; });
  $("strike").style.transform = `scaleX(${EASE.inOut2(clamp((t - DRAG[0]) / 0.1)).toFixed(4)})`;   // struck through as the handles move
}
const tl = gsap.timeline({ paused: true });
const clock = { t: 0 };
tl.to(clock, { t: DUR, duration: DUR, ease: "none", onUpdate: () => render(clock.t) }, 0);
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>

Preview of the “Dot field pushed by a figure-eight head” technique — At 0:09 in the video

Particles

Dot field pushed by a figure-eight head

A head runs a figure eight (a Gerono lemniscate, 610 by 246 px, 6 degrees a frame) dragging a chain of fourteen circles that are simply its own past positions, smaller and fainter down the tail. A 60 px grid of dots reacts to the head's last half second: each dot is pushed away by a sum of Gaussian bumps and takes a colour by the age of what pushed it (fresh: orange, then pink, older: dark pink, untouched: grey) and grows with the push. It reads as follow-through: the field keeps moving after the head has gone.

When to use Show follow-through or drag, or as a generative interlude that responds to a moving subject.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dot field pushed by a figure-eight head</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=Anton&family=Playpen+Sans:wght@600&display=swap");
html,body{margin:0;width:1920px;height:1080px;overflow:hidden}
#root{position:relative;width:1920px;height:1080px;overflow:hidden}
#root{background:radial-gradient(circle at 50% 47%,#1d0c60 0,#1c0b5d 420px,#150a49 1100px)}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080">
  <svg id="f" class="clip" data-start="0" data-duration="4" viewBox="0 0 1920 1080" width="1920" height="1080">
    <g id="dots"></g><g id="chain" style="filter:blur(1.6px)"></g>
  </svg>
</div>
<script>
const DUR = 4;
const clamp = (v, a = 0, b = 1) => Math.min(b, Math.max(a, v));
const lerp = (a, b, p) => a + (b - a) * p;
const EASE = { linear: (p) => p, in2: (p) => p * p, out2: (p) => 1 - (1 - p) * (1 - p), inOut2: (p) => (p < 0.5 ? 2 * p * p : 1 - (-2 * p + 2) ** 2 / 2) };
// keyframes [[time, value, ease of the segment ending here], ...]
const key = (keys, t) => { if (t <= keys[0][0]) return keys[0][1]; for (let i = 1; i < keys.length; i++) { const [t1, v1, e] = keys[i]; if (t <= t1) { const [t0, v0] = keys[i - 1]; return lerp(v0, v1, (EASE[e] || EASE.linear)((t - t0) / (t1 - t0))); } } return keys[keys.length - 1][1]; };
const RAD = Math.PI / 180;
const LEM = (u) => { const th = -u * 6 * RAD; return [960 + 610 * Math.sin(th), 520 + 246 * Math.sin(2 * th)]; };   // u in frames
const RED = [254, 145, 23], MID = [252, 95, 80], OLD = [200, 40, 125], REST = [124, 114, 165];
const mix = (a, b, p) => a.map((v, i) => Math.round(v + (b[i] - v) * p));
const NS = "http://www.w3.org/2000/svg";
const dots = [];
for (let j = 0; j < 18; j++) for (let i = 0; i < 32; i++) { const c = document.createElementNS(NS, "circle"); document.getElementById("dots").appendChild(c); dots.push({ c, x: 28 + 60 * i, y: 27 + 60 * j }); }
const chain = [...Array(14)].map(() => { const c = document.createElementNS(NS, "circle"); c.setAttribute("fill", "#fb2d89"); document.getElementById("chain").prepend(c); return c; });
function render(t) {
  const u = t * 30 - 12;
  chain.forEach((c, k) => { const p = LEM(u - k * 1.05); c.setAttribute("cx", p[0]); c.setAttribute("cy", p[1]); c.setAttribute("r", 34 - 1.9 * k); c.setAttribute("fill-opacity", 0.95 - 0.055 * k); });
  const hist = [...Array(16)].map((_, m) => [...LEM(u - m * 2), Math.exp(-(m * 2) / 13), m]);   // the last half second
  dots.forEach(({ c, x, y }) => {
    let I = 0, dx = 0, dy = 0, age = 0;
    for (const [hx, hy, w, m] of hist) {
      const ex = x - hx, ey = y - hy, r = Math.hypot(ex, ey) + 0.001;
      const g = Math.exp(-((r / 175) ** 2)) * w; I += g; age += g * m;
      const push = 62 * (r / 120) * Math.exp(-((r / 120) ** 2)) * w; dx += (ex / r) * push; dy += (ey / r) * push;
    }
    const a = I > 0 ? age / I : 9, k = clamp(I * 1.35);
    const hue = a < 2.5 ? mix(RED, MID, a / 2.5) : a < 6 ? mix(MID, OLD, (a - 2.5) / 3.5) : OLD;
    c.setAttribute("cx", x + dx); c.setAttribute("cy", y + dy); c.setAttribute("r", 2.2 + 4.6 * k);
    c.setAttribute("fill", `rgb(${mix(REST, hue, k)})`); c.setAttribute("fill-opacity", 0.55 + 0.45 * k);
  });
}
const tl = gsap.timeline({ paused: true });
const clock = { t: 0 };
tl.to(clock, { t: DUR, duration: DUR, ease: "none", onUpdate: () => render(clock.t) }, 0);
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>

Preview of the “Progress ring that crouches and launches” technique — At 0:12 in the video

Shapes

Progress ring that crouches and launches

A dot grows out of a point, a thick ring around it swells to 300 px and thins to a hairline, a dial of sixty ticks and fourteen small squares spin in. A white arc and a counter run to 100 percent in about 1.4 s while the squares fill one by one with a pop. At 100 the loader shrinks away and the dot crouches: it widens to 160 x 48 on its own floor over six frames (anticipation), then shoots up stretched (52 x 131, then 39 x 123) and leaves the frame two frames later.

When to use Turn a waiting moment into a wind-up that launches the next scene.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Progress ring that crouches and launches</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=Anton&family=Playpen+Sans:wght@600&display=swap");
html,body{margin:0;width:1920px;height:1080px;overflow:hidden}
#root{position:relative;width:1920px;height:1080px;overflow:hidden}
#root{background:#1c0b5d}
#pct{position:absolute;left:0;width:1920px;top:856px;text-align:center;font:45px/1 Anton,sans-serif;color:#a79fc4}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <svg id="s" class="clip" data-start="0" data-duration="3" viewBox="0 0 1920 1080" width="1920" height="1080">
    <g id="loader" transform="translate(960 519)">
      <circle id="track" r="300" fill="none" stroke="#2e2266" stroke-width="1.6" />
      <path id="arc" fill="none" stroke="#ffffff" stroke-width="3.2" stroke-linecap="round" />
      <g id="ticks" stroke="#43377e" stroke-width="2.6"></g><g id="squares"></g>
    </g>
    <ellipse id="dot" fill="#fb2d89" />
  </svg>
  <div id="pct">0%</div>
</div>
<script>
const DUR = 3;
const clamp = (v, a = 0, b = 1) => Math.min(b, Math.max(a, v));
const lerp = (a, b, p) => a + (b - a) * p;
const EASE = { linear: (p) => p, in2: (p) => p * p, out2: (p) => 1 - (1 - p) * (1 - p), inOut2: (p) => (p < 0.5 ? 2 * p * p : 1 - (-2 * p + 2) ** 2 / 2) };
// keyframes [[time, value, ease of the segment ending here], ...]
const key = (keys, t) => { if (t <= keys[0][0]) return keys[0][1]; for (let i = 1; i < keys.length; i++) { const [t1, v1, e] = keys[i]; if (t <= t1) { const [t0, v0] = keys[i - 1]; return lerp(v0, v1, (EASE[e] || EASE.linear)((t - t0) / (t1 - t0))); } } return keys[keys.length - 1][1]; };
const RAD = Math.PI / 180, NS = "http://www.w3.org/2000/svg";
const FILL = [0.15, 1.55];                                 // the counter runs 0 to 100 percent between these seconds
const CROUCH = 1.65, LAUNCH = 1.85;                        // anticipation squash, then the launch
for (let k = 0; k < 60; k++) { const a = k * 6 * RAD, r0 = k % 5 ? 118 : 112, r1 = k % 5 ? 140 : 146; const l = document.createElementNS(NS, "line"); l.setAttribute("x1", Math.sin(a) * r0); l.setAttribute("y1", -Math.cos(a) * r0); l.setAttribute("x2", Math.sin(a) * r1); l.setAttribute("y2", -Math.cos(a) * r1); document.getElementById("ticks").appendChild(l); }
const squares = [...Array(14)].map((_, k) => { const r = document.createElementNS(NS, "rect"); r.setAttribute("x", -7.5); r.setAttribute("y", -7.5); r.setAttribute("width", 15); r.setAttribute("height", 15); r.setAttribute("stroke-width", 1.5); document.getElementById("squares").appendChild(r); return { r, ang: 4 + k * 360 / 14, rot: k % 2 ? 45 : 12 }; });
function render(t) {
  const p = clamp((t - FILL[0]) / (FILL[1] - FILL[0]));
  const grow = key([[0, 0.5], [0.15, 1.1, "out2"], [0.3, 1, "inOut2"]], t), away = EASE.in2(clamp((t - CROUCH) / 0.2));
  const lo = document.getElementById("loader");
  lo.setAttribute("transform", `translate(960 519) scale(${grow * (1 - 0.12 * away)})`); lo.style.opacity = 1 - away;
  const R = 300, a1 = p * 359.9 * RAD;
  document.getElementById("arc").setAttribute("d", `M0 ${-R} A${R} ${R} 0 ${p > 0.5 ? 1 : 0} 1 ${Math.sin(a1) * R} ${-Math.cos(a1) * R}`);
  const n = p * 14;
  squares.forEach(({ r, ang, rot }, k) => { const on = k < n; r.setAttribute("transform", `translate(${Math.sin(ang * RAD) * 218} ${-Math.cos(ang * RAD) * 218}) rotate(${rot}) scale(${on ? key([[0, 1.6], [1, 1]], n - k) : 1})`); r.setAttribute("fill", on ? "#fb2d89" : "none"); r.setAttribute("stroke", on ? "#fb2d89" : "#6b6385"); });
  const pct = document.getElementById("pct"); pct.textContent = `${Math.round(p * 100)}%`; pct.style.opacity = 1 - away;
  // the dot: grows in, crouches on its floor (bottom fixed at 563), launches up stretched
  const w = key([[0, 22], [0.1, 104, "out2"], [0.25, 92], [CROUCH, 92], [CROUCH + 0.2, 160, "out2"], [LAUNCH, 52], [LAUNCH + 0.07, 39]], t);
  const h = key([[0, 22], [0.1, 104, "out2"], [0.25, 92], [CROUCH, 92], [CROUCH + 0.2, 48, "out2"], [LAUNCH, 131], [LAUNCH + 0.07, 123]], t);
  const cy = t < LAUNCH ? 563 - h / 2 : key([[LAUNCH, 512], [LAUNCH + 0.033, 350], [LAUNCH + 0.12, -200, "in2"]], t);
  const d = document.getElementById("dot");
  d.setAttribute("cx", 960); d.setAttribute("cy", cy); d.setAttribute("rx", w / 2); d.setAttribute("ry", h / 2);
}
const tl = gsap.timeline({ paused: true });
const clock = { t: 0 };
tl.to(clock, { t: DUR, duration: DUR, ease: "none", onUpdate: () => render(clock.t) }, 0);
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>

More prompts

Preview of the “Eight-Bar Motion Designer Showreel at 128 BPM” prompt

Eight-Bar Motion Designer Showreel at 128 BPM

<direction> Make a 15-second horizontal motion-graphics reel (1920x1080, 60 fps) for [your brand] that feels like a motion designer's showreel. The idea: eight scenes of exactly one bar each at 128 BPM (1.875 s), with a hard cut on every bar line and every scene showing a different discipline: dots, kinetic type shot by a camera, shape morphs, a dot grid, 3D points, a ribbon, text rings and an end card. Everything is flat vector graphics on flat, saturated colour fields, with fine animated film grain and a light vignette. Avoid crossfades, photos or footage, voice-over and any scene longer than one bar. The only breath is the end card. </direction> <structure> 1. 0.00-1.88, near-black: a pink dot pops in at the centre with overshoot. On beats 2, 3 and 4 it splits into 2, then 4, then a ring of 8 dots (radius about 200 px) that keeps turning. A thin grey circle draws itself on, with a dotted inner circle and a small crosshair. On the last beat the ring collapses into the centre dot, and a pink circle irises out from it to fill the screen. 2. 1.88-3.67, pink: the headline "YOUR IDEA / IN MOTION." (replace with yours) in deep ink, shot by a virtual camera. "YOUR" slams in huge and slightly blurred, then settles. The letters of "IDEA" fly in from the upper right on an arc, 35 ms apart, with overshoot, while bracket corners snap around the word and the camera pulls back to the whole first line. A fast whip pan (about 0.15 s, motion-blurred) reframes close on the left as "IN" rises onto line two. A second whip pulls out to the full block as the letters of "MOTION." drop in one by one, 26 ms apart. Then a 0.17 s crash zoom goes into the full stop until its dark dot fills the screen. 3. 3.67-5.63, near-black: out of that dark field a pink circle grows in the centre. It sits inside a design-tool bounding box with eight handles and a readout "ROT 000.0° / SHAPE CIRCLE" at the upper right. On the beats it morphs and spins about 100 degrees each time with a quick ease-out: a violet rounded square, a yellow rounded triangle, then an orange five-lobed flower. Faint echo outlines trail the edge and ghost boxes blur behind each spin, while the readout counts the angle and names the shape. The flower turns into a halftone rosette of small pink dots. 4. 5.63-7.50, light page: the rosette, now deep-ink dots, bursts into a rotating sphere of streaks and settles into a full-screen grid of 32 x 18 dots. On the beats, bands of bigger pink dots ripple through it: a ring expanding from the centre, a vertical sweep from left to right, ripples from two corners, then a ring in the centre. In the last half bar the grid tilts back into a 3D wave plane. 5. 7.50-9.38, violet: the plane continues as white points (a few of them yellow). The points swirl into a sphere, then a torus, then the edges of a cube. Each point arrives with its own small delay and leaves short streaks while moving fast. The points fade, the cube becomes a clean white wireframe, and the camera flies straight through it on the cut. 6. 9.38-11.25, yellow: a fat striped tube (deep-ink outline, pink, white, violet core, soft drop shadow) snakes in from the bottom left. It climbs, loops over the top and crosses over itself, and a ring of small tick marks bursts at the crossing. Then it slides out to the right, the tail chasing the head. 7. 11.25-13.15, near-black: four rows of words slide in from alternating sides with motion blur. The words alternate between solid white and outlined type, with pink bullets between them, for example "[YOUR BRAND] • IDEAS IN MOTION • MP4 EXPORT", "KINETIC TYPE • SHAPES • 3D EFFECTS", "MUSIC • SOUND • RHYTHM" and "FOOTAGE • PHOTOS • LOGOS" (replace with yours). The rows bend into four concentric rings around a pink dot that pops into the centre. The rings rotate in alternate directions, then spin up with blur and collapse into the dot. 8. 13.15-15.00, light page: an iris opens from that dot. The dot hops up in an arc and lands with a squash as the full stop of the wordmark "[Your brand].", set in deep-ink serif at about 230 px, whose letters rise from behind the baseline 50 ms apart. A tagline such as "YOUR AI MOTION DESIGNER" fades up below in widely letterspaced caps. Then a small grey line types on, such as "DESCRIBE THE VIDEO · THE AGENT ANIMATES IT · [YOUR WEBSITE]". Pace: no scene is longer than one bar. The cuts are the pulse, and the moves inside each bar land on beats (the dot splits, the shape morphs, the whips). The reel ends on the end card holding still. </structure> <composition> Palette: near-black #0D0B1E, pink #FB2D89 (main accent), deep ink #1C0B5D for dark type and outlines, light page #FAF9FF, violet #7C6CF2, yellow #FFD23F, orange #FE9117 and white. Backgrounds by scene: near-black, pink, near-black, light page, violet, yellow, near-black, light page. Type: an ultra-heavy geometric sans (Montserrat Black) for the headline and the text rings, a semibold bracketed serif (Literata) for the wordmark, and a clean grotesk (Geist) letterspaced about 0.2 em for small labels. An overlay sits on every scene except the end card: - thin corner brackets 55 px in from each corner; - top left, "[YOUR BRAND]" in bold plus a tagline such as "IDEAS IN MOTION" in a lighter grey; - top right, four tiny squares that light up on each beat, a bar count such as "BAR 3/8" and "128 BPM"; - bottom right, a frame counter such as "F0257" and a running timecode such as "00:00:04:16". The overlay's colour flips with each background: white on near-black and violet, deep ink on pink, light page and yellow. On the end card only the corners and the timecode remain. </composition> <techniques> Each hard cut is set up by the scene before it: the iris out, the crash zoom into the full stop, the dark field the shape grows from, the rosette bursting, the wave plane carrying over, the fly-through of the cube, the rings collapsing into a dot, and the iris from that dot. Moves inside each bar land on the beats. Pops and letter entrances use overshoot, and spins and morphs use a quick ease-out. Whip pans last about 0.15 s with motion blur, and the crash zoom lasts 0.17 s. Letter staggers are 35 ms for "IDEA", 26 ms for "MOTION." and 50 ms for the wordmark. Fast moves get motion blur, short streaks or trailing echo outlines. The overlay's beat squares light up on every beat, and its frame counter and timecode run live. Fine animated film grain and a light vignette sit over everything. </techniques> <music> An energetic, glossy house bed at 128 BPM, exactly 15 seconds long, on the same beat grid as the cuts. Bar 1 is the same music filtered and quiet under a rising sweep. The full four-on-the-floor beat with sidechained bass drops exactly on the first cut (1.875 s) and drives bars 2 to 7. The beat stops on the end-card iris (13.125 s), leaving one bell-like chord ringing with a long reverb to the end. </music> <sound> Sound design on the picture: - a soft click as the first dot pops, and little blips on the splits; - a boom on the drop; - swishes on the two whip pans, and a sub drop under the zoom into the full stop; - soft swooshes on the morphs, and a glassy hit as the rosette bursts; - whooshes on the cuts at 7.5 and 9.38 s, and a light hit where the ribbon crosses itself; - a boom with a metallic ring as the text rings close (about 12.2 s); - a click as the dot lands on the end card, and faint ticks while the last line types on. Mix at about -14 LUFS with true peak below -1 dBTP. No voice. </sound> <references> Motion designers' showreels and beat-cut agency sizzle reels in a flat-vector style, with design-tool interface motifs: bounding boxes with handles, rotation readouts, beat indicators, frame counters and timecode. </references>

Preview of the “Two-Part Kinetic Type Showreel on the Beat” prompt

Two-Part Kinetic Type Showreel on the Beat

<direction> Make a 32-second horizontal motion-graphics showreel (1920x1080, 60 fps) for [your brand], in two halves with different looks, cut tightly to the music. Everything is drawn: no footage, no stock clips. Part one (0-15.9 s, 128 BPM) is a dark, grainy, high-energy run of kinetic type, shapes, 3D and particles inside a thin HUD frame. Part two (15.9-31.8 s, 144 BPM) is a set of clean editorial slides, each with a slowly spinning 3D object. No voice-over. Avoid footage, slow soft crossfades between scenes, cuts that land off the beat, and any fonts beyond the two families named below. </direction> <structure> Part one (0-15.9 s, 128 BPM), inside the HUD frame: 1. 0-0.9 s: title card "[Your brand]" with "01 / 02" under it, fading up in 0.17 s and out in 0.18 s. 2. 0.9-2.7 s: a pink ball falls onto a ruled ground line and bounces three times on the beat (1.40, 1.88, 2.36 s). Each landing gets a dotted flight path, an expanding ring and a small mono callout ("BIGGER", "SLOWER", "ANOTHER COLOUR"). The ball then flies back to centre and scales up to fill the frame pink. 3. 2.7-3.25 s: on pink, "YOUR" in black expanded weight rises letter by letter from behind the baseline, an underline draws under it, and a small "(01)" tag sits above. 4. 3.25-3.7 s: "IDEA" in pink ramps from hairline to black weight in 0.11 s inside a violet design-tool selection box with eight handles and a size pill counting up. 5. 3.7-4.1 s: a light italic "is" in violet on the lavender backdrop scales up with blur. Its dot becomes a blob that floods the frame violet. 6. 4.1-4.65 s: "READY" in condensed white decodes out of random glyphs with a magenta/cyan split and sliced offsets, over faint mono lines of chat commands (for example 'chat.say("Bigger")', 'export("mp4")') and a blinking pink cursor block. The frame then collapses to a glowing line like a CRT switching off, followed by a grey flash. 7. 4.65-6.5 s: a 19 x 11 dot grid grows from the centre. A violet ring ripples the dots into plus signs. A sweep runs left to right turning the pluses into x's, circles and diamonds, with random pink and violet cells. A second fast sweep squares them all up. 8. 6.5-8.4 s: the square grid leans back into a 3D field of rounded bars rising in waves. A glossy pink ball hops across their tops on the beat, with shallow depth of field, ending in a zoom blur. 9. 8.4-10.25 s: a type wall of seven horizontal bands slams in from the right with motion blur, centre band first. Violet and light bands repeat "[YOUR BRAND]" in four cuts of the variable font (italic heavy expanded, italic light condensed, upright heavy, upright light), with pink dots between, scrolling in alternating directions. The middle band is pink, with the name still and big. The bands slide out sideways, leaving the word alone in white. 10. 10.25-12.1 s: the word dissolves left to right into about 3,000 particles. They form a rotating sphere, then two crossed rings with a pink core, then a two-arm galaxy (one arm pink), then warp out radially. 11. 12.1-14.2 s: a recap of the earlier scenes in split screens (two panels, then four, then nine), with single-frame glitch flashes and a grey flash at the end. 12. 14.2-15.9 s: end card. "[YOUR BRAND]" rises letter by letter and a rule draws under it. "YOUR AI MOTION DESIGNER" and "[YOURSITE.COM]" decode in letter-spaced mono. The pink ball drops in and lands as the full stop. Then "● TRY IT FREE" and an italic "describe the video. the agent animates it." slide in. Part two (15.9-31.8 s, 144 BPM), editorial slides: - 15.9 s: title card "Your AI motion designer" with "02 / 02". - 16.8 s, near-black: "EDIT" / "IN WORDS." (second line orange), body "TELL THE CHAT WHAT TO SHOW. / THE AGENT BUILDS THE ANIMATION.", labels "LIVE PREVIEW / MP4 EXPORT", a chrome torus knot with orange reflections, and my logo top right. - 19.2 s, orange: "IDEAS" / "IN MOTION." in near-black, a pill "NO KEYFRAMES", "FONTS FOR EVERY SCRIPT.", "BIGGER / SLOWER / ANOTHER COLOUR", and a dark twisted ribbon ring printed with "IDEAS IN MOTION •". - 21.7 s, near-black: "IDEA." / "TO VIDEO." / "ONE CHAT.", "SHAPES / 3D EFFECTS / SOUND", a chrome squiggle tube, corner brackets and a percent counter with a progress bar. - 24.2 s, light page: "MUSIC" / "TO RHYTHM.", "MUSIC AND / SOUND EFFECTS.", an orange glossy puffy star, and a black ball bouncing on the beat over an animated waveform. - 26.7 s, 27.6 s, 28.5 s: one centred word per slide. "BIGGER." on near-black, "SLOWER." on light page with a small chrome squiggle in the corner, "COLOUR." on orange. Captions: "SAY WHAT SHOULD CHANGE.", "NO KEYFRAMES TO HUNT FOR.", "THE PREVIEW UPDATES AS YOU TALK.". - 29.2 s, near-black: "OPEN" / "[YOUR BRAND].", "[YOURSITE.COM]", "IDEA → CHAT → VIDEO", an orange button "TRY IT FREE", and a chrome four-point puffy star. The video ends on the final music hit at 31.5 s, for 31.8 s in total. All quoted text is an example. Replace it with your own words of similar length so the layout holds. </structure> <composition> Part one palette: near-black #0D0B1E with film grain and a soft vignette; light page #FAF9FF for type; pink #FB2D89 as the main accent; violet #7C6CF2 as the second; lavender #F0EDFF only as the backdrop of the "is" shot. Part two palette: flat near-black, orange #FE9117 and light page #FAF9FF slides with a faint 96 px grid. Type is near-black on the orange and light slides and light on the near-black ones. Type: one neo-grotesk variable display family with width and weight axes for every headline (Mona Sans). A monospace for every small label, HUD line, caption and counter (JetBrains Mono). Part-one HUD: thin corner brackets. Top left "[YOUR BRAND] [YOURSITE.COM]". Top right "LIVE PREVIEW MP4 EXPORT NO KEYFRAMES". Bottom left a running timecode, four small squares and a progress line. Bottom right the current section name, changing with the scenes: "IDEAS IN MOTION", "KINETIC TYPE", "SHAPES", "3D EFFECTS", "EDIT IN WORDS", "LIVE PREVIEW", "MP4 EXPORT", "TRY IT FREE". Part-two slides share a header and a footer. Header: "● [YOUR BRAND] / IDEAS IN MOTION" on the left, "MP4 [YOURSITE.COM]" on the right, a hairline rule under it. Footer: "[YOUR BRAND]", six small dashes marking the current slide, a running timecode, and an orange progress line that grows across the whole half. Headlines sit large on the left. Each slide has a 3D object on the right, spinning slowly inside a thin orbit ellipse. My logo appears as a small badge on the slides. </composition> <techniques> - Ball: squash to 1.9 x 0.45 for 60 ms at each impact and stretch along its velocity in flight. - Letter rises: each letter takes 0.2 s with cubic out and a 35 ms stagger, rising from behind the baseline. Underlines and rules draw with expo out. - Part-one word cuts are hard and on the beat. Each word gets its own treatment: rise, weight ramp, blob flood, glitch decode. - Glitch decode: random glyphs resolve with an RGB split and sliced offsets, ending in a CRT switch-off. - Mono labels decode out of random glyphs. - Type wall: the bands slam in with motion blur, scroll at 260 px/s and slide out sideways. - Part-two headlines slide in from 90 px left, opacity 0.35 to 1 in 0.3 s, cubic out. The second line follows 30 ms later. - Part-two transitions: a panel in the next slide's colour sweeps in from the left in 83 ms. It starts just before the bar so the new slide lands exactly on the downbeat. - Single-word slides: hard cuts between them. Each word sits between two faint outline copies of itself that drift apart. - 3D objects: chrome and glossy materials with a slow continuous spin. - Waveform: its bars light up orange as a playhead passes. - Grain and vignette on part one only. Part two stays flat. </techniques> <music> An original instrumental track, exactly as long as the video and laid on its beat grid. Part one opens on a tense riser over ticking hi-hats. A heavy electronic drop hits at about 2.8 s (distorted bass, glitch zaps, 128 BPM) and drives everything to the end card. A one-second breath follows at 15.6 s. Part two is a brighter, bouncy electro-pop groove at 144 BPM from 16.8 s to a final hit at 31.5 s. Ball bounces, word cuts, wipes and slide landings all fall on beats or downbeats. </music> <sound> No voice-over. Sound effects on top of the music: - a click on each ball bounce - a riser into the drop and a boom on the first word - short whooshes on the word cuts - a downer as the screen switches off - whooshes into the 3D dive and into the type wall - a sub drop into the recap - a boom as the name lands on the end card - a riser and boom into part two - a whoosh on each slide wipe and a click on each hard cut Master at about -14 LUFS with true peak below -1 dBTP. </sound> <references> A motion-design studio reel or app launch sizzle. The first half is brutalist kinetic typography with design-tool and HUD overlays. The second half is Swiss-style editorial slides with chrome 3D objects. </references>

Preview of the “One Pink Dot Through an Engraving Collage” prompt

One Pink Dot Through an Engraving Collage

<direction> Make a vertical brand spot for [your brand], 1080x1920 at 60 fps, 14.5 seconds, all motion graphics, no voice. The idea: one pink dot travels through a fast collage of old black-and-white engravings, white marble sculpture and big serif words on a light page. Along the way it becomes a question mark's dot, the dot of an i and a full stop, and at the end it grows into my logo. There are about 70 cuts, with pictures changing every 2-6 frames and the word scenes as the breaths. Avoid losing the dot between cuts and letting words touch the frame edges. Do not clip the top of the drawn "?" over the first word; only the opening giant "?" is deliberately cropped by the frame. Never show my logo's white or light parts straight on the light page, where they vanish. </direction> <structure> Times are in seconds. 1. 0.00-0.43: centred lockup, my logo left of the wordmark "[your brand]", 900 px wide. Hold, then in 4 frames it shrinks to a speck (100, 85, 55, 30, 5 %) with a horizontal smear. 4 frames of empty page follow. 2. 0.50-0.67: a giant deep-ink "?" cropped by the top edge of the frame, its full stop a pink dot 210 px wide. It erases along its own stroke from the top terminal to the stem in 6 frames (quad ease-out). 3. 0.67-0.78: the dot shrinks and flies up. As a short pink comet it runs once round a 900 px circle at about 70 degrees a frame, laying a rough deep-ink brush ring behind it, then spirals into the centre. 4. 0.75-1.30: inside the ring, pictures cut every 2-6 frames: snowflakes, a dandelion, a sunflower, a rose, a radiolarian plate, a carved rosette and one two-frame inverted flash. My logo pops in the centre of each (60, 85, 100 % over three frames). The ring pushes in slowly on an ease-in (100 to 114 %), then opens out and fades in 4 frames. 5. 1.30-1.70: an engraved human proportion figure pushes in (48 to 100 % in 7 frames); the dot climbs the raised arm to the left edge. 6. 1.70-2.40: the word "idea" slides in with a 2-frame smear, left of centre. The pink stroke flies across the top and draws a pink "?" after it in 4 frames, the dot popping last; this "?" is drawn whole, top hook included. A round star chart, two wireframe polyhedra on pedestals and small engravings pop around it, and ink circles and a tick are drawn on them. Everything creeps in (about 0.5 % a frame). The "?" erases back to its dot, and the dot drips up, arcs over the word and lands in front of it. There a pink "v" grows (56, 82, 100 %) while the word slides right to make room, making "video"; the "v" turns ink a frame later. 7. 2.40-2.80: "video" holds with engravings (a drawing on an easel, a rhinoceros, hands on a book) and a band of calligraphic flourishes across the top. An ink circle and a line are drawn on them; the dot settles on the first letter and slides off left. 8. 2.80-3.13: an engraved quill writes a flourish, with script lines below. The dot draws a pink ring round the written word, then the camera rushes into the nib (100, 127, 203, 300, 520 % on alternate frames) with growing blur. 9. 3.13-3.67: match cut to the centre of a drawn stellar snowflake. The camera opens out to a 3x4 grid of snowflakes and the dot draws an ink ring round the centre one. The others turn into small dots as the camera pushes back in to centre the ringed flake. 10. 3.67-4.07: a lavender disc with 13 galloping horse silhouettes round its rim turns slowly, the dot in its centre; slow push-in. 11. 4.07-4.47: a small horse silhouette, then a big one, then a horse study, then a skeleton-like washed study with a scale bar drawn under it and a circle round a hoof; a two-frame inverted flash. 12. 4.47-5.07: a figure with raised arms, then marble heads cut every 4 frames over thin ruled lines. The dot runs along the top line drawing it and drops to the temple, and an ink ellipse rings an eye. Then a profile and a head-proportion line drawing. 13. 5.07-5.97: the word "bigger" sits on the middle ruled line. The dot strikes through it in 3 frames and a pink tick shoots up to the handwritten correction "slower" above. "bigger" vanishes and a pink "slower" grows (42, 80, 100 %) and turns ink. The handwriting wipes away and the lines erase right to left one after another. The dot drops under the word and slides to the centre as the word rushes the camera with blur. 14. 5.97-6.33: a pink compass-and-ruler construction grid, then my brand's initials drawn in squares with circles and diagonals. Then thin radial lines appear and the outlines of my logo are drawn piece by piece. 15. 6.33-7.08: the flat logo (about 700 px) pulls into a shaded pink ball in 3 frames. It bursts out as a 3D logo, a deep-ink tile slab with the logo's shapes on its face, turning from a steep angle to face the camera (power3 ease-out, 0.33 s) with a soft shadow. Then it shrinks back into the dot. 16. 7.08-8.08: white sculpted marble hands, cut every 8-12 frames, hold the logo, a star and the dot at the frame's centre. A curved arrow, rotation ellipses, a bracket and a measuring line are drawn on them. 17. 8.08-8.30: dust specks; the dot strings four stars together with a thin ink line. 18. 8.30-10.60: the dot travels a wide arc over the top that keeps turning into a two-turn inward spiral, leaving a thin ink trail. Underneath, about 35 pictures cut every 2-6 frames: a vase, a veiled bust, a rosette, a horse, ink in water, a line network, a crack on a deep-ink flash, figures, a botanical sprig, a rhinoceros page, three marble faces, a shell, a spiral of script, an "O" in its construction square, a star chart, an allium, a polyhedron, a sketch, hands, a snowflake, a letter construction, heads, an eye and an ammonite. The spiral folds into the dot (60, 28 %, gone). 19. 10.60-10.77: a small logo, a bigger logo, the glyph alone on a deep-ink flash, then a small logo, one or two frames each. 20. 10.77-11.13: "pre" sits big and high on the right, and "view" slides in below with a smear. The pink dot is the tittle of its dotless i, and both words are sized to sit inside the margins at rest. Push in on the dot (to 165 %), then everything falls back small. 21. 11.13-12.07: the dot types the closing line letter by letter. "Live" comes first (280 px), each letter popping from 60 % with a little drop at the end. Then "preview" (150 px) appears below, and the dot settles as the full stop: "Live preview." The line creeps in about 0.6 % a frame. 22. 12.07-12.90: the line falls away as the full stop streaks to the centre. The dot grows my logo piece by piece: the deep-ink tile first, then its coloured shapes. 23. 12.90-14.47: the logo shrinks into its place in the lockup and the wordmark "[your brand]" is wiped on left to right in 12 frames; hold to the end. All words are examples to replace with yours: "idea" becoming "video", "bigger" corrected to "slower", "pre"/"view" and "Live preview.". Keep each word's role and length so the layout holds, and give the split word an i so the dot can be its tittle. </structure> <composition> Use a light page background #FAF9FF. All type and ink lines are deep ink #1C0B5D. There is one accent, pink #FB2D89, for the dot and its strokes, plus soft panels in lavender #F0EDFF. Pictures are black-and-white engravings and marble sculpture photos cut out on the page. They are tinted as a duotone from near-black #0D0B1E through deep ink to the page colour. Two-frame flash frames swap to a deep-ink background with page-coloured lines. Type: a heavy editorial serif (Literata Bold) for the big words, the same family at regular weight for the closing line and the wordmark, and a handwriting face (Caveat) for the one correction. Wherever the dot blooms into my logo on the light page, show the full logo on a deep-ink rounded-square tile so its light parts stay visible. On the dark flash frames, use the glyph alone. Keep every word at least 6 % of the frame width from the edges, also at the strongest push-in. Set a longer word smaller rather than let it touch the edge. Only the push into the dot in shot 20 and the word rushing the camera in shot 13 may run past the frame. </composition> <techniques> Keep the pink dot continuous across every cut, every cut matching on its position, so the montage reads as one gesture. Pops grow over three frames: 60, 85, 100 % for the logo, and 56, 82, 100 % or 42, 80, 100 % for growing words. A pink letter or word turns ink a frame after it lands. Words slide in with a 2-frame horizontal smear. Strokes draw on and erase along their own path with a quad ease-out. The dot draws hand-drawn annotations on the pictures: ink circles, ellipses, ticks, scale bars, arrows, brackets, measuring lines and a rough brush ring. Held scenes creep in continuously (0.5-0.6 % a frame), and push-ins run on an ease-in. Camera rushes use stepped scales on alternate frames with growing motion blur into match cuts. Two-frame inverted flashes punctuate the montage at 4.37, 9.1 and 10.7 s. The 3D logo turns with a power3 ease-out over 0.33 s and casts a soft shadow. </techniques> <music> A playful, bright instrumental at 108 BPM with beat 1 at 0.05 s: pizzicato strings and plucked marimba over a bouncy light groove. It runs flat-out from the first frame and stops dead for a beat at 12.1 s. On the beat at 12.8 s it resolves on a warm sustained major chord that rings to the end. Make it exactly as long as the video, with the cuts laid on its beat grid. </music> <sound> Soft pops when words and big pictures arrive (0.5, 1.7, 2.4, 3.13, 4.47, 6.33, 10.77, 11.43 s). Wood ticks on small cuts and short swishes on the zooms and slides. A light glassy hit on each dark flash (4.37, 9.1, 10.7 s) and a low thump under the 3D burst. Tiny clicks as the closing line is typed, and a riser into the final chord. No voice. Mix to about -14 LUFS, true peak below -1 dBTP. </sound> <references> Editorial collage films built from public-domain scientific and Renaissance engravings and classical marble sculpture. The feel of an artist's notebook full of construction lines and annotations. Fast kinetic-typography brand spots where a single graphic element carries the whole edit. </references>

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