Bloop Orb
Compact assistant orb with listen, think, and speak states, voice palettes, and audio input.
30.4 KB
•Updated on September 3, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-orb-bloopUsage
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.
Related Components
Powered by