skill
motionboard
Shot language from Apple and Linear launch films, rebuilt in code for your agent. 38 recipes and a skill for making product launch films.
Set up
Skills are installed by placing their folder where your agent loads skills.
The download comes from github.com/krisyangdev/motionboard itself, not from our server, so what you get is exactly what its author published.
Install instructions come from the README
README
synced Nov 8, 2026English | 简体中文
Motionboard
Shot language from Apple and Linear launch films, rebuilt in code for your agent.
Motionboard breaks real launch films down into 38 shots. Each shot is recreated in code as a ~10 second HyperFrames film (HTML and GSAP rendered to video), and the website shows every original next to its recreation. The skill gives your agent all 38 recipes, so it can make one shot or plan and build a whole launch film for your product.
Requirements: Node 22+, HyperFrames (npx hyperframes), ffmpeg.
Install
npx skills add krisyangdev/motionboard
Or hand the link to your agent:
Install this skill: https://github.com/krisyangdev/motionboard
Agents installing for a user: run npx skills add krisyangdev/motionboard -g -y (global, no prompts). If the skill is not available in the current session yet, read SKILL.md at the path the command prints (usually ~/.agents/skills/motionboard/) and follow it.
In Claude Code, add it as a plugin:
/plugin marketplace add krisyangdev/motionboard
/plugin install motionboard@motionboard
Manual install for Claude Code and Codex:
git clone https://github.com/krisyangdev/motionboard.git ~/motionboard
ln -s ~/motionboard/skills/motionboard ~/.claude/skills/motionboard
ln -s ~/motionboard/skills/motionboard ~/.codex/skills/motionboard
Use
| Say | What happens |
|---|---|
| Make a launch film for my product with Motionboard. | The agent reads your product, proposes a 4 to 6 shot storyboard with preview links, waits for your OK, builds each shot and joins them into one MP4. |
| Use the match-cut recipe to go from my logo to the app. | The agent builds that one shot with your brand and UI, renders it, and checks it against the preview. |
| Make the Tilted UI with Depth of Field shot for this landing page. | The agent ports the recipe's GSAP timeline into your site as a hero animation. |
Each recipe page on motionboard.app has a copy button that gives your agent one line: install this skill, then make that shot.
Recipes
38 recipes, grouped by where they sit in a launch film.
Opening (7)
| Recipe | Shot |
|---|---|
| Light Reveal | The product emerges from pure black as exposure rises, with a barely perceptible push-in, and the closing shot runs the same move in reverse. |
| Showcase Wall | A full-screen wall of work cards drifts diagonally at constant speed while slowly scaling up, then accelerates into one card at the end. |
| Word-by-Word Highlight | Words in a small centered line brighten from gray to white one at a time, and the text never moves. |
| Rhythmic Typing | Monospace text is typed character by character with a cursor at uneven human speed, then deleted and retyped. |
| Branching Growth | A single dot branches layer by layer into a network, slow at first and then faster, or splits in doubling beats until it fills the frame. |
| Iris Window Montage | A fixed circular window cuts rapidly between images, or revisits the same image, while its size jumps with the rhythm. |
| Line Boil | Hand-drawn outlines swap to a slightly different trace every few frames, and motion steps at a low frame rate with no tweening. |
Product reveal (7)
| Recipe | Shot |
|---|---|
| Device Push-in Focus | A line-art 3D laptop turns upright while closed, opens, pushes in on the keyboard, then pans from key to key in step with the option selected in the UI beside it. |
| Macro Pull-out Reveal | The camera drifts slowly across a surface at extreme close range, then one pull-back reveals the whole device or page. |
| X-ray Dissolve | The internal structure and the outer shell cross-dissolve from the same camera position, then the camera pulls back to the whole device. |
| Text–Object Interleave | Text and object interleave in depth: type rises from behind the product, a device slots into a gap in a sentence, or a word passes through an object and comes out as another word. |
| Outline to Solid | A wireframe or light-drawn outline appears first, then fills into a solid shape or material. |
| Tilted UI with Depth of Field | A UI plane tilted 10–15° and shot up close, with only the active row in focus and the rest blurred. |
| Dock Arrival | A magnified Dock opens a gap, a new icon grows into it with one small spark, and a cursor click opens the window. |
Features (15)
| Recipe | Shot |
|---|---|
| Dispense Line-up | Accessories slide out of the main object one by one into a row while the caption appears word by word, then retract in mirror order. |
| Auto Zoom / Zoom-to-Cursor | The camera pushes to the target element in 0.4–0.8s, holds for one click or input, then pulls back to the full view. |
| Morph Relay | One element keeps morphing into the next, replacing cuts, so the whole sequence has no hard cut. |
| Wireframe Re-layout | Content fades to wireframes, the wireframes re-flow into a new layout, then each cell fills with new content in turn. |
| Card Flip to Code | The preview card rotates 180° around the Y axis and its back face shows the code. |
| Control-Driven Change | The frame a control (color picker, toggle, dial) lands, the page result changes on that same frame. It can be split-screen with the control on the left and the result on the right. |
| Multiplayer Cursors | Enlarged two-color named cursors move across a canvas, leave comments, and drag items to reorder. |
| Focus Hop | A highlight block or focus frame hops one cell at a time with the cursor, and the frame can take the color of the icon inside it. |
| Pile-up and Clear | Tasks, tags, or events pile up one by one until the screen is full, then clear in one step to a single result state. |
| Prompt Carousel | A line under the headline thickens into a pill, becomes an input box, and types a list of prompts that scroll vertically. |
| Scattered Spec Type | A spec line is split into words placed far apart on uneven baselines, with a connector word stepping up letter by letter. |
| Glass Lens | A transparent glass disc, loupe, or control moves over content, magnifying and refracting what lies beneath, with dispersion at the edge. |
| Map Pin Drop | A pin drops onto a map with a bounce and bursts into fragments, the map zooms out to the whole country, and a route line draws to the next city. |
| Dot-Matrix Glyph | A graphic is quantized onto a circular dot-matrix display, and every frame of its rotation or change snaps to the dot grid. |
| Confirmation Burst | On the frame of a tap, payment, or confirmation, lines, squares, and dots radiate from the contact point, or an icon pops with a bounce and an echo outline expands. |
Transitions (5)
| Recipe | Shot |
|---|---|
| Locked-Layout Reskin | Layout positions stay locked while the color scheme and fonts hard-cut every 6–10 frames. |
| Glass Droplet Split | A glass slab stretches into a droplet, its neck thins and breaks, leaving a round bead. A dispersive glass ring contracting inward is the sibling form. |
| Domino Wave | A row of cubes flips 90 degrees one after another with a phase offset, while the camera pans along the line. |
| Match Cut | One object is replaced by another at the same anchor point, so the viewer's gaze never moves. |
| Foreground Wipe & Flash | A defocused foreground object sweeps across and covers the frame to cut scenes, or a central glow blows out to white before the next scene. |
Ending (4)
| Recipe | Shot |
|---|---|
| Rotate to Lockup | An object spins with a long ease-out and stops at the exact angle that forms the logo silhouette or the hero view of the product. |
| Converge to Mark | At the end, multiple elements gather and compress into a single icon or logo, always centered in the frame. |
| Mark-to-Wordmark Unfold | A logo mark sits centered, then the wordmark unfolds from behind it or outward from its center, optionally with a scramble-then-lock effect. |
| Chromatic Stretch | Some letters of a wordmark stretch horizontally with RGB ghosting, distort in steps, then snap back clean. |
Website
The site is TanStack Start prerendered to static HTML and served from Cloudflare Workers.
npm install
npm run dev # http://127.0.0.1:3000
npm run build # generate recipe files, prerender every page, write sitemap.xml
npm run deploy # build, then cf deploy
scripts/recipes.mjs runs before each dev and build. It writes the agent-facing recipe files for the website (public/r/) and for the skill (skills/motionboard/recipes/) from src/data/, and copies skills/motionboard/source/ to public/source/.
Films and posters are served from R2 at https://media.motionboard.app. Keep source files in media/ (not tracked) and upload with scripts/upload-media.sh [file ...]. Copy, like and wish counts live in D1; apply the schema locally once with npx wrangler d1 migrations apply DB --local.
License
MIT, see LICENSE. The recreations in skills/motionboard/source/ are original work. The original films belong to their owners and appear on the website only as short reference clips next to the recreations. See NOTICE.