AI Blob

A glowing glass orb that listens, thinks and speaks with your AI

ai-blob-tw

Customize

Microphone

Color 1

Color 2

Color 3

Color 4

Size

400px

Glow

0.80

Rim Width

1.00

Rim Intensity

1.00

Core Size

1.00

Core Intensity

1.00

Glints

1.00

Halo

1.00

Noise Scale

3.0

Wobble

0.00

Speed

1.00

Color Speed

1.00

Reactivity

1.00

Hover Tilt

1.00

Resolution

1.00

Auto VolumeInteractiveIntroPaused

Props

Name	Type	Default	Description
`size`	number	`400`	Width and height of the orb in pixels.
`colors`	string[]	`["#ff006e", "#8338ec", "#3a86ff", "#06ffa5"]`	Two to four colours that flow around the rim.
`state`	"idle" \| "listening" \| "thinking" \| "speaking"	`"idle"`	What the assistant is doing. Listening brightens the rim and halo, thinking spins the colours and pulses the core, speaking swells with the voice.
`volume`	number	`—`	Audio level from 0 to 1 that drives the swell and the core.
`getVolume`	() => number	`—`	Called every frame to read a live audio level (0 to 1), for example the RMS of a Web Audio analyser.
`autoVolume`	boolean	`true`	Simulates a voice while listening or speaking when no volume is given.
`reactivity`	number	`1`	How strongly the volume swells and brightens the orb.
`animationSpeed`	number	`1`	Speed of the inner motion.
`colorSpeed`	number	`1`	Speed at which the colours travel around the rim.
`glowIntensity`	number	`0.8`	Overall brightness of the orb.
`noiseScale`	number	`3`	Detail of the shimmer along the rim.
`innerScale`	number	`1`	Size of the glowing core.
`coreIntensity`	number	`1`	Brightness of the glowing core.
`rimWidth`	number	`1`	Thickness of the bright outline.
`rimIntensity`	number	`1`	Brightness of the coloured rim.
`glints`	number	`1`	Strength of the white highlights on the glass.
`halo`	number	`1`	Size of the soft glow around the orb.
`wobble`	number	`0`	Lets the outline sway like a soft bubble.
`hoverTilt`	number	`1`	How far the orb turns toward the pointer.
`interactive`	boolean	`true`	Tap the orb to make it squish and flare.
`blend`	"auto" \| "glow" \| "ink"	`"auto"`	Glow suits dark pages, ink draws clean colour on light pages. Auto picks from the background behind the orb.
`intro`	boolean	`true`	Pops the orb in with a soft spring.
`paused`	boolean	`false`	Stops the motion. Reduced-motion users get a still orb.
`resolution`	number	`1`	Render resolution multiplier, lower for slower devices.
`ref`	{ tap }	`—`	tap(angle?, strength?) squishes the orb from an angle in degrees.
`className`	string	`—`	Classes for the root element.
`style`	CSSProperties	`—`	Inline styles for the root element.

sizenumber

Width and height of the orb in pixels.

Default400

colorsstring[]

Two to four colours that flow around the rim.

Default["#ff006e", "#8338ec", "#3a86ff", "#06ffa5"]

state"idle" | "listening" | "thinking" | "speaking"

What the assistant is doing. Listening brightens the rim and halo, thinking spins the colours and pulses the core, speaking swells with the voice.

Default"idle"

volumenumber

Audio level from 0 to 1 that drives the swell and the core.

Default—

getVolume() => number

Called every frame to read a live audio level (0 to 1), for example the RMS of a Web Audio analyser.

Default—

autoVolumeboolean

Simulates a voice while listening or speaking when no volume is given.

Defaulttrue

reactivitynumber

How strongly the volume swells and brightens the orb.

Default1

animationSpeednumber

Speed of the inner motion.

Default1

colorSpeednumber

Speed at which the colours travel around the rim.

Default1

glowIntensitynumber

Overall brightness of the orb.

Default0.8

noiseScalenumber

Detail of the shimmer along the rim.

Default3

innerScalenumber

Size of the glowing core.

Default1

coreIntensitynumber

Brightness of the glowing core.

Default1

rimWidthnumber

Thickness of the bright outline.

Default1

rimIntensitynumber

Brightness of the coloured rim.

Default1

glintsnumber

Strength of the white highlights on the glass.

Default1

halonumber

Size of the soft glow around the orb.

Default1

wobblenumber

Lets the outline sway like a soft bubble.

Default0

hoverTiltnumber

How far the orb turns toward the pointer.

Default1

interactiveboolean

Tap the orb to make it squish and flare.

Defaulttrue

blend"auto" | "glow" | "ink"

Glow suits dark pages, ink draws clean colour on light pages. Auto picks from the background behind the orb.

Default"auto"

introboolean

Pops the orb in with a soft spring.

Defaulttrue

pausedboolean

Stops the motion. Reduced-motion users get a still orb.

Defaultfalse

resolutionnumber

Render resolution multiplier, lower for slower devices.

Default1

ref{ tap }

tap(angle?, strength?) squishes the orb from an angle in degrees.

Default—

classNamestring

Classes for the root element.

Default—

styleCSSProperties

Inline styles for the root element.

Default—

Name

Type

Default

Description

size

number

400

Width and height of the orb in pixels.

colors

string[]

["#ff006e", "#8338ec", "#3a86ff", "#06ffa5"]

Two to four colours that flow around the rim.

state

"idle" | "listening" | "thinking" | "speaking"

"idle"

What the assistant is doing. Listening brightens the rim and halo, thinking spins the colours and pulses the core, speaking swells with the voice.

volume

number

—

Audio level from 0 to 1 that drives the swell and the core.

getVolume

() => number

—

Called every frame to read a live audio level (0 to 1), for example the RMS of a Web Audio analyser.

autoVolume

boolean

true

Simulates a voice while listening or speaking when no volume is given.

reactivity

number

1

How strongly the volume swells and brightens the orb.

animationSpeed

number

1

Speed of the inner motion.

colorSpeed

number

1

Speed at which the colours travel around the rim.

glowIntensity

number

0.8

Overall brightness of the orb.

noiseScale

number

3

Detail of the shimmer along the rim.

innerScale

number

1

Size of the glowing core.

coreIntensity

number

1

Brightness of the glowing core.

rimWidth

number

1

Thickness of the bright outline.

rimIntensity

number

1

Brightness of the coloured rim.

glints

number

1

Strength of the white highlights on the glass.

halo

number

1

Size of the soft glow around the orb.

wobble

number

0

Lets the outline sway like a soft bubble.

hoverTilt

number

1

How far the orb turns toward the pointer.

interactive

boolean

true

Tap the orb to make it squish and flare.

blend

"auto" | "glow" | "ink"

"auto"

Glow suits dark pages, ink draws clean colour on light pages. Auto picks from the background behind the orb.

intro

boolean

true

Pops the orb in with a soft spring.

paused

boolean

false

Stops the motion. Reduced-motion users get a still orb.

resolution

number

1

Render resolution multiplier, lower for slower devices.

ref

{ tap }

—

tap(angle?, strength?) squishes the orb from an angle in degrees.

className

string

—

Classes for the root element.

style

CSSProperties

—

Inline styles for the root element.