Text & Titles

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

6 components in Text & Titles. 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 dlx shadcn@latest add @snap-cn/text-reveal

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

durationInFrames is the length TextReveal is choreographed for — 90 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.