FluidCursorAdvanced

WebGL fluid simulation confined to a parent container. Unlike FluidCursor, it fills its parent element instead of covering the full viewport.

Preview

Move your cursor here

Pick a container

Click any card to activate the fluid inside it — the simulation stays confined to that container. Click again to deactivate.

Autonomous mode

Combine autoSplat with interactive={false} for a fluid background that animates without any cursor interaction — great for mobile and above-the-fold heroes.

No cursor needed — works on mobile too

Splat on mount

splatOnMount fires 3–5 random splats the moment the component mounts — useful for an immediate "alive" feeling.

Move your cursor to interact

Usage

<script>
  import { FluidCursorAdvanced } from 'fancy-ui';
</script>

<!-- Parent must be relative + overflow-hidden -->
<div class="relative h-64 overflow-hidden rounded-xl">
  <FluidCursorAdvanced
    fluidColors={["#6366f1", "#ec4899", "#06b6d4"]}
    colorIntensity={0.5}
    backColor={{ r: 0.04, g: 0.04, b: 0.08 }}
  />
</div>

Props

Prop	Type	Default	Description
fluidColor	string	—	Fixed fluid color (hex). Disables random cycling.
fluidColors	string[]	—	Palette of hex colors to cycle through on each splat.
colorIntensity	number	0.15	Intensity multiplier applied to fluid colors (0–1).
backColor	{ r, g, b } \| string	{ r: 0.5, g: 0, b: 0 }	Background color — RGB object or hex string.
densityDissipation	number	3.5	How quickly the dye fades.
velocityDissipation	number	2	How quickly the velocity dissipates.
curl	number	3	Curl/vorticity strength.
splatRadius	number	0.2	Size of the splat effect.
splatForce	number	6000	Force of the splat effect.
shading	boolean	true	Enable lighting/shading effect.
transparent	boolean	true	Enable transparent background.
interactive	boolean	true	When `false`, removes all mouse/touch listeners. Combine with `autoSplat` for ambient animations.
autoSplat	boolean	false	Fires random splats at a fixed interval without user interaction.
autoSplatInterval	number	1500	Interval in ms between auto splats.
splatOnMount	boolean	false	Fires 3–5 random splats when the component mounts.
pauseWhenHidden	boolean	true	Pauses the animation loop when the canvas is scrolled out of view.

Credits

Inspired by Inspira UI