crucıble

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; a ghost pointer keeps it moving when untouched.

oglpro

Installation

CLI

npx shadcn@latest add @crucible/ink

Manual — install dependencies, then copy the source

npm install ogl

Props

PropTypeDefaultDescription
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.
speednumber1Diffusion / billow speed multiplier. 1 = default (very slow), 2 = twice as fast.
intensitynumber1Saturation / opacity of the dye, 0–2. 1 = default. Lower reads as thinner, more dilute ink; higher lets it pool richer and darker.
swirlnumber1Strength 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.
idlebooleantrueIdle autoplay: after ~1.5s with no real pointer, a seeded ghost pointer curls the eddy through the water on a slow drift so it never looks dead in thumbnails and heroes; the real pointer takes over instantly. Never runs under reduced motion.
pausedbooleanFreeze 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.