# Motion Graphics Library — AI for Mortals

The motion graphics Pat Simmons uses in his YouTube videos. Each is a HyperFrames composition (HTML + GSAP, rendered to MP4). Use them as a style reference: copy the prompt, swap the [PLACEHOLDERS] for your content, and read the HTML source for exact sizes, colors and timings.
Page: https://www.aiformortals.co/motion-graphics
HyperFrames: https://github.com/heygen-com/hyperframes

## Tree diagram explainer
Type: Explainers
When to use it: Show how one thing breaks down into its parts.
A compact eyebrow (THING 1 OF 2), a Monomakh title and an italic stone subtitle at top. On the left, a white app window mockup with three toolbar buttons; a green arrow points right to a tree that builds out of it: a Window node, then Toolbar, Menu and Timeline, then two green-outlined leaves (Play, Cut), joined by stone connector lines that draw in. Beats: eyebrow (0.5s) → title (0.6s) → subtitle (0.95s) → app window (1.3s) → arrow (1.9s) → root node (2.2s) → connectors and branch nodes every 0.2s (2.5–3.5s) → leaf connectors (3.8s) → leaves pop (4.05s) → hold to 7.4s.
Made for: GPT Realtime 2 Can Now Run Your Entire Computer (Just Your Voice) (https://www.youtube.com/watch?v=0Pf5GSCjfj4) · 7.4s
Related: Voice OS, the tool from this video (https://www.aiformortals.co/tools/voice-os)
Preview MP4: https://www.aiformortals.co/videos/motion/explainer-tree.mp4
HTML source: https://www.aiformortals.co/motion-src/explainer-tree.html

Prompt to make your own:
Make a 7.4-second 1920x1080 HyperFrames tree diagram, rendered at 4K. Parchment #FAF7F2 with a faint halftone and vignette, stone #8A8479 corner ticks, a top rule with a green #3EA648 fleuron. Keep the header small: stone caps eyebrow, 84px Monomakh title ([CONCEPT NAME]), 34px italic EB Garamond subtitle. Left: a 560x380 white app window mockup with three outlined buttons. A green arrow points right to a tree: a root node ([ROOT]), three children ([CHILD 1] to [CHILD 3]) and two green leaf nodes. Nodes are stone #F1EFEA pills with a 2px ink border, a dot and Inter 600 26px text; connectors are stone elbow lines drawn with strokeDashoffset. Reveal the window at 1.3s and the arrow at 1.9s, then alternate a line draw and a node pop (scale 0.8 to 1, back.out(1.6)) every 0.2s from 2.2s, leaves at 4.05s. Full-bleed.

## Hub and spokes
Type: Explainers
When to use it: Show one thing reaching out to many apps.
A line-drawn orb icon with a stone caps label sits on the left. Three curved ink lines draw out of it, one at a time, to three stacked stone app cards on the right (Obsidian, Notion and Slack logos), and a green MCP · API pill pops onto the lines. A compact eyebrow (BEYOND OBSIDIAN), Monomakh title (Any App, Any SaaS) and italic subtitle sit at top. Beats: eyebrow (0.55s) → title (0.65s) → subtitle (1.0s) → orb (1.35s) → label (1.8s) → line and card 1 (2.1s, 2.35s) → line and card 2 (2.6s, 2.85s) → line and card 3 (3.1s, 3.35s) → pill (3.8s) → hold to 7.8s.
Made for: GPT Realtime 2 Can Now Run Your Entire Computer (Just Your Voice) (https://www.youtube.com/watch?v=0Pf5GSCjfj4) · 7.8s
Related: Voice OS, the tool from this video (https://www.aiformortals.co/tools/voice-os)
Preview MP4: https://www.aiformortals.co/videos/motion/explainer-hub.mp4
HTML source: https://www.aiformortals.co/motion-src/explainer-hub.html

Prompt to make your own:
Make a 7.8-second 1920x1080 HyperFrames hub-and-spoke diagram, rendered at 4K. Parchment #FAF7F2 with a faint halftone and vignette, stone #8A8479 corner ticks, a top rule with a green #3EA648 fleuron. Small header: stone caps eyebrow, 96px Monomakh title ([ONE THING, MANY TARGETS]), 38px italic EB Garamond subtitle. Left: a 300px line-drawn circle icon for [THE HUB] with a caps label. Right: three 392x150 stone #F1EFEA cards with a soft shadow, each with [APP LOGO] and its name in 50px Monomakh. Curved ink lines join hub and cards. Timing: hub scales in at 1.35s, line 1 draws (strokeDashoffset, 0.6s) at 2.1s and card 1 slides in with back.out(1.6) at 2.35s, repeating every 0.5s for cards 2 and 3. A green outlined pill ([VIA WHAT]) pops onto the lines at 3.8s. Full-bleed.

## Blur-locked checklist
Type: Step-by-step
When to use it: Walk viewers through numbered steps, one clip per step.
A seven-row checklist under a small eyebrow and a Monomakh title (THE BUILD). Finished rows have filled green checkboxes, the active row is sharp with a green bar beside it, and the rows still to come are blurred and dimmed. In this clip step 2 checks off with a confetti pop and step 3 unblurs. Beats: fade in (0–0.35s) → step 2 box fills green and pops (0.55s) → tick draws and confetti bursts (0.65s) → step 3 unblurs and slides in (1.0s) → green bar moves down (1.05s) → step 3 checkbox pulses (1.35s) → fade out (2.95s).
One template renders one short clip per step. This clip is step 3 of 7.
Made for: GPT Realtime 2 Can Now Run Your Entire Computer (Just Your Voice) (https://www.youtube.com/watch?v=0Pf5GSCjfj4) · 3.3s
Related: Voice OS, the tool from this video (https://www.aiformortals.co/tools/voice-os)
Preview MP4: https://www.aiformortals.co/videos/motion/step-checklist.mp4
HTML source: https://www.aiformortals.co/motion-src/step-checklist.html

Prompt to make your own:
Make a 1920x1080 HyperFrames step checklist, rendered at 4K, as a template that renders one 3 to 4 second clip per step. Parchment #FAF7F2, halftone, stone #8A8479 corner ticks, a green #3EA648 fleuron. Small header: eyebrow and an 88px Monomakh title ([LIST TITLE]). Seven rows: a 54px rounded checkbox, an italic number and a 44px Monomakh step name ([STEP 1] to [STEP 7]). Done rows: filled green box with a white tick. Active row: sharp, dashed box, an 8px green bar to its left. Future rows: blur(7px) at 40% opacity. For beat k: fade in, at 0.55s check step k-1 (box pops to 1.42x, tick draws, confetti bursts), at 1.0s unblur step k and slide the bar to it, pulse its box, fade out in the last 0.35s. Bake the beat number in per render.

## Prompt card
Type: Prompt cards
When to use it: Put the exact prompt on screen to screenshot.
A full-bleed parchment page with corner ticks. Top left, a green chevron and a stone caps eyebrow (PROMPT 04 · WEB SEARCH) over a short green rule, then the whole prompt in 40px Inter behind a stone left border, and a green italic EB Garamond caption at the bottom: "pause your screen and grab this". Beats: whole card fades in (0–0.4s) → holds still → fades out (6.4–6.8s).
Made for: GPT Realtime 2 Can Now Run Your Entire Computer (Just Your Voice) (https://www.youtube.com/watch?v=0Pf5GSCjfj4) · 6.8s
Related: Voice OS, the tool from this video (https://www.aiformortals.co/tools/voice-os)
Preview MP4: https://www.aiformortals.co/videos/motion/prompt-card.mp4
HTML source: https://www.aiformortals.co/motion-src/prompt-card.html

Prompt to make your own:
Make a 6.8-second 1920x1080 HyperFrames prompt card, rendered at 4K. Parchment #FAF7F2 with a faint 16px ink halftone and a soft vignette, four 40px stone #8A8479 corner ticks 64px in. Top left at x=210: a green #3EA648 chevron and a 24px Inter 600 stone eyebrow in caps with 0.34em tracking ([PROMPT 01: NAME]), then a 90x5px green rule. Below it, the prompt text word for word ([YOUR PROMPT]) in Inter 400 at 40px with line-height 1.6, 1520px wide, behind a 3px stone #D4CEC4 left border. Drop the font size until the whole prompt fits. At the bottom center, a 42px italic EB Garamond green caption ([pause your screen and grab this]). Motion: fade the whole card in over 0.4s, hold, fade out over the last 0.4s. Do not sync the text to the voiceover. Full-bleed, no rounded card.

## Section header · bold
Type: Section headers
When to use it: Open a section with a short, heavy title card.
Parchment with halftone dots and a vignette, stone corner brackets, a dotted rule with a green fleuron above it, a wide-tracked stone eyebrow (FIRST, THE BASICS), a 150px Monomakh title (What It Actually Is) and a short green bar that grows out from the center. Beats: background and corners (0–0.3s) → rule (0.1s) → fleuron (0.2s) → eyebrow and title rise in (0.5s) → green bar (0.6s) → hold → fade out (1.5–1.8s).
Made for: GPT Realtime 2 Can Now Run Your Entire Computer (Just Your Voice) (https://www.youtube.com/watch?v=0Pf5GSCjfj4) · 2s
Related: Voice OS, the tool from this video (https://www.aiformortals.co/tools/voice-os)
Preview MP4: https://www.aiformortals.co/videos/motion/section-header-bold.mp4
HTML source: https://www.aiformortals.co/motion-src/section-header-bold.html

Prompt to make your own:
Make a 2-second 1920x1080 HyperFrames section header, rendered at 4K. Background: parchment #FAF7F2, a 16px ink halftone dot grid at about 6% and a soft vignette. Four stone #8A8479 corner brackets 80px in. A 300px stone rule with round dot ends at y=300 with a green (#3EA648) EB Garamond fleuron just above it. Centered below: an Inter 600 28px stone eyebrow in caps with 0.46em tracking ([EYEBROW]), a 150px Monomakh title in ink #020817 ([SECTION TITLE]), and a 300x8px green bar that scales out from the center. Timing: background fades in at 0, corners pop in with back.out at 0.05s staggered 0.03s, rule draws at 0.1s, fleuron drops at 0.2s, eyebrow and title rise 24 to 48px with power3.out at 0.5s, bar grows at 0.6s, hold, then everything fades out at 1.5s over 0.3s. Full-bleed.

## Node pipeline
Type: Explainers
When to use it: Show a chain of steps feeding a result.
Four white node cards in a row (a green Claude node, then Rules, Scatter and City), joined by ink wires with glowing green dots running along them. A green Claude cursor clicks the first node, a glow ripples down the chain, a dashed green feed line drops toward a ground line, and a skyline of windowed buildings (every sixth one green) rises left to right. An italic caption sits at the bottom. Beats: Claude node (0.15s) → wire and Rules (0.55s, 0.75s) → wire and Scatter (1.15s, 1.35s) → wire and City (1.75s, 1.95s) → cursor clicks, Claude node pulses (1.2s) → caption (2.4s) → feed line (3.0s) → ground (3.3s) → buildings rise (3.6s on, 0.12s apart) → green buildings pulse (6.0s) → hold to 10s.
The buildings are placed at random, so every render comes out a little different.
Made for: Claude Just Became A CRACKED Video Game Designer (https://www.youtube.com/watch?v=uPmy2ERmkVU) · 10s
Related: Unreal Agent Harness, the skill from this video (https://www.aiformortals.co/skills/unreal-agent-harness)
Preview MP4: https://www.aiformortals.co/videos/motion/explainer-pipeline.mp4
HTML source: https://www.aiformortals.co/motion-src/explainer-pipeline.html

Prompt to make your own:
Make a 10-second 1920x1080 HyperFrames pipeline animation, rendered at 4K. Parchment #FAF7F2, faint halftone, stone #8A8479 corner ticks. Top: four 288x150 white node cards in a row, 2.5px ink border, 18px corners, an icon and name header and an italic stone sub-line ([STEP 1] to [RESULT]); the first node is green #3EA648. Ink wires join them, with two glowing green dots looping along each. Bottom: a ground line and a skyline of windowed stone buildings, some tinted green. Nodes pop in left to right from 0.15s every 0.6s with wires drawing between; a green cursor tagged [AGENT] clicks the first node at 1.2s and it pulses; glows ripple down the chain; a dashed green line drops at 3.0s; buildings grow up from the ground in a 0.12s stagger from 3.6s. Caption at 2.4s. Full-bleed.

## Isometric city build
Type: Explainers
When to use it: Show something generated from rules, at scale.
A 15 by 15 isometric grid of stone blocks (three shades with ink outlines) builds in a diagonal sweep, each block popping into place with a green flash on its roof. There are road gaps every fifth row, random empty lots, and taller towers toward the center. Green-dot pill labels (grid rule, height noise, scatter, roads) flash in and out, and an italic caption rises at the end. Beats: corners and marker (0–0.05s) → blocks sweep in (0.35–7.6s) → grid rule (1.0s) → height noise (2.5s) → scatter (4.1s) → roads (5.7s) → caption (7.4s) → hold to 10s, with a slow vertical drift throughout.
The blocks are placed at random, so every render comes out a little different.
Made for: Claude Just Became A CRACKED Video Game Designer (https://www.youtube.com/watch?v=uPmy2ERmkVU) · 10s
Related: Unreal Agent Harness, the skill from this video (https://www.aiformortals.co/skills/unreal-agent-harness)
Preview MP4: https://www.aiformortals.co/videos/motion/explainer-isometric.mp4
HTML source: https://www.aiformortals.co/motion-src/explainer-isometric.html

Prompt to make your own:
Make a 10-second 1920x1080 HyperFrames isometric build, rendered at 4K. Parchment #FAF7F2 with a faint halftone, vignette, stone #8A8479 corner ticks and a tiny caps marker. Draw an SVG 2:1 isometric grid (15x15 cells, 72x36px tiles) of blocks with three face shades (#F1EFEA top, #DBD5CA left, #C9C2B5 right) and 2px ink outlines. Leave a road gap every fifth row and column, skip about 14% of cells, make blocks taller toward the center. Paint back to front. From 0.35s to 7.6s pop each block up in a diagonal sweep (scaleY from 0.02, back.out(1.7)) with its roof flashing green #3EA648. Flash four green-dot pill labels ([RULE 1] to [RULE 4]) at 1.0s, 2.5s, 4.1s and 5.7s for 1.5s each. At 7.4s raise an italic caption ([WHAT THE RULES MAKE]). Drift the scene 12px vertically throughout.

## Recap checklist
Type: Recaps & lists
When to use it: Close a section with what you just covered.
The brand frame with a fleuron, dotted rule and a small RECAP marker. A stone eyebrow (RECAP) and a Monomakh title (Run Your Computer By Voice) sit centered, with three rows below, each a filled green checkbox and a Monomakh line. Beats: chrome (0–0.3s) → eyebrow (0.5s) → title (0.6s) → rows slide in from the left (1.2s, 1.7s, 2.2s) → hold → fade out (5.9–6.3s).
Made for: GPT Realtime 2 Can Now Run Your Entire Computer (Just Your Voice) (https://www.youtube.com/watch?v=0Pf5GSCjfj4) · 6.3s
Related: Voice OS, the tool from this video (https://www.aiformortals.co/tools/voice-os)
Preview MP4: https://www.aiformortals.co/videos/motion/recap-checklist.mp4
HTML source: https://www.aiformortals.co/motion-src/recap-checklist.html

Prompt to make your own:
Make a 6.3-second 1920x1080 HyperFrames recap card, rendered at 4K. Parchment #FAF7F2 with a faint halftone and vignette, stone #8A8479 corner ticks, a 300px top rule with dot ends and a green #3EA648 fleuron, a tiny caps marker top right ([RECAP]). Centered: a 23px stone caps eyebrow, an 88px Monomakh title ([SECTION TITLE]). Below, a 1180px column of three rows, 128px apart: a 64px rounded green checkbox with a white tick, then a 50px Monomakh line ([POINT 1], [POINT 2], [POINT 3]). Timing: corners pop at 0.05s, rule at 0.1s, fleuron at 0.18s, eyebrow rises at 0.5s, title at 0.6s, then each row slides in from x -22 with power3.out at 1.2s, 1.7s and 2.2s. Hold, then fade everything out over the last 0.4s. Full-bleed.

## Two-panel see then act
Type: Explainers
When to use it: Show what it sees turning into what it does.
Under a stone eyebrow (EYES & HANDS) and a Monomakh title (It sees, then it acts), a left panel shows an eye icon with a green iris over a small tree diagram, captioned The accessibility tree. A green arrow grows across the middle to a right panel: an app window with a Premiere logo and a big green play button. A cursor glides onto the button, presses it, and a green ripple rings out. Beats: eyebrow (0.5s) → title (0.6s) → left panel (1.1s) → left caption (1.5s) → arrow grows (2.0s) → right panel (2.4s) → right caption (2.8s) → cursor glides in (3.1s) → click and ripple (3.85s) → hold to 7.4s.
Made for: GPT Realtime 2 Can Now Run Your Entire Computer (Just Your Voice) (https://www.youtube.com/watch?v=0Pf5GSCjfj4) · 7.4s
Related: Voice OS, the tool from this video (https://www.aiformortals.co/tools/voice-os)
Preview MP4: https://www.aiformortals.co/videos/motion/explainer-eyes-hands.mp4
HTML source: https://www.aiformortals.co/motion-src/explainer-eyes-hands.html

Prompt to make your own:
Make a 7.4-second 1920x1080 HyperFrames cause-and-effect diagram, rendered at 4K. Parchment #FAF7F2 with a faint halftone and vignette, stone #8A8479 corner ticks, a top rule with a green #3EA648 fleuron. Small header: stone caps eyebrow and a 90px Monomakh title ([IT DOES X, THEN Y]). Two 640px panels with stone caps headers. Left ([INPUT]): a line-drawn eye with a green iris above a mini tree. Right ([ACTION]): a white app window with [APP LOGO] in its title bar and a 120px green play button. A 160px green arrow sits between them, with a Monomakh caption under each panel. Timing: left panel slides in at 1.1s, arrow grows from the left at 2.0s, right panel at 2.4s, a cursor glides in from bottom right at 3.1s, the button squashes to 0.9 at 3.85s and a green ring expands and fades. Full-bleed.

## Kinetic type stack
Type: Kinetic type
When to use it: Build a phrase word by word as you say it.
The brand frame with a fleuron and a BUILD 01 marker. A LOT and a green italic at once slam in huge and blurred, then shrink up into a small eyebrow. LANDING PAGE slides in from the left, a stone ampersand pops, E-COM DESIGN slides in from the right, a hand-drawn ground line draws under them, THE DATABASE rises from beneath it, and an ink frame with corner bolts draws around everything with a THE ARCHITECTURE pill. Beats: chrome (0–0.5s) → A LOT (1.75s) → at once (2.1s) → shrinks to eyebrow (2.9s) → LANDING PAGE (3.05s) → ampersand (3.42s) → E-COM DESIGN (3.55s) → ground line (3.85s) → THE DATABASE rises (4.55s) → frame draws (5.55s) → pill (5.95s) → bolts (6.15s) → stack squeezes and settles (6.6s) → hold to 8.5s.
Made for: I Made Opus 4.8 and Fable 5 Build the Same App (RAW RESULTS) (https://www.youtube.com/watch?v=TzJCly4YgDQ) · 8.5s
Preview MP4: https://www.aiformortals.co/videos/motion/type-stack.mp4
HTML source: https://www.aiformortals.co/motion-src/type-stack.html

Prompt to make your own:
Make an 8.5-second 1920x1080 HyperFrames kinetic type build, rendered at 4K, each word landing as it is spoken. Parchment #FAF7F2, halftone, corner ticks, a green #3EA648 fleuron. First, a 190px Monomakh phrase ([BIG WORDS]) with a green italic EB Garamond tail slams in from 2.1x scale with blur(10px) and slight rotation (power4.out), then shrinks up into a 64px eyebrow. A 108px Monomakh line builds: [ITEM A] slides in from the left with a skew, a stone italic ampersand pops, [ITEM B] slides in from the right. A hand-drawn ink line draws beneath, [ITEM C] rises from under it in stone grey, then an ink frame draws around the stack with a pill label ([WHAT HOLDS IT]) and four bolts. End with a tiny squeeze and settle. Keep the type inside the frame.

## Read-aloud flow
Type: Explainers
When to use it: Show something being read out to a listener.
A compact eyebrow (WHY IT EXISTS), Monomakh title (Built for screen readers) and italic subtitle. Left: a white app window labeled ANY APPLICATION. Three green sound-wave arcs come out of it, then a stack of green-bordered speech chips with speaker icons ("Button: Play", "Menu: File", "Field: Search"), and on the right a listener icon wearing green headphones with an italic caption. Beats: eyebrow (0.5s) → title (0.6s) → subtitle (0.95s) → app window (1.3s) → listener (1.6s) → caption (2.0s) → sound waves (2.3s) → chips (2.6s, 3.0s, 3.4s) → waves pulse (from 4.0s) → hold to 7.8s.
Made for: GPT Realtime 2 Can Now Run Your Entire Computer (Just Your Voice) (https://www.youtube.com/watch?v=0Pf5GSCjfj4) · 7.8s
Related: Voice OS, the tool from this video (https://www.aiformortals.co/tools/voice-os)
Preview MP4: https://www.aiformortals.co/videos/motion/explainer-screen-reader.mp4
HTML source: https://www.aiformortals.co/motion-src/explainer-screen-reader.html

Prompt to make your own:
Make a 7.8-second 1920x1080 HyperFrames diagram of [SOURCE] being read out to [LISTENER], rendered at 4K. Parchment #FAF7F2 with a faint halftone and vignette, stone #8A8479 corner ticks, a top rule with a green #3EA648 fleuron. Small header: stone caps eyebrow, 88px Monomakh title, 34px italic EB Garamond subtitle. Left: a 500x360 white window mockup with outlined buttons and grey text bars. Three green sound arcs to its right. Middle: three stacked chips with a 2px green border, a green speaker icon and Inter 600 30px text ("[TYPE]: [NAME]", name in green). Right: a person icon with green headphones and a two-line italic caption. Timing: window 1.3s, listener 1.6s, arcs stagger in at 2.3s, chips slide in with back.out(1.6) at 2.6s, 3.0s and 3.4s, then the arcs pulse a few times from 4.0s. Full-bleed.

## Blocked access
Type: Explainers
When to use it: Show that there is no way in.
A large app icon (Premiere Pro) and its name sit center, flanked by two stone outline pills (MCP, API) joined to it by dashed lines. Rust-red strokes slash through both pills, the pills dim and the icon shakes. A rust-red eyebrow (THE KICKER) and a Monomakh question title sit above. Beats: icon pops in (0.6s) → name (1.0s) → eyebrow (1.1s) → title (1.2s) → pills (1.7s) → dashed lines (2.0s) → left strike (2.5s) → pills dim and icon shakes (2.6s) → right strike (2.7s) → hold to 6.6s.
Made for: GPT Realtime 2 Can Now Run Your Entire Computer (Just Your Voice) (https://www.youtube.com/watch?v=0Pf5GSCjfj4) · 6.6s
Related: Voice OS, the tool from this video (https://www.aiformortals.co/tools/voice-os)
Preview MP4: https://www.aiformortals.co/videos/motion/explainer-kicker.mp4
HTML source: https://www.aiformortals.co/motion-src/explainer-kicker.html

Prompt to make your own:
Make a 6.6-second 1920x1080 HyperFrames graphic showing [APP] with no way in, rendered at 4K. Parchment #FAF7F2 with a faint halftone and vignette, stone #8A8479 corner ticks, a top rule with a green #3EA648 fleuron. Header: a rust-red (#C7522A) caps eyebrow ([THE KICKER]) and an 88px Monomakh question title ([BUT WHAT IF ...?]). Center: a 300px rounded app icon ([APP LOGO]) with a soft shadow and its name in 44px Monomakh. Left and right: 220x96 stone outline pills ([WAY IN 1], [WAY IN 2]) joined to it by dashed lines. Timing: icon pops with back.out(1.6) at 0.6s, title at 1.2s, pills rise in at 1.7s, dashes at 2.0s, a thick rust-red strike draws across the left pill at 2.5s and the right at 2.7s while the pills dim to 50% and the icon shakes. Full-bleed.

## Three caveat tiles
Type: Recaps & lists
When to use it: List the catches before anyone tries it.
An amber eyebrow (HONEST CAVEATS) and a Monomakh title (A few caveats), then three white tiles with ink borders and soft shadows. Each tile has a round stone icon (a crossed-out lock, a coin stack, a stopwatch), a Monomakh heading and a two-line italic stone note. Beats: eyebrow (0.5s) → title (0.6s) → tile 1 (1.15s) → tile 2 (1.55s) → tile 3 (1.95s) → hold to 7.6s.
Made for: GPT Realtime 2 Can Now Run Your Entire Computer (Just Your Voice) (https://www.youtube.com/watch?v=0Pf5GSCjfj4) · 7.6s
Related: Voice OS, the tool from this video (https://www.aiformortals.co/tools/voice-os)
Preview MP4: https://www.aiformortals.co/videos/motion/explainer-caveats.mp4
HTML source: https://www.aiformortals.co/motion-src/explainer-caveats.html

Prompt to make your own:
Make a 7.6-second 1920x1080 HyperFrames caveats graphic, rendered at 4K. Parchment #FAF7F2 with a faint halftone and vignette, stone #8A8479 corner ticks, small top rule with a green #3EA648 fleuron. Header: an amber (#D4A93C) caps eyebrow ([HONEST CAVEATS]) and a 90px Monomakh title ([A FEW CAVEATS]). Below, three 476x400 white tiles in a row with a 2px ink border, 22px corners and a soft shadow. Each tile: a 140px stone #F1EFEA circle holding a simple line icon ([ICON]), a 44px Monomakh heading ([CAVEAT]), and a 28px italic EB Garamond stone note on two lines ([WHY]). Timing: eyebrow at 0.5s, title at 0.6s, then each tile rises 36px and scales from 0.94 with back.out(1.6) at 1.15s, 1.55s and 1.95s. Hold to the end. Full-bleed page, the tiles are the only boxes.

## Three-card summary
Type: Recaps & lists
When to use it: Sum up what it can do in three logos.
A stone eyebrow (THE FULL PICTURE), a Monomakh title (Run your computer by voice) and a small green mic "BY VOICE" tag, then three numbered white cards: a Chrome logo (The web), a cluster of Obsidian, Notion and Slack logos (Your apps), and a Premiere logo (Even the rest), each with a two-line italic note. Beats: eyebrow (0.5s) → title (0.6s) → mic tag (1.0s) → card 1 (1.35s) → card 2 (1.75s) → card 3 (2.15s) → hold to 7.8s.
Made for: GPT Realtime 2 Can Now Run Your Entire Computer (Just Your Voice) (https://www.youtube.com/watch?v=0Pf5GSCjfj4) · 7.8s
Related: Voice OS, the tool from this video (https://www.aiformortals.co/tools/voice-os)
Preview MP4: https://www.aiformortals.co/videos/motion/explainer-three-cards.mp4
HTML source: https://www.aiformortals.co/motion-src/explainer-three-cards.html

Prompt to make your own:
Make a 7.8-second 1920x1080 HyperFrames summary of three capabilities, rendered at 4K. Parchment #FAF7F2 with a faint halftone and vignette, stone #8A8479 corner ticks, small top rule with a green #3EA648 fleuron. Header: stone caps eyebrow, 90px Monomakh title ([WHAT IT DOES]), and a small green Inter caps tag with a mic icon ([HOW]). Below, three 476x420 white cards with a 2px ink border, 22px corners and a soft shadow. Each card: an italic EB Garamond number top left (01, 02, 03), a 118px logo or a row of three 78px logos ([LOGOS]), a 48px Monomakh name ([CAPABILITY]) and a 28px italic stone description. Timing: eyebrow 0.5s, title 0.6s, tag 1.0s, then cards rise 36px and scale from 0.94 with back.out(1.6) at 1.35s, 1.75s and 2.15s. Hold. Full-bleed page.

## Section header · screenshot
Type: Section headers
When to use it: Open a demo with its title and a screenshot.
Ink corner ticks, a small caps marker at top, a green fleuron over a dotted rule, a green spaced eyebrow (DEMO 01), a 104px Monomakh title (City Sample), a short green underline and an italic stone subtitle. Below sits a large sharp-cornered screenshot with a thin ink border and a soft drop shadow. Beats: ticks and marker (0–0.05s) → fleuron (0.08s) → rule draws (0.1s) → eyebrow (0.12s) → title (0.2s) → underline (0.55s) → subtitle (0.6s) → screenshot rises in (0.72s) → hold → fade out (3.0–3.4s).
Made for: Claude Just Became A CRACKED Video Game Designer (https://www.youtube.com/watch?v=uPmy2ERmkVU) · 3.4s
Related: Unreal Agent Harness, the skill from this video (https://www.aiformortals.co/skills/unreal-agent-harness)
Preview MP4: https://www.aiformortals.co/videos/motion/section-header-screenshot.mp4
HTML source: https://www.aiformortals.co/motion-src/section-header-screenshot.html

Prompt to make your own:
Make a 3.4-second 1920x1080 HyperFrames demo header, rendered at 4K. Parchment #FAF7F2 with a faint halftone and vignette. Four 46px ink corner ticks 54px in, a 15px stone caps marker top center ([SHOW]), a green #3EA648 italic EB Garamond fleuron, and a 300px stone rule with dot ends. Title block: green Inter 700 23px eyebrow ([DEMO 01]), 104px Monomakh title in ink #020817 ([DEMO NAME]), a 118x4px green underline, and a 30px italic EB Garamond stone subtitle ([SUBTITLE]). Below: a 900x506 screenshot of [YOUR RESULT] in a sharp-cornered frame with a 2px ink border and a soft shadow. Start moving at once: ticks at 0, rule draws from the center at 0.1s, title rises by 0.2s, the screenshot rises 30px and scales from 0.965 at 0.72s with power3.out. Hold, then fade out from 3.0s. No rounded corners.

## Section header · italic serif
Type: Section headers
When to use it: Announce a new section with a big italic title.
Parchment page with a faint halftone dot grid, a soft vignette, stone corner brackets and a stone top rule with a red fleuron. A spaced-out red mono eyebrow (SECTION 01) sits over a huge italic Cormorant Garamond title in ink, and a red bar sweeps out underneath. Beats: background (0s) → corners (0.1s) → top rule (0.2s) → fleuron drops in (0.3s) → eyebrow rises (0.4s) → title rises (0.7s) → red bar sweeps (1.1s) → hold → fade out (3.0s).
Made for: How to Build AI Agents in 2026: Ultimate Beginner’s Guide (https://www.youtube.com/watch?v=J8HplfBVpHk) · 3.5s
Preview MP4: https://www.aiformortals.co/videos/motion/section-header-serif.mp4
HTML source: https://www.aiformortals.co/motion-src/section-header-serif.html

Prompt to make your own:
Make a 3.5-second HyperFrames section title card on a native 3840x2160 canvas. Background: parchment #FAF7F2 with a 28px ink halftone dot grid at low opacity and a soft edge vignette. Four 56px stone (#8A8479) corner brackets 112px in. Top center: a 560px stone rule with dot ends and a red (#E63946) italic Cormorant Garamond fleuron sitting on it. Centered: a 52px red JetBrains Mono eyebrow in caps with 0.42em tracking ([SECTION 01]), a 280px italic Cormorant Garamond title in ink #020817 ([SECTION TITLE]), and a 720x10px red bar under it that grows from the left. Timing: background fades in at 0, corners scale in with back.out at 0.1s, rule draws at 0.2s, fleuron drops at 0.3s, eyebrow rises at 0.4s, title rises 80px with power3.out at 0.7s, bar sweeps at 1.1s, then the type lifts and fades out at 3.0s. Full-bleed, no card.

## Terminal prompt typing
Type: Prompt cards
When to use it: Show a prompt being typed into a coding agent.
On a sage green backdrop with faint curved lines, a large dark terminal window (traffic-light dots) shows a pixel mascot, a Claude Code header with model and path lines, a "Dynamic workflow requested" note and a purple ultracode tag. The prompt types out character by character behind an amber block caret, with the word workflow in rainbow bold, then an amber "auto mode on" line appears. Beats: header lines rise in (0.1s, 0.07s apart) → typing (0.95–4.45s) → bottom divider (4.6s) → caret blinks (from 4.65s) → auto mode line (4.75s) → hold to 8s.
Made for: I Tried Claude's New Dynamic Workflows (Honest Results) (https://www.youtube.com/watch?v=f6C5wvXjn5k) · 8s
Preview MP4: https://www.aiformortals.co/videos/motion/terminal-typing.mp4
HTML source: https://www.aiformortals.co/motion-src/terminal-typing.html

Prompt to make your own:
Make an 8-second 1920x1080 HyperFrames clip of a prompt being typed into a terminal, rendered at 4K. Sage background #B1C9C1 with faint curved #C2D6CF lines. A 1697px dark panel (#1A1918, 22px top corners) running off the bottom edge, with red, yellow and green window dots. Inside, in JetBrains Mono: a small pixel mascot, a 52px app name ([APP NAME]), two grey 40px meta lines ([MODEL · FOLDER], [PATH]), a grey status note at right and a divider with a small purple tag. Then a grey chevron and the prompt ([YOUR PROMPT]) at 52px in #ECEBE8, one key word in bold rainbow letters. Motion: header lines rise and fade in from 0.1s, staggered 0.07s; from 0.95s type the prompt over 3.5s behind an amber #E0A94A block caret; then a divider and an amber mode line fade up and the caret blinks.

## Numbered task cards
Type: Recaps & lists
When to use it: List what something will do, one card at a time.
On a parchment page with a faint 80px grid that drifts slowly and animated film grain, four wide stone cards stack down the center. Each card has a green mono number with a short dash (01 to 04), an Inter headline, an italic stone sub-line, and on some cards a small logo tile on the right (Indeed, LinkedIn). Beats: grid drifts for the full 10s → card 1 (1.1s) → card 2 (2.95s) → card 3 (4.8s) → card 4 (6.65s), with the number, text and logo following 0.08s, 0.2s and 0.28s after each card → hold to 10s.
Made for: Zero To Your First AI Agent In 10 Minutes (no code, no n8n) (https://www.youtube.com/watch?v=M8JyCenl2-w) · 10s
Preview MP4: https://www.aiformortals.co/videos/motion/task-list.mp4
HTML source: https://www.aiformortals.co/motion-src/task-list.html

Prompt to make your own:
Make a 10-second 1920x1080 HyperFrames list of [N] actions, rendered at 4K. Parchment #FAF7F2 with a very faint 80px ink grid (3.5% opacity) that drifts 80px diagonally over the clip, a soft vignette, and four noise layers cycled at 14fps for film grain. Centered 1200px column of cards, 26px apart: stone #F1EFEA with a 1px #D4CEC4 border, 14px corners and a soft shadow. Each card: a green #3EA648 JetBrains Mono number with a short green dash ([01]), a 36px Inter 600 headline ([ACTION]), a 24px italic EB Garamond stone sub-line ([DETAIL]), and an optional 56px logo tile on the right ([LOGO]). Bring cards in one at a time, 1.85s apart from 1.1s: card rises 24px and fades in (power3.out), the number slides in from the left, the text rises, the logo pops with back.out(1.4). Pace them to the narration.

## Three big steps
Type: Step-by-step
When to use it: Name the three parts of a method, big and bold.
Three rows stacked in the center of a parchment page with a drifting grid and film grain. Each row has a rounded stone icon tile with a green line icon (notebook, plug, clock), a green spaced mono label (STEP ONE), a big Inter ExtraBold headline (Instructions, Connections, Automations) and an italic stone sub-line. The middle row swaps the sub-line for three small logo tiles. Beats: row 1 (0.25s) → row 2 (1.3s) → row 3 (2.35s), each with icon pop (+0.05s), label (+0.18s), headline (+0.28s), sub-line (+0.4s) and logos (+0.48s) → hold to 5s.
Made for: Zero To Your First AI Agent In 10 Minutes (no code, no n8n) (https://www.youtube.com/watch?v=M8JyCenl2-w) · 5s
Preview MP4: https://www.aiformortals.co/videos/motion/three-steps.mp4
HTML source: https://www.aiformortals.co/motion-src/three-steps.html

Prompt to make your own:
Make a 5-second 1920x1080 HyperFrames three-step overview, rendered at 4K. Parchment #FAF7F2 with a faint 80px ink grid drifting 80px diagonally, a soft vignette, and film grain from four cycling noise layers. Center an 880px stack of three rows, 64px apart. Each row: a 160px stone #F1EFEA icon tile with 24px corners, a soft shadow and a 92px green #3EA648 bold line icon ([ICON]); then a 20px green JetBrains Mono label in caps with wide tracking and a short dash ([STEP ONE]), an 88px Inter 800 ink headline ([STEP NAME]), and a 32px italic EB Garamond stone sub-line ([WHAT IT MEANS]), or a row of 64px logo tiles instead. Start at 0.25s and bring each row in 1.05s apart: row rises 28px, icon tile pops from 0.78 with back.out(1.6), label slides in from the left, headline and sub-line rise in.

## File card reveal
Type: Explainers
When to use it: Introduce a file and say what it is for.
A centered stone card with a paper-file outline and a spaced mono filename (AGENTS.MD), with an italic serif line under it (the agent's identity). The card rises in with a slight overshoot, the line fades up, and a white sheen sweeps across the card. The MP4 runs three of these back to back: AGENTS.MD, MEMORY.MD and SKILLS. Beats (per card, from the HTML): card rises (0.1s) → descriptor fades up (0.38s) → sheen sweeps (1.2s) → hold. In the 6s MP4 each card gets about 2s, with a hard cut between them.
The clip cuts three of these together. The prompt makes one card; render one per file.
Made for: Zero To Your First AI Agent In 10 Minutes (no code, no n8n) (https://www.youtube.com/watch?v=M8JyCenl2-w) · 6s
Preview MP4: https://www.aiformortals.co/videos/motion/file-cards.mp4
HTML source: https://www.aiformortals.co/motion-src/file-cards.html

Prompt to make your own:
Make a 3-second 1920x1080 HyperFrames file reveal, rendered at 4K. Parchment #FAF7F2 with a faint 80px ink grid drifting 80px diagonally, a soft vignette and film grain from four cycling noise layers. Center a 460x300 stone #F1EFEA card with a 1px #D4CEC4 border, 10px corners and a soft shadow. Inside: a 92x112 outlined paper icon with a folded corner and a 24px JetBrains Mono filename in wide-tracked caps ([FILENAME.MD]). Below the card, a 56px italic Cormorant Garamond line in ink ([WHAT THE FILE IS FOR]). Motion: at 0.1s the card rises 24px and fades in with back.out(1.6), the line rises in 0.28s later, and at 1.2s a skewed white sheen sweeps left to right across the card. Hold to the end. Render one clip per file and cut them together.

## Push-slide comparison
Type: Explainers
When to use it: Contrast two approaches across a few short scenes.
Four editorial scenes on plain parchment with a green vertical margin rule and a fine dot grain, each pushed in from the right. A green caps kicker over a Monomakh headline asks the question; then three bordered step boxes with an arc labeled REPEATS EVERY STEP; then a context-window bar filling with ink; then two columns (Sub-agents, Workflows) split by a thin divider with an italic vs, a green underline sweeping under Workflows and an italic closing line. Beats: question (0.3–1.0s) → push (4.2s) → scene 2 text (4.75s), step boxes (5.65–6.35s), arc (6.75s) → push (9.2s) → scene 3 text (9.75s), bar fills (10.85s) → push (13.8s) → left column (14.6s), vs (14.85s), right column (15.05s), underline (15.65s), closing line (16.15s) → fade (19.1s).
Made for: I Tried Claude's New Dynamic Workflows (Honest Results) (https://www.youtube.com/watch?v=f6C5wvXjn5k) · 20s
Preview MP4: https://www.aiformortals.co/videos/motion/concept-compare.mp4
HTML source: https://www.aiformortals.co/motion-src/concept-compare.html

Prompt to make your own:
Make a 20-second 1920x1080 HyperFrames comparison of [OPTION A] and [OPTION B], rendered at 4K, in four scenes. Plain parchment #FAF7F2, a 3px green #3EA648 vertical rule 110px from the left, fine dot grain. Each scene: a 30px green Inter caps kicker, a 104 to 124px Monomakh headline in ink #020817, and a 46px EB Garamond line with one green phrase. Scene 1 asks [THE QUESTION]. Scene 2 shows [OPTION A] as three bordered step boxes with arrows and an ink arc drawing over them. Scene 3 shows the limit as a stone track filling with ink over 1.7s. Scene 4 sets two columns with 78px Monomakh heads, a thin divider with an italic vs, and a green underline sweeping under the winner. Push each scene in from the right (0.45s, power2.inOut). Type rises in.

## Word-synced process explainer
Type: Explainers
When to use it: Teach a process beat by beat, on the narrator's words.
No title, only ink corner ticks and a small marker. A ground line runs along the bottom while a cursor tagged "place by hand" drops four grey buildings one at a time. They fade back as a Rules node and a Scatter node appear and a green wire joins them, with a "like n8n" chip. A green Claude cursor then lights the nodes and a full two-row skyline springs up. A one-line stone caption at top narrates each phase. Beats: ground line (0.5s) → buildings placed by hand (0.8s, 4.8s, 8.8s, 12.8s) → node graph (16.9s) → Scatter node (19.6s) → wire draws (20.2s) → n8n chip (21.2s) → Claude takes over (38.4s), nodes turn green (39.4s) → skyline rises (41.4s) → fade (43.05s).
The reveals are timed to the words in my voiceover, so the long pauses are where I am talking.
Made for: Claude Just Became A CRACKED Video Game Designer (https://www.youtube.com/watch?v=uPmy2ERmkVU) · 43.5s
Related: Unreal Agent Harness, the skill from this video (https://www.aiformortals.co/skills/unreal-agent-harness)
Preview MP4: https://www.aiformortals.co/videos/motion/explainer-word-synced.mp4
HTML source: https://www.aiformortals.co/motion-src/explainer-word-synced.html

Prompt to make your own:
Make a 1920x1080 HyperFrames explainer for [PROCESS], rendered at 4K, as long as the narration. No title: the diagram fills the frame. Pull word timestamps, set t=0 on the first word, and pin each phase to its trigger word. Parchment #FAF7F2 with faint halftone, ink corner ticks, a tiny caps marker. A stone caption line at top narrates each phase. Phase 1 ([THE MANUAL WAY]): a ground line draws and a labeled cursor places items one at a time, each popping up. Phase 2: they fade to 18% as two stone nodes ([STEP 1], [STEP 2]) rise in and a green wire draws between them. Phase 3: a green ring cursor labeled [AGENT] glides across, the node borders turn green, and the full result springs up in a fast stagger. Fade out over the last 0.45s.

## Multi-scene explainer
Type: Explainers
When to use it: Teach one idea across a long stretch of narration.
One brand frame (corner ticks, fleuron, top rule, small marker) with seven short scenes that cut in on the narrator's words: a kinetic WHAT IT actually IS title, a voice-mode orb icon struck through with a tilted green "not this" tag, the orb walled inside a glass box with an arm bumping the wall, the model with Talk, Reason and Talk Back chips, curved lines out to three switches that flip green with sparks, a big green "unlock" with a padlock opening, and a TOOL CALLS function card the model fires. Beats: title words (1.7s, 2.6s, 3.4s) → voice-mode orb (7.05s) → strike and "not this" (11.9s) → walled box (13.05s), arm hits wall (14.9s) → model chips (18.2s, 19.8s, 21.85s) → CALL TOOLS lines (23.6s), switches flip (26.17s) → unlock and padlock (29.25s, shackle opens 30.5s) → TOOL CALLS card (32.7s), code rows (36.5s), it fires (37.7s) → hold to 41.5s.
The reveals are timed to the words in my voiceover, so the long pauses are where I am talking.
Made for: GPT Realtime 2 Can Now Run Your Entire Computer (Just Your Voice) (https://www.youtube.com/watch?v=0Pf5GSCjfj4) · 41.5s
Related: Voice OS, the tool from this video (https://www.aiformortals.co/tools/voice-os)
Preview MP4: https://www.aiformortals.co/videos/motion/explainer-long.mp4
HTML source: https://www.aiformortals.co/motion-src/explainer-long.html

Prompt to make your own:
Make a 1920x1080 HyperFrames explainer that runs as long as the narration about [CONCEPT], rendered at 4K. Pull word timestamps, set t=0 on the first spoken word, and put every reveal on the second its word is said. Keep one frame throughout: parchment #FAF7F2, halftone, stone #8A8479 corner ticks, a green #3EA648 fleuron. Swap short scenes with 0.4s fades: a title where Monomakh words blur up and one green italic EB Garamond word scales down from 1.6x; an icon for [THE OLD WAY] that gets an ink strike and a tilted green pill saying [not this]; chips that pop in with back.out(1.6) as each trait is named; ink lines that draw out to toggles which flip green with sparks; a padlock that swings open; a code card whose rows draw in. Full-bleed, no backdrop card.