A dark, glossy liquid-metal pool whose blobs rise toward the pointer and grow a crown of magnetic spikes, shaded with specular highlights.
Sound you can see
A speaker filled with living metal. Ships in March.
npx shadcn@latest add https://hyperblur.dev/r/bg-ferrofluid.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-ferrofluid.tsx.
import { BgFerrofluid } from "@/components/hyperblur/bg-ferrofluid"
<div className="relative h-96"><BgFerrofluid><h1>Magnetic</h1></BgFerrofluid></div>| Prop | Type | Default | Description |
|---|---|---|---|
| accent | string | "#2f7bff" | Rim light and glow color reflected on the liquid. Hex color. |
| background | string | "#060709" | Color behind the liquid. Hex color. |
| spikes | number | 12 | Number of spikes around the pointer, from 3 to 24. |
| size | number | 1 | Scale of the blobs and spikes relative to the container. |
| speed | number | 1 | Speed of the idle motion and the spike pulse. |
| children | ReactNode | Content rendered on top of the surface. |