Spotlight Text

A spotlight travels across a dark headline, 'Launch videos, in code.', with a mono eyebrow

Installation

$ pnpm dlx shadcn@latest add @remocn/spotlight-text

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { SpotlightText } from "@/components/remocn/spotlight-text";
 
const SpotlightTextScene = () => (
  <SpotlightText title="Launch videos, in code." eyebrow="remocn 2.0" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="SpotlightText"
    component={SpotlightTextScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);

A soft spotlight enters and glides across the single-line headline, lighting it as it passes and widening until the whole line is lit. Pass title and eyebrow; it ships light and dark.

Props5

Prop	Type	Default
title	string"Launch videos, in code." The headline the light travels across. One line.
eyebrow	string"remocn 2.0" Tiny mono label above the headline's left edge. Empty to hide.
accent	string"#3B5BFD" Faint tint at the rim of the spotlight, and the eyebrow marker.
speed	number1 Playback multiplier.
theme	"dark" \| "light""dark" Colour scheme; ships light and dark.

titlestring
The headline the light travels across. One line.
Default"Launch videos, in code."
eyebrowstring
Tiny mono label above the headline's left edge. Empty to hide.
Default"remocn 2.0"
accentstring
Faint tint at the rim of the spotlight, and the eyebrow marker.
Default"#3B5BFD"
speednumber
Playback multiplier.
Default1
theme"dark" | "light"
Colour scheme; ships light and dark.
Default"dark"