# Edge Fit
URL: https://remocn.dev/docs/typography/edge-fit

A single huge cream word, 'recaps', fills the frame edge to edge with a caption and logo

- Install: `npx shadcn@latest add @remocn/edge-fit`
- Vibe: playful
- Natural length: 112f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/edge-fit
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { EdgeFit } from "@/components/remocn/edge-fit";

const EdgeFitScene = () => (
  <EdgeFit words={["intros", "teasers", "recaps"]} caption="Fresh from the registry" />
);

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

Each word is fitted to the full frame width and its letters rise in, one word after another, with a caption and logo beneath. Pass `words`, `caption` and your own `logo`; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `words` | `string[]` | `["intros", "teasers", "recaps"]` | Words shown one at a time, each fitted edge to edge. |
| `caption` | `string` | `"Fresh from the registry"` | Small line under the word. |
| `logo` | `React.ReactNode \| null` | — | Logo node under the word; null hides it. |
| `letterGap` | `number` | `3` | Frames between each letter rising in. |
| `hold` | `number` | `14` | Frames the text holds before the next beat. |
| `accent` | `string` | — | Accent colour (any CSS colour). |
| `background` | `string` | — | Overrides the theme background colour. |
| `speed` | `number` | `1` | Playback multiplier; above 1 plays faster. |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |

## Use when
- A rapid word montage where each word fills the frame edge to edge.
- A closing beat that names the kinds of things you can make, with a caption and logo.

## Don't use when
- You want a stacked multi-word slogan — use `chunk-stack`.
- You want hard slams with condensed caps — use `full-bleed-type`.