Browse components
Splash Cursor
Real-time fluid ink that swirls off the cursor in shifting colors. A compact WebGL2 stable-fluids solver, scoped to its container.
Splash Cursor
Installation
npx shadcn@latest add @glint-ui/splash-cursorFirst 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/splash-cursor.json
Usage
import { SplashCursor } from "@/components/ui/splash-cursor";
<div className="relative h-96">
<SplashCursor />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| simResolution | number | 128 | Velocity grid size on the shorter side. Higher is finer and slower. |
| dyeResolution | number | 512 | Ink texture size on the shorter side. |
| dissipation | number | 0.8 | How quickly ink fades, per second. |
| velocityDissipation | number | 0.4 | How quickly motion settles, per second. |
| curl | number | 20 | How much the ink curls into swirls. |
| splatRadius | number | 0.25 | Splat radius. |
| force | number | 6000 | How hard cursor motion pushes the ink. |
| idle | boolean | true | Throw random splashes while the cursor is away. |
| className | string | — | Extra classes for the root element. |