Smooth Orb
Audio-reactive fluid WebGL orb. Swap ambient, microphone, or file input, change the texture, and toggle grain.
38.9 KB
•Updated on September 3, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-orb-smoothUsage
Code
import { OrbSmooth } from '@/components/orb/smooth'
export function HeroOrb() {
return <OrbSmooth size={420} audioMode="ambient" grainAnimated />
}Files
| File | Role |
|---|---|
smooth/index.tsx | OrbSmooth WebGPU fluid sim + display |
smooth/sim.wgsl.ts | Splat, advect, pressure, blur passes |
smooth/display.wgsl.ts | Sphere shading, grain, texture mapping |
smooth/audio-analyzer.ts | Mic / <audio> analyser → shader uniforms |
smooth/types.ts | OrbSmoothProps, AudioMode |
API Reference
OrbSmooth
| Prop | Type | Default | Description |
|---|---|---|---|
textureUrl | string | — | Equirect / image mapped onto the orb |
audioMode | ambient|mic|file | ambient | How audio drives the fluid |
audioElement | RefObject<HTMLAudioElement> | — | Required when audioMode is 'file' |
useMicrophone | boolean | false | Legacy mic flag, overridden by audioMode |
animated | boolean | true | Runs the simulation loop |
sphereScale | number | 0.9 | Sphere size in the display pass |
spherePower | number | 1.1 | Limb falloff |
grainOpacity | number | 0 | Film grain mix |
grainAnimated | boolean | true | Wave-drift grain (off = static) |
watercolorStrength | number | 0.5 | Watercolor UV warp (min = 0, max = 1) |
timeScale | number | 1.4 | Simulation speed |
className | string | — | Canvas wrapper class |
Audio modes
Use the demo buttons: Ambient idles the fluid, Mic requests getUserMedia, Audio file binds an <audio> element. Grain and texture are independent of audio.
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