# Crosshair Lock
URL: https://remocn.dev/docs/numbers/crosshair-lock

A crosshair locks onto the peak of a dot plot and calls out 2.4k per minute

- Install: `npx shadcn@latest add @remocn/crosshair-lock`
- Vibe: tech
- Natural length: 82f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/crosshair-lock
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { CrosshairLock } from "@/components/remocn/crosshair-lock";

const CrosshairLockScene = () => (
  <CrosshairLock x={0.7} y={0.94} label="Peak" value="2.4k/min" />
);

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

Two crosshair lines slide across a dot plot and lock onto a point with a ring, then a leader line pops out a label and value. Set the target with `x` and `y` (0 to 1 across the plot) and the callout with `label` and `value`. Ships dark and light via `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `x` | `number` | `0.7` | Horizontal position of the locked point, from 0 to 1. |
| `y` | `number` | `0.94` | Vertical position of the locked point, from 0 to 1. |
| `label` | `string` | `"Peak"` | Small name above the callout value. |
| `value` | `string` | `"2.4k/min"` | The callout text, such as 2.4k/min. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for the hero element. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette. |
| `speed` | `number` | `1` | Playback multiplier. |

## Use when
- A beat that calls out one peak or outlier on a dot plot with a precise readout.
- A performance scene where a rate such as requests or renders per minute needs a pinpoint callout.
- A short analytics moment that should feel like a viewfinder locking on a target.

## Don't use when
- You need a full chart that draws in and trends — use `growth-line`.
- You want a bar chart that climbs to a final number — use `pixel-bars`.
- The story is a before-and-after distribution — use `distribution-shift`.