# Focal Point Picker

Sets the point every crop keeps.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/focal-point-picker
```

## Usage

```tsx
import { FocalPointPicker } from '@fetaui/components/focal-point-picker'

export function Example() {
  return <FocalPointPicker src="/lake.jpg" alt="Lake" onSave={save} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| src | string | required |
| alt | string | required |
| defaultPoint | { x, y } | 68, 38 |
| onChange | (point) => void |  |
| onSave | (point) => void |  |
| animated | boolean | true |

## When to use

- When one image feeds several crops.

## When not to use

- For a single fixed crop.

## Accessibility

- The crosshair is a slider with both values in its text.
- The point is always shown as text.
- White overlays keep a shadow, so they read on any photo.

## Motion

- A click glides the crosshair in 280 ms and the crops pan with it.
- Hovering a crop dims the rest to 45% in 200 ms.
- With reduced motion, the crosshair jumps and scrims appear.