“Snapcn actually has very nice components.”Jonny Burger· Creator of Remotion

Product demo videos, in React.

Copy-paste Remotion components for the shots a software demo is made of — streaming AI answers, terminals, device frames, captions. Install with the shadcn CLI; the code is yours.

Browse components Make a video

A shadcn registry, for video

52 Remotion components you install with the shadcn CLI. No runtime, no version to pin — the code is yours.

npx shadcn add @snapcn/text-reveal
@snapcn
Pick a shot
One command, and the component's source lands in components/snap-cn/ — a file you own, not a package.
PropsTheme
textShip it in minutes
thememidnight ▾
speed
accent
Tune every prop
Copy, colours and timing are all props. Change one in the editor and the frame updates under your cursor.
launch-scene.tsx210f · 30fps
LogoAssemble
TextReveal
Compose scenes
Scenes drop into a Remotion timeline like any React component. Sequence them, nest them — it is all JSX, in your repo.
spring({ frame, fps })
damping 12stiffness 120
Animate anything
No keyframe graph to learn: every component is plain useCurrentFrame, interpolate and spring, so any number is yours to change.
Hand it to your agent
Claude Code, Cursor, Codex and the rest read the registry over MCP and assemble the video with you.

Before you install

The questions people ask before they run the CLI — what it needs, what it costs, and what you own afterwards.

snapcn is a shadcn-style registry of 52 Remotion components for React video — text animations, captions, logo stings, device mockups and full scenes. You install one with the shadcn CLI and the source file is copied into your project, exactly the way shadcn/ui works for interface components.

Yes. snapcn does not bootstrap a video project — npx create-video@latest does that. Once you have a Remotion project with a components.json, snapcn installs into it like any other shadcn registry.

Run npx shadcn@latest add @snapcn/text-reveal. The component is written to components/snap-cn/ (or wherever your components.json points), along with anything it depends on, and every prop but the words you are animating is defaulted, so it renders the moment you mount it in a composition.

Yes. Every component is MIT licensed, the whole registry is on GitHub, and there is no account, no key and no paid tier to install any of it.

That is the point. The file is yours — not a dependency you configure through props somebody else chose. It is ordinary Remotion built on useCurrentFrame, interpolate and spring, so changing a duration means changing a number in a file you can read.

A package puts the animation behind a version number: you get what its author shipped, you upgrade on their schedule, and a patch release can change your video after you signed it off. A registry copies the code in once. There is no snapcn in your package.json at all.

Yes. The components carry their own styles inline through a theme prop rather than through utility classes, because CSS custom properties do not survive a Remotion render. They look the same in a Tailwind project and in one that has never seen it.

Yes — the component that plays in the browser preview is the one that goes into the file. Because the output is ordinary Remotion, anything that renders a Remotion project renders these: npx remotion render, the SSR APIs, or Remotion Lambda.

snapcn ships an agent skill — the component catalog with props and durations, the motion-design rules, and the anti-patterns — installable with npx skills add snapcndev/snapcn. Your agent then picks the right component and budgets the timeline without you pasting context every time.