Amalgam
A wordmark cast in living liquid chrome: a glyph alpha mask shaded by an original OGL metal shader — domain-warped churn, thin specular bands over dark troughs, a fresnel-lit rim, a whisper of chromatic fringing, and one crisp highlight that sweeps the full mark every few seconds, after a one-shot pour-in on first view. Polished cool steel by default; tint reaches warm bronze/gold.
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/amalgamManual — install dependencies, then copy the source
npm install oglProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "AMALGAM" | The wordmark rendered as liquid metal. |
| fontSize | number | 120 | Cap height of the wordmark, in CSS pixels. |
| fontWeight | number | string | 800 | Font weight of the mask glyphs. |
| fontFamily | string | a heavy cross-platform sans stack | Font family used to render the mask. Must be a concrete family (canvas cannot inherit CSS fonts). |
| letterSpacing | number | 2 | Extra letter spacing in CSS pixels. |
| colors | AmalgamColors | polished cool steel | Metal ramp: { dark, light, tint }. |
| speed | number | 1 | Flow speed multiplier. 1 = default, 0 = frozen churn. |
| intensity | number | 1 | Overall surface brightness. 1 = default. |
| amplitude | number | 1 | Liquid wave amplitude — how far the metal churns. 1 = default. |
| scale | number | 1 | Pattern scale of the flow field. Higher = finer marbling. |
| sharpness | number | 1 | Specular band sharpness. Higher = thinner, crisper highlights. |
| fresnel | number | 1 | Fresnel rim strength along the silhouette. |
| chroma | number | 0.14 | Chromatic-aberration amount — a faint per-channel split at the bands. Defaults to a whisper; push up for a rainbow oil-slick edge. |
| sweepInterval | number | 6 | Seconds between the single crisp highlight sweeps that travel the full mark. 0 disables the sweep, leaving only ambient churn. |
| mouseAnimation | boolean | false | Swap the auto flow loop for pointer-driven flow. |
| paused | boolean | false | Freeze the animation at its current frame. |
| intro | boolean | true | Designed intro: the first time the mark scrolls into view, liquid metal pours across it behind a bright leading edge (~1.2s, once). Off renders the full mark immediately. Never under reduced motion. |
| idle | boolean | true | Idle autoplay for mouseAnimation: after 1.5s with no pointer over the mark, a ghost point drifts a slow Lissajous path so the pointer-driven flow keeps leaning and churning; a real pointer takes over instantly. No effect without mouseAnimation. |
| ref | React.Ref<AmalgamHandle> | React 19 ref prop — imperative replay() of the intro. | |
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.