# Bokeh Title
URL: https://remocn.dev/docs/typography/bokeh-title

A serif headline sharpens out of drifting bokeh lights that first form a pattern.

- Install: `npx shadcn@latest add @remocn/bokeh-title`
- Vibe: premium
- Natural length: 152f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/bokeh-title
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { BokehTitle } from "@/components/remocn/bokeh-title";

const BokehTitleScene = () => (
  <BokehTitle
    title="Launch films, made in code"
    subtitle="remocn · Spring release"
    pattern="grid"
  />
);

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

Out-of-focus bokeh lights drift, a focus pull snaps them into a mark or grid pattern, then they defocus again as the serif title and subtitle resolve. Pass `title` and `subtitle` (split on ' · ' for a lead and a tail) and choose `pattern` and `shape`; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Launch films, made in code"` | Serif headline that resolves from the bokeh |
| `subtitle` | `string` | `"remocn · Spring release"` | Line under the title; ' · ' splits a lead from the rest |
| `pattern` | `"mark" \| "grid"` | `"mark"` | Arrangement the lights snap into: mark or grid |
| `shape` | `"circle" \| "hexagon"` | `"circle"` | Shape of each bokeh light: circle or hexagon |
| `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
- An opening title for a premium or lifestyle launch where the headline should resolve from a blur of lights.
- A cinematic cold open that needs atmosphere before the product name appears.

## Don't use when
- The scene needs crisp, fast type with no atmosphere - use `tracking-in`.
- You only want a blur-to-sharp text resolve with no lights - use `focus-blur-resolve`.
- You want a simple fade-up of a title - use `staggered-fade-up`.