# Motionstash — full component reference

> Motionstash is a free, open-source library of 76 code-based motion design components for Remotion. Every component is a single TypeScript file with a typed props schema, a declared frame budget and brand tokens, so coding agents can compose video by filling parameters instead of writing animation code.

Licence MIT. No account required for anything on this site.
Timing: canonical 30fps. Budgets: beat=12/36/12, statement=15/60/15, scene=18/114/18, feature=20/200/20 (enter/hold/exit frames).
Springs: settle=d18 s180 m0.9, snap=d22 s300 m0.7, glide=d26 s90 m1.4, pop=d11 s240 m0.8. Easings: enter, exit, travel, accent.
Brands: slate, paper, signal, press, circuit, field, ledger — every component takes a `brand` prop and resolves colour from tokens.

76 components in 11 categories.

## Kinetic type (typography)

Headlines, counters and text that carries the scene.

### Aurora Statement

- id: `aurora-statement`
- url: https://www.motionstash.io/c/aurora-statement
- summary: A headline resolves out of defocus over a drifting volumetric light field, with one specular pass across the glyphs
- frame: 1920x1080 (16:9) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: hero, headline, light field, focus pull, specular, premium, grain
- install: npx motionstash add aurora-statement
- preview video: https://www.motionstash.io/previews/aurora-statement.mp4

Props (7):

- `headline` · string · required — The statement. Three to six words; this is a hero frame, not a paragraph.
- `eyebrow` · string · default Motionstash — Small tracked label above the headline. Omit for a purer frame.
- `kicker` · string · default Components that compose in time, not in space. — One quiet line under the headline. Arrives last, after the sweep.
- `align` · "left" | "center" · default left — Composition. 'left' with the light mass off-centre is the stronger frame; 'center' for symmetrical lockups.
- `intensity` · number · default 0.62 — How present the light field is. Below 0.4 reads as near-black; above 0.8 starts to compete with the type.
- `sweep` · boolean · default true — Run a specular highlight across the glyphs once they have resolved.
- `brand` · string · default signal — Brand token id — one of the keys of BRANDS.

### Focus Pull Lines

- id: `focus-pull-lines`
- url: https://www.motionstash.io/c/focus-pull-lines
- summary: Focus racks down a stack of lines with real lens behaviour — blur, focus breathing, contrast loss and bloom
- frame: 1080x1920 (9:16) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: typography, focus pull, rack focus, vertical, depth of field, premium
- install: npx motionstash add focus-pull-lines
- preview video: https://www.motionstash.io/previews/focus-pull-lines.mp4

Props (5):

- `lines` · array · required — The lines, in order. Focus racks from the first to the last, so put the payoff at the end. Two to four lines; four is already a lot for five seconds.
- `eyebrow` · string · default How it works — Small tracked label above the block. Stays sharp throughout.
- `playhead` · boolean · default true — Draw an accent bar that travels down the left edge to the line currently in focus.
- `aperture` · number · default 0.62 — How shallow the depth of field is. Higher blurs the out-of-focus lines harder — 0.6 reads as a fast portrait lens, 0.25 as a phone camera.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Impact Title Rules

- id: `impact-title-rules`
- url: https://www.motionstash.io/c/impact-title-rules
- summary: Heavy uppercase lines whip in from the left with true directional smear, each stepping in and drawing its own accent rule
- frame: 1080x1920 (9:16) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: title, impact, vertical, motion blur, rules, stagger, caption
- install: npx motionstash add impact-title-rules
- preview video: https://www.motionstash.io/previews/impact-title-rules.mp4

Props (5):

- `lines` · array · required — The stacked lines, top to bottom. One word each hits hardest — this is set enormous and each line gets its own rule.
- `indent` · number · default 0.09 — How far each line steps in from the one above, as a fraction of frame width. 0 stacks them flush left.
- `caption` · string · default it's an engine for everything — Subtitle pill at the bottom of the frame, in the burned-in caption style.
- `rules` · boolean · default true — Draw an accent rule under each line, wiping in as the line lands.
- `brand` · string · default signal — Brand token id — one of the keys of BRANDS.

### Kinetic Headline

- id: `kinetic-headline`
- url: https://www.motionstash.io/c/kinetic-headline
- summary: Words rise through a hard clipping mask, staggered, with an accent rule drawing in beneath
- frame: 1920x1080 (16:9) at 30fps
- duration: 90 frames (3s), budget enter 15 / hold 60 / exit 15
- tags: headline, kinetic type, mask reveal, stagger, hero
- install: npx motionstash add kinetic-headline
- preview video: https://www.motionstash.io/previews/kinetic-headline.mp4

Props (5):

- `headline` · string · required — The headline itself. Two to eight words reads best; longer wraps and loses impact.
- `eyebrow` · string · default Motionstash — Small uppercase label above the headline. Omit for a cleaner card.
- `align` · "left" | "center" · default center — Text alignment. 'left' suits 9:16 and dense copy.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.
- `rule` · boolean · default true — Draw an accent rule under the headline.

### Number Ticker

- id: `number-ticker`
- url: https://www.motionstash.io/c/number-ticker
- summary: A metric spins up on per-digit odometer wheels, each lagging the one to its left, and an accent rule draws once it lands
- frame: 1920x1080 (16:9) at 30fps
- duration: 90 frames (3s), budget enter 15 / hold 60 / exit 15
- tags: counter, odometer, metric, kpi, tabular figures, roll
- install: npx motionstash add number-ticker
- preview video: https://www.motionstash.io/previews/number-ticker.mp4

Props (12):

- `value` · number · required — The figure the ticker lands on. This is the shot — pick the number the scene is about.
- `from` · number · default 0 — Figure the wheels start on. 0 reads as 'counting up'; a nearby value reads as 'moving'.
- `prefix` · string · default $ — Set before the number, half size and quiet — a currency mark such as '$' or '€'.
- `suffix` · string · default — — Set after the number, half size and quiet — '%', 'x', 'M', 'ms'. Omit for a bare figure.
- `decimals` · number · default 0 — Fixed decimal places. Decimal wheels spin fastest, so 1–2 places buys a lot of motion.
- `separator` · "comma" | "period" | "thin-space" | "none" · default comma — Thousands separator. 'thin-space' is the typographic choice for data; 'period' also flips the decimal mark to a comma for European locales.
- `label` · string · default Annual recurring revenue — Small uppercase mono line above the number — what the metric is. Omit for a bare figure.
- `caption` · string · default Up 41% year over year · rolling twelve months — Quiet mono line under the number: the qualifier, period or source. One short sentence.
- `underline` · boolean · default true — Draw an accent rule the width of the number once the count settles.
- `align` · "left" | "center" · default left — Block alignment. 'left' composes the frame; 'center' suits 1:1 and 9:16.
- `spin` · number · default 2 — Extra revolutions the fastest (right-hand) wheel makes. 0 rolls each wheel straight to its digit; 1+ gives every wheel at least one full turn, the right-hand ones more.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Scramble Decode

- id: `scramble-decode`
- url: https://www.motionstash.io/c/scramble-decode
- summary: A phrase resolves out of cycling glyphs left to right, each character locking to full contrast on a staggered beat
- frame: 1920x1080 (16:9) at 30fps
- duration: 90 frames (3s), budget enter 15 / hold 60 / exit 15
- tags: scramble, decode, monospace, kinetic type, glitch, terminal
- install: npx motionstash add scramble-decode
- preview video: https://www.motionstash.io/previews/scramble-decode.mp4

Props (9):

- `text` · string · required — The phrase that resolves. Uppercase reads best in mono; spaces never scramble, so word shape is visible from the first frame. Up to ~24 characters keeps the type large.
- `eyebrow` · string · default Resolving — Small uppercase label above the line, in the accent colour. Omit for a bare decode.
- `footnote` · string · default Motionstash — Small uppercase caption under the rule, bottom-left. Good for a source, a brand or a channel name.
- `charset` · "alphanumeric" | "symbols" | "hex" | "binary" · default alphanumeric — Which glyphs a character cycles through before it locks. 'alphanumeric' is the classic decode; 'hex' and 'binary' read as machine output; 'symbols' is the noisiest.
- `lockStagger` · number · default 3 — Frames between one character locking and the next, left to right. 2–4 reads as one sweeping gesture; above that the line resolves letter by letter. Compressed automatically for long strings so the decode always finishes inside the hold.
- `grid` · boolean · default true — Show the monospace cell grid as hairlines behind the type. Each line fades as its column locks.
- `showProgress` · boolean · default true — Show a percentage readout, right-aligned to the end of the line, that turns accent at 100%.
- `align` · "left" | "center" · default left — Position of the block in the frame. 'left' is the editorial default; 'center' suits 1:1 and 9:16.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Split Flap Board

- id: `split-flap-board`
- url: https://www.motionstash.io/c/split-flap-board
- summary: An airport flap display: seamed tiles churn through their drum, cell by cell, and land on the string
- frame: 1920x1080 (16:9) at 30fps
- duration: 90 frames (3s), budget enter 15 / hold 60 / exit 15
- tags: split flap, flip board, airport, mono, stagger, mechanical
- install: npx motionstash add split-flap-board
- preview video: https://www.motionstash.io/previews/split-flap-board.mp4

Props (7):

- `text` · string · required — The string the board lands on. Uppercased automatically. One tile per character, spaces included — 6 to 14 characters reads best; beyond that the tiles get small.
- `label` · string · default Departures — Small mono label above the board, e.g. 'DEPARTURES' or 'TODAY'S FARE'. Omit for a bare board.
- `meta` · string · default On time — Short status set hard right on the label line, e.g. 'ON TIME' or 'GATE OPEN'. Omit to leave the line to the label alone.
- `subline` · string · default Reykjavík · Gate B14 · LH 4021 — One line of detail under the board rule, set right. Use it for the human-readable version of what the tiles abbreviate.
- `highlight` · string · default KEF — A substring of `text` whose tiles carry the accent colour — the destination code, the gate, the amount. Case-insensitive, first match wins.
- `charset` · "auto" | "letters" | "digits" | "mixed" · default auto — Which drum the flaps travel through on the way to the target. 'auto' gives digits a digit drum and letters a letter drum (punctuation sits still), which is the most legible. 'mixed' churns letters and numbers together for a noisier, more mechanical run.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Stacked Headline Beats

- id: `stacked-headline-beats`
- url: https://www.motionstash.io/c/stacked-headline-beats
- summary: One word per beat, hard cut on the count, with a slow punch-in that lands on an accent payoff word
- frame: 1920x1080 (16:9) at 30fps
- duration: 240 frames (8s), budget enter 20 / hold 200 / exit 20
- tags: hard cut, one word, beats, punch in, kinetic type, rhythm
- install: npx motionstash add stacked-headline-beats
- preview video: https://www.motionstash.io/previews/stacked-headline-beats.mp4

Props (7):

- `words` · array · default 8 items — One word per beat, in order. Six to ten reads best. Short words hit hardest; anything over nine characters is scaled down to fit. Trailing full stops are a deliberate part of this style. The final entry is the payoff and lands in the accent colour.
- `beat` · number · default 20 — Frames each word holds before the hard cut, at 30fps. 15 = ~120bpm and feels urgent, 20 is confident, 30+ starts to feel like a slideshow. Clamped down automatically if the word count would otherwise crowd out the final hold.
- `label` · string · default Motionstash — Small mono label in the top-left corner. Omit it for a bare, poster-like frame.
- `letterCase` · "upper" | "asis" · default upper — 'upper' forces caps, which is the intended look. 'asis' respects the casing you pass.
- `punch` · number · default 0.04 — How much the word grows across its own hold — 0.04 is a 4% push, felt rather than seen. 0 freezes each word dead still.
- `ticks` · boolean · default true — Show the footer: hairline rule, beat ticks and the beat counter. Off leaves only the word.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Text Highlight Sweep

- id: `text-highlight-sweep`
- url: https://www.motionstash.io/c/text-highlight-sweep
- summary: A sentence fades up, then a marker sweeps in behind one phrase and flips its ink
- frame: 1920x1080 (16:9) at 30fps
- duration: 90 frames (3s), budget enter 15 / hold 60 / exit 15
- tags: highlight, marker, emphasis, sentence, sweep, annotation
- install: npx motionstash add text-highlight-sweep
- preview video: https://www.motionstash.io/previews/text-highlight-sweep.mp4

Props (7):

- `sentence` · string · required — The full sentence, punctuation included. Eight to sixteen words reads best; longer drops the type size to keep it inside three lines.
- `emphasis` · string · required — The phrase inside `sentence` to mark. Must appear in it (matched case-insensitively, first occurrence); if it does not, the sentence renders unmarked. Keep it to two to four words — it is held on one line as an unbreakable unit so the marker stays a single clean shape.
- `marker` · "block" | "underline" | "box" · default block — How the phrase is marked. 'block' is a solid accent slab behind the words and inverts their ink as it passes — the strongest and the default. 'underline' is a thick highlighter bar under the baseline, quieter and safe over long phrases. 'box' is a hand-drawn rounded outline drawn on with an SVG path, for an annotated, marked-up-by-a-human feel.
- `eyebrow` · string · default Motionstash — Small uppercase mono label above the sentence. Omit for a barer frame.
- `footnote` · string · default Every component is one portable file — brand tokens in, v… — One supporting line under a hairline rule — a source, a caveat, a second thought. Omit to let the sentence stand alone.
- `align` · "left" | "center" · default left — Text alignment. 'left' composes against a margin rule and is the editorial default; 'center' drops the rule and suits 1:1 and title-card use.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Typewriter Caret

- id: `typewriter-caret`
- url: https://www.motionstash.io/c/typewriter-caret
- summary: Lines typed out character by character on seeded irregular timing, led by a block caret that blinks on a fixed frame cycle
- frame: 1920x1080 (16:9) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: typewriter, caret, cursor, terminal, kinetic type, deterministic
- install: npx motionstash add typewriter-caret
- preview video: https://www.motionstash.io/previews/typewriter-caret.mp4

Props (8):

- `lines` · array · default 2 items — Lines typed one after another, in order, with a beat between them. One to four. The type scale shrinks to fit the longest line, so keep each one to a single measure — 25–40 characters reads best at 16:9.
- `prefix` · string · default › — Mono prompt glyph set in front of the first line, terminal style. '›', '$' and '/' all work. Empty string for none; later lines indent to stay aligned either way.
- `eyebrow` · string · default Motionstash — Small mono label anchored top-left, preceded by an accent dash. Empty string for none.
- `caption` · string · default Seeded per-character jitter — the same take on every render — Footer note under a hairline, drawn in only after typing finishes. Empty string for none.
- `typeface` · "display" | "mono" · default display — 'display' reads as an editorial statement being written; 'mono' as a terminal session.
- `caretBlink` · number · default 20 — Frames in one full blink cycle. 20 is ~1.5 blinks per second at 30fps. The caret crossfades rather than hard-cutting, and holds solid while keys are landing.
- `seed` · string · default caret-01 — Seeds the per-keystroke jitter. Change it for a differently-fumbled take of identical duration; the same seed always renders the same frames.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

## Titles & lower thirds (titles)

Naming things: cards, badges, captions, chapter marks.

### Badge Row

- id: `badge-row`
- url: https://www.motionstash.io/c/badge-row
- summary: Credibility chips set into a full-bleed hairline, springing up from 0.92 in a tight stagger with one filled accent pill landing last
- frame: 1920x1080 (16:9) at 30fps
- duration: 60 frames (2s), budget enter 12 / hold 36 / exit 12
- tags: badges, chips, pills, credibility, lower third, stagger, spring
- install: npx motionstash add badge-row
- preview video: https://www.motionstash.io/previews/badge-row.mp4

Props (6):

- `badges` · array · required — The chips, in reading order. Three to five is the sweet spot; past that the row scales itself down to stay inside the frame.
- `accentIndex` · number · default 1 — Which chip (0-based) gets the filled accent treatment and lands last with a slight overshoot. Exactly one chip carries the emphasis — omit for an all-outline row.
- `kicker` · string · default Now generally available — Small letterspaced mono label hung off the row's left shoulder, e.g. 'Now generally available'. Two to four words; omit for a barer strip.
- `rule` · boolean · default true — Draw a hairline across the full frame width on the row's centre line. The chips knock a gutter out of it, so the row reads as sitting on the line rather than floating over it.
- `shape` · "pill" | "cut" · default pill — 'pill' rounds the chips to a full half-height radius. 'cut' uses the brand's own corner radius instead, which is what square-cornered brands like Press want.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Caption Highlight Pill

- id: `caption-highlight-pill`
- url: https://www.motionstash.io/c/caption-highlight-pill
- summary: A spoken line with the figure that matters lifted onto a solid accent pill below it, landing a beat later
- frame: 1920x1080 (16:9) at 30fps
- duration: 90 frames (3s), budget enter 15 / hold 60 / exit 15
- tags: caption, subtitle, highlight, pill, explainer, alpha, lower third
- install: npx motionstash add caption-highlight-pill
- preview video: https://www.motionstash.io/previews/caption-highlight-pill.mp4

Props (6):

- `lead` · string · default Adobe offered to buy Figma for — The line above the pill, set in plain white. Empty gives you the pill on its own — the 'Link in the description' case.
- `pill` · string · required — The words on the accent pill. A figure or a short imperative; this is the thing you want remembered.
- `position` · "lower" | "center" | "upper" · default lower — Where the block sits. `lower` clears a presenter's face and stays above the platform's own caption area.
- `ground` · boolean · default true — Paint the frame behind it. Turn it off to render with an alpha channel and lay the caption straight over your own footage.
- `scale` · number · default 1 — Overall size multiplier, for when the caption has to sit inside a busy frame.
- `brand` · string · default ledger — Brand token id — one of the keys of BRANDS.

### Chapter Card

- id: `chapter-card`
- url: https://www.motionstash.io/c/chapter-card
- summary: A section divider where the rule runs off the frame edge, the index counts into place and the title masks up
- frame: 1920x1080 (16:9) at 30fps
- duration: 90 frames (3s), budget enter 15 / hold 60 / exit 15
- tags: chapter, section divider, title card, odometer, editorial, rule
- install: npx motionstash add chapter-card
- preview video: https://www.motionstash.io/previews/chapter-card.mp4

Props (7):

- `index` · number · required — Chapter number. Rendered zero-padded ('3' becomes '03') and counted into place.
- `title` · string · required — Section title. Two to five words holds the line; longer titles wrap and drop a size.
- `total` · number · default 7 — How many chapters there are, shown as a small 'of 07' under the index. Omit if the run length is unknown.
- `kicker` · string · default Chapter — Small uppercase mono label above the rule, e.g. 'Chapter', 'Part', 'Section'. Omit for a barer card.
- `dek` · string · default Two beautiful scenes back to back still look wrong if the… — One supporting sentence under the title. Keep it to a single line of thought — this is a divider, not a slide.
- `progress` · boolean · default true — Show tick marks for the whole run at the right end of the rule. Needs `total`, and is skipped above 12 chapters.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### End Card CTA

- id: `end-card-cta`
- url: https://www.motionstash.io/c/end-card-cta
- summary: A closing frame: drawn geometric monogram, tagline, URL pill and a QR-shaped block, composed as a page
- frame: 1920x1080 (16:9) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: end card, cta, outro, logo lockup, qr, closing frame
- install: npx motionstash add end-card-cta
- preview video: https://www.motionstash.io/previews/end-card-cta.mp4

Props (10):

- `wordmark` · string · required — The name in the lockup, set in the brand display face beside the drawn mark. One or two words; the type steps down as the name gets longer, so up to about 22 characters still fits on one line.
- `tagline` · string · default Every component in this reel is one file you can copy, re… — One sentence under the lockup. Say what happens next, not what just happened. Two lines maximum — it wraps at a measure of roughly 34 characters.
- `url` · string · required — The destination, shown in the pill. Write it as you want it read — no protocol, lowercase, no trailing slash ('motion.registry/gallery').
- `kicker` · string · default Thanks for watching — Small mono label in the top-left corner, e.g. 'Thanks for watching' or 'The end'. Omit to leave the top of the frame empty.
- `qrCaption` · string · default Scan to explore — Mono caption under the QR block. Tell people what scanning gets them. Ignored when `qr` is false.
- `footnote` · string · default Open source · MIT — Bottom-left credit line above the closing rule — licence, studio, series name.
- `handle` · string · default @motionregistry — Bottom-right social handle. Include the '@' yourself; it is rendered verbatim.
- `qr` · boolean · default true — Show the QR-shaped block. It is decorative geometry, not a scannable code — set false if the frame needs to carry a real one composited over it.
- `seed` · string · default end-card — Seed for the QR block's module pattern. Change it to get a different-looking code; the same seed always renders the same pattern.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Gridpaper Editorial

- id: `gridpaper-editorial`
- url: https://www.motionstash.io/c/gridpaper-editorial
- summary: A cream graph-paper spread: a taped card drops onto the sheet, a highlighter swipes under the masthead and mono specs type on
- frame: 1920x1080 (16:9) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: editorial, light, paper, grid, polaroid, print, masthead
- install: npx motionstash add gridpaper-editorial
- preview video: https://www.motionstash.io/previews/gridpaper-editorial.mp4

Props (6):

- `titleTop` · string · required — First title line. Gets the highlighter swipe behind it, so keep it short — one word is ideal.
- `titleBottom` · string · required — Second title line, set in the accent colour. The subject itself.
- `specs` · array · required — Monospace spec rows printed under the pinned card. Two to four reads best; this is a caption, not a table.
- `caption` · string · default Field notes — 03 — Small label above the title, printed in mono.
- `tape` · boolean · default true — Stick a torn tape strip across the top edge of the pinned card.
- `brand` · string · default press — Brand token id — one of the keys of BRANDS. Light brands (press, paper, field) are what this layout is for.

### Lower Third Bar

- id: `lower-third-bar`
- url: https://www.motionstash.io/c/lower-third-bar
- summary: An accent stripe leads a surface panel out of the left safe area, then the name and role type in behind it
- frame: 1920x1080 (16:9) at 30fps
- duration: 60 frames (2s), budget enter 12 / hold 36 / exit 12
- tags: lower third, broadcast, name plate, wipe, safe area
- install: npx motionstash add lower-third-bar
- preview video: https://www.motionstash.io/previews/lower-third-bar.mp4

Props (7):

- `name` · string · required — The person or place being named. One to four words; it sets the panel's width, so keep it short.
- `role` · string · default Lead Motion Designer — Second line — title, affiliation or location. Set in mono and muted. Omit for a name-only plate.
- `safeArea` · number · default 6 — Safe-area inset as a percentage of each axis. 6 is the broadcast title-safe convention; raise it for social crops with UI chrome.
- `divider` · boolean · default true — Draw a hairline rule between the name and the role. Turn it off for a tighter, more editorial plate.
- `uppercaseRole` · boolean · default true — Set the role line in uppercase with wide tracking — the broadcast default. False keeps the copy as written.
- `scrim` · boolean · default true — Fade the bottom of the frame under the bar. Keep it on when the title sits over footage; off over a flat plate.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Spotlight Callout

- id: `spotlight-callout`
- url: https://www.motionstash.io/c/spotlight-callout
- summary: A scrim closes over a synthesised product panel and a soft-edged hole opens on one control, labelled by a leader line
- frame: 1920x1080 (16:9) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: spotlight, callout, product tour, scrim, svg mask, leader line, annotation, onboarding
- install: npx motionstash add spotlight-callout
- preview video: https://www.motionstash.io/previews/spotlight-callout.mp4

Props (13):

- `label` · string · required — The callout headline — what the spotlit thing is or does. Three to six words; it sets on one or two lines above the leader line.
- `note` · string · default One button turns the typed brief into a finished scene. — One supporting sentence under the label. A callout is a pointer, not a paragraph — keep it to a single clause.
- `step` · string · default Step 02 — Tiny mono kicker above the label, e.g. 'Step 02' or 'Start here'. Omit for an unnumbered annotation.
- `target` · "action" | "search" | "nav" | "row" | "custom" · default action — Which element of the synthesised panel the hole opens on. 'action' is the primary button, 'search' the field beside it, 'nav' the current sidebar item, 'row' a list row, 'custom' the `focus` rect.
- `targetRow` · number · default 2 — Which list row to spotlight, 1-based, when `target` is 'row'. Clamped to the number of rows drawn.
- `focus` · object · default object — The spotlight rect, in frame fractions so it survives a change of aspect. Only read when `target` is 'custom'.
- `panelTitle` · string · default Workspace — Section heading in the panel behind the scrim. One or two words — it is set dressing, and its initial doubles as the app's logo mark.
- `actionLabel` · string · default Render scene — Label on the panel's primary button. With the default target this is the one piece of UI copy the spotlight actually lets you read, so make it the verb you are teaching.
- `rows` · number · default 5 — How many list rows the panel draws. They divide the panel body, so more rows means tighter rows.
- `dim` · number · default 0.58 — How far the scrim darkens everything outside the hole. On a dark brand this bites hard — much past 0.7 the surrounding UI stops reading as context at all; a light brand will take 0.8.
- `softness` · number · default 0.5 — Feather on the hole edge. 0 is a near-hard cut that looks like a mask; 1 is a wide falloff that looks like a lamp. Mid values read as light.
- `ring` · boolean · default true — Draw a hairline accent rectangle just outside the hole. Turn it off when the light alone is enough.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

## Product & UI (product)

Devices, browser frames, cursors, notifications.

### Agent Chat Stream

- id: `agent-chat-stream`
- url: https://www.motionstash.io/c/agent-chat-stream
- summary: An assistant answers word by word while tool-call chips spin, resolve to a check and settle under a blinking caret
- frame: 1920x1080 (16:9) at 30fps
- duration: 240 frames (8s), budget enter 20 / hold 200 / exit 20
- tags: ai, chat, streaming text, tool call, product ui, caret
- install: npx motionstash add agent-chat-stream
- preview video: https://www.motionstash.io/previews/agent-chat-stream.mp4

Props (10):

- `prompt` · string · required — The user's message, shown as a chip at the top right of the transcript. One sentence — the answer is the subject here, not the question.
- `answer` · string · required — The assistant's first reply, revealed word by word before the tools run. 20–30 words is the sweet spot for the 8s budget; longer is streamed faster to fit.
- `reply` · string · required — The closing reply, revealed after the last call resolves. This is the line that sits on the held frame, so make it the payoff — 12–18 words.
- `tools` · array · default 2 items — Tool-call chips, appearing between the two replies and overlapping by half a second. Two is the honest number for an 8s scene; three is the ceiling and squeezes the prose.
- `agent` · string · default Assistant — Name in the header, beside the accent mark. A product name works better here than a model name.
- `model` · string · default registry-1 — Mono model tag in the metadata rail. Empty string drops the row.
- `pace` · number · default 1 — Streaming speed multiplier. 1 is ~13 words a second, which is what a fast stream looks like; 0.7 reads more deliberate. Long copy is sped up automatically to make the budget regardless.
- `rail` · boolean · default true — Show the metadata rail — model, token count, tool progress, elapsed clock. Ignored on portrait and square frames, where the transcript takes the full width instead.
- `seed` · string · default stream-01 — Seeds the per-word jitter that keeps the stream off the metronome. Change it for a differently-paced take of identical duration; the same seed always renders identical frames.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Agent Composer

- id: `agent-composer`
- url: https://www.motionstash.io/c/agent-composer
- summary: A prompt types into a composer, the submit button takes a real press, and the agent's work reports itself step by step
- frame: 1920x1080 (16:9) at 30fps
- duration: 240 frames (8s), budget enter 20 / hold 200 / exit 20
- tags: agent, prompt, ui, typing, spinner, product, dark
- install: npx motionstash add agent-composer
- preview video: https://www.motionstash.io/previews/agent-composer.mp4

Props (4):

- `prompt` · string · required — The prompt that types into the composer. Written as a person would actually type it.
- `chip` · string · default Plan — Label on the mode chip beside the submit button.
- `steps` · array · required — Work the agent reports after submit, in order. Each completes before the next begins; the last one stays running.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS. The submit button uses accentAlt, so brands with a warm second accent read closest to the reference.

### Browser Chrome

- id: `browser-chrome`
- url: https://www.motionstash.io/c/browser-chrome
- summary: A browser window assembles piece by piece, types a URL into the address bar, then resolves a shimmering skeleton into a finished page
- frame: 1920x1080 (16:9) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: browser, window, chrome, url, typing, skeleton, product shot, ui mock
- install: npx motionstash add browser-chrome
- preview video: https://www.motionstash.io/previews/browser-chrome.mp4

Props (11):

- `url` · string · default motionregistry.dev/browser-chrome — The address typed into the omnibox, one character at a time. Everything before the first '/' is read as the host and set in full-strength ink; the path dims behind it, the way a real browser weights it. Leave the scheme off — browsers hide it. 20–45 characters reads best; the keystroke schedule fits itself to the length.
- `tabTitle` · string · default Motionstash — Label in the active tab, beside a favicon square carrying its first letter. The tab is roughly a quarter of the window wide, so anything past ~22 characters ellipses.
- `pageTitle` · string · default Draw the chrome, not the screenshot — Display heading of the page that resolves out of the skeleton. Four to seven words; it sets across three-quarters of the page and wraps to a second line.
- `buttonLabel` · string · default Copy component — Label of the single accent-filled button on the synthesised page. Two or three words — the pill sizes itself to the text.
- `secondaryLabel` · string · default View source — Label of the hairline ghost button beside it. Empty string for a single button.
- `eyebrow` · string · default Product & UI — Small mono label above the window, led by an accent dash and aligned to the window's left edge. Empty string for none.
- `caption` · string · default Chrome drawn in divs and inline SVG — no screenshot, no a… — One muted line under the window, aligned to the same left edge. Empty string for none.
- `trafficLights` · "mono" | "brand" · default mono — 'mono' draws the three window dots in muted ink, which is what a product shot usually wants; 'brand' colours them accent / alt accent / muted for a warmer, more literal frame.
- `lock` · boolean · default true — Draw the padlock at the head of the address bar. Turn it off for a localhost or intranet address, where a browser would not show one.
- `seed` · string · default chrome-01 — Seeds the keystroke jitter and the ragged widths of the skeleton rows, which the text rules inherit so the cross-fade lands in register. Change it for a differently-set page of identical duration; the same seed always renders the same frames.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Dashboard Shell

- id: `dashboard-shell`
- url: https://www.motionstash.io/c/dashboard-shell
- summary: A product dashboard assembles itself — rail, top bar, then four cards fade up with their sparklines drawing on
- frame: 1920x1080 (16:9) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: dashboard, ui mockup, saas, sparkline, stagger, screenshot
- install: npx motionstash add dashboard-shell
- preview video: https://www.motionstash.io/previews/dashboard-shell.mp4

Props (14):

- `appName` · string · default Northwind — Product name in the rail. Its first letter becomes the drawn logo mark, so pick a real word.
- `pageTitle` · string · default Overview — Page heading above the card grid. One or two words, like a real product screen.
- `pageSubtitle` · string · default Revenue, activation and retention across every workspace — One muted line under the heading. Omit for a tighter header.
- `searchPlaceholder` · string · default Search metrics, cohorts, events — Placeholder inside the top-bar search field. Keep it plausible — it sells the mockup.
- `userName` · string · default Amara Okonkwo — Signed-in user. Only their initials are drawn, on a bordered avatar circle.
- `navItems` · array · default 6 items — Rail rows, top to bottom. Five to eight rows fills a 16:9 rail without crowding it.
- `activeNav` · number · default 0 — Index of the selected row. It gets the recessed pill and an accent glyph.
- `railFooter` · string · default Production · v2.4 — Status line pinned to the foot of the rail, in mono caps behind a small accent dot — an environment or version, e.g. 'Production · v2.4'. Omit to leave the rail bottom empty.
- `rangeLabel` · string · default Last 30 days — Text of the date-range control at the right of the page header.
- `charts` · array · default 2 items — Exactly two sparkline cards: the first fills the wide top-left slot and draws in the accent colour, the second the narrow bottom-right slot in the secondary accent.
- `stat` · object · default object — The stat card: one large counting figure, a delta chip and a footnote.
- `table` · object · default object — The activity table: a label, a head rule and hairline-separated rows.
- `shadow` · boolean · default true — Float the window off the canvas with a soft shadow. Turn it off for a flat, printed look.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Depth Field Cards

- id: `depth-field-cards`
- url: https://www.motionstash.io/c/depth-field-cards
- summary: A field of cards on four depth planes with real depth of field and aerial perspective, revealed by one long lateral camera move
- frame: 1920x1080 (16:9) at 30fps
- duration: 240 frames (8s), budget enter 20 / hold 200 / exit 20
- tags: depth of field, parallax, camera move, product, cards, premium
- install: npx motionstash add depth-field-cards
- preview video: https://www.motionstash.io/previews/depth-field-cards.mp4

Props (8):

- `headline` · string · required — The line that sits in the sharp plane. Three to six words.
- `kicker` · string · default Each component sizes itself from the composition, so the … — Supporting line under the headline, in muted ink.
- `heroLabel` · string · default Registry — Label on the card that holds the focal plane.
- `heroMetric` · string · default 76 — The figure on the focal card. Two or three characters.
- `heroUnit` · string · default components — Unit under the focal card's figure.
- `aperture` · number · default 0.7 — Depth of field. Higher throws the near and far planes further out of focus.
- `drift` · number · default 0.55 — How far the camera travels laterally across the shot. The parallax between planes is what makes the space read as deep.
- `brand` · string · default circuit — Brand token id — one of the keys of BRANDS.

### Device Rise

- id: `device-rise`
- url: https://www.motionstash.io/c/device-rise
- summary: A phone rises into an overhead light pool, un-tilting as it lands, then the screen ignites and a rim light crosses the case
- frame: 1080x1920 (9:16) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: device, product, vertical, reflection, contact shadow, rim light, premium
- install: npx motionstash add device-rise
- preview video: https://www.motionstash.io/previews/device-rise.mp4

Props (7):

- `headline` · string · required — Line above the device. Two to five words; it lands before the device arrives.
- `caption` · string · default Drawn in code. Nothing to re-record when the product ships. — Quiet line under the headline. Omit when the device should carry the frame alone.
- `screenTitle` · string · default Today — The large title drawn on the device screen.
- `screenMetric` · string · default 4,182 — The hero figure on the screen. Kept short — it is read in half a second.
- `screenUnit` · string · default steps — Unit label beside the figure on the screen.
- `tilt` · number · default 11 — Degrees of perspective the device starts at before settling flat. 0 is a locked front-on rise; above 16 starts to read as a 3D render.
- `brand` · string · default signal — Brand token id — one of the keys of BRANDS.

### Glass Stack Reveal

- id: `glass-stack-reveal`
- url: https://www.motionstash.io/c/glass-stack-reveal
- summary: Frosted glass panes rise into a stack over a drifting light field, each with its own mass so the deck settles front-last
- frame: 1080x1920 (9:16) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: glass, frosted, vertical, stack, follow-through, light field, premium
- install: npx motionstash add glass-stack-reveal
- preview video: https://www.motionstash.io/previews/glass-stack-reveal.mp4

Props (4):

- `headline` · string · required — Line above the stack. Two to five words.
- `panels` · array · required — The panels, back to front. The LAST one is the hero and is drawn larger, so put the payoff there. Two to four; more than four and the stack stops reading.
- `frost` · number · default 0.6 — How frosted the glass is. 0 is clear glass over the light field; 1 is heavy frost that hides it.
- `brand` · string · default signal — Brand token id — one of the keys of BRANDS.

### Message Thread

- id: `message-thread`
- url: https://www.motionstash.io/c/message-thread
- summary: A conversation assembling itself, typing bubbles swapping for messages as the thread scrolls up
- frame: 1080x1920 (9:16) at 30fps
- duration: 240 frames (8s), budget enter 20 / hold 200 / exit 20
- tags: messaging, chat, bubbles, typing indicator, ui, vertical
- install: npx motionstash add message-thread
- preview video: https://www.motionstash.io/previews/message-thread.mp4

Props (10):

- `messages` · array · required — The conversation, in order. Alternate senders, and end on an outgoing message so the read receipt lands at the foot of the thread. Six short messages is the sweet spot for this budget; more are compressed to fit and the oldest scroll off the top.
- `contact` · string · default Priya Raman — Name in the thread header. Its initials draw the avatar too, so a first and last name reads best.
- `status` · string · default Online — Small line under the contact name, e.g. 'Online' or 'Active now'. Omit for a barer header.
- `typingIndicator` · boolean · default true — Show a three-dot typing bubble before every incoming message, which then collapses as the message takes its place.
- `dayLabel` · string · default Today — Rule-and-label divider above the first message, e.g. 'Today'. Omit to open straight on the first bubble.
- `receipt` · string · default Read 9:41 — Read receipt under the last outgoing bubble, e.g. 'Read 9:41'. Omit to leave the thread hanging.
- `composer` · boolean · default true — Show the input bar pinned to the bottom of the frame. Its send button presses in just before each outgoing message.
- `composerLabel` · string · default Message — Placeholder text in the input bar. Only rendered when `composer` is true.
- `pace` · number · default 1.15 — Scales the whole conversation's timing. 1 is the natural read, below 1 hurries it, above 1 lets it breathe. Capped automatically so the last bubble always lands before the exit window.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Minimal Video Frame

- id: `minimal-video-frame`
- url: https://www.motionstash.io/c/minimal-video-frame
- summary: A near-white player that strokes itself on, scrubs, and takes a cursor to its like control
- frame: 1920x1080 (16:9) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: player, light, minimal, ui, cursor, scrub, reactions
- install: npx motionstash add minimal-video-frame
- preview video: https://www.motionstash.io/previews/minimal-video-frame.mp4

Props (4):

- `title` · string · default Launch film — final cut — Line under the player. Left off, the frame is pure player chrome and works as a background plate.
- `duration` · string · default 0:30 — Duration label at the right of the scrub bar.
- `liked` · boolean · default true — Move a cursor to the like control and press it partway through the shot.
- `brand` · string · default paper — Brand token id — one of the keys of BRANDS. Written for the light brands.

### Phone Notification Stack

- id: `phone-notification-stack`
- url: https://www.motionstash.io/c/phone-notification-stack
- summary: A drawn phone glides up into a settled tilt while notification cards drop in and the stack behind them recedes
- frame: 1080x1920 (9:16) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: phone, device mockup, notification, lock screen, stack, 9:16, ui
- install: npx motionstash add phone-notification-stack
- preview video: https://www.motionstash.io/previews/phone-notification-stack.mp4

Props (8):

- `notifications` · array · required — The cards, in the order they land: the first entry arrives first and ends up at the top of the stack, dimming as the later ones drop in. Three reads best; four is the ceiling before the stack runs out of screen.
- `clock` · string · default 9:41 — Lock-screen time. Set large under the status row, and again small inside the status row itself.
- `dateLabel` · string · default Tuesday 12 March — Small uppercase mono line above the big clock, e.g. 'Tuesday 12 March'. Omit for a barer screen.
- `battery` · number · default 78 — Battery fill in percent, drawn into the status-row cell. Deliberately never written out as text.
- `kicker` · string · default Push — Small mono label at the top left of the frame, beside an accent tick. Omit to leave the device alone.
- `caption` · string · default Everyone knows the moment it ships. — One display-face line at the top of the frame. Five to nine words: it wraps to two lines and must not reach down to the device.
- `tilt` · number · default 7 — Settled rotateX in degrees. 0 is a flat mockup; 7 reads as a device held slightly away; past 12 the screen starts to keystone and the type in it softens.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Terminal Window

- id: `terminal-window`
- url: https://www.motionstash.io/c/terminal-window
- summary: A terminal runs a command: it types in, then the log streams line by line with a cycling spinner and an accent success line
- frame: 1920x1080 (16:9) at 30fps
- duration: 240 frames (8s), budget enter 20 / hold 200 / exit 20
- tags: terminal, cli, shell, typing, spinner, product, developer tooling
- install: npx motionstash add terminal-window
- preview video: https://www.motionstash.io/previews/terminal-window.mp4

Props (9):

- `command` · string · default npx remotion render hero out/hero.mp4 — The command that types in after the prompt glyph. Keep it to one line — 30–45 characters reads best at 16:9; longer shrinks the type for every line in the window.
- `output` · array · default 6 items — The log, in order. One to nine lines; the window reserves all of their space from frame 0, so it never reflows as they land. Mix tones for hierarchy — spinners for the two or three real steps, dim for detail, one 'ok' at the end.
- `title` · string · default ~/motionstash — zsh — Mono title centred in the window chrome. A path and a shell name is the convention. Empty string for bare chrome.
- `prompt` · string · default $ — Prompt glyph in the gutter of the command line and of the prompt left behind at the end. '$', '%' and '›' all work.
- `eyebrow` · string · default Motionstash — Small uppercase mono label above the window, preceded by an accent dash. Empty string for none.
- `caption` · string · default Deterministic render — the same frames on every machine — Dim mono note under the window, aligned to its right edge, fading in only once the prompt returns. Empty string for none.
- `caretBlink` · number · default 20 — Frames in one full caret blink. 20 is ~1.5 blinks a second at 30fps. The caret holds solid while keys are landing and only blinks when the shell is waiting.
- `seed` · string · default terminal-01 — Seeds the per-keystroke jitter that keeps the typing off the metronome. Change it for a differently-fumbled take of identical duration; the same seed always renders identical frames.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Zoom To Region

- id: `zoom-to-region`
- url: https://www.motionstash.io/c/zoom-to-region
- summary: A synthesised dashboard, then a keyframed camera push into one named region and back out, with an annotation ring on the detail
- frame: 1920x1080 (16:9) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: camera, pan and zoom, product shot, dashboard, ui mock, callout, annotation
- install: npx motionstash add zoom-to-region
- preview video: https://www.motionstash.io/previews/zoom-to-region.mp4

Props (18):

- `title` · string · default Activation, week over week — Display heading of the synthesised dashboard, top left. Three to six words; it is read in the wide shot only, so it can afford to be a full sentence fragment.
- `meta` · string · default Growth workspace · rolling 13 weeks — Small mono line under the title. Use it for scope and range — the thing that tells a viewer what they are looking at before the camera moves.
- `metricLabel` · string · default Weekly activations — Label of the big chart card. This one IS read at full zoom, so keep it two or three words and make it the name of the series.
- `metricValue` · string · default 3,520 — Headline figure on the chart card, set in the display face. Pre-format it — thousands separators, units, currency — the component never touches your number. The default reads the peak off a 4k axis, which is where the camera is going.
- `metricDelta` · string · default 22.2% w/w — Text of the accent-tinted chip beside the headline figure, led by an up caret. Empty string for no chip.
- `focusLabel` · string · default Week 8 spike — Mono label on the annotation that appears once the camera has parked. Two or three words: this is the caption on the thing you zoomed in to see.
- `focusValue` · string · default 2× the prior period — Second line of the annotation, set larger — the fact the zoom exists to deliver, so make it something the wide shot could not say. The card sizes itself to whichever of the two lines is wider, and flips to the other side of the ring rather than run off the frame.
- `caption` · string · default One layer, two keyframes — the camera is a transform, not… — Muted footer line led by an accent dash, aligned to the dashboard's left edge. Empty string for none.
- `targetX` · number · default 0.2 — Left edge of the region the camera flies to, as a fraction of frame WIDTH. 0 is the left edge of the frame.
- `targetY` · number · default 0.24 — Top edge of the target region, as a fraction of frame HEIGHT. 0 is the top of the frame.
- `targetW` · number · default 0.4 — Width of the target region, as a fraction of frame width. Copy a rect out of the GEO object at the top of this file to frame a specific card: the chart is 0.045/0.192/0.555/0.398.
- `targetH` · number · default 0.3 — Height of the target region, as a fraction of frame height. The tighter of width and height decides the scale, so the region is always fully inside the held frame and usually a little more.
- `zoom` · number · default 0.94 — Camera push, as a multiple of the scale at which the target region exactly fits the frame. 1 puts the region edge to edge on its tighter axis, 0.94 leaves a hair of margin, above 1 crops inside it. The scale is clamped at 1 from below, so the camera can never pull back past the wide shot.
- `focusX` · number · default 0.419 — Centre of the annotation ring, in the same frame units as the target region — put it on the thing you actually want circled, which is rarely the exact centre of the rect. The default sits on the chart's peak marker.
- `focusY` · number · default 0.325 — Vertical centre of the annotation ring, as a fraction of frame height. The default sits on the chart's peak marker.
- `reticle` · boolean · default true — Bracket the target region with hairline corner marks and a mono scale readout before the push, and again on the way out. Turn it off for a straight cinematic move with no instrumentation.
- `seed` · string · default region-01 — Seeds the ragged heights of the micro histograms in the tile row along the bottom. Change it for a differently-shaped dashboard of identical duration; the same seed always renders the same frames.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

## Data (data)

Charts and figures that animate to make a point.

### Bar Chart Reveal

- id: `bar-chart-reveal`
- url: https://www.motionstash.io/c/bar-chart-reveal
- summary: Gridlines draw on as hairlines, bars climb from the baseline in reading order, and each value counts up as its bar lands
- frame: 1920x1080 (16:9) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: bar chart, chart reveal, gridlines, counter, stagger, tabular figures
- install: npx motionstash add bar-chart-reveal
- preview video: https://www.motionstash.io/previews/bar-chart-reveal.mp4

Props (13):

- `data` · array · required — The series, in reading order — the reveal staggers left to right, so order the array the way you want the chart read. Five to eight bars is the sweet spot; twelve is the ceiling before the columns thin out.
- `title` · string · default Scenes rendered per month — Headline above the plot, set in the display face. Say what is measured, not what the shape does ('Scenes rendered per month', not 'Growth'). One line reads best.
- `eyebrow` · string · default Throughput — Small uppercase mono label in the accent colour above the title. Omit for a barer chart.
- `highlight` · number · default 6 — Zero-based index of the one bar carried in the accent colour; every other bar is muted. Omit to highlight the largest value automatically. This is the argument of the chart, so pick the bar the scene is about.
- `valuePrefix` · string · default — — Set immediately before every figure, on the bars and the axis alike — a currency mark such as '$' or '€'.
- `valueSuffix` · string · default — — Set immediately after every figure — '%', 'k', 'ms'. Rendered exactly as typed, so include a leading thin space yourself if the unit needs air.
- `compact` · boolean · default false — Abbreviate thousands and millions ('1.2k', '3.4M') instead of grouping digits with thin spaces. Turn it on once the figures pass four digits.
- `ticks` · number · default 4 — Number of gridlines above the baseline. It also sets the y domain: the top line is always a round number, so 4 over a peak of 137 gives 0/40/80/120/160.
- `yAxis` · boolean · default true — Show the y-axis tick figures at the left, in mono with tabular figures. Off gives a barer chart that leans on the value labels.
- `valueLabels` · boolean · default true — Count each bar's value up above its column as the bar lands. Off when the axis alone should carry the numbers.
- `barWidth` · number · default 0.62 — Bar thickness as a fraction of its column slot. 0.62 is the editorial default; above 0.8 the chart reads as a block, below 0.4 as a set of ticks.
- `footnote` · string · default Every scene composed from registry components · September… — Quiet mono caption under a hairline at the foot of the frame: the source, the period, the qualifier. One short sentence.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Column Pair Chart

- id: `column-pair-chart`
- url: https://www.motionstash.io/c/column-pair-chart
- summary: Two small column groups grow from one dashed baseline that runs unbroken across both, so the comparison is on a single scale
- frame: 1920x1080 (16:9) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: bar chart, comparison, columns, baseline, finance, explainer
- install: npx motionstash add column-pair-chart
- preview video: https://www.motionstash.io/previews/column-pair-chart.mp4

Props (3):

- `groups` · array · required — One group, or two for a comparison. Two is what this component is for.
- `scaleMax` · number · default 0 — Top of the shared scale. 0 derives it from the largest value across both groups, which is almost always right.
- `brand` · string · default ledger — Brand token id — one of the keys of BRANDS.

### Company Scorecard

- id: `company-scorecard`
- url: https://www.motionstash.io/c/company-scorecard
- summary: Two subjects, a row each, built badge by badge across a cross divider so the healthy row lands before the other one undercuts it
- frame: 1920x1080 (16:9) at 30fps
- duration: 240 frames (8s), budget enter 20 / hold 200 / exit 20
- tags: comparison, scorecard, badges, ring, icons, finance, explainer
- install: npx motionstash add company-scorecard
- preview video: https://www.motionstash.io/previews/company-scorecard.mp4

Props (2):

- `rows` · array · required — One row, or two for the comparison this is built for.
- `brand` · string · default ledger — Brand token id — one of the keys of BRANDS.

### Comparison Bars

- id: `comparison-bars`
- url: https://www.motionstash.io/c/comparison-bars
- summary: Paired horizontal bars per metric grow from one shared origin with a stagger down the table, figures counting at the bar ends
- frame: 1920x1080 (16:9) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: comparison, horizontal bars, two series, counter, stagger, legend, table
- install: npx motionstash add comparison-bars
- preview video: https://www.motionstash.io/previews/comparison-bars.mp4

Props (15):

- `rows` · array · required — The metrics, top to bottom in reading order — the reveal staggers down the list, so order them the way you want the argument made and put the most decisive row first. Four to five rows is the sweet spot; seven is the ceiling before the bars thin out.
- `oursLabel` · string · default Motionstash — Name of the accent series, shown in the first legend chip. A product or team name reads better than 'Us'.
- `theirsLabel` · string · default Hand-built — Name of the muted series, shown in the second legend chip. Name the baseline honestly — 'Hand-built', 'Industry median' — rather than a competitor you are not prepared to cite.
- `title` · string · default Registry vs. hand-built — Headline above the table, set in the display face. State the comparison ('Registry vs. hand-built'), not the conclusion. One line reads best.
- `eyebrow` · string · default Head to head — Small uppercase mono label in the accent colour above the title. Omit for a barer table.
- `basis` · "row" | "shared" · default row — How bar length is scaled. 'row' normalises each row to its own pair, so the winner fills the track and every row is legible even when the units differ — the right default for a mixed-unit comparison. 'shared' puts every row on one domain, which is only honest when all rows measure the same thing in the same unit.
- `showLead` · boolean · default true — Show the size of the gap in a right-hand column: a multiple ('3.4x') once one side is nearly double the other, a percentage ('+32%') below that. Accent-coloured when the accent series leads, muted when it trails. The chip is omitted for any row where the multiple is not finite (a zero on either side) or the two values are within 2%.
- `legend` · boolean · default true — Show the two legend chips above the table, each carrying a swatch cut to the same shape as the bars. Off only when a caption elsewhere already names the two series.
- `dividers` · boolean · default true — Hairline under each row, sweeping in with it. This is what makes the block read as a table rather than a loose stack of bars; turn it off for a softer, more editorial list.
- `labelWidth` · number · default 0.27 — Width of the label column as a fraction of the content width. It fixes the origin every bar grows from, so widen it for long metric names rather than letting them wrap — 0.34 or so in 9:16, where the column is narrow in absolute terms.
- `barThickness` · number · default 0.24 — Thickness of one bar as a fraction of its row height. 0.24 leaves the pair reading as a pair with air around it; above 0.32 the two bars fuse into a block, below 0.16 they read as rules.
- `rivalTone` · "muted" | "alt" · default muted — Colour of the second series. 'muted' sits between the gridline and the muted ink, so the accent series plainly wins the frame. 'alt' uses the brand's `accentAlt`, which gives the two series equal weight — use it when the scene is a genuine comparison rather than an argument.
- `compact` · boolean · default false — Abbreviate thousands and millions ('1.2k', '3.4M') instead of grouping digits with thin spaces. Turn it on once the figures pass four digits.
- `footnote` · string · default Same brief, same reviewers · median across twelve launch … — Quiet mono caption under a hairline at the foot of the frame: the sample, the period, the method. One short sentence — this is where a comparison earns its credibility.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Comparison Race Chart

- id: `comparison-race-chart`
- url: https://www.motionstash.io/c/comparison-race-chart
- summary: Two series race across fifty points, one solid and one dashed, each carrying a badge and a live figure while a counter runs in the corner
- frame: 1920x1080 (16:9) at 30fps
- duration: 360 frames (12s), budget enter 27 / hold 306 / exit 27
- tags: comparison, line chart, race, dual series, counter, legend, svg
- install: npx motionstash add comparison-race-chart
- preview video: https://www.motionstash.io/previews/comparison-race-chart.mp4

Props (14):

- `title` · string · required — The comparison being made, set top-left. A noun phrase naming the measure — 'Revenue, indexed' rather than 'A chart of revenue'.
- `subtitle` · string · default Index, 1976 = 20 — One line under the title for the unit or the baseline — 'Index, 1976 = 20'. This is where a chart earns trust, so say what the numbers are.
- `seriesAName` · string · required — Legend name for the solid series.
- `seriesBName` · string · required — Legend name for the dashed series.
- `seriesA` · array · required — The solid series, in order. Drawn with a round badge. Any length — the x axis divides itself evenly, so 20 points and 200 points both fill the plot.
- `seriesB` · array · required — The dashed series. Should be the same length as seriesA; if it is not, the shorter one stops early and the longer one keeps going, which is usually a mistake rather than a design.
- `startLabel` · number · default 1976 — The value of the first x position, counted up one per point and shown large in the corner. Years are the obvious case; any integer sequence works.
- `counterLabel` · string · default Jahr — Small label above the running counter. Set to an empty string to drop it.
- `yMax` · number · default 110 — Top of the y scale. Deliberately not derived from the data: a fixed ceiling is what lets the winner visibly run out of room near the top.
- `yTicks` · array · default 5 items — Values that get a gridline and a left-hand label.
- `xTickEvery` · number · default 10 — Label every Nth x position. 10 over 50 points gives six labels, which is about the most a frame can carry.
- `colorA` · string · default  — Hex for the solid series. Empty uses the brand accent, which is the safer choice.
- `colorB` · string · default  — Hex for the dashed series. Empty uses the brand's alternate accent.
- `brand` · string · default paper — Brand preset. The light presets (paper, press, field) put dark type on a pale ground; the dark ones invert it. Both are composed for — this component reads its type colour from the brand rather than assuming a dark frame.

### Donut Progress Ring

- id: `donut-progress-ring`
- url: https://www.motionstash.io/c/donut-progress-ring
- summary: One KPI as an arc sweeping from twelve o'clock, with a centre figure that lands its last digit on the frame the arc completes
- frame: 1080x1080 (1:1) at 30fps
- duration: 90 frames (3s), budget enter 15 / hold 60 / exit 15
- tags: donut, progress ring, gauge, kpi, dasharray, counter
- install: npx motionstash add donut-progress-ring
- preview video: https://www.motionstash.io/previews/donut-progress-ring.mp4

Props (13):

- `value` · number · required — The figure the arc sweeps to and the centre counts to. This is the shot — one number, under four digits reads best.
- `max` · number · default 100 — The value that fills the ring completely. Leave at 100 for a percentage; set it to a quota or a headcount to show 'value of max' as a share of a full turn.
- `from` · number · default 0 — Where the arc and the count start. 0 reads as 'filling up'; a nearby value reads as 'moving' and keeps the gesture short.
- `suffix` · string · default % — Unit set after the figure at just under half its size, quiet — '%', 'x', 'k', 'GB'. Empty string for a bare figure.
- `decimals` · number · default 0 — Fixed decimal places on the centre figure. 0 for a clean percentage; 1 when the last digit is the point of the shot.
- `label` · string · default New ARR · annual target — Small uppercase mono line at the top left — what the metric is. Two to five words; it sits above a hairline that frames the card.
- `caption` · string · default €4.2M of a €5.4M goal — Quiet mono line inside the ring, under the figure: the absolute numbers behind the share. Keep it to about five words or it crowds the well.
- `footnote` · string · default Fiscal Q3 · updated weekly — Bottom-left mono line: the period, the source, the caveat. One short clause — this is the fine print, not a second caption.
- `target` · number · default 70 — Optional threshold, in the same units as `value`. Draws a notch across the track and a readout bottom right; the notch resolves to the second accent the moment the arc passes it. Omit for a bare gauge.
- `targetLabel` · string · default Q3 pace — Wording for the target readout, e.g. 'Target', 'Goal', 'Q3 pace'. Set in uppercase mono next to the figure.
- `thickness` · number · default 0.085 — Track stroke width, as a fraction of the gauge's overall footprint. 0.03 reads as a hairline dial, 0.085 as a donut, 0.16 as a heavy band. A thicker track leaves less room in the well, and the figure shrinks to fit it.
- `ticks` · boolean · default true — Draw the graticule outside the track — ten minor ticks plus a longer one at twelve o'clock marking zero. Turn off for a plainer, softer card.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Funnel Steps

- id: `funnel-steps`
- url: https://www.motionstash.io/c/funnel-steps
- summary: Bands narrow downward as each opens out of the centre line, counts tick up inside them and the drop-off from the stage above sets beside each edge
- frame: 1920x1080 (16:9) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: funnel, conversion, drop-off, counter, stagger, trapezoid
- install: npx motionstash add funnel-steps
- preview video: https://www.motionstash.io/previews/funnel-steps.mp4

Props (11):

- `stages` · array · required — The funnel, widest first. Order is the argument: the bands narrow downward in exactly this order and no sorting is applied, so a stage larger than the one above it reads as a gain (+%) rather than a drop. Four stages is the sweet spot; six is the ceiling before the bands thin out.
- `title` · string · default Trial to paid, last 30 days — Headline above the funnel, in the display face. Name the population being funnelled ('Trial to paid, last 30 days'), not the shape ('Our funnel'). One line reads best.
- `eyebrow` · string · default Conversion — Small uppercase mono label in the accent colour above the title. Omit for a barer frame.
- `summaryLabel` · string · default End to end — Label for the end-to-end conversion figure in the top right, which counts up to last ÷ first as the funnel builds. Omit the label to drop that figure entirely and let the bands carry the story.
- `dropoff` · "percent" | "count" | "both" | "none" · default percent — What the muted annotation beside each band says about the step above it: 'percent' the share lost, 'count' the absolute number lost, 'both' stacks the two, 'none' hides the annotation and re-centres the funnel in the frame.
- `minWidth` · number · default 0.4 — Width the smallest band keeps as a fraction of the widest, so the last stage stays legible when its count is a rounding error of the first. It flatters small stages: 0 makes the widths strictly proportional and honest, 0.4 keeps a real funnel silhouette.
- `valuePrefix` · string · default — — Set immediately before every figure, on the bands and the drop-off alike — a currency mark such as '$' or '€'.
- `valueSuffix` · string · default — — Set immediately after every figure — 'MRR', 'sessions', 'k'. Rendered exactly as typed, so include a leading thin space yourself if the unit needs air.
- `compact` · boolean · default false — Abbreviate thousands and millions ('1.2k', '3.4M') instead of grouping digits with thin spaces. Grouped digits are more precise and read better in a band; switch this on once the figures pass six digits.
- `footnote` · string · default Self-serve signups only · activation means one workspace … — Quiet mono caption under a hairline at the foot of the frame: the source, the window, the qualifier. One short sentence.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### KPI Tile Grid

- id: `kpi-tile-grid`
- url: https://www.motionstash.io/c/kpi-tile-grid
- summary: Stat tiles fade up in a three-frame stagger, counting up in four number formats with delta chips and drawn sparklines
- frame: 1920x1080 (16:9) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: kpi, dashboard, counter, sparkline, stagger, metrics
- install: npx motionstash add kpi-tile-grid
- preview video: https://www.motionstash.io/previews/kpi-tile-grid.mp4

Props (9):

- `title` · string · required — Board headline, top left. Four to six words — this is the sentence the numbers are evidence for.
- `eyebrow` · string · default Board update — Small accent label above the title. The report's name or cadence: 'Board update', 'Week 34'.
- `period` · string · default 01 Jul — 30 Sep — Right-aligned mono line on the title's baseline — the window the figures cover, e.g. '01 Jul — 30 Sep'.
- `tiles` · array · required — The metrics, in reading order. Four is the designed case and fills a 16:9 row; two or three widen, five or six wrap to a three-across grid.
- `currencySymbol` · string · default $ — Mark set before every 'currency' tile, at half size and quiet. '$', '€', '£', 'CHF'.
- `sparklines` · boolean · default true — Draw the trailing sparkline in each tile. Turn it off for a denser, figure-only board.
- `footnote` · string · default Deltas versus the prior quarter · sparklines show trailin… — Quiet mono line at the bottom left, under a hairline — the methodology or comparison basis. One short sentence.
- `source` · string · default Finance ops — Right-aligned attribution opposite the footnote — the team or system the numbers came from.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Line Chart Draw

- id: `line-chart-draw`
- url: https://www.motionstash.io/c/line-chart-draw
- summary: A smoothed trend line draws on behind a travelling dot, filling a soft area as it goes, then annotates its own peak
- frame: 1920x1080 (16:9) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: line chart, draw-on, area fill, counter, annotation, svg path
- install: npx motionstash add line-chart-draw
- preview video: https://www.motionstash.io/previews/line-chart-draw.mp4

Props (13):

- `title` · string · required — The metric the chart is about, set large in the top-left. A noun phrase — 'Weekly active developers', not 'Chart of user growth'.
- `eyebrow` · string · default Platform telemetry — Small uppercase mono label above the title — the dataset, the team, the source. Omit for a barer header.
- `values` · array · required — The series, in order. 8–30 points reads best: fewer looks sparse once smoothed, many more turns the curve into texture. Any magnitude — the y scale is derived from the data.
- `xLabels` · array · default 5 items — Tick labels along the x axis, spread evenly across the series, so five labels can annotate twenty points. Set in mono — keep each to 3–6 characters. An empty array draws no x ticks.
- `prefix` · string · default  — Set immediately before every figure, on the axis and on the travelling readout — a currency mark such as '$' or '€'.
- `suffix` · string · default k — Set immediately after every figure — '%', 'k', 'M', 'ms'. Much cheaper than scaling the numbers themselves.
- `decimals` · number · default 1 — Decimal places on the travelling readout. 1 gives the counter something to do across a small range; 0 for large figures.
- `baseline` · "zero" | "auto" · default zero — 'zero' anchors the y axis at zero — honest for volumes, and the right choice whenever the area is filled. 'auto' zooms to the data range, which suits rates and indices but exaggerates every slope.
- `gridLines` · number · default 5 — Roughly how many horizontal gridlines to draw. The scale snaps to whole 1/2/5 steps, so the count you get back can differ by one.
- `area` · boolean · default true — Fill a soft accent gradient under the curve, wiped in behind the leading edge. Turn it off for a purer line, or when an 'auto' baseline makes the fill meaningless.
- `peakLabel` · string · default Peak — Caption for the callout that lands on the maximum once the line finishes drawing — 'Peak', 'All-time high', 'Launch week'. The value is appended for you. Omit to leave the peak unannotated.
- `footnote` · string · default 12-month rolling · thousands — Quiet mono line in the top-right corner: the period, the unit, the source. A few words — it is set on one line.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Metric Chip Stack

- id: `metric-chip-stack`
- url: https://www.motionstash.io/c/metric-chip-stack
- summary: Stat blocks wipe open one after another, each with its caption on a small pill straddling the bottom edge
- frame: 1920x1080 (16:9) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: stat, chip, kpi, wipe, stack, finance, explainer
- install: npx motionstash add metric-chip-stack
- preview video: https://www.motionstash.io/previews/metric-chip-stack.mp4

Props (4):

- `chips` · array · required — One to five chips, stacked and revealed in order. Three is the sweet spot; past five the stack is taller than the safe area of a vertical cut.
- `align` · "center" | "left" · default center — Centred sits the stack in frame. Left is for putting it beside a talking head.
- `dots` · boolean · default true — Fine dot texture over the accent fill. Stops a large flat block reading as a solid colour swatch, and is barely visible until it is missing.
- `brand` · string · default ledger — Brand token id — one of the keys of BRANDS.

### Metric Odometer

- id: `metric-odometer`
- url: https://www.motionstash.io/c/metric-odometer
- summary: Mechanical digit wheels spin and settle left to right with true directional motion blur, inside a dial that draws around them
- frame: 1080x1920 (9:16) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: counter, odometer, metric, motion blur, vertical, dial, premium
- install: npx motionstash add metric-odometer
- preview video: https://www.motionstash.io/previews/metric-odometer.mp4

Props (6):

- `value` · number · required — The figure the odometer lands on. Integers only — decimals belong in the unit.
- `label` · string · required — What the figure is. Set small and tracked, above the dial.
- `unit` · string · default frames — Unit under the figure, e.g. 'components' or 'ms'. Omit for a bare number.
- `delta` · string · default +12.4% — Change chip beside the unit, e.g. '+12.4%'. Omit when there is no comparison.
- `fraction` · number · default 0.78 — How far the dial ring draws around, 0 to 1. Use it to show the figure as a proportion of a target.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Stage Block Chart

- id: `stage-block-chart`
- url: https://www.motionstash.io/c/stage-block-chart
- summary: Extruded blocks grow in sequence with their figures above them, the last one deliberately running off the top of the frame
- frame: 1920x1080 (16:9) at 30fps
- duration: 240 frames (8s), budget enter 20 / hold 200 / exit 20
- tags: bar chart, 3d, extruded, stages, growth, callout, finance
- install: npx motionstash add stage-block-chart
- preview video: https://www.motionstash.io/previews/stage-block-chart.mp4

Props (3):

- `stages` · array · required — Two to five stages, drawn left to right and revealed in order.
- `push` · number · default 0.08 — How far the camera pushes in across the shot, as a fraction of scale. 0 locks it off, which the house rules discourage.
- `brand` · string · default ledger — Brand token id — one of the keys of BRANDS.

### Stat Side Panel

- id: `stat-side-panel`
- url: https://www.motionstash.io/c/stat-side-panel
- summary: A ring gauge, a heading and a list that builds one point at a time, sized as a hard-edged column beside a talking head
- frame: 1920x1080 (16:9) at 30fps
- duration: 240 frames (8s), budget enter 20 / hold 200 / exit 20
- tags: split screen, panel, ring, gauge, bullets, explainer, alpha
- install: npx motionstash add stat-side-panel
- preview video: https://www.motionstash.io/previews/stat-side-panel.mp4

Props (7):

- `percent` · number · required — Ring value. The number in the middle counts up to it as the arc sweeps.
- `title` · string · required — The heading under the ring. Two or three words, set large.
- `bullets` · array · required — Points that appear one at a time under the heading. Keep each to a line or two — this column is narrow on purpose.
- `side` · "right" | "left" · default right — Which edge the panel occupies. The presenter takes the other one.
- `widthFraction` · number · default 0.36 — Panel width as a fraction of the frame. Below about a third the bullets start wrapping badly.
- `fill` · boolean · default true — Paint the panel's ground. Turn it off to render with an alpha channel and drop the panel straight over your own footage in any editor.
- `brand` · string · default ledger — Brand token id — one of the keys of BRANDS.

### Telemetry Ascent

- id: `telemetry-ascent`
- url: https://www.motionstash.io/c/telemetry-ascent
- summary: A flight-telemetry gauge where the altitude scale scrolls past a fixed readout while the vehicle holds frame
- frame: 1080x1920 (9:16) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: telemetry, technical, vertical, gauge, axis, hud, counter
- install: npx motionstash add telemetry-ascent
- preview video: https://www.motionstash.io/previews/telemetry-ascent.mp4

Props (7):

- `from` · number · default 37500 — Altitude at the start of the shot, in the unit named by axisUnit.
- `to` · number · default 41000 — Altitude at the end. The axis scrolls to cover exactly this range, so the span sets the tick density.
- `step` · number · default 500 — Distance between axis ticks. Aim for six to nine ticks across the range.
- `axisLabel` · string · default ALT — Short axis name, printed in the accent colour beside the live tick.
- `axisUnit` · string · default FT — Unit printed under the axis label.
- `caption` · string · default Nominal. Second stage on profile. — Line under the readout. Keep it to a few words — this frame is a gauge, not a slide.
- `brand` · string · default circuit — Brand token id — one of the keys of BRANDS.

## Logo & brand (brand)

Reveals, lockups and stamps.

### Etched Light Reveal

- id: `etched-light-reveal`
- url: https://www.motionstash.io/c/etched-light-reveal
- summary: A wordmark cut into a brushed plate, invisible until a raking light travels across and catches the walls of the groove
- frame: 1920x1080 (16:9) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: logo, engraved, etched, brushed metal, light reveal, material, premium
- install: npx motionstash add etched-light-reveal
- preview video: https://www.motionstash.io/previews/etched-light-reveal.mp4

Props (5):

- `wordmark` · string · required — The engraved mark. One word reads best — the reveal depends on strokes wide enough to hold a highlight and a shadow.
- `tagline` · string · default Registry — Line under the mark, printed on the plate rather than engraved into it.
- `depth` · number · default 0.6 — How deep the engraving is cut. Higher offsets the highlight and shadow further, which reads as a deeper groove.
- `brushed` · boolean · default true — Draw the plate as brushed metal. Turn off for a matte machined surface.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Integration Orbit

- id: `integration-orbit`
- url: https://www.motionstash.io/c/integration-orbit
- summary: Partner marks arrive outward from a glowing hub onto two counter-rotating orbits, each counter-spun to stay upright
- frame: 1080x1080 (1:1) at 30fps
- duration: 240 frames (8s), budget enter 20 / hold 200 / exit 20
- tags: integrations, orbit, logos, loop, ecosystem
- install: npx motionstash add integration-orbit
- preview video: https://www.motionstash.io/previews/integration-orbit.mp4

Props (4):

- `label` · string · default Connects to everything — Small mono label above the orbit. Keep it to a few words.
- `inner` · number · default 5 — Marks on the inner ring.
- `outer` · number · default 7 — Marks on the outer ring.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Liquid Chrome Wordmark

- id: `liquid-chrome-wordmark`
- url: https://www.motionstash.io/c/liquid-chrome-wordmark
- summary: A wordmark uncovered by a soft-edged wipe in flowing chrome, finished with one hard light streak and a floor reflection
- frame: 1920x1080 (16:9) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: logo, wordmark, chrome, specular, reflection, reveal, premium
- install: npx motionstash add liquid-chrome-wordmark
- preview video: https://www.motionstash.io/previews/liquid-chrome-wordmark.mp4

Props (6):

- `wordmark` · string · required — The mark itself. One or two words — this is set enormous and tracked tight.
- `tagline` · string · default Code-based motion design, for anything that renders — Line beneath the mark. Arrives after the light streak, in flat ink rather than chrome.
- `flow` · number · default 0.45 — How fast the metal appears to move. 0 is a still polished surface; above 0.7 reads as liquid rather than solid.
- `streak` · boolean · default true — Fire a hard light streak across the mark at the moment it completes.
- `reflection` · boolean · default true — Draw the mark's reflection in the floor beneath it.
- `brand` · string · default circuit — Brand token id — one of the keys of BRANDS.

### Logo Marquee Row

- id: `logo-marquee-row`
- url: https://www.motionstash.io/c/logo-marquee-row
- summary: A trusted-by wall of drawn marks gliding leftward between two hairlines on a mathematically exact loop, soft-masked at both frame edges
- frame: 1920x1080 (16:9) at 30fps
- duration: 240 frames (8s), budget enter 20 / hold 200 / exit 20
- tags: marquee, logo wall, trusted by, seamless loop, ticker, social proof, infinite scroll
- install: npx motionstash add logo-marquee-row
- preview video: https://www.motionstash.io/previews/logo-marquee-row.mp4

Props (8):

- `label` · string · default Trusted by — The quiet mono label above the strip. Two to four words: 'Trusted by', 'Shipping with', 'In production at'.
- `logos` · array · required — The wall, in reading order. Six to ten is the sweet spot. Note the trade: the strip travels its own full length over the clip, so a longer list is a faster glide — trim the list, or drop `showNames`, to slow it down.
- `meta` · string · default Selected partners — Small mono line hung off the strip's bottom-right corner, e.g. 'Selected partners'. Omit for a barer frame.
- `showNames` · boolean · default true — Set the name beside each mark. False gives a marks-only wall — anonymous, tighter, and a slower loop because the pattern is shorter.
- `spacing` · number · default 1 — Multiplier on the gap between cells. Below 1 the wall reads as a dense ticker; above 1.4 as a sparse, luxury strip. It also scales the loop's length, and therefore its speed.
- `cycles` · number · default 1 — How many times the strip travels its own length across the clip. Whole numbers only — that integer is what makes the last frame land exactly back on the first frame's offset, so the clip can be looped without a jump. 1 is a calm glide, 2 a brisk ticker.
- `edgeFade` · number · default 0.12 — Width of the soft gradient mask at each end of the strip, as a fraction of the frame width. 0.12 is enough to swallow a cell; 0 gives a hard crop at the frame edge, which looks broken.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Logo Stroke Draw

- id: `logo-stroke-draw`
- url: https://www.motionstash.io/c/logo-stroke-draw
- summary: Nested rounded squares stroke themselves on in sequence, then hand over to a solid fill as the wordmark masks up
- frame: 1080x1080 (1:1) at 30fps
- duration: 90 frames (3s), budget enter 15 / hold 60 / exit 15
- tags: logo, reveal, sting, evolvepath, stroke
- install: npx motionstash add logo-stroke-draw
- preview video: https://www.motionstash.io/previews/logo-stroke-draw.mp4

Props (4):

- `wordmark` · string · default MOTIONSTASH — Wordmark set beneath the mark. Short and uppercase reads best.
- `tagline` · string · default Code-based motion design — Optional line under the wordmark. Omit for a barer lockup.
- `rings` · number · default 3 — Number of nested rounded squares in the mark. Three is the balanced default.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Particle Converge

- id: `particle-converge`
- url: https://www.motionstash.io/c/particle-converge
- summary: Points fly in from off frame and resolve into a mark, each trail sampled from its own velocity so it stretches in flight and collapses on arrival
- frame: 1080x1920 (9:16) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: logo, particles, converge, motion trails, vertical, bloom, premium
- install: npx motionstash add particle-converge
- preview video: https://www.motionstash.io/previews/particle-converge.mp4

Props (6):

- `wordmark` · string · required — The name that resolves under the mark, once the points have landed.
- `tagline` · string · default One timing grammar. Every format. — One quiet line under the wordmark. Arrives last.
- `mark` · "chevron" | "ring" | "frame" · default chevron — The shape the points converge into. 'chevron' is a rising mark, 'ring' a closed circle, 'frame' a rounded square outline.
- `halo` · boolean · default true — Add a second, sparser ring of points orbiting the mark. Reads as depth around the shape.
- `count` · number · default 240 — How many points. Below 120 the shape reads as dotted; above 320 the trails start to merge into a solid.
- `brand` · string · default signal — Brand token id — one of the keys of BRANDS.

## Backgrounds (background)

Atmosphere that sits behind everything else.

### Dot Grid Parallax

- id: `dot-grid-parallax`
- url: https://www.motionstash.io/c/dot-grid-parallax
- summary: Three dot fields drift at integer multiples of one grid cell, so the loop returns exactly home, with density falling off at the frame edges
- frame: 1920x1080 (16:9) at 30fps
- duration: 240 frames (8s), budget enter 20 / hold 200 / exit 20
- tags: background, parallax, grid, loop, atmosphere
- install: npx motionstash add dot-grid-parallax
- preview video: https://www.motionstash.io/previews/dot-grid-parallax.mp4

Props (4):

- `density` · number · default 22 — Dots across the frame on the base layer. Higher is busier and slower to render.
- `intensity` · number · default 0.6 — Overall opacity of the field. Keep it low if type will sit on top.
- `gridLines` · boolean · default true — Draw faint hairlines behind the dots.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Film Grain Overlay

- id: `film-grain-overlay`
- url: https://www.motionstash.io/c/film-grain-overlay
- summary: Deterministic per-frame grain, scanlines and a vignette, seeded on the frame index so it reproduces byte-for-byte
- frame: 1920x1080 (16:9) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: grain, overlay, texture, deterministic, film
- install: npx motionstash add film-grain-overlay
- preview video: https://www.motionstash.io/previews/film-grain-overlay.mp4

Props (6):

- `grain` · number · default 0.5 — Grain strength. Above ~0.7 it reads as texture rather than film.
- `cells` · number · default 48 — Grain cells across the frame. Higher is finer but costs render time.
- `scanlines` · boolean · default false — Add faint horizontal scanlines.
- `vignette` · number · default 0.55 — Corner darkening.
- `headline` · string · default Shot on code — Sample copy shown beneath the overlay, so the preview reads in context.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Gradient Mesh Drift

- id: `gradient-mesh-drift`
- url: https://www.motionstash.io/c/gradient-mesh-drift
- summary: Blurred brand-coloured gradient blobs drifting on closed sine paths, loop-exact at the last frame
- frame: 1920x1080 (16:9) at 30fps
- duration: 240 frames (8s), budget enter 20 / hold 200 / exit 20
- tags: background, gradient mesh, seamless loop, ambient, blur, underlay
- install: npx motionstash add gradient-mesh-drift
- preview video: https://www.motionstash.io/previews/gradient-mesh-drift.mp4

Props (10):

- `blobs` · number · default 5 — How many gradient circles make up the mesh. 3 is an open, airy field; 5 is the balanced default; 6 closes the bottom of the frame and reads denser. They are added in a fixed order, so every count is a composed frame rather than a random handful.
- `intensity` · number · default 0.62 — How strongly the colour reads, 0 to 1. Around 0.6 is the sweet spot: clearly branded, still quiet enough for a headline to sit on. Past 0.85 the field starts competing with type — use that only when nothing is layered over it.
- `drift` · "still" | "slow" | "steady" | "brisk" · default slow — Drift speed. Quantised on purpose: each step is an integer multiple of the blobs' harmonics, which is what keeps the loop exact at the last frame. 'still' freezes the mesh into a static gradient wallpaper; 'slow' is barely perceptible and right behind dialogue or type; 'brisk' is for a title card you only hold for a beat.
- `phase` · number · default 0.18 — Where in the drift cycle the field starts, in turns (0 to 1). Nudge it to pick a different arrangement of the same mesh, or to de-sync two scenes that both use this background so the cut doesn't repeat itself.
- `vignette` · number · default 0.4 — Corner falloff, 0 to 1. Kept subtle by design — it pulls the eye to the middle third and hides the blur seams at the frame edge. 0 for a perfectly even field; 1 is still gentle, roughly a 30% darkening in the corners.
- `scrim` · number · default 0.35 — Strength of a gradient rising from the bottom edge, 0 to 1. This is the insurance policy for type placed low in the frame: it flattens whatever the mesh happens to be doing down there. Set 0 when exporting the bare background, or when your content sits in the upper half.
- `grain` · boolean · default true — Overlay a fixed, very fine noise texture. Large soft gradients band badly once they're encoded to 8-bit video; this dithers the ramps away. Leave it on unless you are compositing the frame further downstream.
- `headline` · string · default Quiet enough to read on — Optional line of display type set over the mesh, lower-left — proof that the field stays readable, and a usable title card in its own right. Two to six words. Omit it to export the bare background as an underlay.
- `eyebrow` · string · default Ambient bed — Small uppercase mono label above the headline, in the accent colour. One or two words. Ignored when there is no headline.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Hot Path Scan

- id: `hot-path-scan`
- url: https://www.motionstash.io/c/hot-path-scan
- summary: A defocused listing scrolls behind a scan front while one symbol resolves out of blur and locks sharp
- frame: 1080x1920 (9:16) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: technical, code, scan, vertical, focus, atmosphere, developer
- install: npx motionstash add hot-path-scan
- preview video: https://www.motionstash.io/previews/hot-path-scan.mp4

Props (4):

- `symbol` · string · required — The string that resolves out of defocus. Reads best as an identifier — a symbol, address or key.
- `label` · string · default Trace locked — Small label above the symbol, printed in the accent colour.
- `rows` · number · default 34 — How many listing rows scroll behind. More rows read as a dense log; fewer as a sparse trace.
- `brand` · string · default circuit — Brand token id — one of the keys of BRANDS.

### Light Rays Sweep

- id: `light-rays-sweep`
- url: https://www.motionstash.io/c/light-rays-sweep
- summary: A fan of soft gradient wedges rotates slowly from an off-frame source, with a bloom at the origin and a vignette holding it back from the edges
- frame: 1920x1080 (16:9) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: background, light, rays, cinematic, atmosphere
- install: npx motionstash add light-rays-sweep
- preview video: https://www.motionstash.io/previews/light-rays-sweep.mp4

Props (5):

- `rays` · number · default 7 — Number of light wedges.
- `intensity` · number · default 0.45 — Brightness of the rays. Keep it under 0.5 if foreground content sits on top.
- `origin` · "top-left" | "top-right" | "top" · default top-left — Where the off-frame light source sits.
- `sweep` · number · default 22 — Degrees the fan rotates across the shot. Small values read as slow and cinematic.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Ribbon Wave

- id: `ribbon-wave`
- url: https://www.motionstash.io/c/ribbon-wave
- summary: A volumetric ribbon of phase-shifted strands travelling across frame, built outside-in with three depth groups and a moving hot spot
- frame: 1920x1080 (16:9) at 30fps
- duration: 240 frames (8s), budget enter 20 / hold 200 / exit 20
- tags: background, ribbon, wave, volumetric, hero, atmosphere, premium
- install: npx motionstash add ribbon-wave
- preview video: https://www.motionstash.io/previews/ribbon-wave.mp4

Props (6):

- `headline` · string · default Composition, in time — Optional line over the ribbon. Omit to use this purely as a background layer under another component.
- `eyebrow` · string · default Motionstash — Small tracked label above the headline. Ignored when there is no headline.
- `amplitude` · number · default 0.12 — Wave height as a fraction of frame height. Above 0.2 the ribbon starts leaving the frame.
- `density` · number · default 64 — Number of strands in the ribbon. More strands read as a solid surface; fewer read as lines. 64 is the point where it becomes a surface.
- `speed` · number · default 0.55 — Travel speed of the wave. 0 freezes it into a static sculpture.
- `brand` · string · default circuit — Brand token id — one of the keys of BRANDS.

## Transitions (transition)

The handoff between two scenes.

### Fade Through

- id: `fade-through`
- url: https://www.motionstash.io/c/fade-through
- summary: Two scenes hand off through a single frame of brand colour, giving the eye somewhere clean to reset instead of muddying both
- frame: 1920x1080 (16:9) at 30fps
- duration: 240 frames (8s), budget enter 20 / hold 200 / exit 20
- tags: transition, cut, flash, handoff, broadcast
- install: npx motionstash add fade-through
- preview video: https://www.motionstash.io/previews/fade-through.mp4

Props (5):

- `first` · string · default Before — Headline of the outgoing scene.
- `second` · string · default After — Headline of the incoming scene.
- `through` · "black" | "white" | "accent" · default accent — The colour the cut passes through at its midpoint.
- `hold` · number · default 48 — Frames each scene holds before and after the transition.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Mask Wipe Shape

- id: `mask-wipe-shape`
- url: https://www.motionstash.io/c/mask-wipe-shape
- summary: The next scene is revealed through a circle, star or rounded square growing past the frame, with an accent outline that fades as it clears
- frame: 1920x1080 (16:9) at 30fps
- duration: 240 frames (8s), budget enter 20 / hold 200 / exit 20
- tags: transition, mask, clip-path, reveal, shapes
- install: npx motionstash add mask-wipe-shape
- preview video: https://www.motionstash.io/previews/mask-wipe-shape.mp4

Props (5):

- `first` · string · default The old way — Headline of the outgoing scene.
- `second` · string · default The new one — Headline of the incoming scene.
- `shape` · "circle" | "star" | "square" · default circle — The shape the next scene is revealed through.
- `outline` · boolean · default true — Draw an accent outline on the growing shape.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Zoom Punch Cut

- id: `zoom-punch-cut`
- url: https://www.motionstash.io/c/zoom-punch-cut
- summary: A fast accelerating push-in carries a hard frame-exact cut, with the incoming scene decelerating out of an over-scaled state
- frame: 1920x1080 (16:9) at 30fps
- duration: 240 frames (8s), budget enter 20 / hold 200 / exit 20
- tags: transition, cut, beat, punch, blur
- install: npx motionstash add zoom-punch-cut
- preview video: https://www.motionstash.io/previews/zoom-punch-cut.mp4

Props (5):

- `first` · string · default Slow — Headline of the outgoing scene.
- `second` · string · default Fast — Headline of the incoming scene.
- `cutAt` · number · default 72 — Exact frame the cut lands on. Put it on the beat.
- `punch` · number · default 1.55 — How far the outgoing scene pushes in before the cut.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

## Primitives (primitive)

Draw-on paths, connectors, reveals — the building blocks.

### Animate In Presets

- id: `animate-in-presets`
- url: https://www.motionstash.io/c/animate-in-presets
- summary: Six entrance presets on six otherwise identical tiles, replayed so they can be compared directly rather than remembered
- frame: 1920x1080 (16:9) at 30fps
- duration: 240 frames (8s), budget enter 20 / hold 200 / exit 20
- tags: primitive, entrance, presets, documentation, comparison
- install: npx motionstash add animate-in-presets
- preview video: https://www.motionstash.io/previews/animate-in-presets.mp4

Props (3):

- `cycle` · number · default 110 — Frames per demonstration pass. The grid replays so presets can be compared twice.
- `perTile` · number · default 4 — Stagger between tiles, in frames. Zero fires them simultaneously.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Idle Loops

- id: `idle-loops`
- url: https://www.motionstash.io/c/idle-loops
- summary: Float, pulse, breathe and wobble at deliberately tiny amplitudes, each closing its loop exactly because the cycle count is an integer
- frame: 1920x1080 (16:9) at 30fps
- duration: 240 frames (8s), budget enter 20 / hold 200 / exit 20
- tags: primitive, idle, loop, subtle, documentation
- install: npx motionstash add idle-loops
- preview video: https://www.motionstash.io/previews/idle-loops.mp4

Props (3):

- `amplitude` · number · default 1 — Multiplier on every amplitude. Above ~1.4 these stop being subtle and start distracting.
- `cycles` · number · default 2 — Whole cycles across the shot. Integers only, or the loop will not close.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Path Follow

- id: `path-follow`
- url: https://www.motionstash.io/c/path-follow
- summary: A marker travels an SVG route, banking into curves because its rotation comes from the path tangent rather than a separate animation
- frame: 1920x1080 (16:9) at 30fps
- duration: 240 frames (8s), budget enter 20 / hold 200 / exit 20
- tags: primitive, path, tangent, route, evolvepath
- install: npx motionstash add path-follow
- preview video: https://www.motionstash.io/previews/path-follow.mp4

Props (4):

- `label` · string · default Route — Small mono label above the path. Keep it to one or two words.
- `waypoints` · number · default 4 — Dots placed along the route that light up as the marker passes them.
- `trail` · number · default 14 — Fading dots left behind the marker. Zero disables the trail.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Stagger Distributions

- id: `stagger-distributions`
- url: https://www.motionstash.io/c/stagger-distributions
- summary: Three delay distributions across one shared span, so linear, from-centre and eased staggers can be compared directly
- frame: 1920x1080 (16:9) at 30fps
- duration: 240 frames (8s), budget enter 20 / hold 200 / exit 20
- tags: primitive, stagger, timing, documentation, comparison
- install: npx motionstash add stagger-distributions
- preview video: https://www.motionstash.io/previews/stagger-distributions.mp4

Props (4):

- `count` · number · default 12 — Blocks per row.
- `span` · number · default 30 — Frames the whole stagger occupies. All three rows share it, so they stay comparable.
- `playhead` · boolean · default true — Draw a marker travelling across, so the timing relationship is visible.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

## Diagrams (diagram)

Explainer devices: flows, layers, packets, checklists.

### Architecture Flow

- id: `architecture-flow`
- url: https://www.motionstash.io/c/architecture-flow
- summary: A system diagram assembles column by column, with orthogonal connectors that only draw once both of their endpoints exist
- frame: 1920x1080 (16:9) at 30fps
- duration: 240 frames (8s), budget enter 20 / hold 200 / exit 20
- tags: diagram, architecture, graph, explainer, evolvepath
- install: npx motionstash add architecture-flow
- preview video: https://www.motionstash.io/previews/architecture-flow.mp4

Props (4):

- `title` · string · default Request path — Mono label above the diagram.
- `nodes` · array · required — The graph's nodes, positioned on a column grid.
- `edges` · array · required — Connectors. Each draws only once both endpoints exist.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Checklist Tick

- id: `checklist-tick`
- url: https://www.motionstash.io/c/checklist-tick
- summary: The whole list arrives first to set the scope, then each item ticks in turn with the one overshoot this library allows
- frame: 1920x1080 (16:9) at 30fps
- duration: 240 frames (8s), budget enter 20 / hold 200 / exit 20
- tags: diagram, checklist, tick, progress, explainer
- install: npx motionstash add checklist-tick
- preview video: https://www.motionstash.io/previews/checklist-tick.mp4

Props (5):

- `title` · string · default Ships with — Mono label above the list.
- `items` · array · required — The list. Four to six items reads best at 16:9.
- `strike` · boolean · default false — Strike through each item as it ticks. Use for a 'no longer needed' list.
- `perItem` · number · default 13 — Frames between ticks. Below ~10 the sequence stops reading as individual beats.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Doodle Card Stack

- id: `doodle-card-stack`
- url: https://www.motionstash.io/c/doodle-card-stack
- summary: Hand-drawn marker cards drop into a stack bottom row first, each outline wobbled off true by its own seed
- frame: 1080x1920 (9:16) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: illustrated, hand drawn, light, vertical, stack, playful, marker
- install: npx motionstash add doodle-card-stack
- preview video: https://www.motionstash.io/previews/doodle-card-stack.mp4

Props (5):

- `title` · string · default Everything, stacked — Hand-lettered line above the stack. Omit to let the stack carry the frame alone.
- `rows` · array · required — Cards per row, bottom row FIRST. [4,3,2,1] builds a pyramid; [3,3,3] builds a wall. Keep rows under five or the cards get too small to read.
- `wobble` · number · default 0.55 — How hand-drawn the outlines are. 0 is a clean vector rectangle; 1 is a loose marker sketch.
- `crown` · boolean · default true — Pop a marker star above the top card once the stack completes.
- `brand` · string · default paper — Brand token id — one of the keys of BRANDS. Written for the light brands.

### Layer Stack Explode

- id: `layer-stack-explode`
- url: https://www.motionstash.io/c/layer-stack-explode
- summary: An isometric stack separates plate by plate and holds as a labelled architecture diagram, with leader lines waiting for their layer to settle
- frame: 1920x1080 (16:9) at 30fps
- duration: 240 frames (8s), budget enter 20 / hold 200 / exit 20
- tags: diagram, layers, isometric, architecture, explainer
- install: npx motionstash add layer-stack-explode
- preview video: https://www.motionstash.io/previews/layer-stack-explode.mp4

Props (4):

- `layers` · array · required — Top to bottom. Four or five reads best — more and the labels crowd.
- `highlight` · number · default 2 — Zero-based index rendered in the accent colour. Use -1 for none.
- `spread` · number · default 1 — How far the layers separate. Lower keeps the stack compact.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Packet Dot Flow

- id: `packet-dot-flow`
- url: https://www.motionstash.io/c/packet-dot-flow
- summary: Requests stream along the top in accent and return underneath in muted, with per-hop latency labels and a loop that closes exactly
- frame: 1920x1080 (16:9) at 30fps
- duration: 240 frames (8s), budget enter 20 / hold 200 / exit 20
- tags: diagram, flow, latency, loop, explainer
- install: npx motionstash add packet-dot-flow
- preview video: https://www.motionstash.io/previews/packet-dot-flow.mp4

Props (5):

- `nodes` · array · required — Service names, left to right. The request travels along the top and returns underneath.
- `latencies` · array · required — One label per hop, e.g. '2ms'. Rendered on the outbound leg.
- `packets` · number · default 5 — Dots in flight at once. More reads as throughput, fewer as a single trace.
- `laps` · number · default 2 — Whole round trips across the shot. Integers only, or the loop will not close.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Sticker Hub Diagram

- id: `sticker-hub-diagram`
- url: https://www.motionstash.io/c/sticker-hub-diagram
- summary: A hub-and-spoke diagram on graph paper where each edge wires out from the centre and lands its node as it arrives
- frame: 1920x1080 (16:9) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: diagram, light, paper, hub and spoke, sticker, grid, explainer
- install: npx motionstash add sticker-hub-diagram
- preview video: https://www.motionstash.io/previews/sticker-hub-diagram.mp4

Props (5):

- `hub` · string · required — The centre node. A product or system name — one or two words.
- `nodes` · array · required — Satellite labels, placed clockwise from the top. Three to eight; past eight the ring stops reading and the connectors cross.
- `topLabel` · string · default Unified superapp — Solid label bar above the diagram, set in inverted type.
- `bottomLabel` · string · default Agent-first ecosystem — Label bar below the diagram, in the accent colour. Use it for the conclusion the diagram is arguing for.
- `brand` · string · default field — Brand token id — one of the keys of BRANDS. Built for the light brands (field, press, paper).

## Social formats (social)

Vertical and square cuts with platform safe areas.

### Gradient Card Collage

- id: `gradient-card-collage`
- url: https://www.motionstash.io/c/gradient-card-collage
- summary: App cards float at true depth over a drifting saturated ground, parallaxing against a camera that never stops moving
- frame: 1920x1080 (16:9) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: social proof, light, collage, parallax, perspective, gradient, cards
- install: npx motionstash add gradient-card-collage
- preview video: https://www.motionstash.io/previews/gradient-card-collage.mp4

Props (7):

- `message` · string · required — The hero message in the front window. This is the thing the frame is bragging about.
- `reply` · string · required — The reply under it, in the received bubble.
- `statA` · string · default 1.4K — First engagement figure on the post card.
- `statB` · string · default 207K — Second engagement figure on the post card.
- `reactions` · string · default You and 1,902 others — Reaction line under the stacked avatars.
- `windowTitle` · string · default Mom — Title in the front window's chrome.
- `brand` · string · default paper — Brand token id — one of the keys of BRANDS. The ground is built from accent and accentAlt, so vivid brands read best.

### iMessage Share

- id: `imessage-share`
- url: https://www.motionstash.io/c/imessage-share
- summary: A light message thread that grows from the bottom, with a video attachment card and a tapback on the last bubble
- frame: 1080x1920 (9:16) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: messages, light, vertical, social proof, thread, attachment, ios
- install: npx motionstash add imessage-share
- preview video: https://www.motionstash.io/previews/imessage-share.mp4

Props (4):

- `timestamp` · string · default Today 9:41 AM — Thread timestamp, centred above the first message.
- `messages` · array · required — The thread, in order. 'in' is the grey received bubble, 'out' is the accent-coloured sent one. A 'video' entry renders an attachment card instead of a bubble, using its text as the duration label.
- `reaction` · string · default ! — Tapback that lands on the last message, e.g. an exclamation or a heart character.
- `brand` · string · default paper — Brand token id — one of the keys of BRANDS. Built for the light brands.

### Karaoke Captions

- id: `karaoke-captions`
- url: https://www.motionstash.io/c/karaoke-captions
- summary: Word-timed captions where the spoken word pops onto an accent block and its neighbours dim, in a fixed-height row that never reflows
- frame: 1080x1920 (9:16) at 30fps
- duration: 240 frames (8s), budget enter 20 / hold 200 / exit 20
- tags: social, captions, karaoke, vertical, subtitles
- install: npx motionstash add karaoke-captions
- preview video: https://www.motionstash.io/previews/karaoke-captions.mp4

Props (4):

- `words` · array · required — The spoken words, in order. One caption word each.
- `perWord` · number · default 9 — Frames per word. Around 9 at 30fps matches natural speech pace.
- `window` · number · default 3 — Words visible at once. Three is the readable maximum on a phone.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Reel Hook Frame

- id: `reel-hook-frame`
- url: https://www.motionstash.io/c/reel-hook-frame
- summary: A vertical opener whose hook lands inside twenty frames, laid out clear of the platform's top and bottom chrome
- frame: 1080x1920 (9:16) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: social, vertical, hook, safe-area, reels
- install: npx motionstash add reel-hook-frame
- preview video: https://www.motionstash.io/previews/reel-hook-frame.mp4

Props (4):

- `hook` · string · default You are rendering video the slow way — The hook. It has to land in under a second, so keep it short and concrete.
- `support` · string · default Here is what changed — Supporting line beneath the hook.
- `nudge` · string · default Swipe up — Bottom affordance text.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

### Post Card

- id: `x-post-card`
- url: https://www.motionstash.io/c/x-post-card
- summary: A generic social post card with a drawn check and icons, scaling in on the surface while its metrics count up
- frame: 1080x1080 (1:1) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: social, card, post, metrics, square
- install: npx motionstash add x-post-card
- preview video: https://www.motionstash.io/previews/x-post-card.mp4

Props (7):

- `name` · string · default Motionstash — Display name on the card.
- `handle` · string · default @motionregistry — Handle, including the @.
- `body` · string · default Every component is one file you own. No config, no runtim… — Post body. Two or three lines reads best.
- `mention` · string · default one file you own — A word or handle inside the body to render in the accent colour.
- `verified` · boolean · default true — Show a drawn verification check beside the name.
- `metrics` · array · required — Replies, reposts and likes. Each counts up.
- `brand` · string · default slate — Brand token id — one of the keys of BRANDS.

## YouTube (youtube)

The furniture of a YouTube video: subscribe nudges, comment cards, end screens.

### YouTube Comment Highlight

- id: `youtube-comment-highlight`
- url: https://www.motionstash.io/c/youtube-comment-highlight
- summary: A viewer's comment featured as the platform renders it, with the like row and the creator's heart landing after the words
- frame: 1920x1080 (16:9) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: youtube, comment, social proof, testimonial, card, ui
- install: npx motionstash add youtube-comment-highlight
- preview video: https://www.motionstash.io/previews/youtube-comment-highlight.mp4

Props (9):

- `handle` · string · required — The commenter's @handle. Include the @ — without it the card reads as a generic quote rather than as a comment.
- `timeAgo` · string · default 2 days ago — Relative timestamp beside the handle, exactly as the platform words it.
- `comment` · string · required — The comment itself. Two or three lines is the sweet spot: long enough to feel real, short enough to read before the shot cuts.
- `likes` · string · default 1.2K — Like count as written text, so 1.2K and 24 both set correctly without number formatting.
- `replies` · string · default 18 replies — Reply count line under the comment — '18 replies'. Empty omits the line.
- `initials` · string · default MB — One or two characters for the drawn avatar. Empty uses the handle's first letter after the @.
- `avatarColor` · string · default  — Avatar fill. Empty uses the brand accent, which keeps the card inside the video's palette.
- `hearted` · boolean · default true — Draw the creator's heart on the like row, landing as the last beat. The reason to feature a comment is usually that you replied to it.
- `brand` · string · default paper — Brand preset. Light presets read as the platform's light mode, dark ones as its dark mode.

### YouTube End Card

- id: `youtube-end-card`
- url: https://www.motionstash.io/c/youtube-end-card
- summary: An end screen with two recommended slots and a channel ring, laid out clear of the player's own controls
- frame: 1920x1080 (16:9) at 30fps
- duration: 240 frames (8s), budget enter 20 / hold 200 / exit 20
- tags: youtube, end card, end screen, call to action, safe area, subscribe
- install: npx motionstash add youtube-end-card
- preview video: https://www.motionstash.io/previews/youtube-end-card.mp4

Props (10):

- `headline` · string · required — The line across the top. Short and imperative reads best — it competes with two thumbnails for attention.
- `channel` · string · required — Channel name, set under the ring.
- `handle` · string · default @northlaneworks — The @handle under the channel name. Empty omits it.
- `initials` · string · default NW — One or two characters for the drawn channel ring. Empty uses the channel's first letter.
- `avatarColor` · string · default #FF0033 — Fill inside the channel ring.
- `subscribeLabel` · string · default Subscribe — Button under the channel ring. Empty draws no button.
- `slotLabels` · array · default 2 items — Caption under each video slot. Two slots is what the platform actually offers at this size; one is a legitimate choice and gets a wider slot.
- `slotTitles` · array · default 2 items — Optional title drawn inside each slot, so the end screen reads as designed rather than as empty boxes.
- `safeBottom` · number · default 0.14 — Fraction of the frame height kept clear at the bottom for the platform's scrubber and controls. Lower it only if you know the player chrome is hidden.
- `brand` · string · default slate — Brand preset. This is the last frame of the video, so it is usually the one that should look most like the channel.

### YouTube Subscribe Nudge

- id: `youtube-subscribe-nudge`
- url: https://www.motionstash.io/c/youtube-subscribe-nudge
- summary: A channel card that presses its own subscribe button and then rings its own bell, with a cursor that travels to each in turn
- frame: 1920x1080 (16:9) at 30fps
- duration: 150 frames (5s), budget enter 18 / hold 114 / exit 18
- tags: youtube, subscribe, call to action, cursor, state change, bell
- install: npx motionstash add youtube-subscribe-nudge
- preview video: https://www.motionstash.io/previews/youtube-subscribe-nudge.mp4

Props (9):

- `channel` · string · required — Channel name, set large. Two or three words reads best at this size.
- `handle` · string · required — The @handle under the name. Include the @ — it is what makes the card read as the platform rather than as a generic card.
- `initials` · string · default NW — One or two characters drawn in the avatar ring. Empty falls back to the channel's first letter. This registry ships no image files, so the avatar is drawn rather than loaded.
- `avatarColor` · string · default #FF0033 — Fill behind the initials. The channel's own colour is the point of it.
- `subscribeLabel` · string · default Subscribe — Button text before the press.
- `subscribedLabel` · string · default Subscribed — Button text after it, shown with a tick.
- `buttonColor` · string · default #FF0033 — The unpressed button fill. Turns to a muted surface once subscribed, the way the real control does.
- `showCursor` · boolean · default true — Draw the pointer that travels to the button and then to the bell. Turn it off for a calmer card that still changes state.
- `brand` · string · default circuit — Brand preset. Dark presets read as the platform's dark mode; light ones as its light mode.