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 41 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
12Text 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
5Logo 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
2Follower and metric counters that rush up to a number, for the social proof beat.
Scenes
9Whole 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 41 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 41 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.
What people are saying
Real posts from X. Every card links to the original.
Nett0@nett0ethesse repositório aqui está em outro nível 🤯 e é tudo de graça 20 componentes de Remotion, prontos pra copiar e colar no teu projeto: título animado, logo sting e mockup de tela. roda com um comando CLI sem conta, sem chave, sem plano pago
AJ@appariciojunioreitaaaaaaaaa, biblioteca premium aqui hein
RicoUI@ricouiiSnapcn 这个 Remotion 视频方案比 Skills 稳定多了 简单的说就是视频模板，不过是用代码实现精准的动效动画，然后渲染视频。现在把素材库抽离出来，方便直接更换素材，简单但效果稳定。 目前内置 22 个视频模板，侧重产品演示，有非常大的扩展空间，我先 fork 过来二开！
Easycompany@Easycompany333做产品演示视频时，最磨人的经常是那几秒镜头：AI 回复逐字出现、终端命令滚动、手机框入场、字幕跟着声音走。 SnapCN 把这些镜头做成了可复制的 React 组件。你可以把它理解成「视频版 shadcn/ui」…
Tellus Cooperative 🌎@TellusCoopCrea videos de demostración de productos con código. snapcn ofrece componentes para Remotion, facilitando la creación de videos profesionales. → Componentes listos para efectos de texto, marcos de dispositivos y terminales…
AI Tech Diggest@TheTechDiggestStop manually editing product videos and start generating programmatic animations directly inside your React codebase today.
Cryton@crytonbutonThe copy-paste model is interesting because it turns video design into reusable code instead of another specialized editing workflow.
沐阳@yyyole转需！应该能用到！ 一键就能调用的 Remotion 动效组件！！
Maxime De Sogus@maximedesogusNot bad, with more time, I think result can be very good. Made with @snapcndev + Fable 5
Opens X with the post already written. Edit anything before you send it.