# Motionstash

> 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 (https://opensource.org/licenses/MIT). Free for commercial use.
Access: no account, no login, no API key, no rate limit. Every URL below is public.
Canonical site: https://www.motionstash.io

## What makes it different

Components compose in TIME, not in space. Everything renders at a canonical 30fps and declares its duration as three numbers - enter, hold and exit frames - drawn from four budgets (beat, statement, scene, feature). Every component multiplies its own presence by the same shared stage function, so two clips placed back to back cross-dissolve rather than hard-cutting. Four easing curves exist (enter, exit, travel, accent) and four spring presets (settle, snap, glide, pop); no component defines its own.

Every component is ONE self-contained TypeScript file using inline styles only, with no CSS, no external assets and no non-determinism, so a copied file renders identically on a cold machine.

## Using it from an agent

- MCP server: 5 stdio tools - list_motion_items, get_motion_item, render_motion_item, render_shot_list, get_timing_grammar. Setup: https://www.motionstash.io/agents
- CLI: `npx motionstash add <component-id>` copies one component plus its four spine files.
- Machine-readable catalog: https://www.motionstash.io/registry.json
- Expanded text catalog: https://www.motionstash.io/llms-full.txt

## Categories (11)

- [Kinetic type](https://www.motionstash.io/category/typography): Headlines, counters and text that carries the scene. 10 components.
- [Titles & lower thirds](https://www.motionstash.io/category/titles): Naming things: cards, badges, captions, chapter marks. 7 components.
- [Product & UI](https://www.motionstash.io/category/product): Devices, browser frames, cursors, notifications. 12 components.
- [Data](https://www.motionstash.io/category/data): Charts and figures that animate to make a point. 14 components.
- [Logo & brand](https://www.motionstash.io/category/brand): Reveals, lockups and stamps. 6 components.
- [Backgrounds](https://www.motionstash.io/category/background): Atmosphere that sits behind everything else. 6 components.
- [Transitions](https://www.motionstash.io/category/transition): The handoff between two scenes. 3 components.
- [Primitives](https://www.motionstash.io/category/primitive): Draw-on paths, connectors, reveals — the building blocks. 4 components.
- [Diagrams](https://www.motionstash.io/category/diagram): Explainer devices: flows, layers, packets, checklists. 6 components.
- [Social formats](https://www.motionstash.io/category/social): Vertical and square cuts with platform safe areas. 5 components.
- [YouTube](https://www.motionstash.io/category/youtube): The furniture of a YouTube video: subscribe nudges, comment cards, end screens. 3 components.

## Components (76)

### Kinetic type

- [Aurora Statement](https://www.motionstash.io/c/aurora-statement) `aurora-statement` - A headline resolves out of defocus over a drifting volumetric light field, with one specular pass across the glyphs [16:9, 5s, 150f, 7 props, tags: hero/headline/light field/focus pull/specular/premium/grain]
- [Focus Pull Lines](https://www.motionstash.io/c/focus-pull-lines) `focus-pull-lines` - Focus racks down a stack of lines with real lens behaviour — blur, focus breathing, contrast loss and bloom [9:16, 5s, 150f, 5 props, tags: typography/focus pull/rack focus/vertical/depth of field/premium]
- [Impact Title Rules](https://www.motionstash.io/c/impact-title-rules) `impact-title-rules` - Heavy uppercase lines whip in from the left with true directional smear, each stepping in and drawing its own accent rule [9:16, 5s, 150f, 5 props, tags: title/impact/vertical/motion blur/rules/stagger/caption]
- [Kinetic Headline](https://www.motionstash.io/c/kinetic-headline) `kinetic-headline` - Words rise through a hard clipping mask, staggered, with an accent rule drawing in beneath [16:9, 3s, 90f, 5 props, tags: headline/kinetic type/mask reveal/stagger/hero]
- [Number Ticker](https://www.motionstash.io/c/number-ticker) `number-ticker` - A metric spins up on per-digit odometer wheels, each lagging the one to its left, and an accent rule draws once it lands [16:9, 3s, 90f, 12 props, tags: counter/odometer/metric/kpi/tabular figures/roll]
- [Scramble Decode](https://www.motionstash.io/c/scramble-decode) `scramble-decode` - A phrase resolves out of cycling glyphs left to right, each character locking to full contrast on a staggered beat [16:9, 3s, 90f, 9 props, tags: scramble/decode/monospace/kinetic type/glitch/terminal]
- [Split Flap Board](https://www.motionstash.io/c/split-flap-board) `split-flap-board` - An airport flap display: seamed tiles churn through their drum, cell by cell, and land on the string [16:9, 3s, 90f, 7 props, tags: split flap/flip board/airport/mono/stagger/mechanical]
- [Stacked Headline Beats](https://www.motionstash.io/c/stacked-headline-beats) `stacked-headline-beats` - One word per beat, hard cut on the count, with a slow punch-in that lands on an accent payoff word [16:9, 8s, 240f, 7 props, tags: hard cut/one word/beats/punch in/kinetic type/rhythm]
- [Text Highlight Sweep](https://www.motionstash.io/c/text-highlight-sweep) `text-highlight-sweep` - A sentence fades up, then a marker sweeps in behind one phrase and flips its ink [16:9, 3s, 90f, 7 props, tags: highlight/marker/emphasis/sentence/sweep/annotation]
- [Typewriter Caret](https://www.motionstash.io/c/typewriter-caret) `typewriter-caret` - Lines typed out character by character on seeded irregular timing, led by a block caret that blinks on a fixed frame cycle [16:9, 5s, 150f, 8 props, tags: typewriter/caret/cursor/terminal/kinetic type/deterministic]

### Titles & lower thirds

- [Badge Row](https://www.motionstash.io/c/badge-row) `badge-row` - Credibility chips set into a full-bleed hairline, springing up from 0.92 in a tight stagger with one filled accent pill landing last [16:9, 2s, 60f, 6 props, tags: badges/chips/pills/credibility/lower third/stagger/spring]
- [Caption Highlight Pill](https://www.motionstash.io/c/caption-highlight-pill) `caption-highlight-pill` - A spoken line with the figure that matters lifted onto a solid accent pill below it, landing a beat later [16:9, 3s, 90f, 6 props, tags: caption/subtitle/highlight/pill/explainer/alpha/lower third]
- [Chapter Card](https://www.motionstash.io/c/chapter-card) `chapter-card` - A section divider where the rule runs off the frame edge, the index counts into place and the title masks up [16:9, 3s, 90f, 7 props, tags: chapter/section divider/title card/odometer/editorial/rule]
- [End Card CTA](https://www.motionstash.io/c/end-card-cta) `end-card-cta` - A closing frame: drawn geometric monogram, tagline, URL pill and a QR-shaped block, composed as a page [16:9, 5s, 150f, 10 props, tags: end card/cta/outro/logo lockup/qr/closing frame]
- [Gridpaper Editorial](https://www.motionstash.io/c/gridpaper-editorial) `gridpaper-editorial` - A cream graph-paper spread: a taped card drops onto the sheet, a highlighter swipes under the masthead and mono specs type on [16:9, 5s, 150f, 6 props, tags: editorial/light/paper/grid/polaroid/print/masthead]
- [Lower Third Bar](https://www.motionstash.io/c/lower-third-bar) `lower-third-bar` - An accent stripe leads a surface panel out of the left safe area, then the name and role type in behind it [16:9, 2s, 60f, 7 props, tags: lower third/broadcast/name plate/wipe/safe area]
- [Spotlight Callout](https://www.motionstash.io/c/spotlight-callout) `spotlight-callout` - A scrim closes over a synthesised product panel and a soft-edged hole opens on one control, labelled by a leader line [16:9, 5s, 150f, 13 props, tags: spotlight/callout/product tour/scrim/svg mask/leader line/annotation/onboarding]

### Product & UI

- [Agent Chat Stream](https://www.motionstash.io/c/agent-chat-stream) `agent-chat-stream` - An assistant answers word by word while tool-call chips spin, resolve to a check and settle under a blinking caret [16:9, 8s, 240f, 10 props, tags: ai/chat/streaming text/tool call/product ui/caret]
- [Agent Composer](https://www.motionstash.io/c/agent-composer) `agent-composer` - A prompt types into a composer, the submit button takes a real press, and the agent's work reports itself step by step [16:9, 8s, 240f, 4 props, tags: agent/prompt/ui/typing/spinner/product/dark]
- [Browser Chrome](https://www.motionstash.io/c/browser-chrome) `browser-chrome` - A browser window assembles piece by piece, types a URL into the address bar, then resolves a shimmering skeleton into a finished page [16:9, 5s, 150f, 11 props, tags: browser/window/chrome/url/typing/skeleton/product shot/ui mock]
- [Dashboard Shell](https://www.motionstash.io/c/dashboard-shell) `dashboard-shell` - A product dashboard assembles itself — rail, top bar, then four cards fade up with their sparklines drawing on [16:9, 5s, 150f, 14 props, tags: dashboard/ui mockup/saas/sparkline/stagger/screenshot]
- [Depth Field Cards](https://www.motionstash.io/c/depth-field-cards) `depth-field-cards` - A field of cards on four depth planes with real depth of field and aerial perspective, revealed by one long lateral camera move [16:9, 8s, 240f, 8 props, tags: depth of field/parallax/camera move/product/cards/premium]
- [Device Rise](https://www.motionstash.io/c/device-rise) `device-rise` - A phone rises into an overhead light pool, un-tilting as it lands, then the screen ignites and a rim light crosses the case [9:16, 5s, 150f, 7 props, tags: device/product/vertical/reflection/contact shadow/rim light/premium]
- [Glass Stack Reveal](https://www.motionstash.io/c/glass-stack-reveal) `glass-stack-reveal` - Frosted glass panes rise into a stack over a drifting light field, each with its own mass so the deck settles front-last [9:16, 5s, 150f, 4 props, tags: glass/frosted/vertical/stack/follow-through/light field/premium]
- [Message Thread](https://www.motionstash.io/c/message-thread) `message-thread` - A conversation assembling itself, typing bubbles swapping for messages as the thread scrolls up [9:16, 8s, 240f, 10 props, tags: messaging/chat/bubbles/typing indicator/ui/vertical]
- [Minimal Video Frame](https://www.motionstash.io/c/minimal-video-frame) `minimal-video-frame` - A near-white player that strokes itself on, scrubs, and takes a cursor to its like control [16:9, 5s, 150f, 4 props, tags: player/light/minimal/ui/cursor/scrub/reactions]
- [Phone Notification Stack](https://www.motionstash.io/c/phone-notification-stack) `phone-notification-stack` - A drawn phone glides up into a settled tilt while notification cards drop in and the stack behind them recedes [9:16, 5s, 150f, 8 props, tags: phone/device mockup/notification/lock screen/stack/9:16/ui]
- [Terminal Window](https://www.motionstash.io/c/terminal-window) `terminal-window` - A terminal runs a command: it types in, then the log streams line by line with a cycling spinner and an accent success line [16:9, 8s, 240f, 9 props, tags: terminal/cli/shell/typing/spinner/product/developer tooling]
- [Zoom To Region](https://www.motionstash.io/c/zoom-to-region) `zoom-to-region` - A synthesised dashboard, then a keyframed camera push into one named region and back out, with an annotation ring on the detail [16:9, 5s, 150f, 18 props, tags: camera/pan and zoom/product shot/dashboard/ui mock/callout/annotation]

### Data

- [Bar Chart Reveal](https://www.motionstash.io/c/bar-chart-reveal) `bar-chart-reveal` - Gridlines draw on as hairlines, bars climb from the baseline in reading order, and each value counts up as its bar lands [16:9, 5s, 150f, 13 props, tags: bar chart/chart reveal/gridlines/counter/stagger/tabular figures]
- [Column Pair Chart](https://www.motionstash.io/c/column-pair-chart) `column-pair-chart` - Two small column groups grow from one dashed baseline that runs unbroken across both, so the comparison is on a single scale [16:9, 5s, 150f, 3 props, tags: bar chart/comparison/columns/baseline/finance/explainer]
- [Company Scorecard](https://www.motionstash.io/c/company-scorecard) `company-scorecard` - Two subjects, a row each, built badge by badge across a cross divider so the healthy row lands before the other one undercuts it [16:9, 8s, 240f, 2 props, tags: comparison/scorecard/badges/ring/icons/finance/explainer]
- [Comparison Bars](https://www.motionstash.io/c/comparison-bars) `comparison-bars` - Paired horizontal bars per metric grow from one shared origin with a stagger down the table, figures counting at the bar ends [16:9, 5s, 150f, 15 props, tags: comparison/horizontal bars/two series/counter/stagger/legend/table]
- [Comparison Race Chart](https://www.motionstash.io/c/comparison-race-chart) `comparison-race-chart` - 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 [16:9, 12s, 360f, 14 props, tags: comparison/line chart/race/dual series/counter/legend/svg]
- [Donut Progress Ring](https://www.motionstash.io/c/donut-progress-ring) `donut-progress-ring` - 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 [1:1, 3s, 90f, 13 props, tags: donut/progress ring/gauge/kpi/dasharray/counter]
- [Funnel Steps](https://www.motionstash.io/c/funnel-steps) `funnel-steps` - 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 [16:9, 5s, 150f, 11 props, tags: funnel/conversion/drop-off/counter/stagger/trapezoid]
- [KPI Tile Grid](https://www.motionstash.io/c/kpi-tile-grid) `kpi-tile-grid` - Stat tiles fade up in a three-frame stagger, counting up in four number formats with delta chips and drawn sparklines [16:9, 5s, 150f, 9 props, tags: kpi/dashboard/counter/sparkline/stagger/metrics]
- [Line Chart Draw](https://www.motionstash.io/c/line-chart-draw) `line-chart-draw` - A smoothed trend line draws on behind a travelling dot, filling a soft area as it goes, then annotates its own peak [16:9, 5s, 150f, 13 props, tags: line chart/draw-on/area fill/counter/annotation/svg path]
- [Metric Chip Stack](https://www.motionstash.io/c/metric-chip-stack) `metric-chip-stack` - Stat blocks wipe open one after another, each with its caption on a small pill straddling the bottom edge [16:9, 5s, 150f, 4 props, tags: stat/chip/kpi/wipe/stack/finance/explainer]
- [Metric Odometer](https://www.motionstash.io/c/metric-odometer) `metric-odometer` - Mechanical digit wheels spin and settle left to right with true directional motion blur, inside a dial that draws around them [9:16, 5s, 150f, 6 props, tags: counter/odometer/metric/motion blur/vertical/dial/premium]
- [Stage Block Chart](https://www.motionstash.io/c/stage-block-chart) `stage-block-chart` - Extruded blocks grow in sequence with their figures above them, the last one deliberately running off the top of the frame [16:9, 8s, 240f, 3 props, tags: bar chart/3d/extruded/stages/growth/callout/finance]
- [Stat Side Panel](https://www.motionstash.io/c/stat-side-panel) `stat-side-panel` - 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 [16:9, 8s, 240f, 7 props, tags: split screen/panel/ring/gauge/bullets/explainer/alpha]
- [Telemetry Ascent](https://www.motionstash.io/c/telemetry-ascent) `telemetry-ascent` - A flight-telemetry gauge where the altitude scale scrolls past a fixed readout while the vehicle holds frame [9:16, 5s, 150f, 7 props, tags: telemetry/technical/vertical/gauge/axis/hud/counter]

### Logo & brand

- [Etched Light Reveal](https://www.motionstash.io/c/etched-light-reveal) `etched-light-reveal` - A wordmark cut into a brushed plate, invisible until a raking light travels across and catches the walls of the groove [16:9, 5s, 150f, 5 props, tags: logo/engraved/etched/brushed metal/light reveal/material/premium]
- [Integration Orbit](https://www.motionstash.io/c/integration-orbit) `integration-orbit` - Partner marks arrive outward from a glowing hub onto two counter-rotating orbits, each counter-spun to stay upright [1:1, 8s, 240f, 4 props, tags: integrations/orbit/logos/loop/ecosystem]
- [Liquid Chrome Wordmark](https://www.motionstash.io/c/liquid-chrome-wordmark) `liquid-chrome-wordmark` - A wordmark uncovered by a soft-edged wipe in flowing chrome, finished with one hard light streak and a floor reflection [16:9, 5s, 150f, 6 props, tags: logo/wordmark/chrome/specular/reflection/reveal/premium]
- [Logo Marquee Row](https://www.motionstash.io/c/logo-marquee-row) `logo-marquee-row` - A trusted-by wall of drawn marks gliding leftward between two hairlines on a mathematically exact loop, soft-masked at both frame edges [16:9, 8s, 240f, 8 props, tags: marquee/logo wall/trusted by/seamless loop/ticker/social proof/infinite scroll]
- [Logo Stroke Draw](https://www.motionstash.io/c/logo-stroke-draw) `logo-stroke-draw` - Nested rounded squares stroke themselves on in sequence, then hand over to a solid fill as the wordmark masks up [1:1, 3s, 90f, 4 props, tags: logo/reveal/sting/evolvepath/stroke]
- [Particle Converge](https://www.motionstash.io/c/particle-converge) `particle-converge` - 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 [9:16, 5s, 150f, 6 props, tags: logo/particles/converge/motion trails/vertical/bloom/premium]

### Backgrounds

- [Dot Grid Parallax](https://www.motionstash.io/c/dot-grid-parallax) `dot-grid-parallax` - 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 [16:9, 8s, 240f, 4 props, tags: background/parallax/grid/loop/atmosphere]
- [Film Grain Overlay](https://www.motionstash.io/c/film-grain-overlay) `film-grain-overlay` - Deterministic per-frame grain, scanlines and a vignette, seeded on the frame index so it reproduces byte-for-byte [16:9, 5s, 150f, 6 props, tags: grain/overlay/texture/deterministic/film]
- [Gradient Mesh Drift](https://www.motionstash.io/c/gradient-mesh-drift) `gradient-mesh-drift` - Blurred brand-coloured gradient blobs drifting on closed sine paths, loop-exact at the last frame [16:9, 8s, 240f, 10 props, tags: background/gradient mesh/seamless loop/ambient/blur/underlay]
- [Hot Path Scan](https://www.motionstash.io/c/hot-path-scan) `hot-path-scan` - A defocused listing scrolls behind a scan front while one symbol resolves out of blur and locks sharp [9:16, 5s, 150f, 4 props, tags: technical/code/scan/vertical/focus/atmosphere/developer]
- [Light Rays Sweep](https://www.motionstash.io/c/light-rays-sweep) `light-rays-sweep` - 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 [16:9, 5s, 150f, 5 props, tags: background/light/rays/cinematic/atmosphere]
- [Ribbon Wave](https://www.motionstash.io/c/ribbon-wave) `ribbon-wave` - A volumetric ribbon of phase-shifted strands travelling across frame, built outside-in with three depth groups and a moving hot spot [16:9, 8s, 240f, 6 props, tags: background/ribbon/wave/volumetric/hero/atmosphere/premium]

### Transitions

- [Fade Through](https://www.motionstash.io/c/fade-through) `fade-through` - Two scenes hand off through a single frame of brand colour, giving the eye somewhere clean to reset instead of muddying both [16:9, 8s, 240f, 5 props, tags: transition/cut/flash/handoff/broadcast]
- [Mask Wipe Shape](https://www.motionstash.io/c/mask-wipe-shape) `mask-wipe-shape` - 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 [16:9, 8s, 240f, 5 props, tags: transition/mask/clip-path/reveal/shapes]
- [Zoom Punch Cut](https://www.motionstash.io/c/zoom-punch-cut) `zoom-punch-cut` - A fast accelerating push-in carries a hard frame-exact cut, with the incoming scene decelerating out of an over-scaled state [16:9, 8s, 240f, 5 props, tags: transition/cut/beat/punch/blur]

### Primitives

- [Animate In Presets](https://www.motionstash.io/c/animate-in-presets) `animate-in-presets` - Six entrance presets on six otherwise identical tiles, replayed so they can be compared directly rather than remembered [16:9, 8s, 240f, 3 props, tags: primitive/entrance/presets/documentation/comparison]
- [Idle Loops](https://www.motionstash.io/c/idle-loops) `idle-loops` - Float, pulse, breathe and wobble at deliberately tiny amplitudes, each closing its loop exactly because the cycle count is an integer [16:9, 8s, 240f, 3 props, tags: primitive/idle/loop/subtle/documentation]
- [Path Follow](https://www.motionstash.io/c/path-follow) `path-follow` - A marker travels an SVG route, banking into curves because its rotation comes from the path tangent rather than a separate animation [16:9, 8s, 240f, 4 props, tags: primitive/path/tangent/route/evolvepath]
- [Stagger Distributions](https://www.motionstash.io/c/stagger-distributions) `stagger-distributions` - Three delay distributions across one shared span, so linear, from-centre and eased staggers can be compared directly [16:9, 8s, 240f, 4 props, tags: primitive/stagger/timing/documentation/comparison]

### Diagrams

- [Architecture Flow](https://www.motionstash.io/c/architecture-flow) `architecture-flow` - A system diagram assembles column by column, with orthogonal connectors that only draw once both of their endpoints exist [16:9, 8s, 240f, 4 props, tags: diagram/architecture/graph/explainer/evolvepath]
- [Checklist Tick](https://www.motionstash.io/c/checklist-tick) `checklist-tick` - The whole list arrives first to set the scope, then each item ticks in turn with the one overshoot this library allows [16:9, 8s, 240f, 5 props, tags: diagram/checklist/tick/progress/explainer]
- [Doodle Card Stack](https://www.motionstash.io/c/doodle-card-stack) `doodle-card-stack` - Hand-drawn marker cards drop into a stack bottom row first, each outline wobbled off true by its own seed [9:16, 5s, 150f, 5 props, tags: illustrated/hand drawn/light/vertical/stack/playful/marker]
- [Layer Stack Explode](https://www.motionstash.io/c/layer-stack-explode) `layer-stack-explode` - An isometric stack separates plate by plate and holds as a labelled architecture diagram, with leader lines waiting for their layer to settle [16:9, 8s, 240f, 4 props, tags: diagram/layers/isometric/architecture/explainer]
- [Packet Dot Flow](https://www.motionstash.io/c/packet-dot-flow) `packet-dot-flow` - Requests stream along the top in accent and return underneath in muted, with per-hop latency labels and a loop that closes exactly [16:9, 8s, 240f, 5 props, tags: diagram/flow/latency/loop/explainer]
- [Sticker Hub Diagram](https://www.motionstash.io/c/sticker-hub-diagram) `sticker-hub-diagram` - A hub-and-spoke diagram on graph paper where each edge wires out from the centre and lands its node as it arrives [16:9, 5s, 150f, 5 props, tags: diagram/light/paper/hub and spoke/sticker/grid/explainer]

### Social formats

- [Gradient Card Collage](https://www.motionstash.io/c/gradient-card-collage) `gradient-card-collage` - App cards float at true depth over a drifting saturated ground, parallaxing against a camera that never stops moving [16:9, 5s, 150f, 7 props, tags: social proof/light/collage/parallax/perspective/gradient/cards]
- [iMessage Share](https://www.motionstash.io/c/imessage-share) `imessage-share` - A light message thread that grows from the bottom, with a video attachment card and a tapback on the last bubble [9:16, 5s, 150f, 4 props, tags: messages/light/vertical/social proof/thread/attachment/ios]
- [Karaoke Captions](https://www.motionstash.io/c/karaoke-captions) `karaoke-captions` - Word-timed captions where the spoken word pops onto an accent block and its neighbours dim, in a fixed-height row that never reflows [9:16, 8s, 240f, 4 props, tags: social/captions/karaoke/vertical/subtitles]
- [Reel Hook Frame](https://www.motionstash.io/c/reel-hook-frame) `reel-hook-frame` - A vertical opener whose hook lands inside twenty frames, laid out clear of the platform's top and bottom chrome [9:16, 5s, 150f, 4 props, tags: social/vertical/hook/safe-area/reels]
- [Post Card](https://www.motionstash.io/c/x-post-card) `x-post-card` - A generic social post card with a drawn check and icons, scaling in on the surface while its metrics count up [1:1, 5s, 150f, 7 props, tags: social/card/post/metrics/square]

### YouTube

- [YouTube Comment Highlight](https://www.motionstash.io/c/youtube-comment-highlight) `youtube-comment-highlight` - A viewer's comment featured as the platform renders it, with the like row and the creator's heart landing after the words [16:9, 5s, 150f, 9 props, tags: youtube/comment/social proof/testimonial/card/ui]
- [YouTube End Card](https://www.motionstash.io/c/youtube-end-card) `youtube-end-card` - An end screen with two recommended slots and a channel ring, laid out clear of the player's own controls [16:9, 8s, 240f, 10 props, tags: youtube/end card/end screen/call to action/safe area/subscribe]
- [YouTube Subscribe Nudge](https://www.motionstash.io/c/youtube-subscribe-nudge) `youtube-subscribe-nudge` - A channel card that presses its own subscribe button and then rings its own bell, with a cursor that travels to each in turn [16:9, 5s, 150f, 9 props, tags: youtube/subscribe/call to action/cursor/state change/bell]

## Frequently asked

**Is Motionstash free to use?**

Yes. Every component, its complete source code, the registry JSON and the MCP server are free under the MIT licence, with no account, no login wall, no rate limit and no paid tier. Sign-in exists only to save collections across devices; nothing on the site requires it, and no asset is hidden behind it.

**What is Motionstash?**

Motionstash is an open library of 76 code-based motion design components for Remotion. Each component is a single TypeScript file that declares a typed props schema, a frame budget and a set of brand tokens, so it can be dropped into a Remotion project and rendered to video without editing animation code.

**How do coding agents use the registry?**

Through typed parameters rather than generated code. Each component exposes a Zod schema describing every prop, so an agent picks a component and fills its parameters — an operation that either validates or fails loudly. The bundled MCP server exposes five tools for searching the registry, reading a component's schema, and assembling a shot list, which means an agent never has to author easing curves or interpolation ranges.

**What is the timing grammar?**

A shared vocabulary that lets independently written components compose in time. Everything runs at a canonical 30fps and declares its duration as three numbers — enter, hold and exit frames — drawn from four standard budgets: beat, statement, scene and feature. Because every component multiplies its own presence by the same stage function, two clips placed back to back overlap into a cross-dissolve instead of a hard cut.

**How do I install a component?**

Run npx motionstash add <component-id>. The CLI copies one component file plus the four spine files it imports — types, contract, timing and tokens — into your project. There is no package to depend on and no runtime to install beyond Remotion itself, so the copied file is yours to edit.

**Do the components need external assets, fonts or CSS?**

No. Every component renders from inline styles and code-drawn geometry only — no CSS files, no Tailwind, no image or font downloads. That constraint exists so a render is deterministic and reproducible on a cold machine, and it is enforced by a contract checker in CI rather than by convention.

**How is each component verified?**

Four automated gates: a TypeScript typecheck, a thirteen-rule contract check covering inline-styles-only and token discipline, a real Remotion render of every component, and a numeric audit of the rendered held frame measuring content coverage, tonal spread and edge occupancy. A component that renders an empty background fails the audit even though it typechecks and renders.

**Can I use the components in commercial work?**

Yes. The MIT licence permits commercial use, modification and redistribution, with attribution of the copyright notice. There is no separate commercial tier and no per-render fee, because the registry ships source rather than a hosted rendering service.