Getting Started
Scroll Animations
Text Animations
Hover & Cursor
Sliders & Carousels
Galleries & Grids
Menus & Navigation
Preloaders & Intros
Page Transitions
3D & WebGL
import { FluidCursorCanvas } from "@/registry/tween/fluid-cursor-canvas"
export function FluidCursorCanvasDemo() {
return <FluidCursorCanvas />
}
import { FluidCursorCanvas } from "@/components/ui/fluid-cursor-canvas"<FluidCursorCanvas
logo="Ondaline"
headline={["Motion Studio For", "Brands In Flux", "Never At Rest"]}
/>A Three.js orthographic full-screen quad runs a Navier–Stokes style fluid solver across ping-pong render targets: curl and vorticity confinement, divergence, a Jacobi pressure solve, gradient subtraction, then velocity and dye advection. Cursor movement injects velocity and white dye "splats"; a display pass thresholds the dye into ink that's drawn over the hero with mix-blend-mode: difference, so the headline inverts wherever the fluid flows.
The renderer is sized from the host element and kept in sync with a ResizeObserver; pointer and touch listeners are bound to the component (never window) and mapped to local coordinates. WebGL context creation is wrapped in a guard, and on unmount every render target, material, geometry and the renderer are disposed and the animation loop cancelled. When prefers-reduced-motion: reduce is set, the simulation never starts and the static hero is shown.
| Prop | Type | Default | Description |
|---|---|---|---|
logo | string | "Ondaline" | Brand text in the nav, next to a wave mark. |
navLinks | { label, href }[] | 4 defaults | Nav links. |
headline | [node, node, node] | 3 defaults | Three headline lines (staggered alignment). |
background | string | "#ffffff" | Hero background color. |
foreground | string | "#000000" | Hero text color. |
inkColor | string | "#ffffff" | Fluid ink color (blended with difference). |
curl | number | 50 | Vorticity confinement strength. |
forceStrength | number | 8.5 | How hard pointer motion pushes the fluid. |
splatRadius | number | 0.3 | Radius of each injected dye splat. |
className | string | — | Extra classes on the outer container. |