# Spotlight Text
URL: https://remocn.dev/docs/typography/spotlight-text

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

- Install: `npx shadcn@latest add @remocn/spotlight-text`
- Vibe: tech
- Natural length: 132f @ 30fps

## Installation

```bash
npx 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `number` | `1` | Playback multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |

## Use when
- A tech or developer-tool headline revealed by a spotlight that travels across dark type.
- An opener with a tiny mono eyebrow label above a one-line title.

## Don't use when
- You want a bright band of shine over visible text — use `shimmer-sweep`.
- The headline wraps over several lines — use `line-by-line-slide`.