Eddy
A WebGL fluid-simulation cursor trail: pointer strokes inject ink into a curl-noise-advected flow field (ping-pong framebuffers) that swirls, marbles, and slowly dissipates, paling as it disperses. Deep ultramarine on a transparent canvas, scoped to its container, coarse-pointer- and reduced-motion-safe.
oglpro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/eddyManual — install dependencies, then copy the source
npm install oglProps
| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | deep ultramarine | Ink color (hex). The dye blooms saturated at the core and desaturates toward a pale wash as it disperses. |
| intensity | number | Dye opacity multiplier, 0–1-ish. 1 = default. | |
| dissipation | number | 0.55 | Fraction of dye kept after one second, 0–1. Lower fades faster. |
| radius | number | 0.11 | Splat radius as a fraction of the container's height. |
| swirl | number | How strongly the ink curls on itself. 1 = default. | |
| global | boolean | Attach to the whole viewport instead of the nearest containing element. Off by default — Eddy is scoped to its parent (place it inside a relative container) so ink never flows page-wide unless you opt in. | |
| paused | boolean | Freeze the simulation, holding the current frame. | |
| className | string | Extra classes for the wrapper. Positioned absolute inset-0. |
Honors prefers-reduced-motion with a designed static fallback, pauses offscreen and on hidden tabs, and passes className through.