crucıble

Molten

The signature pro background: a viscous molten-bronze shader with amber crest highlights, ember-red troughs, a slow violet iridescence sweep, and a cursor heat-welt that swells the metal. Original OGL fragment shader, offscreen-paused and reduced-motion-safe.

oglpro

Installation

CLI

npx shadcn@latest add @crucible/molten

Manual — install dependencies, then copy the source

npm install ogl

Props

PropTypeDefaultDescription
colors[string, string, string]the Crucible forge paletteThree forge tones: [crest, trough, iridescence]. Amber catches the wave crests, ember red pools in the troughs, violet slides across the slopes as tempering color. Any hex strings.
speednumber1Flow speed multiplier. 1 = the default viscous crawl.
heatnumber0.6Heat, 0–1. Scales glow, saturation, and motion energy together: 0 is a cooling, near-set pour; 1 is white-hot and restless.
amplitudenumber1Wave relief multiplier — how sculpted the surface reads.
scalenumber1Wave frequency multiplier — higher packs more folds in.
weltnumber0.75Cursor heat-welt strength, 0–1. The surface swells and brightens under the pointer, like metal prodded while soft — a welt, not a ripple. 0 disables.
pausedbooleanFreeze the animation, holding the current frame.
onReady() => voidFired once the shader's first frame has rendered (for fade-in on load).
classNamestringExtra classes for the wrapper. Positioned absolute inset-0 -z-10.

Honors prefers-reduced-motion with a designed static fallback, pauses offscreen and on hidden tabs, and passes className through.