Fluid Orb
betaAn ambient WebGL orb of drifting fluid colour — patches that wander, merge and re-form in bands derived from one colour — with a CSS gradient fallback.
- AI
- 1 file
- 1 npm package
- Accessibility notes
- Renders with WebGL
pnpm dlx @dowel-ui/cli add fluid-orbnpm packages installed: class-variance-authority.
import { FluidOrb } from "@/components/ui/fluid-orb";Default
Colours
Glow
Sizes
With Status
<FluidOrb>
| Prop | Type | Default |
|---|---|---|
colorAny CSS colour for the fluid — a token, var(), color-mix() or an OKLCH value. The pale middle band and the near-white crown are derived from it. Defaults to the theme's primary. | string | "var(--color-primary)" |
glow | boolean | — |
sizeDiameter in pixels. | number | 160 |
Plus every attribute of <div> except children, color.
Decorative: aria-hidden unless given aria-label or aria-labelledby, when it becomes role="img". It reports no state, so pair it with a text status wherever it stands for an assistant. Under reduced motion (or --motion-scale at zero) it holds a still frame. Rendering pauses off screen and in hidden tabs. Without WebGL, or after a lost context, a static CSS gradient orb stands in.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes