Scan Reveal
A scan line reveals a headline over an underline with a small subtitle below
Installation
$ pnpm dlx shadcn@latest add @remocn/scan-revealUsage
tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ScanReveal } from "@/components/remocn/scan-reveal";
const ScanRevealScene = () => (
<ScanReveal title="Built frame by frame" subtitle="Launch films from components you own." />
);
export const RemotionRoot = () => (
<Composition
id="ScanReveal"
component={ScanRevealScene}
durationInFrames={142}
fps={30}
width={1280}
height={720}
/>
);Guide marks appear, a scan line travels down to reveal the headline, then it moves up and parks while the subtitle fades in beneath. Pass title and subtitle; it ships light and dark.
Props5
| Prop | Type | Default |
|---|---|---|
| title | string"Built frame by frame" The headline revealed by the scan. | |
| subtitle | string"Launch films from components you own." One-line subtitle under the headline. | |
| accent | string"#3B5BFD" Accent colour (any CSS colour). | |
| theme | "dark" | "light""dark" Colour scheme; ships light and dark. | |
| speed | number1 Playback multiplier; above 1 plays faster. | |
- titlestring
The headline revealed by the scan.
Default
"Built frame by frame" - subtitlestring
One-line subtitle under the headline.
Default
"Launch films from components you own." - accentstring
Accent colour (any CSS colour).
Default
"#3B5BFD" - theme"dark" | "light"
Colour scheme; ships light and dark.
Default
"dark" - speednumber
Playback multiplier; above 1 plays faster.
Default
1