Animated WebGL liquid-metal shader for React buttons and chips, one component, three presets, zero layout shifts.
What it does
Metal FX is a React component that wraps any button, chip, or icon with a real-time WebGL liquid-metal ring animation. It ships three color presets, auto dark/light theming, proximity reflection, and SSR safety, all in one npm install.
Metal FX gives React UIs the kind of polished, animated metal ring effect that typically requires a custom WebGL setup from scratch. It ships as a single wrapper component, npm install metal-fx, so a call-to-action button can go from flat to iridescent in minutes, not days.
Pure CSS cannot replicate a real-time shader. Three.js or raw WebGL can, but both demand significant setup. Per the README, Metal FX compiles the shader once and reuses one shared WebGL context across every mounted instance on the page. A single requestAnimationFrame loop drives all of them, so adding a second Metal FX button costs almost nothing beyond one extra drawImage copy per frame.
Wrap a child element with <MetalFx variant="button"> or <MetalFx variant="circle">. The component measures the child, paints an animated ring on top with pointer-events: none, and leaves the child fully interactive. It does not force dimensions: size the child as usual and the wrapper matches it.
Presets and theming. Three bundled palettes cover most use cases: chromatic (iridescent rainbow, default), silver (cool steel), and gold (warm gold). The theme prop accepts auto, dark, or light. auto subscribes to matchMedia('(prefers-color-scheme: dark)') and switches the frame instantly when the user toggles their system theme.
Effect controls. The strength prop runs from 0 (invisible) to 1 (full, the default) and scales canvas and glow opacity without touching the shader animation. The paused prop freezes the shader on its current frame while keeping the metal silhouette visible.
Proximity reflection. Pass a reflectionTargets array of refs and neighbouring elements receive a soft mirrored reflection of the ring. The README notes this feature is dark-mode only: reflections are skipped in light mode automatically, so there is no DOM scanning or per-frame cost on light backgrounds.
Metal FX is best on a handful of focal UI elements, not scattered across every interactive surface. Skip it for tables, data-dense dashboards, navigation menus, or any surface where animation competes with reading. The effect is deliberately high-contrast; overuse flattens its impact and adds unnecessary GPU work. If your project already uses CSS @property animations for a subtle glow, Metal FX is the step up to a physically plausible shader ring, not a drop-in replacement for simpler transitions.
Metal FX is a focused, MIT-licensed tool for React developers who want a real WebGL metal shader on CTA buttons without building one. The shared-context architecture keeps the performance cost low, the preset system covers the common palette needs, and SSR safety means it fits Next.js projects out of the box. Find it at github.com/Jakubantalik/metal-fx and install with npm install metal-fx.
Features
Field notes
Reviewed Jun 26, 2026
Best for
Builder outcomes
Watch out
Tested with
Go deeper
First-person practitioner deep-dive explaining how Apple's MetalFX upscaling API actually works when repurposed for iOS video—covers internals and real implementation findings.
Metal FX (`metal-fx` on npm) is a React component that wraps any button, chip, or icon element with a real-time animated liquid-metal ring rendered in WebGL. It ships with three color presets (chromatic, silver, gold), automatic dark/light theming, a proximity reflection feature for neighbouring elements, and full SSR safety for frameworks like Next.js. The effect sits above the wrapped child with `pointer-events: none`, so the underlying element remains fully interactive.
Install via npm with `npm install metal-fx`, then import the `MetalFx` component and wrap your target element: `<MetalFx variant="button"><button>Upgrade to Pro</button></MetalFx>`. The `variant` prop accepts `button` (pill silhouette, 1 px ring) or `circle` (compact, 2 px ring). Size your child element as normal, the wrapper is `display: inline-flex` and matches the child's dimensions automatically. No WebGL setup or shader code is required.
Yes. Metal FX is released under the MIT license by Jakub Antalik and published publicly on GitHub at github.com/Jakubantalik/metal-fx. The MIT license allows free use in commercial and personal projects. There is no paid tier, API key, or usage restriction described in the README.
Metal FX is best suited for high-attention UI elements: primary call-to-action buttons, send buttons, icon chips, or upgrade prompts where a premium tactile visual adds meaning. The README's examples use it for 'Upgrade to Pro' pills and circular send icons. The effect is intentionally high-contrast and animated, so it works best on a small number of focal elements rather than across every interactive surface.
A single shared WebGL context is reused across every mounted `<MetalFx>` on the page and the shader is compiled only once, per the README. One `requestAnimationFrame` loop drives all instances; per-frame work for each visible mount is one `gl.drawArrays` call plus one `drawImage` copy. `IntersectionObserver` automatically pauses per-instance copies when the element scrolls off-screen, and when every instance is off-screen the GL render is skipped entirely. This architecture keeps the GPU cost low even when several instances are mounted simultaneously.
Metal FX is a React-only library, no Vue, Svelte, or vanilla JS adapters are mentioned in the README. Proximity reflection only activates in dark mode; it is automatically skipped in light mode with no per-frame cost. Preset customisation is limited to three built-in palettes (chromatic, silver, gold) and the `strength` (0-1) prop; deep shader modification is not documented. The effect is also better avoided on content-dense surfaces like tables or dashboards, where animation competes with reading rather than reinforcing a focal action.
WebGL glass-effect library for the web, apply realistic refraction, blur, and lighting to any HTML element with a single async init call.
Best for Portfolio heroes, product landing pages, and OS-style UI shells needing physically accurate glass effectsOpen-source glassmorphism component library for shadcn/ui, 21 Apple-inspired glass UI components for Next.js and React, installed via the shadcn registry.
Best for Teams building Next.js or React apps that already use shadcn/ui and want a coherent glass aesthetic fastOpen-source React loading animation library with 55+ dot-matrix loaders for shadcn/Tailwind projects, install in one command.
Best for React and Tailwind CSS teams who want polished, on-brand loading animations without building from scratchFree, MIT-licensed React loading animation registry for shadcn-style projects, copy-paste spinners, skeletons, and motion primitives.
Best for Teams building React and Tailwind CSS products that already use shadcn/ui and need consistent pending states fastDependency-free gallery of math-driven loading animations (rose, Lissajous, cardioid, and more) with formulas and copyable code for UI builders.
Best for Builders who want visually distinctive loading animations grounded in named mathematical curves78+ animated shadcn/ui components plus 100+ AI agent patterns, distributed as copy-paste source, free, open-source, and zero npm lock-in.
Best for React and Tailwind teams already using shadcn/ui who want animated, accessible components without npm package overhead