liquid-metal-border

Install the metal-fx package, import the MetalFx component, and wrap a single semantic button element with it. Choose a preset like chromatic, silver, or gold, then tune strength and ringCssPx to control the border's intensity and thickness.

Keep one mounted MetalFx instance and drive its strength prop from component state, using low values like 0.1-0.2 when idle and 0.75-0.9 when selected. Pair this with aria-pressed or aria-selected so the state is exposed semantically, and pause the shader when not highlighted.

Yes, metal-fx is SSR-safe and mounts its WebGL pipeline after hydration. In a Next.js App Router project, render it from a Client Component because the component uses client-side React hooks.

The normalizeHostStyles prop defaults to true and removes the child's outline, background, border, and shadow. Set it to false and define your own :focus-visible outline in CSS to restore a visible keyboard focus ring.

Reflections are intentionally dark-mode only and are skipped automatically in light mode. Pass explicit element refs via reflectionTargets and verify the effect under the app's real dark theme rather than relying on the auto setting.

Mount the effect only on primary or stateful surfaces, pause non-active instances, omit reflections unless needed, and prefer disableGlow for dense toolbars. The package shares one WebGL context and pauses offscreen instances via IntersectionObserver.