# Bracket Focus
URL: https://remocn.dev/docs/numbers/bracket-focus

Viewfinder brackets fly in and snap tight around a big value over a dotted grid, with a tag chip.

- Install: `npx shadcn@latest add @remocn/bracket-focus`
- Vibe: tech
- Natural length: 62f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/bracket-focus
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { BracketFocus } from "@/components/remocn/bracket-focus";

const BracketFocusScene = () => <BracketFocus subject="1.8s" tag="Render time" />;

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

A dotted grid ripples in around a big value, and four viewfinder corner brackets fly in from the edges of the frame and snap tight around it with a springy settle. A tag chip and a size readout appear and the background dims around the focus. Pass `subject` and `tag`; `accent` colors the highlights. It ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `subject` | `string` | `"1.8s"` | The value framed by the brackets. |
| `tag` | `string` | `"Render time"` | Small chip text that names the value. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for the highlights. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |
| `speed` | `number` | `1` | Playback speed multiplier. |

## Use when
- A metric that should feel measured or captured, such as render time or latency.
- A technical beat where a value is framed like a camera subject with a small tag.
- A launch stat that benefits from a dotted-grid ground and a gentle dimming of everything else.

## Don't use when
- You want a crosshair lock on a chart peak - use `crosshair-lock`.
- The number should count up before it lands - use `lumen-count`.
- A bold gradient headline number is the look - use `magnitude-push`.