# First Light
URL: https://remocn.dev/docs/logo-stings/first-light

A band of light climbs along a baseline and lights the wordmark as it passes, with a tagline below.

- Install: `npx shadcn@latest add @remocn/first-light`
- Vibe: premium
- Natural length: 86f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/first-light
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FirstLight } from "@/components/remocn/first-light";

const FirstLightScene = () => (
  <FirstLight
    name="remocn"
    tagline="Every frame catches the light."
    speed={1}
  />
);

export const RemotionRoot = () => (
  <Composition
    id="FirstLight"
    component={FirstLightScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A band of light climbs along a baseline, lighting the name as it passes, then settles and a tagline fades in below. Pass `name` and `tagline`; a name of Remocn is set as the real logo. Ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `name` | `string` | `"remocn"` | Name that the light sweeps across. |
| `tagline` | `string` | `"Every frame catches the light."` | Line that fades in under the name. |
| `accent` | `string` | — | Colour of the light band. |
| `background` | `string` | — | Stage fill colour; overrides the theme background. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline; 1 is normal speed. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette and ground. |

## Use when
- A calm, premium logo reveal at the very start or end of a launch film.
- A brand sting that needs a single tagline and no other text.
- A quiet closer after a loud, busy sequence.

## Don't use when
- You want an eyebrow line before the name — use `introducing`.
- The reveal should feel hot and forged — use `noise-forge-sting`.
- The name should be spelled out letter by letter — use `spell-out`.