Bloop Orb

Compact assistant orb with listen, think, and speak states, voice palettes, and audio input.

28.5 KB

•

Updated on September 3, 2026

Installation

Bash

pnpm dlx shadcn@latest add @spaceui/components-orb-bloop

Usage

Code

import { OrbBloop } from '@/components/orb/bloop'
import { BLOOP_PALETTES } from '@/components/orb/bloop-palettes'

export default function SpaceUI() {
  const palette = BLOOP_PALETTES.BLUE

  return (
    <OrbBloop
      size={220}
      audioMode="ambient"
      state="speak"
      bloopColorMain={palette.main}
      bloopColorLow={palette.low}
      bloopColorMid={palette.mid}
      bloopColorHigh={palette.high}
    />
  )
}

Files

File	Role
`bloop/index.tsx`	WebGL2 bloop shader, state springs, audio hook
`bloop/palettes.ts`	`BLOOP_PALETTES` (Cove, Sky, Juniper, Ember, Breeze)
`orb/smooth/audio-analyzer.ts`	Shared analyser (registry dependency)

API Reference

OrbBloop

Prop	Type	Default	Description
`size`	number	144	CSS pixel size of the canvas
`audioMode`	ambient\|mic\|file	ambient	Audio driver
`audioElement`	RefObject<HTMLAudioElement>	—	File mode source
`state`	idle\|listen\|think\|speak	idle	Active pose
`bloopColorMain`	[number, number, number]	blue	Main fill, 0–1 RGB
`bloopColorLow`	[number, number, number]	—	Low band
`bloopColorMid`	[number, number, number]	—	Mid band
`bloopColorHigh`	[number, number, number]	—	High band
`watercolorStrength`	number	0.5	Watercolor warp amount (min = 0, max = 1)
`watercolorAnimated`	boolean	false	Drift the watercolor field

Drive states from your assistant FSM. The demo buttons set one state at a time.

Keep in mind

MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.

Smooth Orb

Bubble Background

On This Page

Installation Usage Files API Reference OrbBloop Related Components

vgpu