Liquid Ring

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

FreeWeb and MobileMotion

npx shadcn add @fetaui/liquid-ring

Playground

rest

actions

voice

voice paused

voice mono

State

Icons animation

Motion

Installation

Terminal· bash

1 npx shadcn add @fetaui/liquid-ring

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.

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.

Loops pause off screen through a shared IntersectionObserver.
The beam follows voiceLevel, so update it at a sensible rate, not every audio sample.
The voice clock is a 1 s timer that only runs while listening and not paused.

Give your coding assistant the Markdown reference instead of screenshots.

Import LiquidRing. Props: label, placeholder, defaultValue, state, voiceColorVariant, voiceLevel, metalStrength, model, hint, actions, voicePaused, defaultVoicePaused.
Callbacks: onSubmit, onStop, onVoice, onAttach, onModel, onAction, onVoicePauseChange. With actions, the plus opens the droplet fan and onAttach is not called.
state is rest, voice or loading, and you set it. In voice, Send calls onSubmit and Stop listening calls onStop. While loading, the button and Esc call onStop. The demo has no model or audio behind it.