Browse components
Ferrofluid
A glossy black ferrofluid blob whose spikes rise toward the cursor like it is chasing a magnet.
Ferrofluid
Installation
npx shadcn@latest add @glint-ui/ferrofluidFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/ferrofluid.json
Usage
import { Ferrofluid } from "@/components/ui/ferrofluid";
<div className="relative h-96">
<Ferrofluid color="#7c6cff" spikes={28} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#7c6cff" | Rim light and glow color. |
| spikes | number | 28 | Number of spikes. |
| spikeLength | number | 1 | Spike length multiplier. |
| size | number | 1 | Blob size. |
| speed | number | 1 | Animation speed. |
| className | string | — | Extra classes for the root element. |