Fluid Orb React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Usage

Import FluidOrb from @/components/ui/fluid-orb.

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

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

Props

• colordefault "#1A73F2"
  string

  Any CSS color for the fluid: hex, rgb(), hsl(), oklch(), a name or var(--token). The middle and bottom bands are derived from it (a pale tint and the full color), while the top takes highlightColor. Anything the browser cannot parse falls back to the original blue.

• sizedefault 240
  number

  Diameter of the orb in pixels. The canvas renders at up to 2x device pixel ratio, so it stays crisp at any size.

• highlightColordefault "#FCFFFF"
  string

  Any CSS color for the top of the orb, where the fluid thins out. The pale middle band is mixed from it and color. Anything the browser cannot parse falls back to near white.

• turbulencedefault 0.8
  number

  How far the noise pushes the bands into each other. 0 gives smooth horizontal bands, higher values give deeper, more tangled waves.

• speeddefault 1
  number

  Playback rate of the drift. 1 is the original pace, 0 holds the current frame, and changing it mid-flight bends the motion without a jump.

• pauseddefault false
  boolean

  Freezes the drift on the current frame; color, size and turbulence still update. Unpausing picks up where it stopped.

• className
  string

  Extra classes merged onto the root element (data-slot="fluid-orb"). Other div props are spread onto it too.

• style
  React.CSSProperties

  Inline styles merged after the size, so a width or height here overrides the size prop.

FAQ

Used in

More React AI components