your AI motion designer

EN

Simple Motion

Hand-drawn drink recipe product explainer

A square hand-drawn explainer that shows a product's steps as a drink built in a glass: ice drops, three bottles pour, a spoon stirs and a peel lands.

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 30-second square motion graphic (1080x1080, 30 fps) with a light lounge music bed, playful sound effects on every action and no voice. It's a hand-drawn "recipe" explainer for my product: its steps are shown as a drink being built step by step in a glass. It is one continuous illustrated scene with no cuts, and everything changes in place. The look is a flat 2D illustration on a pale lavender-white page, with deep-ink outlines that boil like hand-drawn animation and chunky sticker-style cartoon caps. Replace every quoted word below with my product's own words, keeping each about the same length so the layout holds. Avoid cuts, camera moves, shading or gradients beyond the flat fills, and voice-over.

Structure

The pace is calm and even. The intro is quick and bouncy, each pour takes a steady 5 s, the stir and the twist run a little faster, and the finale holds for 3 s. Every card change sits on a beat of the 120 BPM music: 6.0, 11.0, 16.0, 21.0, 24.5 and 27.0 s.

0–2.5 s, title: "YOUR BRAND" (replace with your brand) is laid out large in the centre, about 920 px wide. From 0.15 s its letters stamp in one by one at their own places over 0.83 s. Each starts at 10% size, 22 px low and tilted ±8–14°, and lands in 0.36 s with a soft overshoot (back.out 1.7). At 1.4 s a small line, "what your product is", fades in under it, and it fades out at 2.45 s.
2.5–3.6 s, hand-off: the title rises 365 px and shrinks to 58% in 0.8 s (power3.inOut) to become the header. Meanwhile, from 2.87 s, the glass draws itself like a pen sketch: left wall, right wall, rim ellipse, then bottom curve, about 0.4 s in all. Its fill then fades in (0.28 s), and the header subtitle fades in under the title.
3.6–6.0 s, step 1: the card enters with a 4° tilt and a fast fade (0.15 s), and its big value stamps in on its own. The card reads "STEP 01", "PICK", "TEMPLATE" and "vertical, horizontal or square". The tracker fades in with the first circle active. Three ice cubes drop in from above the frame 0.35 s apart. Each falls with gravity (power2.in, about 0.3 s), bounces about 140 px, hops 20 px and settles, two on the bottom and one on top. Three little spark strokes flash above each cube as it passes the rim. Each landing fills a third of the card's progress bar and adds one word of the status "three short words".
6.0–21.0 s, steps 2–4: three pours of 5 s each, all on the same pattern. The cards read "STEP 02 / SAY / KINETIC TYPE / tell the chat what to show", then "STEP 02 / SAY / SHAPES / the agent builds the animation", then "STEP 02 / SAY / SOUND / music and sound effects to the rhythm". A bottle slides in from the left (0.23 s) and stands. It then tilts to 115° on a small arc, up a little and then down to the pour point (0.37 s), and pours a curved stream into the glass. The bottles are lavender, then pink, then deep ink. Each has a white label with my logo as a small rounded-square icon, a word ("TYPE", "SHAPES", "SOUND") and a small line ("kinetic", "3D effects", "music"). A grey target mark ("01", then "02", then "03") appears beside the glass with a dashed line across it. The drink rises to that mark over 2 s (sine.inOut), the ice floats up with it, and splash droplets hop where the stream lands. The drink starts clear white, turns pink with the second pour, then deep magenta (pink mixed with deep ink) with the third, each colour blending over about 1.3 s. The progress bar fills and "live preview" types itself in ten steps. Then the mark turns pink, the top of the stream lets go and falls in, and the bottle tilts back and slides out.
21.0–24.5 s, step 5: the card reads "STEP 03 / REFINE / IN WORDS / “bigger”, “slower”, “another colour”". A light bar spoon with a ball top drops in on a fast ease-out. It rocks 8° back and forth on a 0.8 s cycle while the cubes jostle and dim, then lifts out. The bar fills in 4-frame ticks while "live preview" types out.
24.5–27.0 s, step 6: the card reads "STEP 03 / MP4 / EXPORT / download the MP4". An orange peel curl pops in above the glass, twists and squashes for about 0.8 s while orange droplets fall. It then glides onto the rim (0.5 s, power2.inOut) as "try it free" finishes typing.
27.0–30 s, finale: the card re-mounts as "YOUR TAGLINE / OPEN APP / YOURSITE.COM / pick · describe · refine". Seven short pink and orange dashes shoot out around the glass (0.16 s) and keep gently breathing in and out. The glass grows 4% over 0.6 s and holds to the end.

Composition

Colours:

Page: pale lavender-white (#FAF9FF).
Outlines: deep ink (#1C0B5D), about 3 px with round caps.
Glass: lavender (#F0EDFF) with a violet-tinted base.
Ice cubes: rounded squares, white at 40% over whatever is behind them, with an inner corner line.
Cards: white with a soft lavender offset shadow.
Orange (#FE9117): the garnish and half of the finale dashes.
Type:
Display type: chunky cartoon caps (something like Lalezar) set as stickers. The face is pink (#FB2D89), with a deep-ink outline behind it and a violet extrusion (#7C6CF2) offset down-left.
Small text: a friendly print handwriting (something like Playpen Sans), muted purple-grey (#6B6385) for body text and pink for labels.
Layout after the intro:
Header: top centre, about 540 px wide, with a small line under it: "first benefit · second benefit · third benefit".
Glass: a tapered rocks glass left of centre, about 290 px wide, rim at y 457 and base at y 797.
Info card: on the right, 390x248 px with 14 px corners and a deep-ink border. Top to bottom it holds a small pink kicker, the big sticker-letter value, a title in dark caps, a handwritten line, and a pill progress bar with a short status word on its right.
Tracker: six steps along the bottom. The circles are 43 px wide and 156 px apart on a thin rail, with small caps labels under them: "TEMPLATE", "TYPE", "SHAPES", "SOUND", "REFINE", "EXPORT".

Techniques

Boiling lines: every drawn line gets a gentle 1–2 px wobble that changes to a new wobble every 4 frames, across the whole piece, like a turbulence displacement over the lines.
Card re-mount: on each step's first frame, only the new big value shows for one frame, then the card pops back. The big value stamps in on its own from 72% size with a back.out overshoot.
Typing: status words type themselves in steps.
Tracker, current step: its circle has a deep-ink ring, a pink dot and a pink label, and it breathes between 100% and 112% every second.
Tracker, finished step: about 0.1 s before the next card, its circle fills pink and a white tick draws in 0.17 s. Its label turns deep ink, and the rail to the next circle fills pink in 0.37 s.
Tracker, steps still to come: they stay muted with a small grey dot.

Music

A warm, relaxed lounge-pop instrumental at 120 BPM in a major key: brushed drums, round upright bass, vibraphone, pizzicato strings, finger snaps and a little shaker. Keep it sparse with no lead melody, so it sits under the effects. It opens with a few plucked vibraphone and pizzicato notes and no drums, and a soft bass joins at 2 s. The full brushed groove with a walking bass drops exactly on the first pour card at 6.0 s. It stays steady through the pours, the stir and the twist, lands a closing chord hit at 28.0 s as the finished glass settles, and rings out to the end. Make it exactly 30 s, mixed to about -14 LUFS with true peak below -1 dBTP.

Sound

No voice. Each effect sits on its frame, clearly above the music; the music never needs to get louder to make room.

Title: a soft pop for every letter, rising a little in pitch and panned left to right as the word builds.
Hand-off: a gentle whoosh under the title's rise, and a faint pencil scratch for each stroke as the glass draws itself.
Cards: a paper flick and a soft thud each time a card is dealt and its big word stamps in.
Ice landings: a hard, short knock of ice against the glass for each cube, with two or three contacts a few milliseconds apart and a low thunk under the drop. Softer for the bounce and smaller for the last hop, every hit standing well clear of the music.
Bottles: a soft whoosh as each bottle slides in and again as it tilts.
Pours: each one clearly audible and different. First a fizzy, splashy clear stream that knocks the ice, then a fuller pour in quick glugs, then a dark syrupy one in slow, deep glugs. Give each pour body in the 1–4 kHz range, where the stream and the glass's ringing air pocket sit, so it reads about 8 dB above the seconds around it there. Keep them clean: mostly the ringing glass and bubbles, little hiss.
Around each pour: the pitch of the air pocket rises from pour to pour as the glass fills, and a few last drips fall after each one. The music ducks about 5 dB under each pour and comes back gently, and a whoosh follows the bottle out.
Tracker: a soft two-note confirmation chime whenever a step is ticked off, a touch louder for the last one.
Spoon: a metal clink as it drops in, ice knocking against the glass at each end of its swing, and a whoosh as it lifts out.
Peel: a pluck as it pops in, three fine mist sprays while it twists, and a soft tap as it lands on the rim.
Finale: a bright chime with the burst of dashes, over a faint glassy shimmer to the end.
Final mix: about -14 LUFS, true peak below -1 dBTP.

References

Hand-drawn boiling-line cel animation, flat sticker-style app explainers, and cocktail-recipe illustrations where each ingredient stands for a feature.

What to prepare

Your logo or app icon, a simple square mark that reads small; it appears on the white labels of the three bottles.

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 “Hand-drawn line boil” technique — At 0:16 in the video

Texture

Hand-drawn line boil

Every drawn line wobbles a pixel or two and settles into a new wobble every 4 frames, like hand-drawn animation re-traced on each drawing. An SVG filter (feTurbulence at baseFrequency 0.016, one octave, into feDisplacementMap at scale 3.6) sits on the outlines, and the paused timeline steps the turbulence seed every 4/30 s, so the boil is seekable and lands on whole frames.

When to use To give flat vector drawings, outlines and display type a sketchbook, hand-made feel.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hand-drawn line boil</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>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.ink { fill: none; stroke: #1C0B5D; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fill { fill: #F0EDFF; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1080" data-height="1080">
  <svg width="0" height="0" style="position:absolute"><filter id="boil" x="-10%" y="-10%" width="120%" height="120%"><feTurbulence id="boilNoise" type="fractalNoise" baseFrequency="0.016" numOctaves="1" seed="1" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale="3.6" xChannelSelector="R" yChannelSelector="G"/></filter></svg>
  <svg class="art clip" data-start="0" data-duration="4" viewBox="0 0 1080 1080"><g transform="translate(188 40)" filter="url(#boil)"><path class="fill" d="M209,460 L234,786 Q352,808 470,786 L495,460 Z"/><ellipse class="fill" cx="352" cy="457.5" rx="143" ry="22"/><path class="ink" d="M209,461 L234,786"/><path class="ink" d="M495,461 L470,786"/><path class="ink" d="M209,457.5 A143,22 0 1 1 495,457.5 A143,22 0 1 1 209,457.5"/><path class="ink" d="M234,786 Q352,808 470,786"/></g></svg>
</div>
<script>
const DURATION = 4;
const tl = gsap.timeline({ paused: true });
// Boil: a new noise seed every 4 frames at 30 fps (7.5 drawings a second, whole frames each).
for (let k = 0; k * 4 / 30 < DURATION; k++) tl.set("#boilNoise", { attr: { seed: 1 + (k % 9) } }, k * 4 / 30);
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 “Sticker letters popping in one by one” technique — At 0:00 in the video

Typography

Sticker letters popping in one by one

A chunky title is laid out whole, then each letter stamps in at its own place: from scale 0.1, 22 px low and tilted (alternating -14 to +12 degrees) to rest in 0.36 s with back.out(1.7), one letter every 0.14 s. Each letter is a sticker: pink fill, a deep-ink outline drawn behind it with text-stroke on ::before, and a violet extrusion offset down-left on ::after.

When to use For a playful title reveal that reads letter by letter without moving the word's layout.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sticker letters popping in one by one</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=Lalezar&family=Playpen+Sans:wght@400&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
#word { position: absolute; left: 0; right: 0; top: 440px; text-align: center; font: 176px/1 "Lalezar", sans-serif; letter-spacing: -4px; white-space: nowrap; --sw: 7px; --sd: 7px; --ssw: 2.6px; }
.pop { position: relative; display: inline-block; color: #FB2D89; isolation: isolate; }
.pop::before, .pop::after { content: attr(data-ch); position: absolute; left: 0; top: 0; }
.pop::before { z-index: -1; color: #1C0B5D; -webkit-text-stroke: var(--sw) #1C0B5D; }   /* outline, behind the fill */
.pop::after { z-index: -2; transform: translate(calc(-1 * var(--sd)), var(--sd)); color: #7C6CF2; -webkit-text-stroke: var(--ssw) #1C0B5D; } /* extruded depth */
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1080">
  <div id="word" class="clip" data-start="0" data-duration="3"></div>
</div>
<script>
const TEXT = "HELLO";            // the word
const START = 0.15, STAGGER = 0.14;   // first letter, gap between letters (s)
const word = document.getElementById("word");
for (const ch of TEXT) { const s = document.createElement("span"); s.className = "pop"; s.dataset.ch = ch; s.textContent = ch; word.appendChild(s); }
const tl = gsap.timeline({ paused: true });
gsap.utils.toArray("#word .pop").forEach((el, i) => {
  const t0 = START + i * STAGGER, tilt = [-14, 10, -8, 12, -10, 8, -12][i % 7];
  gsap.set(el, { opacity: 0 });
  tl.set(el, { opacity: 1 }, t0);
  tl.fromTo(el, { scale: 0.1, y: 22, rotation: tilt }, { scale: 1, y: 0, rotation: 0, duration: 0.36, ease: "back.out(1.7)", immediateRender: true }, t0);
});
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 “Hero title that rises into a header” technique — At 0:02 in the video

Layout

Hero title that rises into a header

The opening title holds centre frame with a small line under it; the line fades out in 0.16 s, then the title travels 365 px up and shrinks to 0.576 in 0.8 s on power3.inOut, symmetric around its midpoint, and becomes the header. A new three-part subtitle fades in under it over 0.4 s as it lands, so the intro hands over to the layout without a cut.

When to use When an intro card should become the persistent header of an explainer.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hero title that rises into a header</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=Lalezar&family=Playpen+Sans:wght@400&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
#titleBox { position: absolute; left: 40px; top: 378px; width: 1000px; height: 220px; }
#title { position: absolute; left: 0; width: 1000px; top: 36px; text-align: center; font: 176px/1 "Lalezar", sans-serif; color: #FB2D89; -webkit-text-stroke: 3px #1C0B5D; }
#intro, #sub { position: absolute; left: 0; width: 1080px; text-align: center; font-family: "Playpen Sans", sans-serif; color: #6B6385; }
#intro { top: 586px; font-size: 28.5px; }
#sub { top: 181px; font-size: 24px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1080" data-height="1080">
  <div id="titleBox" class="clip" data-start="0" data-duration="4"><div id="title">BIG IDEA</div></div>
  <div id="intro" class="clip" data-start="0" data-duration="4">a short line</div>
  <div id="sub" class="clip" data-start="0" data-duration="4">first part · second part · third part</div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
tl.fromTo("#intro", { opacity: 0, y: 6 }, { opacity: 1, y: 0, duration: 0.24, ease: "power1.out" }, 0.3);
tl.to("#intro", { opacity: 0, duration: 0.16, ease: "power1.in" }, 1.35);
// The move: 0.8 s, power3.inOut, to the header place and size.
tl.fromTo("#titleBox", { y: 0, scale: 1 }, { y: -365, scale: 0.576, duration: 0.8, ease: "power3.inOut" }, 1.4);
tl.fromTo("#sub", { opacity: 0 }, { opacity: 1, duration: 0.4, ease: "power1.out" }, 2.1);
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 “Outline that draws itself, then fills” technique — At 0:03 in the video

Shapes

Outline that draws itself, then fills

An object appears as a drawing: its outline paths draw on with stroke-dashoffset in sequence (left wall 0.17 s, right wall 0.14 s from +0.10 s, rim 0.20 s from +0.20 s, bottom 0.17 s from +0.23 s, power1.inOut), and only then its fill fades in over 0.28 s. The dash array is the path length plus 24 and the offset starts 12 past the end, so round caps leave no dot before a stroke starts.

When to use To introduce a drawn object as if a pen sketched it, before it gets colour and content.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Outline that draws itself, then fills</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>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.ink { fill: none; stroke: #1C0B5D; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fill { fill: #F0EDFF; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1080">
  <svg class="art clip" data-start="0" data-duration="3" viewBox="0 0 1080 1080"><g transform="translate(188 40)">
    <g id="fills"><path class="fill" d="M209,460 L234,786 Q352,808 470,786 L495,460 Z"/><ellipse class="fill" cx="352" cy="457.5" rx="143" ry="22"/></g>
    <path id="l" class="ink" d="M209,461 L234,786"/><path id="r" class="ink" d="M495,461 L470,786"/>
    <path id="rim" class="ink" d="M209,457.5 A143,22 0 1 1 495,457.5 A143,22 0 1 1 209,457.5"/><path id="b" class="ink" d="M234,786 Q352,808 470,786"/>
  </g></svg>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const START = 0.4;
const drawOn = (id, t0, dur) => {
  const el = document.getElementById(id), L = el.getTotalLength();
  tl.fromTo(el, { strokeDasharray: L + " " + (L + 24), strokeDashoffset: L + 12 }, { strokeDashoffset: 0, duration: dur, ease: "power1.inOut", immediateRender: true }, t0);
};
drawOn("l", START, 0.17);
drawOn("r", START + 0.1, 0.14);
drawOn("rim", START + 0.2, 0.2);
drawOn("b", START + 0.23, 0.17);
tl.fromTo("#fills", { opacity: 0 }, { opacity: 1, duration: 0.28, ease: "power1.out", immediateRender: true }, START + 0.4);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Preview of the “Step card re-mount with a stamped value” technique — At 0:06 in the video

Transition

Step card re-mount with a stamped value

Each new step re-mounts the info card instead of cross-fading it: on the step's frame the card is gone and only the new big value shows, at scale 0.72; the value springs to full size in 0.3 s (back.out(2.6)) while the card returns from 4 degrees of tilt, scale 0.965 and zero opacity in 0.15 s (power2.out). Old content disappears on that same frame, so nothing lingers.

When to use For step-by-step explainers where each new step should feel like a fresh card dealt onto the table.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Step card re-mount with a stamped value</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=Lalezar&family=Playpen+Sans:wght@400&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
#card, #bigs { position: absolute; left: 345px; top: 416px; width: 390px; height: 248px; }
#card .frame { position: absolute; inset: 0; border: 3px solid #1C0B5D; border-radius: 14px; background: #FFFFFF; box-shadow: 7px 8px 0 #F0EDFF; }
.pane { position: absolute; inset: 0; opacity: 0; }
.kicker { position: absolute; left: 27px; top: 32px; font: 17.5px/1 "Playpen Sans", sans-serif; color: #FB2D89; }
.name { position: absolute; left: 29px; top: 135px; font: 47px/1 "Lalezar", sans-serif; color: #1C0B5D; }
.note { position: absolute; left: 29px; top: 183px; font: 17.5px/1.2 "Playpen Sans", sans-serif; color: #6B6385; }
.big { position: absolute; left: 27px; top: 58px; font: 76px/1 "Lalezar", sans-serif; color: #FB2D89; -webkit-text-stroke: 2.5px #1C0B5D; opacity: 0; transform-origin: 30% 55%; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1080" data-height="1080">
  <div id="card" class="clip" data-start="0" data-duration="4"><div class="frame"></div>
    <div class="pane" id="p0"><div class="kicker">"STEP 01"</div><div class="name">"FIRST THING"</div><div class="note">"a short note about it"</div></div>
    <div class="pane" id="p1"><div class="kicker">"STEP 02"</div><div class="name">"NEXT THING"</div><div class="note">"another short note"</div></div>
  </div>
  <div id="bigs" class="clip" data-start="0" data-duration="4"><div class="big" id="b0">GO</div><div class="big" id="b1">NOW</div></div>
</div>
<script>
const STEPS = [0.6, 2.2];           // when each step arrives (s)
const tl = gsap.timeline({ paused: true });
gsap.set("#card", { opacity: 0 });
STEPS.forEach((s, i) => {
  tl.fromTo("#card", { opacity: 0, rotation: 4, scale: 0.965 }, { opacity: 1, rotation: 0, scale: 1, duration: 0.15, ease: "power2.out", immediateRender: false }, s);
  tl.set("#p" + i, { opacity: 1 }, s);
  tl.set("#b" + i, { opacity: 1 }, s);
  tl.fromTo("#b" + i, { scale: 0.72 }, { scale: 1, duration: 0.3, ease: "back.out(2.6)", immediateRender: false }, s);
  if (i > 0) { tl.set("#p" + (i - 1), { opacity: 0 }, s); tl.set("#b" + (i - 1), { opacity: 0 }, s); }
});
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 “Step tracker: pulse, tick and rail fill” technique — At 0:05 in the video

Data

Step tracker: pulse, tick and rail fill

A row of step circles on a rail. The current step's circle breathes from 1 to 1.12 and back every 1.03 s (sine.inOut halves of 0.515 s) with its dot and label in the accent colour. When the step is done the circle fills pink, a white tick draws in 0.17 s, the label turns dark, and 0.03 s later the rail to the next circle fills in 0.37 s (power1.inOut) as the next circle starts breathing.

When to use To show progress through a sequence of steps in any explainer or tutorial.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Step tracker: pulse, tick and rail fill</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=Lalezar&family=Playpen+Sans:wght@400&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.rail { stroke: rgba(107, 99, 133, 0.3); stroke-width: 3; stroke-linecap: round; }
.railOn { stroke: #FB2D89; stroke-width: 3.4; stroke-linecap: round; }
.ring { fill: #FFFFFF; stroke: rgba(107, 99, 133, 0.3); stroke-width: 2.6; }
.dot { fill: rgba(107, 99, 133, 0.62); }
.done { fill: #FB2D89; stroke: #1C0B5D; stroke-width: 2.8; opacity: 0; }
.check { fill: none; stroke: #FFFFFF; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
#labels { position: absolute; inset: 0; }
.lbl { position: absolute; top: 580px; width: 200px; margin-left: -100px; text-align: center; font: 18px/1.2 "Playpen Sans", sans-serif; color: rgba(107, 99, 133, 0.62); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="5" data-width="1080" data-height="1080">
  <svg class="art clip" data-start="0" data-duration="5" viewBox="0 0 1080 1080" id="tracker"></svg>
  <div id="labels" class="clip" data-start="0" data-duration="5"></div>
</div>
<script>
const LABELS = ["FIRST", "SECOND", "THIRD", "FOURTH"];
const X = LABELS.map((_, i) => 306 + i * 156), Y = 540, R = 21.5;
const STARTS = [0.4, 1.6, 2.8, 4.0], DONE = [1.5, 2.7, 3.9];   // each step starts, and ends (s)
const NS = "http://www.w3.org/2000/svg", svg = document.getElementById("tracker");
const el = (tag, a, p) => { const e = document.createElementNS(NS, tag); for (const k in a) e.setAttribute(k, a[k]); p.appendChild(e); return e; };
for (let i = 0; i < X.length - 1; i++) {
  el("line", { class: "rail", x1: X[i] + R + 3.5, y1: Y, x2: X[i + 1] - R - 3.5, y2: Y }, svg);
  const on = el("line", { class: "railOn", id: "on" + i, x1: X[i] + R + 3.5, y1: Y, x2: X[i + 1] - R - 3.5, y2: Y }, svg);
  const len = X[i + 1] - X[i] - 2 * R - 7; on.style.strokeDasharray = len + " " + len; on.style.strokeDashoffset = len; on.dataset.len = len;
}
X.forEach((x, i) => {
  const n = el("g", { transform: "translate(" + x + " " + Y + ")" }, svg), g = el("g", { id: "n" + i }, n);
  el("circle", { class: "ring", r: R, id: "ring" + i }, g);
  el("circle", { class: "done", r: R, id: "done" + i }, g);
  el("circle", { class: "dot", r: 5.5, id: "dot" + i }, g);
  const ck = el("path", { class: "check", id: "ck" + i, d: "M-8.5,0.5 L-2.5,6.5 L8.5,-6" }, g); ck.style.strokeDasharray = "28 28"; ck.style.strokeDashoffset = 28;
  const l = document.createElement("div"); l.className = "lbl"; l.id = "l" + i; l.style.left = x + "px"; l.textContent = LABELS[i]; document.getElementById("labels").appendChild(l);
});
const tl = gsap.timeline({ paused: true });
STARTS.forEach((s, i) => {
  tl.set("#ring" + i, { stroke: "#1C0B5D" }, s);
  tl.set("#dot" + i, { fill: "#FB2D89" }, s);
  tl.set("#l" + i, { color: "#FB2D89" }, s);
  const end = DONE[i] ?? 5, cycles = Math.max(1, Math.floor((end - s) / 1.03));
  tl.fromTo("#n" + i, { scale: 1, svgOrigin: "0 0" }, { scale: 1.12, svgOrigin: "0 0", duration: 0.515, ease: "sine.inOut", yoyo: true, repeat: cycles * 2 - 1, immediateRender: false }, s);
  if (DONE[i] === undefined) return;
  tl.set("#n" + i, { scale: 1 }, end);
  tl.set("#done" + i, { opacity: 1 }, end);
  tl.set("#dot" + i, { opacity: 0 }, end);
  tl.fromTo("#ck" + i, { strokeDashoffset: 28 }, { strokeDashoffset: 0, duration: 0.17, ease: "power1.out", immediateRender: false }, end);
  tl.set("#l" + i, { color: "#1C0B5D" }, end);
  const on = document.getElementById("on" + i);
  tl.fromTo(on, { strokeDashoffset: on.dataset.len }, { strokeDashoffset: 0, duration: 0.37, ease: "power1.inOut", immediateRender: false }, end + 0.03);
});
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 “Pour that fills a glass” technique — At 0:13 in the video

Shapes

Pour that fills a glass

A bottle slides in, tilts to 115 degrees on a small arc (up 18 px, then down to the pour point, 0.37 s), and a stream draws from its mouth along a quadratic curve to the drink in 0.17 s. The level rises with sine.inOut over 2 s while the colour blends into the new one over about 1.3 s; splash droplets hop above the surface where the stream lands. At the end the stream's top lets go and falls in 0.2 s (power2.in) as the bottle tilts back. Everything is computed from the time in one setter, so any frame can be rendered alone.

When to use For recipes, mixing or filling metaphors: anything poured into a container step by step.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pour that fills a glass</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>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.ink { fill: none; stroke: #1C0B5D; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fill { fill: #F0EDFF; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="5" data-width="1080" data-height="1080">
  <svg class="art clip" data-start="0" data-duration="5" viewBox="0 0 1080 1080"><g transform="translate(188 40)">
    <path class="fill" d="M209,460 L234,786 Q352,808 470,786 L495,460 Z"/><ellipse class="fill" cx="352" cy="457.5" rx="143" ry="22"/>
    <path id="liq" stroke-width="2"/><ellipse id="top" stroke-width="2"/>
    <g id="drops"><circle r="3"/><circle r="4.6"/><circle r="3"/><circle r="4.6"/></g>
    <path id="sOut" fill="none" stroke="#1C0B5D" stroke-width="10.5" stroke-linecap="round"/><path id="sIn" fill="none" stroke="#FB2D89" stroke-width="6.4" stroke-linecap="round"/>
    <path class="ink" d="M209,461 L234,786"/><path class="ink" d="M495,461 L470,786"/><path class="ink" d="M209,457.5 A143,22 0 1 1 495,457.5 A143,22 0 1 1 209,457.5"/><path class="ink" d="M234,786 Q352,808 470,786"/>
    <g id="bottle"><path d="M-44,-12 Q-44,-27 -32,-34 Q-12,-46 -12,-62 L-12,-121 L12,-121 L12,-62 Q12,-46 32,-34 Q44,-27 44,-12 L44,123 Q44,135 32,135 L-32,135 Q-44,135 -44,123 Z" fill="#FB2D89" stroke="#1C0B5D" stroke-width="3" stroke-linejoin="round"/><rect x="-17.5" y="-135" width="35" height="15" rx="3" fill="#FB2D89" stroke="#1C0B5D" stroke-width="3"/><rect x="-36" y="20" width="73" height="75" rx="6" fill="#FFFFFF" stroke="#1C0B5D" stroke-width="2.6"/></g>
  </g></svg>
</div>
<script>
const FROM = "#FFFFFF", TO = "#FB2D89";   // drink before and after this pour
const LEVEL0 = 750, LEVEL1 = 621;            // surface y before and after
const ease = (n) => gsap.parseEase(n), c01 = (v) => Math.max(0, Math.min(1, v)), lerp = (a, b, p) => a + (b - a) * p;
function kf(track, t) { if (t <= track[0][0]) return track[0][1]; for (let i = 1; i < track.length; i++) { const [t1, v1, e] = track[i]; if (t <= t1) { const [t0, v0] = track[i - 1], p = (t - t0) / (t1 - t0); return v0 + (v1 - v0) * (e ? ease(e)(p) : p); } } return track[track.length - 1][1]; }
const BX = [[0.2, -60], [0.45, 107, "power2.out"], [0.8, 107], [0.97, 112, "power1.inOut"], [1.17, 130, "power2.out"], [3.6, 130], [3.82, 120, "power1.in"], [4.04, 107, "power2.out"]];
const BY = [[0.8, 300], [0.97, 282, "power1.out"], [1.17, 337, "power2.inOut"], [3.6, 337], [3.82, 300, "power1.in"], [4.04, 300, "power2.out"]];
const BR = [[0.8, 0], [0.97, 70, "power1.in"], [1.17, 115.3, "power2.out"], [3.6, 115.3], [3.82, 62, "power1.in"], [4.04, 0, "power2.out"]];
const hex = (h) => [1, 3, 5].map((i) => parseInt(h.slice(i, i + 2), 16));
const mix = (a, b, p) => "rgb(" + hex(a).map((v, i) => Math.round(lerp(v, hex(b)[i], p))).join(",") + ")";
const inL = (y) => 217 + 25 * (y - 460) / 326, inR = (y) => 487 - 25 * (y - 460) / 326;
const $ = (id) => document.getElementById(id);
function render(t) {
  const level = lerp(LEVEL0, LEVEL1, ease("sine.inOut")(c01((t - 1.37) / 2))), q = ease("sine.inOut")(c01((t - 1.6) / 1.33));
  const col = mix(FROM, TO, q), edge = mix("#9E9E9E", "#1C0B5D", q * 0.6);
  const xl = inL(level), xr = inR(level), on = level < LEVEL0 - 1;
  $("liq").setAttribute("d", on ? "M" + xl + "," + level + " L" + inL(746) + ",746 Q352,764 " + inR(746) + ",746 L" + xr + "," + level + " Z" : "");
  $("liq").setAttribute("fill", col); $("liq").setAttribute("stroke", edge);
  Object.entries({ cx: (xl + xr) / 2, cy: level, rx: on ? (xr - xl) / 2 : 0, ry: Math.min(12.5, (LEVEL0 - level) * 0.5 + 2) }).forEach(([k, v]) => $("top").setAttribute(k, v));
  const c = hex(FROM).map((v, i) => lerp(v, hex(TO)[i], q)), surf = c.map((v) => Math.round(v + (255 - v) * 0.22));   // the surface: the drink, a touch lighter
  $("top").setAttribute("fill", "rgb(" + surf.join(",") + ")"); $("top").setAttribute("stroke", edge);
  const bx = kf(BX, t), by = kf(BY, t), br = kf(BR, t), a = br * Math.PI / 180;
  $("bottle").setAttribute("transform", "translate(" + bx + " " + by + ") rotate(" + br + ")");
  const pouring = t >= 1.17 && t < 3.77, mx = bx + 128.5 * Math.sin(a), my = by - 128.5 * Math.cos(a) + 6, ey = Math.min(level, 752);
  const s1 = c01((t - 1.17) / 0.17), s0 = t > 3.57 ? ease("power2.in")(c01((t - 3.57) / 0.2)) : 0;
  ["sOut", "sIn"].forEach((id) => { const p = $(id); p.setAttribute("d", "M" + mx + "," + my + " Q" + (mx + 47) + "," + (my + 102) + " " + (mx + 66) + "," + ey); const L = p.getTotalLength(); p.style.strokeDasharray = Math.max(0, (s1 - s0) * L) + " " + (L + 10); p.style.strokeDashoffset = -s0 * L; p.style.opacity = pouring ? 1 : 0; });
  [...$("drops").children].forEach((d, i) => { const ph = (t * 2.4 + i * 0.27) % 1; d.setAttribute("cx", mx + 36 + i * 9); d.setAttribute("cy", level - 8 - Math.sin(ph * Math.PI) * 14 - (i % 2) * 5); d.setAttribute("fill", TO); d.setAttribute("stroke", "#1C0B5D"); d.setAttribute("stroke-width", 1.6); d.style.opacity = pouring && on ? 1 : 0; });
}
let now = 0; const driver = {}; Object.defineProperty(driver, "t", { get: () => now, set: (v) => { now = v; render(v); } });
const tl = gsap.timeline({ paused: true });
tl.fromTo(driver, { t: 0 }, { t: 5, duration: 5, ease: "none", immediateRender: true }, 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 “Drop with bounce and impact sparks” technique — At 0:04 in the video

Other

Drop with bounce and impact sparks

Objects fall in from above the frame under gravity (power2.in, about 0.32 s for 760 px), hit the floor, bounce back up about 140 px (power2.out, 0.13 s), fall again, take a small 20 px hop and settle, all with a little spin that unwinds to the rest angle. Three short spark strokes flash above each one for 0.3 s as it drops past the rim. Each object starts 0.35 s after the last and lands on a different spot, the last one on top of the others.

When to use For things dropping into a container or onto a surface: ice, coins, blocks, items in a cart.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Drop with bounce and impact sparks</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>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.ink { fill: none; stroke: #1C0B5D; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fill { fill: #F0EDFF; }
.cube { fill: rgba(255, 255, 255, 0.6); stroke: #1C0B5D; stroke-width: 2.6; }
.spark { fill: none; stroke: #1C0B5D; stroke-width: 2; stroke-linecap: round; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1080">
  <svg class="art clip" data-start="0" data-duration="3" viewBox="0 0 1080 1080"><g transform="translate(188 40)"><path class="fill" d="M209,460 L234,786 Q352,808 470,786 L495,460 Z"/><ellipse class="fill" cx="352" cy="457.5" rx="143" ry="22"/><g id="items"></g><path class="ink" d="M209,461 L234,786"/><path class="ink" d="M495,461 L470,786"/><path class="ink" d="M209,457.5 A143,22 0 1 1 495,457.5 A143,22 0 1 1 209,457.5"/><path class="ink" d="M234,786 Q352,808 470,786"/></g></svg>
</div>
<script>
// Each item: x, rest y, rest angle, start time.
const ITEMS = [[296, 711, 14, 0.2], [402, 704, -15, 0.55], [351, 645, 31, 0.92]];
const NS = "http://www.w3.org/2000/svg", host = document.getElementById("items");
const el = (tag, a, p) => { const e = document.createElementNS(NS, tag); for (const k in a) e.setAttribute(k, a[k]); p.appendChild(e); return e; };
const tl = gsap.timeline({ paused: true });
ITEMS.forEach(([x, rest, ang, t0], i) => {
  const pos = el("g", { id: "pos" + i }, host), rot = el("g", {}, pos);
  el("rect", { class: "cube", x: -35, y: -35, width: 70, height: 70, rx: 13 }, rot);
  const sp = el("g", { opacity: 0 }, pos);
  ["M-44,-34 L-56,-44", "M-12,-52 L-15,-66", "M18,-50 L25,-63"].forEach((d) => el("path", { class: "spark", d }, sp));
  const fall = Math.sqrt((rest + 50) / 760) * 0.32;          // time to fall from y = -50
  gsap.set(pos, { x, y: -50 });
  tl.to(pos, { y: rest, duration: fall, ease: "power2.in" }, t0)
    .to(pos, { y: rest - 140, duration: 0.13, ease: "power2.out" })
    .to(pos, { y: rest, duration: 0.13, ease: "power2.in" })
    .to(pos, { y: rest - 20, duration: 0.06, ease: "power2.out" })
    .to(pos, { y: rest, duration: 0.06, ease: "power2.in" });
  tl.fromTo(rot, { rotation: ang - 40, svgOrigin: "0 0" }, { rotation: ang, svgOrigin: "0 0", duration: fall + 0.38, ease: "power1.out", immediateRender: true }, t0);
  const enter = t0 + fall * Math.sqrt((470 + 50) / (rest + 50));   // when it passes the rim (y 470)
  tl.set(sp, { opacity: 1 }, enter).to(sp, { opacity: 0, duration: 0.1 }, enter + 0.2);
});
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 “Finale burst dashes that breathe” technique — At 0:27 in the video

Particles

Finale burst dashes that breathe

When the piece is complete, seven short dashes in two accent colours shoot out on rays around the hero object (inner radius about 180-200 px, 26 px long) in 0.16 s with power2.out, a few staggered by up to 0.1 s, then keep breathing in and out by 7 px on 1.3 s sine cycles with different phases. At the same time the object grows 4.2% over 0.6 s (sine.inOut) and stays there.

When to use For a quiet 'done' or 'ta-da' beat at the end of a build-up, without confetti.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Finale burst dashes that breathe</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>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.ink { fill: none; stroke: #1C0B5D; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fill { fill: #F0EDFF; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1080" data-height="1080">
  <svg class="art clip" data-start="0" data-duration="4" viewBox="0 0 1080 1080"><g transform="translate(188 -70)"><g id="hero"><path class="fill" d="M209,460 L234,786 Q352,808 470,786 L495,460 Z"/><ellipse class="fill" cx="352" cy="457.5" rx="143" ry="22"/><path class="ink" d="M209,461 L234,786"/><path class="ink" d="M495,461 L470,786"/><path class="ink" d="M209,457.5 A143,22 0 1 1 495,457.5 A143,22 0 1 1 209,457.5"/><path class="ink" d="M234,786 Q352,808 470,786"/></g><g id="bursts"></g></g></svg>
</div>
<script>
const CX = 352, CY = 610, START = 0.5;
// angle (deg), radius, colour, delay
const RAYS = [[-104.8, 212, "#FE9117", 0], [-142.4, 228, "#FB2D89", 0.1], [181, 230, "#FE9117", 0], [164, 212, "#FB2D89", 0.03], [-65, 209, "#FB2D89", 0.06], [-27, 215, "#FE9117", 0], [8.3, 222, "#FB2D89", 0.04]];
const PHASE = [0, 2.2, 4.1, 1.3, 3.3, 5.2, 0.7];
const NS = "http://www.w3.org/2000/svg", host = document.getElementById("bursts");
const lines = RAYS.map(([, , c]) => { const l = document.createElementNS(NS, "line"); l.setAttribute("stroke", c); l.setAttribute("stroke-width", 4); l.setAttribute("stroke-linecap", "round"); host.appendChild(l); return l; });
const ease = (n) => gsap.parseEase(n), c01 = (v) => Math.max(0, Math.min(1, v));
function render(t) {
  RAYS.forEach(([a, r, , d], i) => {
    const t0 = START + d, l = lines[i];
    if (t < t0) { l.style.opacity = 0; return; }
    const p = ease("power2.out")(c01((t - t0) / 0.16));
    const wob = 7 * Math.sin(2 * Math.PI * Math.max(0, t - t0 - 0.16) / 1.3 + PHASE[i]) * c01((t - t0 - 0.16) / 0.3);
    const rad = a * Math.PI / 180, r0 = r - 34 + 18 * p + wob, r1 = r0 + 26 * p;
    l.setAttribute("x1", CX + r0 * Math.cos(rad)); l.setAttribute("y1", CY + r0 * Math.sin(rad));
    l.setAttribute("x2", CX + r1 * Math.cos(rad)); l.setAttribute("y2", CY + r1 * Math.sin(rad));
    l.style.opacity = 1;
  });
}
let now = 0; const driver = {}; Object.defineProperty(driver, "t", { get: () => now, set: (v) => { now = v; render(v); } });
const tl = gsap.timeline({ paused: true });
tl.fromTo(driver, { t: 0 }, { t: 4, duration: 4, ease: "none", immediateRender: true }, 0);
tl.fromTo("#hero", { scale: 1, svgOrigin: "352 623" }, { scale: 1.042, svgOrigin: "352 623", duration: 0.6, ease: "sine.inOut", immediateRender: false }, START + 0.36);
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 “3D App Wall Dive Into a Three-Step Product Demo” prompt

3D App Wall Dive Into a Three-Step Product Demo

<direction> Make a 31-second horizontal 1280x720 product demo built entirely from animation, with sound. It plays as one continuous camera move with no cuts and loops seamlessly: the last frame lands on the first. The idea: a wall of app screens tilted back in 3D, the camera dives into one screen, that screen becomes the app window, and three numbered steps show what the product does before an end card with my logo. The look is clean and modern: flat vector UI drawn by you, soft depth, generous space, calm and precise motion. Avoid hard cuts, real footage, stock imagery, busy backgrounds, bouncy or cartoon easing, and anything that breaks the loop. </direction> <structure> Opening, about 0 to 4 s: a wall of app screens tilted back in 3D drifts slowly. A centred title such as "Your ideas, in motion" (replace with yours) sits over it, then blurs away. Dive, about 4 to 6 s: the camera pushes into one screen, which grows to become the app window and settles on one side of the frame. Beat 01, about 6 to 13 s: a small step number "01" and a headline such as "Sketch your idea" (replace with yours) slide up line by line beside the window. Inside the window, a brush stroke draws across the canvas. Beat 02, about 13 to 20 s: the previous text slides up and out, then "02" and a headline such as "Chat to shape it" slide up the same way. The window content changes to match. Beat 03, about 20 to 26 s: "03" and a headline such as "Export in one click" enter the same way, and the window shows a terminal typing lines of text with a blinking cursor. End card, about 26 to 31 s: my logo and "[your brand]" with a short tagline such as "Make it move" (replace with yours). The camera then pulls back out to the tilted wall of screens so the final frame matches the first and the video loops. </structure> <composition> Keep the window large, about 60% of the frame width, on one side. Put the text column on the other side, left-aligned. Place the step number small, in the accent colour, above the headline. Set headlines in a bold clean sans-serif, at most two short lines, with a lighter weight for any supporting line. Use my logo as the app icon in the window chrome and centred on the end card. Use role-based colours from my brand, for example a near-black background (#0E0F13), off-white text (#F4F4F6), one bright accent for step numbers, highlights and the brush stroke, and a muted grey for window chrome and secondary UI. Keep the wall of screens in the same palette at lower contrast so the title reads over it. </composition> <techniques> Everything happens inside one continuous camera move: a slow drift over the 3D wall, which is tilted back about 25 degrees with gentle parallax between screens. The title leaves with a blur ramping up and a fade over about 0.6 s. The dive is a smooth ease-in-out push into one screen as it scales up and flattens into the app window. Headline lines slide up about 30 px with a fade, staggered about 0.1 s apart, on a soft ease-out. Outgoing text slides up and fades before the next step enters. Window content changes in place with short crossfades and slides. The brush stroke draws on progressively. The terminal types character by character with a blinking cursor. On the end card, the logo scales in gently, then the camera eases back out to the opening wall for a seamless loop. </techniques> <music> Use an instrumental calm synthwave track at about 100 BPM, exactly 31 seconds long, with the cuts and hits on its beat grid. A warm pad plays under the title. The beat drops in with a soft boom as the camera dives into the window. The track lifts a little for beat 02 and thins out under the terminal. A riser leads into the end card, and the track resolves so the loop back to the start is seamless. Aim for about -14 LUFS with true peak below -1 dBTP. </music> <sound> Add a whoosh on the dive into the window, a soft UI tick as each headline line lands, a light brush swish on the stroke in beat 01, and quiet keyboard taps under the terminal typing. Add a gentle impact or chime as the logo lands on the end card. Keep the effects under the music, with no voice-over. </sound> <references> It resembles a polished app launch or walkthrough animation: a camera flying over a 3D grid of UI screens into a clean product window, with numbered feature steps, as in modern software landing-page demos. </references>

Preview of the “Landing page promo with object-driven transitions” prompt

Landing page promo with object-driven transitions

<direction> Make a 15-second horizontal 1920x1080 motion graphics promo for [your brand], built like a landing page coming to life. Cut it to a 128 BPM electronic track with no voice-over. The idea is that there is never a plain cut: every scene hands over to the next through an object (a dot, a reel pick, a phone, a winning tile). Keep a clean, bright product-UI look: light backgrounds, rounded pills, cards, a phone, a dashboard and a video wall, with all labels as dark text on white plates and my brand colours used by role. Avoid hard cuts, crossfades, voice, white text on light or striped backgrounds, and labels that overlap rings or neighbouring shapes. </direction> <structure> Five beats of roughly equal length, about 3 seconds each, every handover landing on the beat. 1. Opening: a single dot appears in the centre and grows into a horizontal pill holding a row of circles: small portraits and icons such as "Aa", simple shapes and a cube. Each icon is fully visible, not covered by the neighbouring circle. The camera pulls back to reveal a two-line headline, both lines centred. The first line is like "No … keyframes." (replace with yours). The last word of the headline keeps rolling through alternatives like a slot reel. 2. A zoom dives through into a spinning reel of creator portraits and cards. The reel slows down and lands on one pick, which gets highlighted. 3. The pick becomes a phone, and a fan of feature cards spreads around it. One card reads "Edit in words" with the big number "03" and a small "Live preview" tag set right next to the number (replace with your features). The card captions sit on white plates. 4. A whip pan leads to a dashboard of video tiles with captions on white plates. It scores them and picks a winning video, which gets highlighted. 5. The winning tile opens into a tilted wall of videos with captions on white plates. The wall then folds into my logo for the end card, with "[your website]" beside the logo on a white plate. </structure> <composition> Centred, symmetrical framing for the headline and the logo end card. UI elements are laid out like a real landing page: a pill row, cards with large numbers and small tags, a phone mockup, a dashboard grid and a perspective-tilted wall. Use my brand colours by role: background tones (light, with some striped fills), one accent for highlights, selections and rings, and a dark text colour. Every caption on cards, tiles and the wall is dark text on a white rounded plate so it reads on any background. Use one clean sans-serif family: a bold headline, regular-weight labels, and bold button labels. Keep generous padding so no text touches rings or edges. </composition> <techniques> Every transition is an object turning into the next scene, never a cut. The dot scales up into the pill with a smooth ease-out, and the circles pop in with a slight stagger. The camera pull-back is a smooth scale-down revealing the headline. The rolling word is a vertical slot roll that loops through words. The zoom passes through the pill into the reel. The reel spins fast and decelerates with a long ease-out to land precisely on the pick. The pick scales and reshapes into the phone, and the cards fan out around it with a staggered rotate-and-slide. The whip pan is a fast horizontal move with motion blur and a sharp in-out ease. The dashboard selection is a highlight ring and scale-up on the winner. The winner expands into the tilted 3D wall, which folds and collapses into the logo with a final settle. All key moves and landings hit the beat grid. </techniques> <music> Make an original upbeat electronic track at 128 BPM, exactly 15 seconds long, with a clear arc: a light start, a build through the reel and phone scenes, a drop around the whip pan, and a clean ending on the logo. Lay it on the beat grid of the edit, with hits composed on top for every handover, a riser into the drop and a final hit as the wall folds into the logo. Master it to about -14 LUFS with true peak below -1 dBTP. </music> <sound> No voice-over. Add whooshes on the zoom-through and the whip pan, a short tick-and-stop as the reel lands, and a soft impact on the logo. Keep all of them under the music and on the beat. </sound> <references> A SaaS landing page animated into a product promo: UI cards, phone mockup, analytics dashboard and video wall, in the style of modern app launch videos with seamless object-to-object transitions. </references>

Preview of the “Kinetic App Launch Video with an Animated UI Mockup” prompt

Kinetic App Launch Video with an Animated UI Mockup

<direction> Make a 42-second horizontal 1920x1080 kinetic product launch video for [your app]. It shows how a founder makes a launch video for their startup just by chatting in the app. Rebuild my app's interface from my screenshots as a clean animated mockup made of shapes and text, close to the real thing. In this video it is a dark navy-purple app with a Live preview on the left, Chat / Files / Panels tabs on the right and pink accent buttons. Never show the screenshots as still pictures: every element must move. Keep one continuous interface with no hard cuts. The camera pushes in, pans and pulls back between panels while a cursor moves and clicks. Stay on a 120 BPM beat grid (one beat = 0.5 s) and make something happen on every beat. Huge kinetic words slam over the UI between steps. The founder's startup is a made-up app, for example "Pulse — standups your team actually reads" (replace with yours). Avoid hard cuts, static screenshots, anything cropped at the frame edges, and text or highlight bars running into neighbouring columns. </direction> <structure> 1) Hook, 0–3 s: "YOUR LAUNCH VIDEO." then "IN ONE CHAT." in huge type, cut word by word on the beat. "CHAT." morphs into the Chat tab and the camera pulls back to the whole app window. 2) References, 3–8 s: a link "pulse-demo.app" is pasted into the chat. A PDF pitch deck and a logo fly in as attachment cards and snap into place. Big word "DROP". 3) Prompt, 8–13 s: the founder types "Make a 30-second launch video for Pulse, kinetic style, our colours" letter by letter, then the cursor taps send. Big word "ASK". 4) Plan, 13–18 s: the agent answers with a five-step plan as a checklist. The steps appear and tick one by one, and the camera eases back a little with each new line so the frame never feels empty. Big word "PLAN". 5) Sketch and Go, about 18–21 s: a grey wireframe sketch of the promo fills the Live preview quickly, with the "Live preview" label and playback bar in view. The founder clicks Go, and a pink background grows out of the pressed button and floods the screen behind a huge "GO!". 6) Live, about 21–31 s: status lines tick in the chat ("Picking fonts", "Animating the title", "Writing a soundtrack") while the sketch turns into the finished promo. The camera pushes in until the promo fills the frame. Around 27 s the promo headline "Standups your team actually reads." slides in, and a lime highlight bar draws under "actually reads.". A stat column sits beside it with "92%" and "updates read". Big word "LIVE". 7) Export, about 31–37 s: the camera pulls back to the app. The Export button and tabs are fully visible as the export runs and completes. Big word "DONE". 8) End card, about 37–42 s: [your app]'s logo and "Live on [launch site] today" (replace with yours), landing on the final beat and holding to the end. </structure> <composition> Palette: dark navy-purple UI, magenta-pink accent buttons and the pink flood, a pink-to-orange gradient on the logo, and lime as the highlight colour inside the demo promo. The kinetic words are huge, bold, uppercase sans-serif in the brand fonts and span most of the frame width. Shrink a long word slightly rather than let it crop. Keep safe margins everywhere. In wide shots the whole app window is in frame. In the chat the input field is fully visible. In the export scene the Export button and tabs are in frame. In the promo the headline and lime bar stay in their own column with room to spare. The bar matches the width of its words exactly and never overlaps the "92%" column. </composition> <techniques> A continuous virtual camera with smooth ease-in-out push-ins, pans and pull-backs between panels, and no cuts. The cursor glides to its targets and clicks with a small press-down scale. Hook words cut in one per beat. Attachment cards fly in and snap into place with a slight overshoot. Chat text types letter by letter. Checklist items appear and tick on successive beats. The grey sketch fills in fast and then transforms element by element into the finished promo. The pink flood under "GO!" grows radially from the clicked button. The big words slam in with a quick scale-down impact over the UI and leave fast on the next beat. Every beat has a visible event: a word, a click, a card, a tick, a status line or a camera move. </techniques> <music> An energetic electronic track at 120 BPM, with every cut, word slam and UI event locked to the beat. It builds through the setup steps, rises into "GO!", drives through the live build and resolves with a final hit on the end card. </music> <sound> Keyboard clicks that land exactly on each new typed letter. Mouse clicks on every cursor tap. Whooshes on camera moves and on the attachment cards flying in, and snaps when the cards land. Soft ticks for the checklist steps and the status lines. A punchy impact under each big word, a riser into "GO!" and a final hit on the end card. Keep the music under the effects so the clicks and impacts read clearly. </sound> <references> Kinetic-typography app launch trailers that rebuild a SaaS interface as a crisp animated mockup with one continuous camera move, in the style of product launch day promos. </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