snapcn
93 components
DocsComponentsTemplatesVideo EditorNewMCPNewRemotion StudioNewRoadmapChangelog

Getting started

IntroductionInstallationAgent skill
GitHub

Star snapcn

Free, open-source components.

Production-ready Remotion animations, transitions and backgrounds — you own the code, free or paid.

Star on GitHubXFollow

43 MIT · 50 Pro · own your code.

© 2026 snapcn

Loading
snapcn
93 components
DocsComponentsTemplatesVideo EditorNewMCPNewRemotion StudioNewRoadmapChangelog

Getting started

IntroductionInstallationAgent skill
GitHub

Star snapcn

Free, open-source components.

Production-ready Remotion animations, transitions and backgrounds — you own the code, free or paid.

Star on GitHubXFollow

43 MIT · 50 Pro · own your code.

© 2026 snapcn

DocsComponentsTemplatesVideo EditorNewMCPNewRemotion StudioNewRoadmapChangelog
Getting startedIntroductionInstallationAgent skill

Scenes

Full scene compositions for launch and demo videos

Complete beats of a product video — openers, problem statements, pricing, and outros. Drop them into a <Sequence> or TransitionSeries and swap the copy for your own.

The components

11 free Remotion launch video templates, plus 8 in Pro. Each card plays its own default scene — open one for its props, the source file shadcn add writes, and a player you can scrub frame by frame.

Install

Components are installed into your own Remotion project with the shadcn CLI, and the file it writes is yours to edit — there is no snapcn package to depend on. Set the registry up once, then add components by name:

pnpm
$ pnpm dlx shadcn@latest add @snapcn/orb-swarm

Needs an existing Remotion project and a components.json. Two-minute setup if this is your first snapcn component.

That writes components/snap-cn/orb-swarm.tsx. Swap the name for any other component on this page.

Put it on screen

Every prop has a working default, so the component renders as soon as it is mounted — give it a composition and you have a video:

// src/Root.tsximport { Composition } from "remotion";import { OrbSwarm } from "@/components/snap-cn/orb-swarm";export const RemotionRoot = () => (  <Composition    id="OrbSwarm"    component={OrbSwarm}    durationInFrames={160}    fps={30}    width={1280}    height={720}  />);

durationInFrames is the length OrbSwarm is choreographed for — 160 frames at 30 fps. Cut it short and the animation is cut short with it. To use one as a beat inside a longer video, mount it in a <Sequence>of the same length instead of giving it a composition of its own. Each component's page lists its props; they are all plain values, so anything you can compute you can animate.

Next

  • Installation — the one-time registry setup, and the Remotion project it needs.
  • All components — the full gallery, filterable across every category.
  • Agent skill — hand snapcn to a coding agent so it picks the right component itself.

Frequently asked questions

How do I add a Remotion launch video template to a Remotion project?

Every Remotion launch video template here installs with the shadcn CLI — npx shadcn@latest add @snapcn/orb-swarm copies Orb Swarm into your project as a file you own, written against the plain Remotion API. There is no runtime package to keep installed.

Are snapcn's Remotion launch video templates free?

11 of them are MIT-licensed and free to use commercially; the other 8 are part of snapcn Pro — $129 a year for the whole catalogue, or $249 once to own it outright.

Do I need Remotion to use a Remotion launch video template?

Yes. snapcn is a component registry, not a video framework — each component is a React component built on Remotion's useCurrentFrame() and interpolate(), so it renders inside an existing Remotion project.

Get the next component in your inbox

New free components as they ship, and the pro pack first when it lands. One email a week at most, never a sponsored one.