domains / families / design / liquid-metal-border

liquid-metal-border

separate

Add and tune animated liquid-metal WebGL borders with the React `metal-fx` package. Use when buttons, icon controls, chips, tabs, cards, or selected surfaces need a metallic active, selected, hover, focus, or premium border; when implementing the MetalFx component from metal.jakubantalik.com; or when troubleshooting its presets, themes, strength, glow, reflections, sizing, radius, animation, accessibility, SSR, or performance.

When to use

• Adding metallic active, selected, hover, or focus borders
• Implementing the MetalFx component
• Troubleshooting presets, themes, strength, and glow
• Configuring reflections, sizing, radius, and animation
• Handling accessibility, SSR, and performance issues

When not to use

• Putting animated borders around every control
• Using WebGL decoration to carry essential state by itself

Skill page

Source