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.
A shadcn registry, for video
snapcn is a registry of 32 Remotion components for React video. You run npx shadcn@latest add @snapcn/text-reveal, the source file lands in components/snap-cn/, and you edit it like code you wrote yourself.
Nothing is added to your package.json. There is no snapcn runtime, no version to pin and no upgrade that can change your video the week before you ship it. Every component is written against the plain Remotion API — useCurrentFrame(), interpolate() and spring() — so the file you own is a file you can read.
Text & Titles
9Text reveals, word flips, kinetic titles and highlight sweeps — the type animations a product video opens on.
Captions
2Word-by-word and karaoke captions, timed against your audio, for the vertical cuts that get watched on mute.
Logos
4Logo stings: an assemble that snaps your mark together, and a flicker for the sign-on shot.
Screens & Devices
5Phone, laptop and terminal mockups to put your actual product on screen without opening a design tool.
Social Proof
1Follower and metric counters that rush up to a number, for the social proof beat.
Scenes
5Whole compositions — hero launch, orbit gallery, moodboard reveal — assembled from the primitives above.
AI Chat Input
6Prompt typing, answer streaming and prompt zooms, for demoing an AI product's actual interaction.
All 32 components →
The whole registry in one filterable grid, every card playing its own scene in a real Remotion player.
Compose it, then animate it
launch-scene.tsx
import { Series } from "remotion";
import { LogoAssemble } from "@/components/snap-cn/logo-assemble";
import { TextReveal } from "@/components/snap-cn/text-reveal";
export function LaunchScene() {
return (
<Series>
<Series.Sequence durationInFrames={90}>
<LogoAssemble brand="Acme" logoSrc="/logo.png" />
</Series.Sequence>
<Series.Sequence durationInFrames={120}>
<TextReveal text="Ship it this afternoon" fontSize={72} />
</Series.Sequence>
</Series>
)
}Compose
Scenes drop into a Remotion timeline like any other React component. Sequence them, set their durations, nest them inside each other — it is all just JSX, in your repo, under your name.
fade-in.tsx
import {
interpolate,
spring,
useCurrentFrame,
useVideoConfig,
} from "remotion";
export function FadeIn({ children }) {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const enter = spring({ frame, fps, config: { damping: 200 } });
const blur = interpolate(enter, [0, 1], [12, 0]);
return (
<div style={{ opacity: enter, filter: `blur(${blur}px)` }}>
{children}
</div>
)
}Animate
No keyframe graphs and no timeline UI to learn. Every component is written straight onto the Remotion API — useCurrentFrame, interpolate, spring — so you can open one and change any number in it.
Before you install
What is snapcn?
snapcn is a shadcn-style registry of 32 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.
Do I need Remotion installed first?
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.
How do I install a snapcn component?
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.
Is snapcn free?
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.
Can I edit a component after installing 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.
How is this different from an npm animation package?
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.
Does it work in a project without Tailwind?
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.
Does it render to MP4?
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.
Does it work with Claude Code and other AI agents?
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.
Show us what you made
Nothing here yet — this is where the posts will go. Put something on X and yours is the first one on the wall.
Opens X with the post already written. Edit anything before you send it.
