An animated WebGL orb with drifting fluid shading, inspired by ChatGPT's voice mode.
Ambient — the color patches drift left, right, up, down and diagonally on their own, blending and reforming with no interaction required. Honors prefers-reduced-motion by holding a still frame.
Options you can pass to customize this component.
color#1A73F2#FF3B30#F75001#34C759Any hex color for the fluid. The middle and bottom bands are derived from it (a pale tint and the full color), while the top stays white. Defaults to the original blue.
sizenumberDiameter of the orb in pixels. Also drives the canvas resolution (clamped to 2x device pixel ratio).
classNamestringExtra classes merged onto the root element (data-slot="fluid-orb").
npx shadcn add swamimalode07/rare-ui/fluid-orbimport FluidOrb from "@/components/ui/fluid-orb"export function Demo() {return <FluidOrb size={280} color="#F75001" />}
Click the code icon in the top-right corner to view the source code.
Most components here are recreations of great work from around the web. I don't claim to be the original creator - this is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone; if I missed someone, let me know.
1