English | 简体中文

Motionboard

Shot language from Apple and Linear launch films, rebuilt in code for your agent.

motionboard.app · All recipes

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.

여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗