Scan Reveal

A scan line reveals a headline over an underline with a small subtitle below

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

Usage

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

PropTypeDefault
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.

    Default1