snapcn

Product demo videos, built in React.

A Shadcn Labs project.

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 →  ·  Video editor  ·  Docs  ·  Components

Quickstart

No Remotion project? You don't need one to look. The browser editor composes a whole video out of these components and exports an MP4 — nothing to install.

To use the components in your own project you need Remotion. Don't have it? 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." }}
  />
);

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

For a whole video, add the workflow skill for the job. Each composes snapcn components beat by beat:

npx skills add snapcndev/snapcn --skill remotion-launch-video     # launch films, announcements
npx skills add snapcndev/snapcn --skill remotion-product-demo     # demos from a screen recording
npx skills add snapcndev/snapcn --skill remotion-motion-graphics  # kinetic type, logo stings, stats
npx skills add snapcndev/snapcn --skill remotion-kinetic-typography  # animated text, title cards
npx skills add snapcndev/snapcn --skill remotion-logo-animation   # logo reveals, intro/outro stings
npx skills add snapcndev/snapcn --skill remotion-explainer-video  # narrated explainers with captions

In Claude Code they also install as a plugin: /plugin marketplace add snapcndev/snapcn, then /plugin install snapcn@snapcn.

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.

What's next

Pro components and an agent that assembles a whole video for you. Get them first — one email a week at most, never a sponsored one.

If snapcn saved you an afternoon, a ⭐ is how other people find it.

Sponsors

snapcn is MIT and stays that way. Sponsorship keeps the free components coming.

Sponsor snapcn on GitHub

Author

Built by Sri Nath — x.com/SriNath693

License

MIT