Liquid Metal Border

Core Contract

1. Use metal-fx in React 18 or newer.
2. Wrap exactly one real host element such as a button, a, div, or article.
3. Keep the host semantic and interactive. MetalFx is visual framing, not the control.
4. Reserve the animated border for active, selected, focused, hovered, or primary surfaces. Do not put it around every control.
5. Keep a static CSS border or focus outline as the fallback. WebGL decoration must never carry essential state by itself.
6. Pause non-active instances and reduced-motion experiences.
7. Test light and dark modes independently. Reflections intentionally render only in dark mode.

Inspect Before Editing