Get Motion Guide
get-motion-guideScaffold a brand-aware Remotion product-demo project or fetch video components, motion topics and guidance for building and debugging product videos in code.
Instructions
Load Better Design's video design-system guidance for building a product demo or promo video in code.
Use this before writing a Remotion composition, and while debugging one. It covers the product-demo brief, brand and motion tokens, responsive format profiles, product interactions, captions and accessibility, story and rhythm, layout traps, rendering, and visual review.
Start with scaffold: true. It returns a complete brand-aware Remotion project with landscape and vertical compositions, typed Studio props, a shared timeline, product-interaction scene, sourced proof, captions and an optional generated music bed.
Then pick the product shots from the video components: agent and prompt screens, phone and laptop mockups, cropped screen recordings, terminal sessions, charts and counters, title reveals, captions, logo stings, social proof, transitions and backgrounds. get-motion-guide({}) lists them by group; get-motion-guide({ component: "phone-mockup" }) returns that component's source, prop defaults, natural length and install command. Better Design wrote every one and serves them from its registry, so the shadcn CLI installs them with the video kit they share. plan-video turns a one-line brief into beats with one component each, cut-screen-recording cuts a recording into beats, and render-video-frames renders chosen frames so you check the work.
Install and follow the twelve official Remotion skills from https://www.remotion.dev/docs/ai/skills for current APIs. Better Design owns brand, hierarchy, story, pacing and review. RemotionUI, remocn and Remotion Bits are optional, source-labelled pattern libraries; ask before installing community code and adapt it to the active video tokens.
This tool does not render. Rendering needs Remotion and a large headless-browser download in the user's own project. Write the files into their repo, then use render-video-frames to check chosen frames before the full render.
This complements the design tools: use get-ui-principle for visual decisions and get-ux-principle for product behavior. For in-app animation whose timing the user should tune by eye (durations, springs, stagger), call get-jig-guide and mount its tuning panel instead of guessing values.
You can either:
Get the starter project: get-motion-guide({ scaffold: true })
Get one video component as files: get-motion-guide({ component: "answer-reply" })
Request a known topic: get-motion-guide({ topic: "video-design-system" })
Use an alias: get-motion-guide({ topic: "product demo structure" })
Search for the current task or problem: get-motion-guide({ query: "reflow my product demo for vertical video" })
Get the full topic and component index: get-motion-guide({})
Prefer query search when you do not know the topic name. Use maxTokens to keep responses focused (recommended: 5000-10000).
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| query | No | Natural language description of the video or animation task or problem. | |
| topic | No | Specific motion topic or alias, e.g. video-design-system, product-demo-brief, formats-and-safe-areas, product-interactions, captions-and-accessibility, remotion-resources, video-components, verifying-a-render. | |
| context | No | Optional. One sentence on WHY you are calling this and what the user asked for (e.g. 'adding nav icons for the fintech dashboard'). Used only for usage analytics; does not change the result. | |
| scaffold | No | Return a complete brand-aware Remotion product-demo project, as files to write. Start here when building a video. | |
| component | No | A video component name, e.g. answer-reply, prompt-compose, terminal-session, phone-mockup, laptop-mockup, recording-shot, headline-reveal, captions, logo-reveal, stat-count. Returns its source files, prop defaults, natural length and install command. | |
| maxTokens | No | Maximum tokens to return for guidance and the index. Truncates content to fit. Recommended: 5000-10000. Ignored by scaffold and component, which always return whole files. |