your AI motion designer

EN

Simple Motion

Typed Text Turns Into Type: 30-Second App Promo

A drawn 30-second app promo: typed lines turn into serif headlines, a logo burst, an app window, feature cards and an end card on a 128 BPM beat.

Published 10 November 2026

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

Report this prompt

Use with your agentYour agent

Direction

Make a 30-second, fully animated product promo for my app, 1920x1080 landscape at 60 fps. The idea: written text keeps turning into finished type. Typed mono lines become big serif headlines, the headline swirls into a burst that becomes the logo, an app window renders what is typed, then feature cards, an icon grid and an end card follow. Everything is drawn: type, UI and shapes, no footage. It should feel like a premium motion-design piece, with every move eased and every cut on the beat of a 128 BPM track. Use my product name "[your brand]", my square app icon (or draw a simple rounded-square mark in my colours), a one-line tagline, three steps of how it works, a few short feature lines and my web address. Replace every quoted example below with my words, keeping each line about as long as the example so the layout holds. Avoid footage and photos, linear moves, cuts off the beat, and music that drops out before the end.

Structure

Times in seconds; one bar = 1.875 s.

0–7.5, typed intro. A mono line "# Ideas" is typed in the centre, one character per 16th note, with a pink caret (the "#" in pink). On the beat the mono letters lift 26 px and blur out in a fast stagger while the same word rises in as a huge serif headline (about 228 px), letter by letter from 74 px below, blur 10 to 0, scale 1.12 to 1 (0.3 s, power3.out). The caret jumps to its end with a little overshoot and blinks on half beats. A second mono line "in motion" is typed twice as fast and turns into the pink italic second line "in motion." the same way, and small "#" and "*" glyphs scatter as the mono text breaks up. From 3.75 s four white chips pop in on consecutive beats around the headline (back.out, slight tilts). Each first shows a short command in mono, then swaps to what it does: "bigger" becomes a bold "Bigger", "slower" becomes an italic "slower" with a bar, "colour" gets a pink swatch, "MP4" becomes "export". The chips bob gently. At 6.0 s both headline lines bend into arcs around the centre, spin up to about 330 degrees and shrink to nothing in under a second, while the chips orbit outward and blur away. 48 thin rays (every fifth one pink, the rest lavender grey) rush in from outside and stand around the centre, a pink dot pops in the middle, the frame dims slightly to grey-violet, and the dot squashes just before the cut.
7.5–9.75, logo reveal on the drop. Two pink rings expand from the centre and fade, and about 70 small glyphs ("+", "×", "~", "/", "°", "< >") burst out, swirl and drift away. The app icon pops at the centre (scale 0.4, 1.55, 1.22, 1.0 in 0.3 s) and slides left into a lockup. The product name "[your brand]" (about 205 px, serif bold) rises in letter by letter, one every 60 ms, from 70 px below with a tilt and blur. The pink dot that shot up at the cut falls back and lands as the dot of an "i" (or as a period), squashing. The tagline "Your AI motion designer" (muted, 45 px) rises word by word under it and a short pink underline grows with expo.out. At 9.55 s the tagline drops away and the whole lockup shrinks and flies into the top-left corner, where it becomes the logo in an app window's header.
9.75–15.0, the app. A white rounded app window (1600x900) grows out of that header logo with expo.out. Header buttons pop in one by one (a "Preview" ghost button, a pink "Export" button with a chevron, small line icons), a divider grows, and the pane labels "CHAT" and "PREVIEW" fade in. Lines are typed on the left in mono with pink markers and a caret: "# Ideas in motion", "Tell the chat what to show.", "## Features", "- Fonts for every script", "- Vertical or square", "- [x] Live preview", "- [ ] MP4 export", "> Edit in words.", and a fenced code line with two quoted words. As each line finishes it throws a thin pink bezier stroke across the divider; where it lands, the rendered item appears on the right with blur 8 to 0 and a small slide (a serif heading, a body line with bold and italic words, a heading with a hairline, bullets, a checked pink checkbox, an empty one, a quote with a bar, a tinted code box with orange and violet tokens), a soft pink band flashes behind it and a small pink dot stays. The camera moves throughout (see techniques) and ends with a zoom-through into the preview at 14.8 s.
15.0–24.4, five feature cards, about a bar each. Each has the same block on the left: a tracked mono pink eyebrow that decodes from random characters, a bold serif line and a pink italic line (about 119 and 114 px) rising letter by letter from their baseline, a translucent pink marker band swiping in under the italic line, and a muted body line opening left to right. Visuals on the right:
1. "01 — PICK A TEMPLATE" / "Live" / "preview." / "Tell the chat what to show. The agent builds the animation." Two cards swing in with a 3D turn: a chat card typing "# Ideas", "Edit in words", "- bigger", "- slower", and a preview card rendering each keystroke; a pink circle badge with a lightning bolt between them pops and spins on every finished line. Leaves with a short push and a vertical whip up.
2. "02 — DESCRIBE YOUR IDEA" / "Chat instead" / "of a timeline." / "No keyframes to hunt for. Say what should change." Whips in from below. A big faint circle and a laptop outline draw themselves, the app icon drops onto the screen with a squash and bounce, pulses ring out, and three grey tool icons around it (a keyframe diamond, a timeline, a curve) are struck out in pink one after another. Leaves with a horizontal whip.
3. "03 — REFINE IN WORDS" / "Edit" / "in words." / "“Bigger”, “slower”, “another colour”: the preview updates as you talk." A chat card with numbered lines flags one line with an orange band and icon, a note "Say what should change." slides open above the lines, a blank line is inserted, the note closes, and a teal check ring expands with confetti dots. Then a slanted pink wipe crosses the frame with the next card already under it.
4. "NO KEYFRAMES" / "Another" / "colour." / "Kinetic type, shapes, 3D effects and sound." A white card with a sun icon pops in with a 3D turn, four colour swatches follow; a pointer clicks the card, a pink ring goes out, the sun turns into a moon and the whole scene opens into the dark theme in a growing circle from the card.
5. A one-frame grey-violet flash, then on deep ink: "MP4 EXPORT" / "Your idea is" / "ready to move." / "Vertical, horizontal or square." A pointer opens an "Export" menu next to an "Open app" button and picks "Vertical MP4", then "Square MP4"; each time a dark file card labelled ".mp4" drops out of the menu with a tilt and a few sparks.
24.4–26.25, icon grid. A dark 11 x 6 grid of thin motion-design icons (play, film, music, type, layers, wand, image, video, shapes, mic, chat, palette, sun, sparkles) with six lit pink tiles that pop on beats and a few that flicker; the grid dims after the cut and pushes in slowly. Huge single words flip in the centre on every half beat, alternating white bold and pink italic: "Type." "Shapes." "3D." "Sound." "Footage." "Free." Each pops from scale 1.12 with blur, one squashes in. The last word glitches, then the whole grid spirals into the centre and leaves one pink dot.
26.25–30, end card. Rings and glyphs burst from where the icon stands, the icon pops, the name flies in from the right letter by letter with blur, the tagline rises word by word and the underline grows. Then three white pills with small pink icons appear a quarter of a second apart: "Live preview", "Try it free" and "[your web address]". A pink caret blinks right after the name on the beat, and the card pushes in very slowly to the end.

Composition

Light page #FAF9FF in the centre, fading through #F4F2FE to a soft vignette #D9D4EA in the corners, with two very soft lavender-pink glows drifting slowly and a faint dot grid. Cards are white with soft shadows tinted #1C0B5D, hairlines #E9E4F2, soft panels #F0EDFF. Dark type and the dark scenes are deep ink #1C0B5D (a radial gradient to #0D0B1E at the edges); muted text #6B6385; main accent pink #FB2D89, second accent orange #FE9117, small touches of violet #7C6CF2 and teal #2DD4B0 (the success ring).
Fonts: a high-contrast display serif, Fraunces at optical size 72, for headlines, bold upright for the first line and medium italic in pink for the second; Onest for body lines, the tagline and pills; JetBrains Mono for typed text, tracked eyebrows and UI labels.
Sizes: intro headline about 228 px, product name about 205 px, tagline 45 px, feature lines about 119 px (bold) and 114 px (italic), app window 1600x900 with rounded corners. The logo lockup sits icon left and name right, with the tagline and a short pink underline beneath. Feature cards keep the text block on the left and the visual on the right.

Techniques

Every move eased, nothing linear: power3.out for letter rises, back.out for pops (chips, pills, file cards), expo.out for growing windows, dividers and underlines.
Type enters letter by letter from below its baseline with blur and a slight scale-down or tilt; taglines rise word by word; body lines open left to right; eyebrows decode from random characters.
Mono-to-serif morph: typed mono letters lift 26 px and blur out in a fast stagger while the serif word rises in their place, and small glyphs scatter.
Pops overshoot (icon scale 0.4, 1.55, 1.22, 1.0 in 0.3 s); dots and the icon squash when they land.
Pink bezier strokes are drawn in about 0.1 s and erased from their tail in 0.14 s.
Camera in the app scene: a slow push, a fast push-in to about 1.4x on the top of the window at 11 s, a slow pan down that follows the typing, a quick pull-back with the window tilted about 10 degrees in 3D at 14 s, and a zoom-through into the preview with heavy blur at 14.8 s. Slow push-ins on the icon grid and the end card.
Transitions: arc-and-spin swirl into rays, ring-and-glyph burst, lockup flying into the window header, zoom-through with blur, short push plus vertical whip, horizontal whip, a slanted pink wipe with four stepped lighter edges crossing left to right in about 0.22 s, a circular reveal into the dark theme, a one-frame grey-violet flash, and the grid spiralling into a single dot.
Cards swing in with a 3D turn, chips bob gently, and the caret blinks on half beats.

Music

Bright instrumental synthwave at 128 BPM with warm analog synths, made fresh and exactly 30 seconds long, laid on the picture's beat grid. Every cut lands on a bar: the drop and the logo at 7.5 s, a feature per bar, words on half beats, the end card at 26.25 s. Arc: four bars of build with arpeggios and a noise riser, the drop with a crash on the logo, then a driving groove with sidechained bass that runs without any gap all the way to the end card, its last beat, and a long synth decay that holds to the very end. Mix at about -14 LUFS, true peak below -1 dBTP.

Sound

Sound design on the picture's moments only, on top of the music: soft typing ticks under the typed lines, a blip as each line turns into type, small pops for chips, pills and file cards, a whoosh for the swirl, every whip, the wipe, the zoom-through and the dark reveal, a riser into the drop and a boom on it, a short thud when the icon lands on the laptop, a rising chime for the teal check, clicks for the pointer, a glitch on the grey flash, a hit on the grid cut, a tick per flipping word, and a short riser into a final boom on the first beat of the end card. No voice-over.

What to prepare

Optional square app icon for the logo reveal, app window header, laptop card and end card; otherwise a rounded-square mark is drawn.
Your product name, a one-line tagline, three steps, a few short feature lines and your web address, each about as long as the examples.

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

Preview of the “Typed mono line that morphs into a serif headline” technique — At 0:01 in the video

Typography

Typed mono line that morphs into a serif headline

A mono line is typed one character per 16th note with a pink caret; on the beat its letters lift 26 px and blur out in a 22 ms stagger while the serif headline rises in letter by letter from 74 px below (blur 10 to 0, scale 1.12 to 1, 0.3 s power3.out, 36 ms stagger). The caret jumps to the end of the headline with back.out(2.2), grows to its cap height and blinks on half beats.

When to use Opening a piece that turns a written idea or a command into finished type.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Typed mono line that morphs into a serif headline</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=Fraunces:ital,opsz,wght@0,9..144,500..800;1,9..144,500&family=JetBrains+Mono:wght@400;500;700&family=Onest:wght@400;500&display=block");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(ellipse farthest-corner at 50% 50%, #faf9ff 0%, #f4f2fe 62%, #d9d4ea 100%); }
#stage { position: absolute; inset: 0; }
#mono { position: absolute; left: 0; right: 0; top: 480px; text-align: center; font: 400 107px/1 "JetBrains Mono", monospace; color: #6b6385; white-space: pre; }
#mono .mk { color: #fb2d89; }
#serif { position: absolute; left: 0; right: 0; top: 420px; text-align: center; font: 760 228px/1 "Fraunces", serif; font-variation-settings: "opsz" 72; color: #1c0b5d; white-space: pre; }
#mono span, #serif span { display: inline-block; }
#caret { position: absolute; left: 0; top: 0; width: 6px; height: 120px; background: #fb2d89; border-radius: 1px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080">
  <div id="stage" class="clip" data-start="0" data-duration="4">
    <div id="mono"># Ideas</div>
    <div id="serif">Ideas</div>
    <div id="caret"></div>
  </div>
</div>
<script>
document.fonts.ready.then(() => {
const tl = gsap.timeline({ paused: true });
const BEAT = 60 / 128;                                   // the music's beat: typing runs on 16th notes
const split = (el, mk) => { const t = el.textContent; el.textContent = ""; return Array.from(t).map((c, i) => { const s = document.createElement("span"); s.textContent = c; if (mk.includes(i)) s.className = "mk"; el.appendChild(s); return s; }); };
const mono = split(document.getElementById("mono"), [0]), serif = split(document.getElementById("serif"), []);
const caret = document.getElementById("caret");
const right = (s) => s.getBoundingClientRect().right;    // measured once, at build time
gsap.set([...mono, ...serif], { opacity: 0 });
gsap.set(caret, { x: mono[0].getBoundingClientRect().left, y: 472 });
// 1. Type the mono line, the caret after the last character.
mono.forEach((s, i) => { const t = 0.12 + i * BEAT / 4; tl.set(s, { opacity: 1 }, t); tl.set(caret, { x: right(s) + 4 }, t); });
// 2. Morph: mono letters lift and blur away while the serif letters rise in.
tl.to(mono, { y: -26, opacity: 0, filter: "blur(5px)", duration: 0.13, stagger: 0.022, ease: "power2.in" }, 1.0);
tl.fromTo(serif, { y: 74, opacity: 0, scale: 1.12, filter: "blur(10px)" }, { y: 0, opacity: 1, scale: 1, filter: "blur(0px)", duration: 0.3, stagger: 0.036, ease: "power3.out" }, 1.02);
// 3. The caret jumps to the end of the headline, grows to its height and blinks on half beats.
tl.to(caret, { x: right(serif[serif.length - 1]) + 18, y: 430, height: 196, duration: 0.22, ease: "back.out(2.2)" }, 1.02);
for (let t = 1.3, on = false; t < 4; t += BEAT / 2, on = !on) tl.set(caret, { opacity: on ? 1 : 0 }, t);
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 “Headline vortex that collapses into a radial burst” technique — At 0:06 in the video

Transition

Headline vortex that collapses into a radial burst

Both headline lines bend into arcs around the frame centre, spin up to 330 degrees and shrink to nothing in under a second (piecewise keyframes for spin, scale and bend, evaluated every frame from the timeline's time). Meanwhile 48 thin rays rush in from 500-1000 px out to stand around the centre (cubic ease out, every fifth ray pink, the rest lavender grey), a pink dot pops in the middle with back.out(2.5) and squashes before the cut, and the frame dims to a grey-violet.

When to use A high-energy hand-off from a typographic intro to a logo or the next scene, right on the drop.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Headline vortex that collapses into a radial burst</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500..800;1,9..144,500&family=JetBrains+Mono:wght@400;500;700&family=Onest:wght@400;500&display=block");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(ellipse farthest-corner at 50% 50%, #faf9ff 0%, #f4f2fe 62%, #d9d4ea 100%); }
#stage { position: absolute; inset: 0; }
.line { position: absolute; left: 0; width: 1920px; text-align: center; font: 760 228px/1 "Fraunces", serif; font-variation-settings: "opsz" 72; color: #1c0b5d; white-space: pre; }
#l1 { top: 317px; }
#l2 { top: 537px; font-style: italic; font-weight: 560; font-size: 222px; color: #fb2d89; }
.line span { display: inline-block; }
#burst { position: absolute; left: 960px; top: 538px; }
#burst i { position: absolute; left: 0; top: -1.5px; height: 3px; width: 300px; border-radius: 2px; transform-origin: 0 50%; opacity: 0; }
#dot { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; background: #fb2d89; opacity: 0; }
#dim { position: absolute; inset: 0; background: #77708f; opacity: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <div id="stage" class="clip" data-start="0" data-duration="2">
    <div id="l1" class="line">Ideas</div>
    <div id="l2" class="line it">in motion.</div>
    <div id="burst"><div id="dot"></div></div>
    <div id="dim"></div>
  </div>
</div>
<script>
document.fonts.ready.then(() => {
const tl = gsap.timeline({ paused: true });
const key = (t, ts, vs) => { if (t <= ts[0]) return vs[0]; for (let i = 1; i < ts.length; i++) if (t <= ts[i]) return vs[i - 1] + (vs[i] - vs[i - 1]) * (t - ts[i - 1]) / (ts[i] - ts[i - 1]); return vs[vs.length - 1]; };
let seed = 11; const rnd = () => (seed = (seed * 16807) % 2147483647) / 2147483647;   // seeded, same every render
const CX = 960, CY = 540, letters = [];
for (const id of ["l1", "l2"]) { const el = document.getElementById(id); const t = el.textContent; el.textContent = "";
  const spans = Array.from(t).map((c) => { const s = document.createElement("span"); s.textContent = c; el.appendChild(s); return s; });
  const pts = spans.map((s) => { const r = s.getBoundingClientRect(); return { s, x: r.left + r.width / 2 - CX, y: r.top + r.height * 0.58 - CY }; });
  const yL = pts.reduce((a, p) => a + p.y, 0) / pts.length; pts.forEach((p) => letters.push({ ...p, yL })); }
const rays = []; const burst = document.getElementById("burst");
for (let k = 0; k < 48; k++) { const w = document.createElement("div"); w.style.cssText = `position:absolute;transform:rotate(${k * 7.5}deg)`; const i = document.createElement("i");
  const pink = k % 5 === 2; i.style.background = pink ? "#fb2d89" : "#bdb6d1"; w.appendChild(i); burst.insertBefore(w, burst.firstChild);
  rays.push({ i, rin: pink ? 70 + rnd() * 30 : 52 + rnd() * 60, len: pink ? 320 + rnd() * 90 : 220 + rnd() * 150, r0: 520 + rnd() * 520 }); }
const TS = [0.2, 0.35, 0.5, 0.63, 0.7, 0.77, 0.83, 0.9, 0.97, 1.03, 1.1, 1.17];      // seconds of the collapse
const SPIN = [0, 4, 18, 45, 70, 100, 130, 175, 220, 260, 300, 330], SCALE = [1, 1, 0.95, 0.86, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.15, 0], BEND = [0, 0.25, 0.55, 0.85, 1, 1.1, 1.15, 1.2, 1.2, 1.2, 1.2, 1.2];
function draw(t) {
  const sp = key(t, TS, SPIN) * Math.PI / 180, sc = key(t, TS, SCALE), bd = key(t, TS, BEND), c = Math.cos(sp), s = Math.sin(sp);
  for (const p of letters) { let x = p.x, y = p.y, rot = 0;
    if (bd > 0.001) { const rho = Math.abs(p.yL) / bd, phi = p.x / rho, off = p.y - p.yL; x = rho * Math.sin(phi);
      y = p.yL > 0 ? p.yL - rho + rho * Math.cos(phi) + off : p.yL + rho - rho * Math.cos(phi) + off; rot = p.yL > 0 ? -phi : phi; }
    const xr = (x * c - y * s) * sc, yr = (x * s + y * c) * sc;
    p.s.style.transform = t <= TS[0] ? "" : `translate(${xr - p.x}px, ${yr - p.y}px) rotate(${(rot + sp) * 57.2958}deg) scale(${Math.max(sc, 0.001)})`;
    p.s.style.opacity = t < 1.08 ? 1 : Math.max(0, 1 - (t - 1.08) / 0.08); }
  const q = Math.min(1, Math.max(0, (t - 0.55) / 0.58)), e = 1 - Math.pow(1 - q, 3);
  for (const r of rays) { const rin = r.r0 + (r.rin - r.r0) * e, len = 560 + (r.len - 560) * e;
    r.i.style.transform = `translateX(${rin}px) scaleX(${len / 300})`; r.i.style.opacity = t < 0.55 ? 0 : Math.min(1, (t - 0.55) / 0.1); }
}
const proxy = { t: 0 };
tl.to(proxy, { t: 2, duration: 2, ease: "none", onUpdate: () => draw(proxy.t) }, 0);
tl.fromTo("#dot", { scale: 0, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.18, ease: "back.out(2.5)" }, 1.06);
tl.to("#dot", { scaleX: 1.9, scaleY: 0.6, duration: 0.12, ease: "power2.in" }, 1.58);
tl.fromTo("#dim", { opacity: 0 }, { opacity: 0.36, duration: 0.47, ease: "power2.in" }, 1.23);
draw(0);
window.__timelines = window.__timelines || {}; window.__timelines["main"] = tl;
});
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Typography

Logo lockup with shockwave rings, glyph burst and a falling i-dot

On the cut two pink rings expand from the centre (radius 190 to 660 in 0.42 s, fading) while about 70 small glyphs burst out, swirl and drift away. The square mark pops at the centre (scale 0.4, 1.55, 1.22, 1.0 over 0.3 s) and slides left into the lockup; the name's letters rise in one every 60 ms from 70 px below with an 18 degree tilt and blur (0.24 s back.out(1.3)), and a pink dot that shot up at the cut falls back with power2.in to become the dot of the i, squashing on landing. The tagline follows word by word and an underline grows with expo.out.

When to use A logo or product-name reveal that lands on the drop of the music.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Logo lockup with shockwave rings, glyph burst and a falling i-dot</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=Fraunces:ital,opsz,wght@0,9..144,500..800;1,9..144,500&family=JetBrains+Mono:wght@400;500;700&family=Onest:wght@400;500&display=block");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(ellipse farthest-corner at 50% 50%, #faf9ff 0%, #f4f2fe 62%, #d9d4ea 100%); }
#stage { position: absolute; inset: 0; }
#rings { position: absolute; left: 0; top: 0; }
#rings circle { fill: none; stroke: #fb2d89; stroke-width: 7px; opacity: 0; filter: blur(1.6px); }
.pt { position: absolute; left: 0; top: 0; font: 700 22px/1 "JetBrains Mono", monospace; white-space: pre; opacity: 0; }
#mark { position: absolute; left: 322px; top: 392px; width: 172px; height: 172px; border-radius: 41px; background: linear-gradient(135deg, #1c0b5d 0%, #2a1a73 100%); box-shadow: inset 0 0 0 26px #1c0b5d, inset 0 0 0 52px #fb2d89; }
#word { position: absolute; left: 582px; top: 368px; font: 700 205px/1 "Fraunces", serif; font-variation-settings: "opsz" 72; color: #1c0b5d; white-space: pre; }
#word span { display: inline-block; }
#dot { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border-radius: 50%; background: #fb2d89; }
#tag { position: absolute; left: 587px; top: 612px; font: 400 45px/1 "Onest", sans-serif; color: #6b6385; white-space: pre; }
#tag span { display: inline-block; opacity: 0; }
#under { position: absolute; left: 586px; top: 687px; width: 115px; height: 8px; border-radius: 4px; background: #fb2d89; transform-origin: 0 50%; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <div id="stage" class="clip" data-start="0" data-duration="3">
    <svg id="rings" width="1920" height="1080"><circle id="r1" cx="960" cy="540" r="190" /><circle id="r2" cx="960" cy="540" r="110" /></svg>
    <div id="pts"></div>
    <div id="mark"></div>
    <div id="word">Motıon Fab</div>
    <div id="dot"></div>
    <div id="tag"><span>Your AI </span><span>motion </span><span>designer</span></div>
    <div id="under"></div>
  </div>
</div>
<script>
document.fonts.ready.then(() => {
const tl = gsap.timeline({ paused: true });
let seed = 23; const rnd = () => (seed = (seed * 16807) % 2147483647) / 2147483647;   // seeded randomness
const word = document.getElementById("word"); const text = word.textContent; word.textContent = "";
const letters = Array.from(text).map((c) => { const s = document.createElement("span"); s.textContent = c; word.appendChild(s); return s; });
const ii = letters[3].getBoundingClientRect(); const dotX = ii.left + ii.width / 2, dotY = 423;   // the dotless i takes the falling dot
// Rings at the cut.
tl.fromTo("#r1", { attr: { r: 190 }, opacity: 0.75 }, { attr: { r: 660 }, opacity: 0, duration: 0.42, ease: "power2.out" }, 0);
tl.fromTo("#r2", { attr: { r: 110 }, opacity: 0.7 }, { attr: { r: 600 }, opacity: 0, duration: 0.5, ease: "power2.out", immediateRender: false }, 0.1);
// The mark pops at the centre, then slides left into the lockup.
gsap.set("#mark", { x: 552, y: 62, scale: 0.4, rotation: -12, opacity: 0 });
tl.to("#mark", { keyframes: [{ scale: 1.55, rotation: 6, opacity: 1, duration: 0.1, ease: "power2.out" }, { scale: 1.22, rotation: -2, duration: 0.09 }, { scale: 1, rotation: 0, duration: 0.12, ease: "power2.out" }] }, 0.08);
tl.to("#mark", { keyframes: [{ x: 451, y: 52, duration: 0.08, ease: "power2.in" }, { x: 124, y: 14, duration: 0.067, ease: "none" }, { x: 29, y: 3, duration: 0.05, ease: "power2.out" }, { x: -9, y: 0, duration: 0.066 }, { x: 0, duration: 0.1, ease: "sine.inOut" }] }, 0.42);
// Letters rise in one after another.
letters.forEach((s, i) => { if (s.textContent === " ") return;
  tl.fromTo(s, { x: 50, y: 70, rotation: 18, opacity: 0, filter: "blur(6px)" }, { x: 0, y: 0, rotation: 0, opacity: 1, filter: "blur(0px)", duration: 0.24, ease: "back.out(1.3)" }, 0.47 + i * 0.06); });
// The dot shoots up at the cut, falls into the i and squashes.
gsap.set("#dot", { x: 960, y: 540, scale: 0.8 });
tl.to("#dot", { x: dotX - 14, y: 6, scale: 1, duration: 0.06, ease: "power2.out" }, 0);
tl.to("#dot", { x: dotX, y: dotY, duration: 0.25, ease: "power2.in" }, 0.5);
tl.to("#dot", { keyframes: [{ scaleX: 1.35, scaleY: 0.7, duration: 0.05 }, { scaleX: 1, scaleY: 1, duration: 0.14, ease: "back.out(2)" }] }, 0.75);
// Tagline word by word, then the underline.
document.querySelectorAll("#tag span").forEach((s, i) => tl.fromTo(s, { y: 18, opacity: 0 }, { y: 0, opacity: 1, duration: 0.22, ease: "power2.out" }, 1.0 + i * 0.075));
tl.fromTo("#under", { scaleX: 0 }, { scaleX: 1, duration: 0.6, ease: "expo.out" }, 1.42);
// Glyph burst: out from the centre with a swirl, then a slow drift and fade.
const box = document.getElementById("pts"), G = ["+", "×", "~", "/", "°", "( )", "< >", "*", "·", "="], parts = [];
for (let i = 0; i < 70; i++) { const p = document.createElement("div"); p.className = "pt"; p.textContent = G[Math.floor(rnd() * G.length)];
  p.style.fontSize = (14 + rnd() * 22) + "px"; p.style.color = rnd() < 0.6 ? "#fb2d89" : "#6b6385"; box.appendChild(p);
  parts.push({ p, a0: rnd() * 6.283, r1: 140 + Math.pow(rnd(), 0.8) * 560, w: (rnd() < 0.5 ? -1 : 1) * (0.5 + rnd() * 0.9), rot: (rnd() - 0.5) * 60, fade: 0.95 + rnd() * 0.6 }); }
const draw = (t) => { for (const q of parts) { const u = Math.max(0, t - 0.02), r = q.r1 * (1 - Math.exp(-u / 0.2)) + 45 * u, a = q.a0 + q.w * (1 - Math.exp(-u / 0.35));
  q.p.style.transform = `translate(${960 + Math.cos(a) * r * 1.2}px, ${540 + Math.sin(a) * r * 0.82 + 22 * u}px) rotate(${q.rot + 40 * u}deg)`;
  q.p.style.opacity = t < 0.02 ? 0 : Math.min(1, (t - 0.02) / 0.06, Math.max(0, 1 - (t - q.fade) / 0.35)) * 0.9; } };
const proxy = { t: 0 }; tl.to(proxy, { t: 3, duration: 3, ease: "none", onUpdate: () => draw(proxy.t) }, 0); draw(0);
window.__timelines = window.__timelines || {}; window.__timelines["main"] = tl;
});
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Preview of the “Typed line that throws a stroke to its rendered twin” technique — At 0:11 in the video

Layout

Typed line that throws a stroke to its rendered twin

A two-pane app window: each line typed on the left (mono, markers in pink, a caret following) ends by throwing a thin pink bezier stroke across the divider (stroke-dashoffset drawn in about 0.1 s with power1.in, then erased from its tail in 0.14 s). Where it lands, the rendered item appears on the right with blur 8 px to 0 and an 8 px slide, a soft pink band flashes behind it and fades over 0.55 s, and a small dot marker stays at 35 % opacity. A slow camera push and pan follows the typing.

When to use Showing input becoming output instantly: an editor and its preview, a prompt and its result, a chat and the thing it makes.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Typed line that throws a stroke to its rendered twin</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=Fraunces:ital,opsz,wght@0,9..144,500..800;1,9..144,500&family=JetBrains+Mono:wght@400;500;700&family=Onest:wght@400;500&display=block");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(ellipse farthest-corner at 50% 50%, #faf9ff 0%, #f4f2fe 62%, #d9d4ea 100%); }
#stage { position: absolute; inset: 0; }
#win { position: absolute; left: 160px; top: 90px; width: 1600px; height: 900px; border-radius: 16px; background: #fff; box-shadow: 0 40px 90px rgba(28, 11, 93, 0.16); transform-origin: 30% 20%; }
#div { position: absolute; left: 800px; top: 40px; width: 1.5px; height: 820px; background: #e9e4f2; }
.ln { position: absolute; left: 90px; font: 400 19px/30px "JetBrains Mono", monospace; color: #1c0b5d; white-space: pre; }
.ln span { opacity: 0; }
.ln .mk { color: #fb2d89; }
#cur { position: absolute; left: 0; top: 0; width: 2.5px; height: 24px; background: #fb2d89; }
.pv { position: absolute; left: 898px; font: 400 19.5px/30px "Onest", sans-serif; color: #1c0b5d; white-space: pre; opacity: 0; transform-origin: 0 50%; }
.pv.h { font: 700 46px/1 "Fraunces", serif; font-variation-settings: "opsz" 72; }
.band { position: absolute; left: 872px; width: 696px; background: rgba(251, 45, 137, 0.13); opacity: 0; }
#strokes { position: absolute; left: 0; top: 0; overflow: visible; }
#strokes path { fill: none; stroke: #fb2d89; stroke-width: 2.5px; stroke-linecap: round; opacity: 0; }
.mark { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fb2d89; opacity: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3.2" data-width="1920" data-height="1080">
  <div id="stage" class="clip" data-start="0" data-duration="3.2">
    <div id="win">
      <div id="div"></div>
      <div id="ed"></div><div id="cur"></div>
      <div class="band" id="b0" style="top: 84px; height: 60px;"></div><div class="band" id="b1" style="top: 166px; height: 40px;"></div>
      <div class="pv h" id="p0" style="top: 90px;">Ideas in motion</div>
      <div class="pv" id="p1" style="top: 171px;">Tell the <b>chat</b> what to <i>show</i>.</div>
      <svg id="strokes" width="1600" height="900"></svg>
    </div>
  </div>
</div>
<script>
document.fonts.ready.then(() => {
// A scene that starts later is display: none until then, where every box measures 0: lay it out while building.
const held = []; for (let el = document.getElementById("win"); el; el = el.parentElement) if (getComputedStyle(el).display === "none") { held.push([el, el.style.getPropertyValue("display"), el.style.getPropertyPriority("display")]); el.style.setProperty("display", "block", "important"); }
const tl = gsap.timeline({ paused: true });
const LINES = [                                           // [tokens, typing start, end, preview item, its centre y]
  { tok: [["#", "mk"], [" Ideas in motion"]], t0: 0.2, t1: 0.55, item: "#p0", band: "#b0", py: 114 },
  { tok: [["Tell the "], ["**", "mk"], ["chat"], ["**", "mk"], [" what to "], ["*", "mk"], ["show"], ["*", "mk"], ["."]], t0: 0.8, t1: 1.2, item: "#p1", band: "#b1", py: 186 } ];
const ed = document.getElementById("ed"), cur = document.getElementById("cur"), svg = document.getElementById("strokes");
LINES.forEach((L, n) => {
  const y = 110 + n * 60.6, ln = document.createElement("div"); ln.className = "ln"; ln.style.top = (y - 15) + "px"; ed.appendChild(ln);
  const chars = []; L.tok.forEach(([t, c]) => Array.from(t).forEach((ch) => { const s = document.createElement("span"); s.textContent = ch; if (c) s.className = c; ln.appendChild(s); chars.push(s); }));
  chars.forEach((s, i) => { const t = L.t0 + (L.t1 - L.t0) * i / (chars.length - 1); tl.set(s, { opacity: 1 }, t); tl.set(cur, { x: 90 + s.offsetLeft + s.offsetWidth + 2, y: y - 12 }, t); });
  const last = chars[chars.length - 1], sx = 90 + last.offsetLeft + last.offsetWidth + 14, ex = 872;
  const p = document.createElementNS("http://www.w3.org/2000/svg", "path"); p.setAttribute("d", `M${sx} ${y} C${sx + 140} ${y + 46}, ${ex - 170} ${L.py + 36}, ${ex} ${L.py}`); svg.appendChild(p);
  const len = p.getTotalLength(); p.style.strokeDasharray = len; p.style.strokeDashoffset = len;
  const tp = L.t1 + 0.1;                                     // the moment the stroke lands
  tl.set(p, { opacity: 1 }, L.t1 + 0.02);
  tl.to(p, { strokeDashoffset: 0, duration: 0.08, ease: "power1.in" }, L.t1 + 0.02);
  tl.to(p, { strokeDashoffset: -len, duration: 0.14, ease: "power2.out" }, tp);
  const mk = document.createElement("div"); mk.className = "mark"; mk.style.left = (ex - 4) + "px"; mk.style.top = L.py + "px"; document.getElementById("win").appendChild(mk);
  tl.fromTo(mk, { scale: 0, opacity: 1 }, { scale: 1.5, duration: 0.08 }, tp); tl.to(mk, { scale: 1, opacity: 0.35, duration: 0.3 }, tp + 0.08);
  tl.fromTo(L.band, { opacity: 0 }, { opacity: 1, duration: 0.05 }, tp); tl.to(L.band, { opacity: 0, duration: 0.55, ease: "power1.in" }, tp + 0.2);
  tl.fromTo(L.item, { opacity: 0, x: -8, scale: n ? 1 : 1.08, filter: "blur(8px)" }, { opacity: 1, x: 0, scale: 1, filter: "blur(0px)", duration: 0.16, ease: "power2.out" }, tp);
});
tl.fromTo("#win", { scale: 1 }, { scale: 1.12, duration: 3.2, ease: "sine.inOut" }, 0);   // slow push that follows the typing
held.forEach(([el, v, p]) => (v ? el.style.setProperty("display", v, p) : el.style.removeProperty("display")));   // hand the scene back as it was
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 “Feature block: decoding eyebrow, rising letters, marker band, body wipe” technique — At 0:15 in the video

Typography

Feature block: decoding eyebrow, rising letters, marker band, body wipe

A left-aligned feature block in four parts: a tracked mono eyebrow resolves from random characters left to right in about 0.45 s; the bold serif line and the pink italic line rise letter by letter from below their own baseline clip (yPercent 105 to 0, 0.16-0.18 s power3.out, 12-15 ms stagger, the second line 0.16 s later); a translucent pink marker band swipes in under the italic line (scaleX from the left, 0.26 s power3.out); the body opens left to right with a clip-path inset wipe in 0.34 s.

When to use Numbered feature or step cards in a product video, one per beat or bar.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Feature block: decoding eyebrow, rising letters, marker band, body wipe</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=Fraunces:ital,opsz,wght@0,9..144,500..800;1,9..144,500&family=JetBrains+Mono:wght@400;500;700&family=Onest:wght@400;500&display=block");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(ellipse farthest-corner at 50% 50%, #faf9ff 0%, #f4f2fe 62%, #d9d4ea 100%); }
#stage { position: absolute; inset: 0; }
#eb { position: absolute; left: 160px; top: 320px; font: 500 22px/1 "JetBrains Mono", monospace; letter-spacing: 0.2em; color: #fb2d89; white-space: pre; }
.ln { position: absolute; left: 160px; font-family: "Fraunces", serif; line-height: 1; white-space: pre; font-variation-settings: "opsz" 72; clip-path: inset(-30px -40px 0 -40px); }
.ln span { display: inline-block; }
#l1 { top: 360px; font-weight: 600; font-size: 119px; color: #1c0b5d; }
#l2 { top: 483px; font-style: italic; font-weight: 500; font-size: 114px; color: #fb2d89; clip-path: inset(-30px -40px -8px -40px); }
#band { position: absolute; left: 156px; top: 541px; height: 48px; background: rgba(251, 45, 137, 0.13); transform-origin: 0 50%; }
#body { position: absolute; left: 160px; top: 640px; width: 760px; font: 400 29.5px/46px "Onest", sans-serif; color: #6b6385; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <div id="stage" class="clip" data-start="0" data-duration="3">
    <div id="eb">01 — PICK A TEMPLATE</div>
    <div id="l1" class="ln">Live</div>
    <div id="band"></div>
    <div id="l2" class="ln">preview.</div>
    <div id="body">Tell the chat what to show. The agent builds the animation.</div>
  </div>
</div>
<script>
document.fonts.ready.then(() => {
// A scene that starts later is display: none until then, where every box measures 0: lay it out while building.
const held = []; for (let el = document.getElementById("l2"); el; el = el.parentElement) if (getComputedStyle(el).display === "none") { held.push([el, el.style.getPropertyValue("display"), el.style.getPropertyPriority("display")]); el.style.setProperty("display", "block", "important"); }
const tl = gsap.timeline({ paused: true });
const split = (el) => { const t = el.textContent; el.textContent = ""; return Array.from(t).map((c) => { const s = document.createElement("span"); s.textContent = c; el.appendChild(s); return s; }); };
const T = 0.2;                                            // when the block comes in
const c1 = split(document.getElementById("l1")), c2 = split(document.getElementById("l2"));
tl.fromTo(c1, { yPercent: 105 }, { yPercent: 0, duration: 0.16, stagger: 0.015, ease: "power3.out" }, T);
tl.fromTo(c2, { yPercent: 115 }, { yPercent: 0, duration: 0.18, stagger: 0.012, ease: "power3.out" }, T + 0.16);
const band = document.getElementById("band"); band.style.width = (document.getElementById("l2").offsetWidth + 10) + "px";
tl.fromTo(band, { scaleX: 0 }, { scaleX: 1, duration: 0.26, ease: "power3.out" }, T + 0.5);
tl.fromTo("#body", { clipPath: "inset(-10px 100% -10px 0px)", opacity: 0.4 }, { clipPath: "inset(-10px 0% -10px 0px)", opacity: 1, duration: 0.34, ease: "power2.out" }, T + 0.3);
// Eyebrow decode: each character cycles through random glyphs, then settles, left to right.
const eb = document.getElementById("eb"), FINAL = eb.textContent, GL = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#*/<>-_";
const decode = (time) => { const n = FINAL.length, f = Math.floor(time * 30); let s = "";
  for (let i = 0; i < n; i++) { const shown = T + 0.04 + (i / n) * 0.2, fixed = T + 0.04 + ((i + 1) / n) * 0.46;
    s += time < shown ? " " : time >= fixed || FINAL[i] === " " ? FINAL[i] : GL[(i * 7 + f * 13) % GL.length]; }
  eb.textContent = s; };
const proxy = { t: 0 }; tl.to(proxy, { t: 3, duration: 3, ease: "none", onUpdate: () => decode(proxy.t) }, 0); decode(0);
held.forEach(([el, v, p]) => (v ? el.style.setProperty("display", v, p) : el.style.removeProperty("display")));   // hand the scene back as it was
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 “Slanted colour wipe with stepped edges” technique — At 0:20 in the video

Transition

Slanted colour wipe with stepped edges

A band wider than the frame, skewed 14 degrees, crosses left to right in about 0.22 s: four 60 px steps from pale to full pink lead and trail its solid core, so the edges read as a motion smear without any blur. The outgoing scene is cut at the moment the band covers the whole frame and the next one is already underneath when the trailing steps pass.

When to use A hard, graphic scene change on a downbeat between two light scenes.

Show code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Slanted colour wipe with stepped edges</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=Fraunces:ital,opsz,wght@0,9..144,500..800;1,9..144,500&family=JetBrains+Mono:wght@400;500;700&family=Onest:wght@400;500&display=block");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(ellipse farthest-corner at 50% 50%, #faf9ff 0%, #f4f2fe 62%, #d9d4ea 100%); }
#stage { position: absolute; inset: 0; }
.scene { position: absolute; inset: 0; }
.t { position: absolute; left: 160px; top: 440px; font: 600 119px/1 "Fraunces", serif; font-variation-settings: "opsz" 72; color: #1c0b5d; white-space: pre; }
#b { opacity: 0; }
#wipe { position: absolute; left: 0; top: -210px; width: 2780px; height: 1500px; transform: skewX(-14deg); transform-origin: 0 50%;
  background: linear-gradient(90deg, #f9c7de 0 60px, #f9a2c8 60px 120px, #fa77b0 120px 180px, #fb529d 180px 240px, #fb2d89 240px 2540px, #fb529d 2540px 2600px, #fa77b0 2600px 2660px, #f9a2c8 2660px 2720px, #f9c7de 2720px); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="1.2" data-width="1920" data-height="1080">
  <div id="stage" class="clip" data-start="0" data-duration="1.2">
    <div id="a" class="scene"><div class="t">“Edit in words.”</div></div>
    <div id="b" class="scene"><div class="t">“Another colour.”</div></div>
    <div id="wipe"></div>
  </div>
</div>
<script>
document.fonts.ready.then(() => {
const tl = gsap.timeline({ paused: true });
const T = 0.2;                                            // the wipe starts here; it covers the frame at T + 0.1
gsap.set("#wipe", { x: -2780 });
tl.to("#wipe", { keyframes: [{ x: -2490, duration: 0.05, ease: "power1.in" }, { x: -1724, duration: 0.033, ease: "none" }, { x: -1302, duration: 0.017, ease: "none" },
  { x: 576, duration: 0.05, ease: "none" }, { x: 1400, duration: 0.033, ease: "none" }, { x: 1960, duration: 0.034, ease: "power1.out" }] }, T);
tl.set("#a", { opacity: 0 }, T + 0.117);                  // swap the scenes under full cover
tl.set("#b", { opacity: 1 }, T + 0.117);
window.__timelines = window.__timelines || {}; window.__timelines["main"] = tl;
});
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

More prompts

Low-poly logo assembly with typed name lockup

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

Preview of the “Glossy app launch film on a 120 bpm beat” prompt

Glossy app launch film on a 120 bpm beat

<direction> Make a 15-second launch film for my app (15.07 s), all motion graphics, landscape 1920x1080 at 60 fps, cut tight to a 120 bpm beat: a beat every 0.5 s from 0, a bar every 2 s. The idea is one unbroken chain where each object turns into the next. A long typed prompt collapses into a point, the point becomes a short link, and a click on it drops the beat. Then come a globe, a product card, a network, eight word cards and an end card. It should feel like a premium product reveal: dark and glossy for most of it, ending on a bright end card. Nothing is filmed. My product name, my address, my mark and my own lines replace every quoted example below (replace with yours). Avoid filmed or stock footage, any other brand's names or claims, and loose timing: every change lands on the beat grid. </direction> <structure> 1. 0-1.5 s, the long prompt. On a dark page a pink cursor blinks, and a header "DESCRIBE YOUR IDEA · 02" fades in at 0.2 s. A sentence far longer than the screen types itself in Geist Mono 46 px: "Tell the chat what to show. The agent builds the animation. No keyframes to hunt for. Say what should change...". Typing starts slow, bursts in the middle (hundreds of characters a second) and lands softly at 1.0 s. Key words are white, the rest muted. The cursor runs to about 82% of the width, then parks while the line scrolls left under it, the left edge fading out through a mask. From 1.05 s the line smears sideways (horizontal-only blur) and dims. At 1.38 s it squashes into a 4 px glowing pink-white line whose ends close in over five frames to a point at the centre. 2. 1.5-2.3 s, the short link. One flat grey-violet flash frame decays in 0.2 s. From the point a dark pill with a thin light border is born: my mark and "[your brand]" in white with ".app" in pink, Manrope bold. The letters type in, each rising out of a blur, while the camera pushes in to about 1.2x and eases back. A white pointer flies in from the bottom right and clicks at exactly 2.0 s (the drop). On the click: - the pill presses to 0.96 and brightens for two frames; - the page flashes dark pink and decays in 0.12 s; - a light ring and two pink rings grow from the click with power4.out; - about seventy pink and white sparks burst out with drag. 3. 2.0-4.4 s, the globe. A dark globe (radius 780 px) rises from below and turns slowly. It has a pink rim glow inside its edge, white dots for land and faint meridians. The pill shrinks to about half and rises to the top. Under it sits "● LIVE PREVIEW" in pink mono, then a huge 154 px mono readout "IDEAS IN MOTION" that rolls in like an odometer: - one clipped column per letter, each rolling through random letters; - the columns land left to right on a power4.out curve over 2.5 s; - columns that have not landed stay in a dim ghost colour. Pink comets arc from the pill down to the globe and leave a pulse ring where they land. 4. 4.4-7.5 s, the product card. A blur dissolve (4.41-4.52 s) leads into a dark rounded card in slight 3D perspective that settles from a strong tilt and keeps drifting. At the top: a pill with a link icon and "[your brand].app", a pill "Live preview", and my mark top right. Three stats sit in a row, labelled "Pick a template", "Describe your idea" and "Refine in words, then export", with values that count to "01", "02" and "03". The active stat sits on a faint panel with a glowing underline. The panel hops to the next stat at 5.5 s and 6.0 s, and its underline turns violet, then pink, then teal. An area chart with a glowing line draws in, then morphs to a new curve and colour on each hop. From 6.3 s a scrubber with a small tooltip walks the line. The tooltip reads "Edit in words" / "Bigger", then "Slower". Four notification toasts slide in from the right and push the stack up: - "Describe your idea" / "Tell the chat what to show." - "No keyframes" / "Say what should change." - "Live preview" / "The preview updates as you talk." - "MP4 export" / "Vertical, horizontal or square" At 7.25 s the card swings away in 3D, blurs and is gone by 7.48 s. 5. 7.5-10.5 s, the network. A white disc with my mark pops out of the dark inside a violet glow, overshooting to 1.12x and settling by 7.9 s. The headline "Edit in words." rises word by word out of its own line box at the top, with "words." in a violet-pink-orange gradient. Around the disc about 37 round avatars (simple face stand-ins in coloured rings) pop out ring by ring along two dotted ellipses. Thin violet lines join them to the centre, and they orbit slowly. Teal sparks run out along the lines. Each ring they reach turns teal and glows, and a small teal pill pops beside it with a feature: "+Type", "+Shapes", "+3D", "+Sound", "+Music", "+Fonts", "+Photos", "+Logos". No pill ever overlaps another. At the bottom "[your brand].app" rolls in letter by letter in teal mono, with "YOUR AI MOTION DESIGNER" under it. The camera drifts left from 9.8 s. 6. 10.5-12.5 s, eight word cards, one every 0.25 s on the 8th notes. The first one streaks in from the right edge and brakes hard, its title motion-blurred. Each card is one Manrope ExtraBold 240 px title: - "Kinetic type." in deep ink on the light page; - "Shapes." white on near-black, with dark-pink squares switching on; - "3D effects." deep ink on pink, letters rising in one by one; - "Sound effects." in white outline type on near-black; - "Another colour." on a slowly turning conic gradient of the accents; - "Your footage." violet on the light page; - "Music." glowing teal over falling music notes; - my mark with "[your brand]." white on near-black. The corners carry small mono text: - top left: my mark and address; - top right: "0N / 08"; - bottom left: a section tag like "[ NO KEYFRAMES ]"; - bottom right: a progress line filling one eighth per card. 7. 12.5-15.07 s, the end card. One pale frame, then a light page opens as a circle from the centre over a grey-violet page. From 12.5 to 13.0 s my mark zooms out from about 3x, turning upright and going from washed-out grey to full colour. A pastel cloud (pink, violet, peach, mint, butter) swells from the bottom and drifts. At 13.15 s the mark slides left and the name "[your brand]" comes out from behind it into a centred lockup: deep ink, Manrope 600, about 170 px. The line "Your idea is ready to move." rises word by word from 13.46 s, 0.05 s apart. "move." is pink, and a pink underline is drawn under it at 14.06 s. Two buttons pop with a back ease: a deep-ink "Try it free →" at 14.16 s and a white mono "[your brand].app" at 14.25 s. Hold to the end. </structure> <composition> Palette: - near-black background #0D0B1E; - deep ink #1C0B5D for dark type on light pages; - light page #FAF9FF and soft lavender #F0EDFF; - muted text #6B6385, and a lighter muted #8F89A8 on dark; - lines #E9E4F2; - white #FFFFFF. Accents: pink #FB2D89 is the main one (cursor, links, rings, the accent word), with orange #FE9117 second. Violet #7C6CF2, teal #2DD4B0 and yellow #FFD23F appear only where three colours must be told apart. Type: Manrope (700-800) for headlines and UI, Geist Mono for typed text, labels, counters and addresses. Small labels are mono 24 px uppercase with wide tracking (about 0.23 em). A faint 96 px grid in the line colour sits under a radial mask: 5% on the dark pages, 3.5% on the light end card. My mark, a rounded-square app icon, appears in the short-link pill, on the product card, at the centre of the network, in the corner of the word cards and on the end card. </composition> <techniques> Every scene hands its object to the next: the line collapses to a point, the point grows into the pill, the pill rides up over the globe, the globe dissolves into the card, the card swings away into the network, and the network whips into the word cards. Cuts and hits use single flat flash frames that decay fast: grey-violet over 0.2 s at 1.5 s, dark pink over 0.12 s on the click, muted violet washing out over three frames on every word-card cut, pale at the end card. Eases: - power4.out for the rings and the odometer landing; - an overshoot for the network disc pop; - a back ease for the end-card buttons; - hard braking for the first word card's streak. Motion blur and masks: horizontal-only blur for the smear and the streak, a blur rise on each typed letter, a blur dissolve into the card, a blur on its 3D exit, and mask fades on scrolling edges. The camera breathes throughout: the push-in on the pill, the slow 3D drift of the card, the orbiting avatars and the left drift in the network. Glows sit on the lines, rims, rings and the active underline, and sparks fly with drag. </techniques> <music> Instrumental electronic synthwave at 120 bpm in C minor, dark and glossy, exactly as long as the video. - A quiet filtered intro opens up as it swells over the first two seconds, with a riser. - The drop lands exactly on the click at 2.0 s, into a driving beat: kick on every beat, offbeat hats, pulsing bass, bright arpeggio. - A steady drive carries through to the end card. - Everything stops at 12.5 s on one big hit and a bright C minor chord, whose long reverb wash dies away by the end. Loudness is about -14 LUFS, true peak below -1 dBTP. </music> <sound> Sound effects sit on the picture and never double the music's drums: - soft ticks under the typing; - a short whoosh and a glassy tick as the line collapses and flashes; - a click, a boom and a punch on the drop at 2.0 s; - a whoosh into the card at 4.45 s; - small blips on the two tab hops and on each of the four notifications; - a whoosh as the card swings away; - a soft thump when the mark pops at 7.55 s; - a fast whoosh on the whip at 10.5 s; - a tick on every word-card cut; - a short riser into the end card; - a boom and a soft splash at 12.5 s; - a light whoosh as the lockup opens; - two blips for the buttons. There is no voice-over. </sound> <references> A premium SaaS launch reel in the style of polished product-reveal motion design: dark glossy UI, glowing lines, kinetic type, odometer counters, 3D dashboard cards and rapid one-word title cards cut on the beat, closing on a pastel, airy brand lockup. </references>

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

Seamless 15-second app showreel in pure motion graphics

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

Newsletter

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

We use your email only for this newsletter. Privacy Policy

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

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