# Metal Frame

Rings any box in liquid chrome: bands drift round the edge, the edge swells toward the pointer, and thinking runs them faster.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/metal-frame
```

## Usage

```tsx
import { MetalFrame } from '@fetaui/components/metal-frame'

export function Example() {
  return <MetalFrame thinking><Answer /></MetalFrame>
}
```

## API

| Prop | Type | Default |
|---|---|---|
| children | ReactNode | required |
| shape | box, pill, circle | box |
| thinking | boolean | false |
| disabled | boolean | false |
| strength | 0 to 1 | 1 |
| ringCssPx | number | 1.5 |
| borderRadius | number | the shape radius |
| paused | boolean | false |
| bend | boolean | true |
| innerShadow | boolean | true |
| theme | light, dark | from tokens |
| animated | boolean | true |

## When to use

- When another surface is the AI talking or listening.
- Round an avatar, a checklist or a search pill.

## When not to use

- Round more than one element at a time: only one frame glows.

## Accessibility

- Decoration only: the field inside carries the label.
- Focus is never only the glow: Metal adds a halo.
- Announce Thinking as text in the field.

## Motion

- Light and dark bands drift round the 1.5 px ring, about one turn in 8 s, drawn by a WebGL shader.
- A mouse pointer within 48 px swells the edge up to 3 px toward it and brightens the metal there, easing in about 240 ms. Touch never bends it.
- Thinking runs the bands 2.5 times faster while a soft ink glow breathes over 2.4 s.
- With animated off, reduced motion, disabled or no WebGL, a static CSS chrome ring takes its place.