# Overnight
URL: https://remocn.dev/docs/typography/overnight

Three timestamped story lines play as a night panel descends and a morning panel rises over an evening ground.

- Install: `npx shadcn@latest add @remocn/overnight`
- Vibe: paper
- Natural length: 150f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/overnight
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { Overnight } from "@/components/remocn/overnight";

const OvernightScene = () => (
  <Overnight
    evening={{ slug: "Thursday, 6:00 PM", line: "The launch was at nine the next morning." }}
    night={{ slug: "Friday, 12:50 AM", line: "The demo video was still a blank file." }}
    morning={{ slug: "Friday, 8:55 AM", line: "The demo went up before the post did." }}
  />
);

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

An evening line sits under a timestamp on a warm ground. A dark night panel then descends over it and the night line rises in, before a bright morning panel sweeps up from the bottom and the morning line lands in dark ink. Pass `evening`, `night` and `morning` as `{ slug, line }`. It ships light and dark; 150 frames is measured for a 16:9 frame at 180 frames.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `evening` | `{ slug: string; line: string }` | `DEFAULT_EVENING` | First beat: a timestamp and the line shown on the warm ground. |
| `night` | `{ slug: string; line: string }` | `DEFAULT_NIGHT` | Second beat: shown on the dark panel that descends. |
| `morning` | `{ slug: string; line: string }` | `DEFAULT_MORNING` | Third beat: shown on the bright panel that rises. |
| `accent` | `string` | — | Timestamp color and the morning panel color; overrides the theme. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A founder or customer story with a deadline that plays out across one evening, night and morning.
- A before, during and after beat where each stage deserves its own timestamp and mood.

## Don't use when
- Each story line should drift across the frame on its own — use `story-dip`.
- You only need a single timestamped line on one ground — use `crunch`.
- The text is a person quote with an attribution — use `said-who`.