FluidBackground
<FluidBackground>CSS ModulesPointer-driven iridescent liquid-ink trails using native Canvas 2D. Fills any container, stays behind children, stops rendering when idle — no WebGL. Parent controls background (canvas is transparent by default).
InstallationColoxo CLI
npx coloxo add fluid-backgroundES Module ImportPlayground / npm package
import { FluidBackground } from '@coloxo/ui/visuals';1. Quick demo
Move the pointer over the panel. For the full hero, controls, and variants, open the Blocks page.
Liquid ink, Canvas 2D
Parent paints the midnight background. Idle animation stops automatically.
2. Blocks showcase
See the composed hero, live controls, card, and banner examples on the Blocks page.
3. Props
| Name | Type | Default | Description |
|---|---|---|---|
| colors | string[] | — | Trail palette (smoothly interpolated CSS colors). |
| trigger | "hover" | "always" | hover | Inject trails while the pointer moves inside the container. |
| intensity | number | 0.7 | Stroke strength (0–1). |
| trailPersistence | number | 0.65 | How long trails linger (0–1). |
| quality | "low" | "medium" | "high" | medium | Internal canvas resolution scale. |
| disabled | boolean | false | Disable trails and animation. |
| transparent | boolean | true | Alpha-cleared canvas so the parent controls background. false fills a midnight tint on the canvas itself. |
| respectReducedMotion | boolean | true | Honor prefers-reduced-motion. |