Text Reveal

The reveal plays in four beats:

1. The lead word fades in large and centred — right up against the viewer.
2. It drifts a little closer still, and hangs there.
3. It falls back to its final size, roughly in place.
4. Only once it has landed does the line travel left, while the trailing words push in one by one from the right and settle.

Beats 3 and 4 begin on the same frame but run on very different clocks: the recede is short, the slide is long and heavily eased in. That gap is what makes the word read as going back first and moving left second, rather than doing both at once — and the trailing words stay hidden until wordDelay frames into the recede, so none of them appear while the lead word is still travelling.

Only scale, translate and opacity animate, so the baseline stays fixed and nothing reflows.

Installation

$ pnpm dlx shadcn@latest add @snapcn/text-reveal

Component code

The exact file shadcn add copies into your project.

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { TextReveal } from "@/components/snap-cn/text-reveal";

const TitleScene = () => <TextReveal text="Meet Acme Billing" />;

export const RemotionRoot = () => (
  <Composition
    id="TextReveal"
    component={TitleScene}
    durationInFrames={90}
    fps={30}
    width={1280}
    height={720}
  />
);

Tune the feel with a few props — a bigger initialScale for a more dramatic zoom, a longer assembleDuration for a slower settle:

<TextReveal
  text="Get more than you expect"
  initialScale={2.6}
  holdDuration={14}
  assembleDuration={40}
/>

The lead word's centre is measured once on mount so it stays perfectly centred while large and lands exactly in the line — the type, spacing and baseline never shift.

recedeDuration and assembleDuration are the two knobs that shape the reveal. Keep the assemble comfortably longer than the recede (the default 30 vs 14 is a good ratio); shrink the gap and the line starts sliding left while the lead word is still falling back, which reads as one muddled move instead of two.

Props