The shots a software demo actually needs — AI chat streams, terminal sessions, device frames, captions — as components you install with the shadcn CLI and own outright.
Browse the catalog → · Docs · Components
You need a Remotion project. Don't have one? npx create-video@latest takes about a minute.
npx shadcn@latest add @snapcn/text-reveal@snapcn is in the shadcn registry directory, so the
CLI resolves it with no registries entry to add first. The source lands in your repo along with
anything it depends on, and there's no runtime package to keep on your dependency list.
A create-video project needs two things before its first add: a components.json, and the @/
alias in both tsconfig.json and remotion.config.ts — Remotion's bundler does not read tsconfig
paths. Installation has both files to paste.
import { Composition } from "remotion";
import { TextReveal } from "@/components/snap-cn/text-reveal";
export const RemotionRoot = () => (
<Composition
id="Intro"
component={TextReveal}
durationInFrames={60}
fps={30}
width={1920}
height={1080}
defaultProps={{ text: "Ship it." }}
/>
);21 components, each with a scrubable preview at snapcn.dev.
| Group | Components |
|---|---|
| AI chat input | answer-stream search-typing prompt-zoom |
| Screens & devices | phone-frame laptop-frame terminal-simulator |
| Text & titles | text-reveal text-build text-swap text-swell text-highlight word-flip |
| Captions | karaoke-captions word-captions |
| Scenes | hero-launch orbit-gallery moodboard-reveal |
| Logos | logo-assemble logo-flicker |
| Social proof | follower-rush |
| Effects | pulsing-border |
Alongside them, snap-cn-ui — timeline-driven versions of shadcn atoms (input, caret) that the
scene components paint from, so a text field in your video is drawn from the same tokens as the one
in your app.
It's built for showing software. Streaming AI answers, a cursor typing into a search field, a terminal running a build, a phone tilting into frame. These are the shots a product demo is made of, and they're fiddly enough that most people give up and screen-record instead.
Your video inherits your design system. Components take theme and mode props and resolve
through SnapCnTheme, reusing the same surface tokens shadcn's own primitives paint with — so the
UI in the video doesn't drift from the UI in the product.
The motion is measured, not eyeballed. Scaled text pivots on its baseline instead of its centre,
and renders with geometricPrecision, because glyph rasterisers have no vertical sub-pixel
positioning and hinting re-snaps stems every frame. Both fixes were verified on rendered frames
(judder 0.284px → 0.014px). The details are in motion-quality.
You own it. shadcn philosophy: files are copied into your project. Edit anything, upgrade nothing, no black box.
snapcn ships a skill that teaches coding agents the catalog, prop shapes, durations and the motion
rules above — so your agent picks the right component and budgets the timeline instead of inventing
interpolate() calls:
npx skills add snapcndev/snapcn --skill snapcn --yesAgents that read context files instead can pull llms.txt or the
full corpus at llms-full.txt.
Issues and PRs welcome — see CONTRIBUTING.md. Missing a component you need? Open an issue — the roadmap is mostly whatever people ask for.
Built by Sri Nath — x.com/SriNath693