# Liquid Ring

Wraps the prompt composer in a liquid metal ring with an orbiting glow and a voice beam.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/liquid-ring
```

## Usage

```tsx
import { LiquidRing } from '@fetaui/components/liquid-ring'

export function Example() {
  return <LiquidRing label="Prompt" model="Aster Max 5.5" onSubmit={send} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| label | string | required |
| placeholder | string |  |
| defaultValue | string |  |
| state | rest, voice, loading | rest |
| voiceColorVariant | color, mono | color |
| voiceLevel | 0 to 1 | 0.6 |
| metalStrength | 0 to 1 | 1 |
| model, hint | ReactNode |  |
| onSubmit | (value) => void |  |
| onStop, onVoice, onAttach, onModel | () => void |  |
| actions | { id, label, icon, disabled }[] | [] |
| onAction | (id) => void |  |
| voicePaused | boolean |  |
| defaultVoicePaused | boolean | false |
| onVoicePauseChange | (paused) => void |  |
| animated | boolean | true |

## When to use

- For the Prompt Input composer.

## When not to use

- For a plain field: use Input.

## Accessibility

- A labelled textarea. Listening is shown as text in the field.
- Focus lights the whole ring.
- The plus reports aria-expanded. Closed actions are inert, and each has its label as its name.
- The voice clock is a timer that reads Listening or Voice paused with the time. Pause voice is a toggle button.

## Motion

- The chrome drifts round the ring and swells toward the pointer, settling in about 240 ms.
- A soft light orbits outside the box every 9 s. Focus lights the ring in 160 ms.
- The beam follows voiceLevel. Mono swaps the palette, not the motion. Paused dims it to 35%.
- Actions split out of the plus as droplets in 500 ms with an overshoot, 40 ms apart, and fold back in reverse.
- Loading runs one bright arc every 1.6 s, and the chrome drifts twice as fast.
- With reduced motion, the chrome and the orbit hold still, the beam holds at 60%, and the actions open in place. The clock still counts.