# Kerning Snap
URL: https://remocn.dev/docs/typography/kerning-snap

Loose letters snap one by one into correct kerning, forming a gradient serif word

- Install: `npx shadcn@latest add @remocn/kerning-snap`
- Vibe: premium
- Natural length: 80f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/kerning-snap
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { KerningSnap } from "@/components/remocn/kerning-snap";

const KerningSnapScene = () => (
  <KerningSnap word="Kerning" interval={6} />
);

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

Letters start scattered and loose across the frame; from the center outward, each one springs into its kerned position every `interval` frames with a brief flash on the snap ticks, and the gradient fill reads whole once the word is set. Pass `word` and tune `interval` for pacing; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `word` | `string` | `"Typeset"` | The word assembled from loose letters. |
| `interval` | `number` | `7` | Frames between one letter snapping and the next. |
| `accent` | `string` | `"#3B5BFD"` | Color of the flash ticks beside the word. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark. |
| `speed` | `number` | `1` | Playback speed multiplier. |

## Use when
- A design-craft beat about typesetting, details or polish, where a word assembles precisely.
- A premium title reveal where scattered letters gather into one word with flash ticks at each snap.
- A headline that benefits from a rhythmic, countable assembly with a controllable interval.

## Don't use when
- You want letters to ease in with a spacing change rather than snapping — use `tracking-in`.
- The whole word should drop in at once, not assemble — use `squeeze-in`.
- You want the word to stretch or squash on entry — use `stretch-in`.