Rare UI

Components

Fluid Orb

An animated WebGL orb with drifting fluid shading, inspired by ChatGPT's voice mode.

Interaction Type

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.

Props

Options you can pass to customize this component.

Prop

Type

Description

color

#1A73F2#FF3B30#F75001#34C759

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

Diameter of the orb in pixels. Also drives the canvas resolution (clamped to 2x device pixel ratio).

className

string

Extra classes merged onto the root element (data-slot="fluid-orb").

Installation

npx shadcn@latest add swamimalode07/rare-ui/fluid-orb

How to use

import FluidOrb from "@/components/ui/fluid-orb"

export function Demo() {
  return <FluidOrb size={280} color="#F75001" />
}

Source Code

Click the code icon in the top-right corner to view the source code.

Keep in mind

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.

Credits

•Inspired by chatgpt.com

Contact

Found a bug or issue? Feel free to drop a DM.

License & Usage

•Free to use and modify in both personal and commercial projects.
•Attribution to Rare UI is appreciated when using a component.
•Please don't resell the components as your own kit.

Fluid Orb