Counter Reveal

A huge front word reveals a second line through the counters of its letters over a gradient.

Installation
$ pnpm dlx shadcn@latest add @remocn/counter-reveal

Usage

tsx
// src/Root.tsx
import { Composition } from "remotion";
import { CounterReveal } from "@/components/remocn/counter-reveal";
 
const CounterRevealScene = () => (
  <CounterReveal word="Beta" line="Out now." accent="#3B5BFD" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="CounterReveal"
    component={CounterRevealScene}
    durationInFrames={132}
    fps={30}
    width={1280}
    height={720}
  />
);

A giant front word rises letter by letter, then shrinks and drifts away so its counters open onto the second line behind it, which settles in. Pass word for the big text and line for the revealed line; it ships light and dark through theme.

Props5

PropTypeDefault
word
string"Beta"

Large front word whose counters reveal the line

line
string"Out now."

Secondary line shown behind the word

accent
string"#3B5BFD"

Accent color (any valid CSS color)

theme
"dark" | "light""dark"

Ships light and dark palettes

speed
number1

Playback speed multiplier

  • wordstring

    Large front word whose counters reveal the line

    Default"Beta"

  • linestring

    Secondary line shown behind the word

    Default"Out now."

  • accentstring

    Accent color (any valid CSS color)

    Default"#3B5BFD"

  • theme"dark" | "light"

    Ships light and dark palettes

    Default"dark"

  • speednumber

    Playback speed multiplier

    Default1