# Attract Button

A button in a field of iron filings that turn toward the pointer and pull in on press.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/attract-button
```

## Usage

```tsx
import { AttractButton } from '@/components/fetaui/attract-button'

export function Example() {
  return <AttractButton onClick={start}>Attract</AttractButton>
}
```

## API

| Prop | Type | Default |
|---|---|---|
| children | ReactNode | Attract |
| disabled | boolean | false |
| animated | boolean | true |

## When to use

- For a marketing moment or a hero action.

## When not to use

- For product interfaces: use Button.

## Accessibility

- A native button. The field is decoration and hidden from screen readers.

## Motion

- Filings turn on a 240/21 spring.
- A press pulls them in. Ink depends only on pointer distance, so a press does not darken them.
- The field is always drawn. Its frame loop runs only while filings move.
- With reduced motion, the filings stay static. A disabled button leaves them at rest.
- Swift turns the filings directly, with no spring.