Ferrofluid

About this component

A live WebGL pool of glossy black magnetic fluid in a shallow dish, seen from a low studio camera so the spikes stand in profile. A magnet (the cursor anywhere over it, or an invisible one hovering over the pool when idle) raises a crown of sharp needle spikes on a hexagonal lattice that grow with proximity, lean toward the pull and relax into a smooth liquid dome when it leaves, lit by an overhead key, a strip light and a rim light. Fluid, surface and light colors, pool size, spike density and height, reach, response, gloss and highlight are props. The pull is spring-smoothed so nothing flickers, a still pool stops redrawing, the resolution adapts to the device, and reduced motion holds one settled crown.

Usage

The import and the props worth knowing about, in one place.

import { Ferrofluid } from "@/components/beste/component/ferrofluid";

// As a layer behind content
<section className="relative min-h-[40rem]">
  <Ferrofluid className="absolute inset-0" />
  <div className="relative">...</div>
</section>

<Ferrofluid
  className="min-h-[32rem]"
  surfaceColor="var(--muted)"   // any CSS color, tokens included
  density={0.8}                 // more, finer spikes
  spikeHeight={0.9}             // taller crown
  response={0.3}                // heavier, slower fluid
  idleMagnet={false}            // stays smooth until the cursor comes near
/>

Props

Read from the component's own type, so this cannot drift from what it accepts.

Prop	Type	Default	Description
`fluidColor`	`string`	—	Color of the magnetic fluid. Any CSS color.
`surfaceColor`	`string`	—	Color of the matte surface the dish sits on. Any CSS color, tokens included.
`highlightColor`	`string`	—	Color of the studio lights reflected in the fluid.
`size`	`number`	—	Size of the pool, 0 to 1.
`density`	`number`	—	How many spikes the crown packs in, 0 (few, wide) to 1 (many, fine).
`spikeHeight`	`number`	—	How tall the spikes grow, 0 to 1.
`reach`	`number`	—	How far the magnet's pull reaches across the pool, 0 to 1.
`response`	`number`	—	How quickly the fluid answers the magnet, 0 (slow, heavy) to 1 (quick).
`gloss`	`number`	—	Sharpness of the reflections, 0 (satin) to 1 (mirror).
`highlight`	`number`	—	Brightness of the reflected studio lights, 0 to 1.
`idleMagnet`	`boolean`	—	An invisible magnet drifts over the pool when nobody is pointing.
`interactive`	`boolean`	—	The cursor acts as the magnet.
`paused`	`boolean`	—	Freeze the fluid where it is.
`className`	`string`	—
`children`	`ReactNode`	—

More Media components

View all Media

A model in wide striped trousers leaning on a teal wall