Fluid Orb
An animated WebGL orb with drifting fluid shading, inspired by ChatGPT's voice mode.
Loading component source...
Installation
pnpm dlx shadcn@latest add mox/mox-ui/fluid-orbRun this command from your project directory to add the component and its dependencies.
- 1
Install the packages
pnpm add clsx tailwind-merge - 2
Add the utility file
lib/utils.tsimport { clsx, type ClassValue } from "clsx";import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs));} - 3
Copy and paste the code into your project
Loading source⦠- 4
Update the import paths to match your project
Point
@/lib/utilsto your utility file if your path aliases differ.
Usage
import FluidOrb from "@/components/ui/fluid-orb"
export function Demo() { return <FluidOrb size={280} color="#F75001" />}Options
Pick a value to see the prop you would pass. Defaults are left out.
<FluidOrb />Props
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | Default: "#1A73F2" | Any 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. |
size | number | Default: 240 | Diameter of the orb in pixels. |
className | string | Default: - | Extra classes merged onto the root element (data-slot="fluid-orb"). |
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.
Credits and license
Inspired by chatgpt.com
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.
- Free to use and modify in both personal and commercial projects.
- Attribution to Mox UI is appreciated when using a component.
- Please don't resell the components as your own kit.