Ink
Dye blooming through still water: a shared domain-warped fbm curls slow billowing folds while two inks bleed from drifting sources, pooling dense and dissolving into ragged tendrils with delicate luminous fronts, mixing into a pale bloom where they overlap. The pointer curls a soft eddy. Original OGL fragment shader, hard-dithered, DPR-clamped, offscreen-paused, 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/inkManual — install dependencies, then copy the source
npm install oglProps
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | [string, string, string, string] | Four tones: [water, inkA, inkB, bloom]. water is the still dark ground the dye diffuses through (near-black, faintly tinted), inkA and inkB are the two inks bleeding in, and bloom is the pale light that catches on the delicate diffusing fronts and where the two inks overlap. Any hex string. | |
| speed | number | 1 | Diffusion / billow speed multiplier. 1 = default (very slow), 2 = twice as fast. |
| intensity | number | 1 | Saturation / opacity of the dye, 0–2. 1 = default. Lower reads as thinner, more dilute ink; higher lets it pool richer and darker. |
| swirl | number | 1 | Strength of the swirl the pointer injects into the water, 0–1. 0 leaves the ink to billow on its own; 1 lets the cursor curl a soft eddy through it. |
| paused | boolean | Freeze the animation at its current frame. | |
Also accepts all props of React.ComponentPropsWithoutRef<"div"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, pauses offscreen and on hidden tabs, and passes className through.