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-revealUsage
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
| Prop | Type | Default |
|---|---|---|
| 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
Default
1