snapcn

Overview

snapcn is a Shadcn Labs registry of Remotion components for building product demo videos in React. It covers the shots a software demo needs, such as streaming AI answers, a cursor typing into search, terminal sessions, device frames and captions, delivered as source through the shadcn CLI with no runtime package. The project is MIT licensed with about 511 GitHub stars.

The homepage cites 52 Remotion components, and the registry manifest lists more than 100 items, including full scenes. Components take theme and mode props that resolve through the same surface tokens shadcn primitives use, so UI in the video matches the product. A browser video editor composes components into a video and exports MP4 without installing anything.

Features

• AI and input shots: Answer stream, search typing, prompt zoom and agent step sequences
• Screens and devices: Phone frame, laptop frame and terminal simulator
• Text and captions: Text reveal, build, swap, swell and highlight, word flip, and karaoke and word captions
• Scenes and logos: Hero launch, orbit gallery, moodboard reveal, and logo assemble and flicker stings
• Design system match: snap-cn-ui renders timeline-driven versions of shadcn atoms such as input and caret
• Measured motion: Baseline-pivoted scaling and geometric precision text rendering to reduce frame judder
• Browser editor: Compose a video from the components and export MP4
• Agent skill and MCP: Coding agents can read the catalog, prop shapes and durations

Tech stack

• React, Remotion
• @remotion/google-fonts

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @snapcn/component-name