← All components
Motion / effect
Liquid Metal
Real reflective material on buttons, live type, badges and neighbouring surfaces. Six complete contexts, one shared shader.
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- Six original complete contexts use the eligible Libraries.dev metal-fx v2 engine. The real shader, ring, glow baking, cursor bend, glyph masks and neighbour-reflection pipeline remain included with full MIT/Apache-2.0 notices.
- One active shared renderer means one consistent preset/theme across a page. Scene Auto follows the preview surface; primitive Auto follows the OS with a dark server fallback. Use the same material for neighbouring instances.
- Primitive usage supplies a minimal native control, live text or badge. Complete examples contain the entire composition. Controlled demonstrates actual reflection refs and caller playback. Advanced contains real authored Canvas masks, inner-shadow options, per-target reflection strengths and the badge core/gradient/glow configuration. Functions and refs stay in typed code.
- Pause retains the painted material and local work. Family Replay restarts decoration while preserving action counts, input and results. Legacy Demo remains available with its original defaults and old draft-reset Replay behavior.
- The original shared 96px shader caps DPR at 2 and material paints near 15Hz. Pointer/glow/reflection and text-mask work is additional; prefer compact controls and short type. These are scheduling bounds, not a measured-FPS claim.
- WebGL2 absence or context loss preserves readable native content and an explicit Static fallback label in complete scenes. Fallback is not shader parity; a restored context repaints the retained material.
- MetalText font is a CSS font shorthand; the editor offers bounded system, Inter and Georgia sizes, while portable code accepts your own font. Inter is included locally with its full OFL notice. Copy the public/ font assets when installing.
- MetalBadge glow is a numeric inner-light strength; MetalText glow is a Boolean halo switch. Their props tables name each primitive separately. Text/Badge add optional preset and paused without changing their existing defaults.
- useMetalBend and the exported cursor/glow/renderer configuration APIs remain available for typed applications. Cursor catch/spill is opt-in through setCursorLightConfig; no system cursor is installed. Advanced mask/reflection examples do not fetch assets or call services.
React 19.2Modern browsers
Libraries.dev — Jakub Antalik · MIT. See bundled notice.
Inter Project Authors · SIL Open Font License 1.1; included with unmodified font assets.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children (required) | ReactNode | string | MetalFx: undefined; MetalText: undefined; MetalBadge: 'New' | MetalFx: The single host element to wrap with the metal effect. Must be a single React node (button, anchor, div, ...). MetalFx measures this element each frame via `ResizeObserver` and paints its canvas + glow on top. (Required for MetalFx.) MetalText: Forwarded native wrapper children. (Required for MetalText.) MetalBadge: Forwarded native wrapper children. (Optional for MetalBadge.) |
variant | MetalFxVariant | MetalFx: undefined | MetalFx: Variant — controls the shader sampling scale + ring width. - `button` (default): pill-style ring at 1 px wide, scale 1.6 - `circle`: compact circle with a 2 px ring, scale 1.3 (Optional for MetalFx.) |
preset | MetalFxPreset | import('./types').MetalFxPreset | MetalFx: 'chromatic'; MetalText: 'chromatic'; MetalBadge: 'chromatic' | MetalFx: Color preset. All three presets ship both dark and light mode tunings — `theme` picks the right side at runtime. (Optional for MetalFx.) MetalText: Forwarded native wrapper preset. (Optional for MetalText.) MetalBadge: Forwarded native wrapper preset. (Optional for MetalBadge.) |
theme | MetalFxTheme | MetalFx: 'auto'; MetalText: undefined; MetalBadge: undefined | MetalFx: Theme mode. `'auto'` (default) resolves via `matchMedia('(prefers-color-scheme: dark)')` and switches live when the OS theme changes. Pass `'dark'` or `'light'` to pin a specific mode. (Optional for MetalFx.) MetalText: Forwarded native wrapper theme. (Optional for MetalText.) MetalBadge: Forwarded native wrapper theme. (Optional for MetalBadge.) |
strength | number | MetalFx: 1; MetalText: 1; MetalBadge: 1 | MetalFx: Effect strength (0..1). Multiplies the shader bitmap opacity and the glow SVG alpha. The shader continues to animate at full intensity at any value; only the rendered alpha onto the host is scaled. Lighter values let the underlying child surface show through more strongly. (Optional for MetalFx.) MetalText: Forwarded native wrapper strength. (Optional for MetalText.) MetalBadge: Forwarded native wrapper strength. (Optional for MetalBadge.) |
glowGain | number | MetalFx: 1; MetalText: METAL_TEXT_DEFAULTS.glowGain | MetalFx: Multiplier on the glow only (halo + catch-light), on top of `strength`. Use it when the shader runs at low `strength` but the glow should still read — e.g. metal text. Clamped to 0..1 after multiplying. (Optional for MetalFx.) MetalText: Glow multiplier when `glow` is on. (Optional for MetalText.) |
paused | boolean | MetalFx: false; MetalText: false; MetalBadge: false | MetalFx: Pause the shader animation. The visible canvas keeps the last painted frame so the metal silhouette stays on screen. (Optional for MetalFx.) MetalText: Forwarded native wrapper paused. (Optional for MetalText.) MetalBadge: Forwarded native wrapper paused. (Optional for MetalBadge.) |
borderRadius | number | MetalFx: undefined | MetalFx: Optional explicit border radius (CSS px). When omitted, MetalFx reads the computed border-radius of the wrapped child each resize. (Optional for MetalFx.) |
normalizeHostStyles | boolean | MetalFx: true | MetalFx: When true, MetalFx normalizes the host element's outer chrome (border / outline / box-shadow) so user-provided component styles don't clash with the metal ring. Inner fills, typography, and content remain untouched. (Optional for MetalFx.) |
reflectionTargets | ReadonlyArray<MetalFxReflectionTarget> | MetalFx: undefined; MetalText: undefined; MetalBadge: undefined | MetalFx: Neighbour elements that should receive a soft proximity reflection of the metal effect. Reflections only render when the resolved theme is `dark` — pass-through in light mode (no DOM scan, no per-frame work). Pass refs to the sibling DOM elements you want to receive the reflection (chips next to a send button, search field next to an Upgrade pill, ...). A target that *contains* the wrapped element (its parent card, say) receives the reflection on both the nearest vertical and horizontal inner edges. Pair with `{ ref, strength }` to keep that subtle. (Optional for MetalFx.) MetalText: Forwarded native wrapper reflectionTargets. (Optional for MetalText.) MetalBadge: Forwarded native wrapper reflectionTargets. (Optional for MetalBadge.) |
disableGlow | boolean | MetalFx: false | MetalFx: Disable the wandering halo overlay. The shader ring still renders. (Optional for MetalFx.) |
innerShadow | boolean | { offsetY?: number; blur?: number; alpha?: number; color?: string } | TextInnerShadow | null | MetalFx: undefined (off); MetalText: FIGMA_INNER_SHADOW | MetalFx: Light rim along the top inside edge of the ring — an inner shadow from above, like the one on metal text. `true` uses the design defaults (white 90 %, offset 1 px, blur 0.5 px); pass an object to tune. (Optional for MetalFx.) MetalText: Top-edge light rim inside the glyphs. Pass null to disable. (Optional for MetalText.) |
shaderScale | number | MetalFx: undefined; MetalText: METAL_TEXT_DEFAULTS.shaderScale; MetalBadge: METAL_BADGE_DEFAULTS.shaderScale | MetalFx: Override the shader sampling scale. Larger values zoom into the shared shader (visibly bigger pattern features); smaller values zoom out. Defaults to the variant's baseline (1.6 for `'button'`, 1.3 for `'circle'`) multiplied by `scale`. (Optional for MetalFx.) MetalText: Zoom of the metal inside the glyphs. (Optional for MetalText.) MetalBadge: Forwarded native wrapper shaderScale. (Optional for MetalBadge.) |
ringCssPx | number | MetalFx: undefined | MetalFx: Override the ring thickness in CSS pixels. Defaults to the variant's baseline (1 for `'button'`, 2 for `'circle'`) multiplied by `scale`. (Optional for MetalFx.) |
scale | number | MetalFx: 1; MetalBadge: 1 | MetalFx: Master scale multiplier for every absolute-pixel constant the engine uses internally. Set this when you render the wrapped element at a non-1× size (e.g. inside a CSS `zoom: 2` container, or when you've doubled all your Tailwind sizes by hand). It scales: - shader sampling (so pattern features grow proportionally) - ring thickness on the canvas - glow SVG stroke widths, blur radii, fade-circle radius, and the small inset/outward offsets that position the catch-light - reflection canvas stroke band, border-highlight thickness, and the reference draw width baseline (Optional for MetalFx.) MetalBadge: Size multiplier on the Figma metrics (45×25, 12.222px). (Optional for MetalBadge.) |
mask | MaskFn | MetalFx: undefined | MetalFx: Custom alpha mask painter. When set, the shader is kept only where the mask paints (device px, origin at the wrapper's top-left) and the ring punch is skipped — for metal-filled text or glyphs. Pair with `disableGlow`; the glow assumes a ring perimeter. (Optional for MetalFx.) |
glowMode | 'mask' | 'ring' | MetalFx: undefined | MetalFx: How the glow is placed when `mask` is set. `'mask'` (default) samples points inside the mask and clips the halo to it — right for metal text. `'ring'` keeps the rounded-rect perimeter behaviour — a halo along the element's edge — for a full-fill mask like a badge. (Optional for MetalFx.) |
className | string | MetalFx: undefined; MetalText: undefined | MetalFx: Forwarded class name for the wrapper element. (Optional for MetalFx.) MetalText: Forwarded native wrapper className. (Optional for MetalText.) |
style | CSSProperties | MetalFx: undefined | MetalFx: Forwarded inline styles for the wrapper element. (Optional for MetalFx.) |
font (required) | string | MetalText: undefined | MetalText: CSS `font` shorthand for the live span, e.g. `500 24px/1 Inter, sans-serif`. (Required for MetalText.) |
color (required) | string | MetalText: undefined | MetalText: Base text colour from the design; the metal composites over it. (Required for MetalText.) |
glow | boolean | number | MetalText: false; MetalBadge: METAL_BADGE_DEFAULTS.glow | MetalText: Halo on the glyphs. Off by default — the design has none. (Optional for MetalText.) MetalBadge: Inner white glow strength (0..1). (Optional for MetalBadge.) |
metalOpacity | number | MetalText: METAL_TEXT_DEFAULTS.metalOpacity; MetalBadge: METAL_BADGE_DEFAULTS.metalOpacity | MetalText: How much metal shows over the base colour (0..1), multiplied with `strength`. (Optional for MetalText.) MetalBadge: How much metal shows over the white fill (0..1), multiplied with `strength`. (Optional for MetalBadge.) |
core | MetalBadgeCore | MetalBadge: METAL_BADGE_DEFAULTS.core | MetalBadge: Forwarded native wrapper core. (Optional for MetalBadge.) |
gradient | number | MetalBadge: METAL_BADGE_DEFAULTS.gradient | MetalBadge: Top→bottom white wash strength (0..1). (Optional for MetalBadge.) |
textColor | string | MetalBadge: '#323232' | MetalBadge: Forwarded native wrapper textColor. (Optional for MetalBadge.) |