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

Captions

Burned-in, transcript-timed subtitles with word-pop and karaoke styles and safe-area presets for 16:9, 1:1 and 9:16.

Use captions when someone is speaking and the words need to be on screen — talking-head clips, voiceover demos, anything watched muted on a feed. These components take a timed transcript and render frame-accurate, burned-in subtitles inside per-aspect safe areas. For decorative headlines and titles, use Text & Titles instead.

The components

2 free Remotion subtitle animations. 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-captions

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

durationInFrames is the length WordCaptions is choreographed for — 96 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 subtitle animation to a Remotion project?

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

2 of them are MIT-licensed and free to use commercially.

Do I need Remotion to use a Remotion subtitle 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.