Unmask Line

A monospace line is unmasked letter by letter, 'Out of stealth.', the last word in green

Installation

$ pnpm dlx shadcn@latest add @remocn/unmask-line

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { UnmaskLine } from "@/components/remocn/unmask-line";
 
const UnmaskLineScene = () => <UnmaskLine lines={["Out of", "stealth."]} highlight={-1} />;
 
export const RemotionRoot = () => (
  <Composition
    id="UnmaskLine"
    component={UnmaskLineScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

Dots appear for each letter, breathe, then open into monospace characters line by line, with the chosen line tinted green. Pass lines and highlight (a line index; -1 means the last line); it ships light and dark.

Props6

Prop	Type	Default
lines	string[]["Out of", "stealth."] Lines unmasked letter by letter.
highlight	number-1 Index of the line tinted green; -1 is the last line.
accent	string— Accent colour (any CSS colour).
background	string— Overrides the theme background colour.
speed	number1 Playback multiplier; above 1 plays faster.
theme	"dark" \| "light""dark" Colour scheme; ships light and dark.

linesstring[]
Lines unmasked letter by letter.
Default["Out of", "stealth."]
highlightnumber
Index of the line tinted green; -1 is the last line.
Default-1
accentstring
Accent colour (any CSS colour).
backgroundstring
Overrides the theme background colour.
speednumber
Playback multiplier; above 1 plays faster.
Default1
theme"dark" | "light"
Colour scheme; ships light and dark.
Default"dark"