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

Text & Titles

Kinetic headlines, reveals, swaps, highlights and lower thirds — the decorative title layer of a video.

Reach for this category whenever text is the shot: headlines, section titles, feature callouts, name bars. These components handle the enter/exit choreography — stagger, blur, slide, swap — so a title lands with intent instead of just appearing. For transcript-timed subtitles, use Captions instead.

The components

12 free Remotion text animations, plus 12 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/word-wheel

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

How it works

That writes components/snap-cn/word-wheel.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 { WordWheel } from "@/components/snap-cn/word-wheel";export const RemotionRoot = () => (  <Composition    id="WordWheel"    component={WordWheel}    durationInFrames={66}    fps={30}    width={1280}    height={720}  />);

durationInFrames is the length WordWheel is choreographed for — 66 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 text animation to a Remotion project?

Every Remotion text animation here installs with the shadcn CLI — npx shadcn@latest add @snapcn/word-wheel copies Word Wheel 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 text animations free?

12 of them are MIT-licensed and free to use commercially; the other 12 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 text animation?

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.