snapcn

Product demo videos, built in React.

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

Quickstart

You need a Remotion project. Don't have one? npx create-video@latest takes about a minute.

npx shadcn@latest add @snap-cn/text-reveal

@snap-cn 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." }}  />);

Components

21 components, each with a scrubable preview at snapcn.dev.

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.

Why snapcn

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.

Use it with an AI agent

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 --yes

Agents that read context files instead can pull llms.txt or the full corpus at llms-full.txt.

Docs

• Introduction
• Installation
• Agent skill
• All components

Contributing

Issues and PRs welcome — see CONTRIBUTING.md. Missing a component you need? Open an issue — the roadmap is mostly whatever people ask for.

Author

Built by Sri Nath — x.com/SriNath693

License

MIT