Tempered
A scroll-scrubbed tempering shader: white-hot amber turbulence at the top of the page cools through ember red into blued violet-steel with oxidation bands — and scrolling back genuinely reheats. GSAP ScrollTrigger drives an original OGL fragment shader, with idle micro-motion, custom phase keyframes, and a static mid-temper frame under reduced motion.
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/temperedManual — install dependencies, then copy the source
npm install ogl gsapProps
| Prop | Type | Default | Description |
|---|---|---|---|
| phases | TemperPhase[] | the tempering sequence: white-hot amber at the top, ember red mid-page, blued violet-steel with oxidation bands at the bottom. Scrolling back up genuinely reheats | Phase keyframes mapping scroll position to color. Interpolated linearly between entries (sorted by at). |
| scrub | number | 0.8 | Scrub smoothing in seconds — how long the shader takes to catch up to the scrollbar (GSAP ScrollTrigger scrub). 0 locks it hard to the wheel. |
| idleMotion | number | 0.5 | Idle micro-motion (0–1): how much the surface keeps shimmering once scrolling stops. 0 freezes dead between scrolls. |
| scroller | string | Element | React.RefObject<HTMLElement | null> | the window, mapped over the full document scroll range | The scroll container whose progress drives the temper. Accepts a selector, element, or ref to an overflow-y-auto container. |
| speed | number | 1 | Idle shimmer speed multiplier (scroll scrubbing is unaffected). |
| intensity | number | 1 | Overall brightness multiplier. |
| heat | number | 1 | Forge heat (0–1): scales glow, bloom, and turbulence energy together. |
| paused | boolean | Freeze the render loop, holding the current frame. | |
| className | string | Extra 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.