Better Design serves 26 Remotion components vendored from snapcn (MIT). They are the shots a software demo is made of: an AI answer streaming in, a prompt typing itself, a terminal running a build, a phone or laptop tilting into frame, burned-in captions, a logo sting and a wall of followers. Use them instead of screen-recording the product or animating these beats by hand.
Load one, then install it
get-motion-guide({})lists every component by group with its natural lengthget-motion-guide({ component: "answer-stream" })returns the source files, prop defaults, natural length and install commandnpx shadcn@latest add https://better-design.com/registry/video/answer-stream.jsoninstalls it with its dependencies intosrc/components/snap-cn/
The scaffold from get-motion-guide({ scaffold: true }) already carries the @/ alias, components.json and src/video-component-theme.ts. In another Remotion project, add the alias to both tsconfig.json and remotion.config.ts first, because Remotion's bundler does not read tsconfig paths.
Paint every shot from the product's tokens
Every scene component takes a theme prop, and most take mode; both resolve through SnapCnTheme, the shadcn token set as concrete values. Pass videoComponentTheme from the scaffold, or build the same shape from the product's design system. The components interpolate colors in OKLCH, so oklch() strings work as they are. Never leave the snapcn demo palette in a branded film.
A render has no page CSS, so a var(--token) resolves to nothing and the component falls back to black. Supply concrete values.
Map the shots onto the brief
| Beat of the product-demo brief | Components |
|---|---|
| Hook and positioning | text-reveal, text-swell, announce-title, hero-launch |
| Product reveal | laptop-frame, phone-frame, orbit-gallery, moodboard-reveal |
| Product interaction, the proof | prompt-zoom, search-typing, answer-stream, terminal-simulator, status-cycle |
| Feature emphasis | text-highlight, text-swap, text-build, word-flip |
| Social proof | follower-rush, logo-assemble, logo-flicker |
| Captions on every cut | word-captions, karaoke-captions |
| Working state around a scene | pulsing-border |
snap-cn-ui, caret and input are primitives. The CLI installs them as dependencies; compose them only when no scene component shows the moment.
Budget the timeline from the natural length
Each component reports the frame count it was designed for. Place it on the shared timeline at that length and stretch or cut with the speed prop, not by rewriting its interpolations. A scene that needs a very different rhythm is a new scene, not a bent component.
Keep the product interaction honest
The interaction components show a typed prompt, a streamed answer, a command and its output. Feed them the product's real copy, real commands and real results. A staged answer that the product cannot produce is a false claim, and the review rules treat it as one.
Review and render-test
- Check the shot against
get-review-rules({ category: "motion" }) - Turn on reduced motion and confirm the same message and end state
- Render every target format and inspect the first, middle and last frame of the shot
Provenance
Source: https://github.com/snapcndev/snapcn, MIT, pinned to the commit in video-components/snapcn/SOURCE.json. Refresh with bun run --cwd packages/mcp vendor:snapcn -- <clone> and then bun run --cwd packages/mcp generate-registry. The refresh imports the clone's config files, so it runs that checkout's code. Review the upstream diff first. Keep the MIT notice with any copied file.