用途：在 React 界面中为按钮、链接、图标控件、标签、选项卡、卡片或选中表面添加并调校动态液态金属 WebGL 边框。MetalFx 只是视觉外框，不替代控件本身，宿主元素应保持语义与可交互。
主要能力：提供 MetalFx 组件，包裹一个真实宿主元素（button、a、div、article 等），测量其尺寸并绘制金属环，支持 chromatic、silver、gold 预设，auto/dark/light 主题，strength 控制画布与辉光不透明度，paused 冻结非活跃实例，ringCssPx、shaderScale、borderRadius、scale 等参数调校外观，reflectionTargets 可向指定邻元素投射反射（仅暗色模式）。
使用方式：用项目包管理器安装，如 npm install metal-fx（也支持 pnpm add、yarn add、bun add），随后 import { MetalFx } from "metal-fx"。无需导入样式表，包自行注入样式，支持 ESM 与 CommonJS，SSR 安全，水合后挂载 WebGL。Next.js App Router 中需在 Client Component 内渲染。示例：<MetalFx variant="button" preset="chromatic" theme="auto" strength={0.85}><button type="button">Upgrade to Pro</button></MetalFx>。建议只在活跃、选中、聚焦、悬停或主操作表面使用，非活跃实例设 paused，减少动效偏好下暂停并关闭辉光。
适用场景：主按钮、选中标签或筛选、图标按钮、大卡片、高级 CTA 等需要金属质感的交互表面。
限制与注意事项：需 React 18 及以上；保留静态 CSS 边框或焦点轮廓作为 WebGL 失败时的降级；容器需保持语义与键盘可操作，活跃状态用 aria-pressed、aria-selected 等暴露；反射仅在暗色模式，明暗主题需分别测试；normalizeHostStyles 默认会移除子元素轮廓，需要自带焦点环时设为 false；非活跃实例应及时暂停；浅色/暗色差异与相机缩放下的像素常量请通过 scale 统一处理。未提供具体价格、许可与浏览器支持细节。