Scrub Reveal

A dim paragraph climbs as a soft front brightens it word by word, with one phrase in gradient italic.

Installation

$ pnpm dlx shadcn@latest add @remocn/scrub-reveal

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { ScrubReveal } from "@/components/remocn/scrub-reveal";
 
const ScrubRevealScene = () => (
  <ScrubReveal
    text="Every frame is code. Every cut is yours. Ship the film your product deserves."
    highlight="Every cut is yours."
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="ScrubReveal"
    component={ScrubRevealScene}
    durationInFrames={172}
    fps={30}
    width={1280}
    height={720}
  />
);

A dim paragraph sits low in the frame and climbs while a soft front brightens it word by word, like a trackpad scroll. The highlight phrase inside text switches to a serif italic filled with a gradient, and at the end the plain words settle back a step. Pass your own text and a highlight that appears in it, or an empty string for none. It ships light and dark.

Props5

Prop	Type	Default
text	string"Every frame is code. Every cut is yours. Ship the film your product deserves." The statement. Each word brightens as the reveal front passes it.
highlight	string"Every cut is yours." A phrase inside `text` that turns to an italic serif and lights up in a gradient. Pass "" for none.
accent	string"#3B5BFD" Final stop of the highlight gradient.
speed	number1 Playback multiplier.
theme	"dark" \| "light""dark" Light or dark palette.

textstring
The statement. Each word brightens as the reveal front passes it.
Default"Every frame is code. Every cut is yours. Ship the film your product deserves."
highlightstring
A phrase inside `text` that turns to an italic serif and lights up in a gradient. Pass "" for none.
Default"Every cut is yours."
accentstring
Final stop of the highlight gradient.
Default"#3B5BFD"
speednumber
Playback multiplier.
Default1
theme"dark" | "light"
Light or dark palette.
Default"dark"