“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.

Make a video Browse components

A shadcn registry, for video

snapcn is a registry of 46 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.

Compose it, then animate it

launch-scene.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17import { 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20import {
  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.

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.

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

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

Something not here? Open an issue on GitHub.

What is snapcn?

snapcn is a shadcn-style registry of 46 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.