# Selection Snap
URL: https://remocn.dev/docs/typography/selection-snap

A thin word in a loose viewfinder snaps into a design-tool selection while it goes from Thin to Black, pops its handles and counts up a size badge

- Install: `npx shadcn@latest add @remocn/selection-snap`
- Vibe: tech
- Natural length: 38f @ 30fps

## Installation

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

## Usage

```tsx
// src/Root.tsx
import { AbsoluteFill, Composition } from "remotion";
import { SelectionSnap } from "@/components/remocn/selection-snap";

const Title = () => (
  <AbsoluteFill style={{ backgroundColor: "#0a0a0a" }}>
    <SelectionSnap text="Frame" accent="#ff4d1a" selectionColor="#3d5afe" />
  </AbsoluteFill>
);

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

The word starts at `fromWeight` inside four corner brackets. Around frame 14
the frame snaps tight with a small overshoot while the weight runs to
`toWeight` and the color turns to `accent`. The bracket arms grow along the
edges until they close into a one-pixel box, the eight handles pop in corners
first, and the badge counts up to the snapped box size in reference px.

The weight is continuous because Inter from `@remotion/google-fonts` is one
variable file: the component drives `font-variation-settings`. The box is a
wrapper around the text, so it follows the word as it widens. With a static
`fontFamily` the weight steps through the faces you load instead of gliding.

The component paints no background and centers the word in its parent. Sizes
are reference px at a 720px-tall composition and scale with `height / 720`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Frame"` | The word inside the selection. One short word reads best |
| `fontSize` | `number` | `150` | Font size in reference px at 720p |
| `fontFamily` | `string` | `Inter` | Font family. Use a variable font for a continuous weight change |
| `fromWeight / toWeight` | `number` | `100 / 900` | Weight before and after the snap |
| `color` | `string` | `"#fafafa"` | Text color before the snap |
| `accent` | `string` | `"#D97757"` | Text color after the snap |
| `selectionColor` | `string` | `"#0d99ff"` | Brackets, box, handle borders and badge |
| `badge` | `boolean` | `true` | Show the W × H badge under the box |
| `speed` | `number` | `1` | Timeline speed multiplier |
| `className` | `string` | — | Optional className passed to the wrapper |

## Use when
- A single word should read as something being designed: a design tool, a component library, a type or layout feature.
- You want a weight change to carry the beat — the word grows from Thin to Black inside the frame instead of just appearing.
- The title needs a precise, UI-flavored accent (selection box, handles, a W × H readout) without building any interface chrome.

## Don't use when
- The word should enter with physical motion rather than change in place — use `stretch-in`.
- A plain, quiet reveal is enough and the design-tool look would distract — use `soft-blur-in`.
- The text is a full sentence; the selection frames one short word and reads poorly around a line — use `kinetic-center-build`.