# Depth Headline
URL: https://remocn.dev/docs/typography/depth-headline

A huge serif headline sits behind a gradient sphere that slides in front of it for a sense of depth.

- Install: `npx shadcn@latest add @remocn/depth-headline`
- Vibe: premium
- Natural length: 62f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/depth-headline
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { DepthHeadline } from "@/components/remocn/depth-headline";

const DepthHeadlineScene = () => (
  <DepthHeadline title="Studio" caption="Studio" showLogo accent="#3B5BFD" />
);

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

The headline opens and rises behind a sphere that glides across the frame, with a caption and logo fading in underneath. Pass `title` and `caption`, and pass `src` with a transparent cutout image to replace the default sphere; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Studio"` | Large headline placed behind the subject |
| `src` | `string` | — | Cutout image shown in front of the title; defaults to a sphere |
| `caption` | `string` | `"Studio"` | Small caption beside the logo |
| `showLogo` | `boolean` | `true` | Show the logo mark next to the caption |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `speed` | `number` | `1` | Playback speed multiplier |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |

## Use when
- A product name or hero word that should feel layered with an object in front of it.
- An opening title where a subject, such as a cutout image, passes in front of the type.

## Don't use when
- The headline needs to read clearly with nothing overlapping it - use `staggered-fade-up`.
- You want letters to rise individually - use `per-character-rise`.
- You want a calm blur-in title - use `soft-blur-in`.