Components

An audio-reactive furnace: a horizon coal bed whose glow and flame-lick height follow amplitude, with bass strikes hurling ember volleys upward and treble adding spark flicker. Degrades to a gently breathing coal bed without audio — never black. Mic capture only behind an explicit user gesture, with full AudioContext and GL teardown on unmount.

A falling-spark background: steep, hot streaks decelerate and die mid-air in an extinguish flicker, with the occasional spark forking into a second briefer ember. Pure CSS, seeded PRNG for deterministic spawn layout, honors prefers-reduced-motion.

Crucible's signature aurora: ribboned bands with a moving metallic sheen on a near-black field, in molten forge tones. Original OGL fragment shader, offscreen-paused and reduced-motion-safe.

A physics pit of molten-metal spheres that tumble in and settle under a heat glow. Instanced rigid bodies, bloom, pointer stirring, offscreen-paused, and reduced-motion-safe.

A slow-drifting gradient mesh background. Pure CSS, zero dependencies, SSR-safe, honors prefers-reduced-motion.

A field of glowing embers rising from below in molten forge tones, each with its own phase, flicker, wind drift and color ramp; the cursor stirs a gentle updraft. Original OGL fragment shader, offscreen-paused and reduced-motion-safe.

An iron-filing field: a grid of short segments aligning to a slow magnetic-dipole field when idle and bending toward the cursor, warming from gray-violet steel to molten amber. Original OGL fragment shader, one draw call, offscreen-paused and reduced-motion-safe.

A foundry sky: three parallax layers of spark-stars in warm white, amber, and rare red over nebula smoke lit from below in ember and violet, crossed by occasional downward-falling sparks with gravity-bent trails. Mouse and scroll parallax, offscreen-paused, reduced-motion-safe.

An interactive dot grid: rivet-head dots warm violet → ember red → amber as the cursor approaches, with a configurable falloff curve. Freezes to a static, gently warmed frame under prefers-reduced-motion.

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.

A synthwave perspective grid reimagined as a forge floor: a near-black plane receding to the horizon with ember-red scrolling grid lines, a molten-amber furnace glow, and an optional slit-scanned horizon sun. Pure CSS, SSR-safe, honors prefers-reduced-motion.

Animated film-grain / noise overlay: fine, warm-biased metal-dust speckle that blends over any content via low opacity and mix-blend-mode, with an fps throttle for a slow, smoldering look.

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.

Text that resolves from a soft blur into sharp focus, staggered by word or character, when it scrolls into view. Falls back to a fade under reduced motion.

Characters churn through scrambled forge-rune glyphs before quenching into the final text, one at a time. Triggerable on mount, hover, or scroll into view; resolves instantly under reduced motion.

Masked line, word, or character reveal that draws text clear of hiding as it scrolls into view, each segment trailing a molten-amber edge glow along its baseline.

A word slot that cycles by smelting — the outgoing word sags through a bright amber heat-blur while the incoming word solidifies from the same molten mass, with a hairline violet underline that stretches to each new width like drawn wire.

Text glitches with ember-red and deep-violet channel ghosts sheared apart by jump-cut clip-path slices, sparking at each shear line. Hover, continuous, or timed-interval triggers; freezes static under reduced motion.

A metallic light sweep crosses glyphs on a deliberate slow interval — a white-hot core edged in molten amber and ember red over a brushed-bronze base. Pure CSS, driven by an animated @property.

Variable-font text where each glyph swells in weight and gains a faint amber glow as the cursor nears, under a steep gaussian falloff — the pointer reads as a heat source. Static mid-weight on touch and under reduced motion.

A count-up number built from odometer-style digit drums that spin in glowing amber and cool to white as they seat, with a brief ember-red underline flare on settle. Locale and currency aware via Intl.NumberFormat.

A pixel-dissolve card: on hover or click the surface divides into a grid of cells that burn off as slag — each flashes amber, shrinks and drifts up as an ember, with the odd seeded red spark — then the second face condenses back from violet-tinged smoke. Keyboard-operable, instant crossfade under reduced motion.

A pointer-tracked 3D tilt card with spring-damped rotation and a hard-edged amber-to-violet glare streak that sweeps the surface like oil on hot steel. Tilt disables on touch and under reduced motion, leaving a static subtle glare.

An animated conic-gradient border — a white-hot filament head trailing an amber-to-red tail that cools and desaturates, leaving a faint violet oxidation trace. Pure CSS @property animation, zero JS, zero dependencies.

A scramble-reveal card: churning angular ember-red glyphs on near-black, with a soft-edged diamond aperture that follows the cursor and heats glyphs at its center to molten amber. A static title sits on top regardless of hover, and keyboard focus opens the aperture dead-center.

A responsive bento layout primitive — IngotGrid and IngotCell compose column/row spans into magazine-style tiles with beveled steel borders that heat amber on hover while sibling cells dim.

A cursor-following radial spotlight card — an amber-cored, ember-rimmed glow that breathes gently and heats the nearest border edge as if the frame were being torched. Pure CSS, works with arbitrary children.

A magnetic button with the heft of forged iron — it leans toward the cursor with damped spring lag, snaps back elastically on exit, and presses like an anvil strike: sharp compression, slow spring recovery, hairline amber flash at the base edge.

An animated gradient border cycling amber to ember red to deep violet, like electroplating in progress. Hover accelerates the rotation and thickens the ring by a pixel. Pure CSS via a masked conic gradient.

A click ripple that expands from the exact point of contact, like hot metal hitting water: a thin shockwave, a briefly desaturated cooled core, and ejected spark particles. Keyboard activation ripples from center.

A shimmer-sweep button. A light periodically crosses the face and brightens the rim like a heat pass, cooling through an ember afterglow back to matte. Pure CSS, zero dependencies.

A light beam traveling the border in a continuous loop like a welding arc: a blinding head with a molten drip-orange tail, corner sparks, and a fading heat discoloration. Pure CSS, corner-radius aware via offset-path.

A dock whose icons magnify under the cursor with wave falloff to neighbors on spring physics — the swelling icon heats with an amber glow, neighbors catch a dim red spill, and a warm reflection tracks the cursor across the plate. Keyboard focus magnifies like hover; coarse pointers get plain tap targets.

Animated tabs with a shared-layout sliding pill indicator that glows amber in transit and settles with a violet hairline top edge. Full roving-tabindex keyboard support with arrow keys, Home/End, and correct tablist/tab/tabpanel roles.

A floating pill navbar — a crucible rim of near-black metal with a violet-tinted blur — that hides on scroll down and reveals on scroll up. Scroll-velocity aware, and never hides while any child has keyboard focus.

Gooey tabs whose active indicator is a bead of molten solder: on selection it stretches toward the target through an SVG gooey filter, the connective neck thins and breaks with glowing droplets that fall and extinguish, then the bead quenches to dark metal with a violet sheen and mirror-amber core. Full tablist semantics with arrow-key navigation.

A cursor spark trail: cinders shed off the pointer white-amber, fall under gravity while cooling through red to violet-gray ash, and fast strokes throw proportionally more — with the occasional heavy ember that bounces once on an invisible floor. Scoped to its container by default, auto-disabled on coarse pointers and under reduced motion.

A target-bracket cursor: four tempered-steel corner brackets with amber inner edges ride the pointer, then snap to frame any element matching a selector with an overshoot-then-bite clamp, a single ember spark at each corner on contact, and a hairline red frame while locked. Scoped or global, auto-disabled on coarse pointers.

A spring-smoothed cursor follower: a bead of molten metal that stretches into a teardrop at speed and cools from amber to violet at rest. Scoped to its container by default, opt into page-wide with `global`, auto-disabled on coarse pointers, and scales up over [data-cursor-target] elements.

An infinite marquee whose speed and skew react to scroll velocity, damped through a spring. Stamped-steel outline text fills with molten amber past a velocity threshold.

A scroll-scrubbed container rotator with a forged-slab face: a beveled gunmetal plate starts tilted back in 3D perspective and rotates flat while scaling up as it scrolls through the viewport, header text traveling in coordinated motion, amber edge-light burning at max tilt and dimming upright, and a reflection band sliding down the plate face with the angle.

A vertical tracing beam that draws itself along your content as the user scrolls, with a glowing amber-to-violet head riding the tip.

A composable in-view reveal wrapper with fade/slide/scale/blur presets and staggered children. Default melt preset rises with an amber under-glow, like surfacing from the forge.

Four metallic CSS spinners — ring, dots-orbit, segmented, dual-ring — selected by variant. currentColor-driven, zero dependencies, gentle opacity pulse under reduced motion.

A scroll-progress bar that reads as molten metal filling a channel — amber-to-red gradient with a white-hot leading edge that glows while scrolling and tempers to violet-steel at 100%.

A staged multi-step loader: pending steps are cold gray stampings, the active step glows amber under a heat-shimmer underline, and completion quenches it into a checkmark stamped in cooled violet-steel — advancing on heavy mechanical detents.

Orbiting icon rings around a fixed center slot. Compose Armature + ArmatureRing for a multi-radius orbital system with per-ring speed, direction, and a hand-forged eccentric ring. Pure CSS, pause-on-hover.

An animated beam connecting two DOM nodes via refs — a dark groove path carrying a slug of molten metal that pours into the destination and flashes a rim-glow on receipt. Curved, reversible, resize-aware.

A grinder-wheel spark burst fired imperatively via ref: elongated glowing streaks fan outward, fall under gravity, and burn out bright-to-dark, with a fraction bouncing once. Pooled particles, auto-cleanup, offscreen-paused.

A disclosure-semantic FAQ accordion: measured height animation via motion, a hairline amber heat-line down the open item's left edge, and a plus indicator that rotates with a brief ember-glow on toggle. Arrow-key/Home/End focus movement between questions, one open at a time by default with an allowMultiple knob, instant open/close with no glow under reduced motion.

The closing call-to-action band: headline and subhead over a contained, subtle Ember rise, an Anvil-struck primary CTA beside a quiet secondary link, and a one-shot Sparks burst fired the first time the band scrolls into view (IntersectionObserver, once, skipped under reduced motion). All copy and both effects are prop-controlled.

The flagship landing hero: logo + nav header, a gilded headline and subhead over the Molten shader pour, and an Anvil-struck primary CTA beside a quiet secondary link. Every content knob is a prop — the Forgewright copy is only the default — and the background node is fully swappable.

A bento features section: six feature cells with minimal forge-tool stroke icons laid out on the IngotGrid primitive with varied column spans, a Conduit beam flourish tracing push → pour in the lead cell, and staggered Surface melt reveals as cells scroll into view.

A stats band stamped like a steel plate: four big tabular numerals counting up via Tally digit drums on scroll into view, hairline amber dividers between stats, quiet labels beneath, and subtle top/bottom plate borders. Responsive 2-up to 4-up row.

A social-proof section: testimonial quotes on quiet Kindle spotlight cards flowing through velocity-reactive Millrace marquees — two counter-flowing rows on desktop, one on mobile — pausing on hover, with a screen-reader-only static list so each quote is heard once and a static wrapped grid under reduced motion.

A three-tier pricing section: an accessible monthly/annual radiogroup toggle (annual = two months free) flips prices via Tally odometer drums, the featured tier is raised inside a Filament traveling-border card with a Sheen CTA, and quiet bordered cards carry the rest. Custom-priced tiers ignore the toggle. Stacks at 360px, three-up on desktop.