Components that
make you stand out.

React components, animations, and effects. Preview them, make them yours, and bring them into your next project.

Liquid Glass Orb

A liquid glass orb for AI interfaces, with animated agent states, voice response, customizable glass material, and six color palettes.

Controls

Agent

State

Paused

Entrance animation

Colors

Preset

Color distribution

Preserve whites

Base color

Primary color

Secondary color

Accent color

Motion

Flow type

Speed

Distortion

Animated distortion

Cluster count

Cluster intensity

Cluster size

Pattern scale

Spot size

Rotation (deg)

Seed

Appearance

Size (px)

Softness

Glass

Relief

Refraction

Roughness

Reflection

Caustics

Dispersion

Grain

Grain style

Grain amount

Grain size (px)

Properties

37 properties

Property	Type	Default	Description
`preset`	`LiquidGlassOrbPreset`	`monochrome`	Presets apply their colors and default cluster count: 7.2 for Tide and Monochrome, 3 for the others. Azure, Indigo, Mint, Coral, Scarlet and Fuchsia preserve the current seed and playback position. Explicit props override preset values.
`state`	`LiquidGlassOrbState`	`idle`	idle, listening, thinking, searching, speaking, success or error. Idle uses the original fluid glass distortion; Speaking adds a subtle voice speed boost, renews local organic wrinkles and pulses the circle. Thinking offers a two-arm spiral, concentric ripples or curved scanning folds across the entire orb, selected with thinkingAnimation. Searching offers a lens on a 45-degree tilted oval that accelerates again before each lap ends with the saved custom Bezier motion, or a small lens that moves continuously through searchingAnimation. The lens keeps moving and joins each lap with continuous velocity. Error holds a stationary cross. Other states use recognizable glass patterns with fixed material settings.
`audioLevel`	`number`	`0.55`	Normalized microphone or assistant output envelope, 0–1. Active during listening and speaking.
`getAudioLevel`	`() => number`	`—`	Sampled once per visible frame. Feed live audio without rendering React for each audio sample.
`ref`	`LiquidGlassOrbHandle`	`—`	setAudioLevel(level) updates the voice envelope; reset() restarts the animation.
`animateEntrance`	`boolean`	`true`	Grow from 8% to full size with power4.out over 1.2 seconds once the first frame is ready and visible. Set false to show the orb immediately. Respects reduced motion.
`thinkingAnimation`	`select`	`ripples`	Glass pattern used during Thinking: a two-arm spiral, concentric ripples, or curved scanning folds. Changes blend smoothly.
`searchingAnimation`	`select`	`lens`	Glass pattern used during Searching: Lens overlaps power3.out laps, starts picking up speed again at two o'clock before each lap ends with continuous forward motion; Small lens glides continuously along a rounded path with gentle changes in pace. Changes blend smoothly.
`preserveWhites`	`boolean`	`true`	Keep white and near-white palette areas bright and neutral under the glass. Turn off to restore the previous color treatment.
`intensity`	`number`	`1`	Strength of the voice response in Listening and Speaking. Changes microphone response, voice-driven size and subtle wrinkle renewal without scaling state-icon relief.
`speed`	`number`	`1.5`	Speed of the flowing colors. Zero holds the current frame.
`flowType`	`select`	`drift`	Choose a seamless morphing cycle (Drift), a circulating vortex, or rolling waves.
`distortion`	`number`	`0.8`	Bend the glass surface into flowing folds and organic reliefs. Supports values from 0 to 8.
`animateDistortion`	`boolean`	`true`	Keep the distortion points moving. Turn off to fix them at their current positions while colors continue flowing.
`clusterCount`	`number`	`7.2`	Density of flowing glass clusters. Defaults to 7.2 for Tide and Monochrome, and 3 for all other presets. Higher values create more, smaller reliefs; zero disables the additional cluster field. Supported range: 0 to 64.
`clusterIntensity`	`number`	`3`	How strongly the clusters contribute to the glass relief and flowing folds. Zero removes it. Supported range: 0 to 12.
`clusterSize`	`number`	`22.5`	Scale the glass clusters while keeping folds distributed across the surface. Supported range: 0.25 to 32.
`scale`	`number`	`0.23`	Higher values produce smaller, more numerous color pools.
`spotSize`	`number`	`1.15`	Resize color patches within the flow. Higher values make larger patches; pattern scale and distortion stay unchanged.
`rotation`	`number`	`0`	Rotate the gradient composition.
`seed`	`number`	`145`	A reproducible variation of the gradient composition.
`size`	`number`	`250`	Maximum width for a bounded shape. Background fills its parent container.
`softness`	`number`	`0.31`	Soften the shoulders of the raised glass surface.
`relief`	`number`	`2.94`	Height of the glass relief. Zero produces a flat surface; higher values deepen the rounded forms and their reflections.
`refraction`	`number`	`0.65`	How strongly the raised glass displaces the flowing colors visible behind it.
`roughness`	`number`	`0`	Low values create narrow polished reflections. Higher values spread the highlights into a frosted finish.
`reflection`	`number`	`1.3`	Strength of the reflected studio lights. One preserves the original glass finish; zero removes reflections without changing the flow.
`caustics`	`number`	`0`	Add light concentrations transmitted through the relief. Zero keeps the original finish; higher values reveal brighter flowing caustics.
`dispersion`	`number`	`1`	Separate refracted red and blue color channels along the glass folds. Zero keeps the original colors.
`grain`	`number`	`0.3`	Strength of the fine grain. Zero removes it completely.
`grainMode`	`select`	`fine`	Select fine motes, larger flecks, rough texture, or monochrome noise.
`grainSize`	`number`	`1`	Grain size in CSS pixels, consistent across screen densities.
`colorDistribution`	`number`	`0`	Left: more color. Right: more light background. Zero uses the default distribution. Uses your Background color.
`baseColor`	`color`	`#ffffff`	Color used by the procedural gradient.
`colorA`	`color`	`#000000`	Color used by the procedural gradient.
`colorB`	`color`	`#4d4d4d`	Color used by the procedural gradient.
`colorC`	`color`	`#a9a9a9`	Color used by the procedural gradient.

Usage

import { LiquidGlassOrb } from './components/liquid-glass-orb';

export function Example() {
  // Drive state from your agent; audioLevel is a normalized 0–1 voice envelope.
  return <LiquidGlassOrb
    baseColor={"#ffffff"}
    colorA={"#000000"}
    colorB={"#4d4d4d"}
    colorC={"#a9a9a9"}
    seed={145}
    startTime={18}
    speed={1.5}
    distortion={0.8}
    clusterCount={7.2}
    clusterIntensity={3}
    clusterSize={22.5}
    scale={0.23}
    spotSize={1.15}
    rotation={0}
    softness={0.31}
    relief={2.94}
    refraction={0.65}
    roughness={0}
    reflection={1.3}
    caustics={0}
    dispersion={1}
    colorDistribution={0}
    grain={0.3}
    grainSize={1}
    paused={false}
    animateDistortion={true}
    grainMode={"fine"}
    flowType={"drift"}
    state={"idle"}
    thinkingAnimation={"ripples"}
    searchingAnimation={"lens"}
    preserveWhites={true}
    animateEntrance={true}
    size={250}
    audioLevel={0.55}
  />;
}