一键实现液态金属按钮Libraries.dev的metal-fx特效全解析【免费下载链接】Libraries.devHigh-crafted UI libraries for AI agents: Border beam, Orbs, Metal, Gooey, Voice, Image, Avatar bots项目地址: https://gitcode.com/gh_mirrors/bo/Libraries.dev还在羡慕 AI 产品界那种流光溢彩的液态金属按钮吗Libraries.dev 开源的metal-fx让你用一行代码就能给按钮套上 WebGL 实时金属环特效并免费附赠邻近元素反射、游移光晕、光标点亮等高级细节。本文是一份面向新手的完整指南带你读懂它的 3 套金属配色主题、性能优化黑科技以及如何把它移植到 iOS 和 React Native。metal-fx 是什么一句话理解液态金属按钮metal-fx 是一个 React 组件库把MetalFx包在任意按钮、芯片或图标外面它会自动测量子元素尺寸并在其上方绘制一圈实时动画的液态金属环。核心组件实现在 MetalFx.tsx对外 API 集中在 index.ts。它的关键特性一览特性说明 实时金属环基于 WebGL2 着色器金属质感随时间流动 3 套主题预设彩虹色chromatic、冷钢银silver、暖金gold 深色/浅色自适应默认跟随系统prefers-color-scheme实时切换 邻近反射深色模式下相邻元素会接住金属环的倒影⚡ 高性能全站共享一个 WebGL 上下文离屏自动暂停一键安装与快速上手步骤安装只需一条命令npm install metal-fx然后给现有按钮套一层壳即可原有的交互和样式完全不受影响特效层使用pointer-events: none覆盖import { MetalFx } from metal-fx; MetalFx variantbutton presetchromatic button升级到 Pro/button /MetalFxvariant只有两种button胶囊形、1px 细环和circle紧凑圆形、2px 粗环定义见 types.ts。组件不强制子元素尺寸你平时怎么写 CSS 它就怎么渲染。三大金属配色主题怎么选metal-fx v2 采用 Paper 的liquidMetal着色器作为引擎内置三套深色 浅色双调参预设配置全部集中在 presets.tspresetchromatic默认彩虹色散冷暖色条纹流动最有科技感presetsilver冷钢银克制低调适合专业工具类界面presetgold暖金色高级感拉满适合会员、付费按钮切换主题只需改一个 prop深浅色模式下的金属色调、光晕强度都会自动匹配无需手动调参。深色模式彩蛋邻近反射与光标点亮上图正是 v2 的招牌细节右侧圆形发送按钮的金属环会在左侧搜索框的边缘投下一道柔和的镜面反射。MetalFx variantcircle reflectionTargets{[chipRef]} button ref{sendRef}↑/button /MetalFx把相邻元素的 ref 传入reflectionTargets它们就会自动接住金属环的倒影。贴心的是浅色模式下反射会整体跳过不做任何逐帧开销。另外v2 还提供了两个让按钮活起来的钩子导出见 index.tsuseMetalBend(ref)—— 鼠标靠近时金属环像液体一样凹陷弹簧物理 矢量轮廓setCursorSprite光标光 —— 金属环会点亮鼠标指针形成金属给光标打光的反差效果想实时调参官方 Demo 里内置了GLOW、REFLECTION_OCCLUDER、CURSOR_LIGHT三组可视化面板光晕引擎的游走逻辑可读 glow.ts 了解。性能指南为什么整页放 10 个按钮也不卡metal-fx 的渲染架构core.ts 有完整注释专为多用例场景设计一个共享 WebGL 上下文所有MetalFx实例共用一张离屏 GL 画布着色器只编译一次单 rAF 循环驱动每个实例每帧仅一次drawArrays 一次drawImage拷贝离屏自动暂停IntersectionObserver检测到按钮滚出视口即停止拷贝全部离屏时连 GL 渲染也跳过SSR 安全服务端渲染阶段只输出透明占位客户端水合后才挂载 WebGL 管线不支持 WebGL2 的浏览器可用isMetalFxSupported()检测会优雅降级为普通按钮不会白屏报错。跨端移植iOS 与 React Native 原生版Web 只是起点。v2 的同一套liquidMetal材质已被移植到手机端端口位于 ports/SwiftUIiOS 17MetalFxKit 通过 Metal 着色器实现MetalFx、MetalText、MetalBadge手机没有鼠标用设备倾斜代替指针驱动弯曲形变示例 App 在 MetalFxDemoReact Nativemetal-fx-native 基于 react-native-skia Reanimated 4 全在 UI 线程运行Expo 示例工程在 example/Libraries.dev 全家桶与进一步阅读metal-fx 是 Libraries.dev 的六大特效库之一官网为每个库都提供了可视化 Playground可以拖拽调参并一键复制代码同族兄弟库可参考 packages/ 目录border-beam边框流光、thinking-orbs思考小球、liquid-gooey液态合并、voice-glow声音光束、img-fx图片特效、bot-avatars机器人头像。 核心资料路径组件用法文档packages/metal-fx/README.md组件属性定义packages/metal-fx/src/types.ts预设调参packages/metal-fx/src/engine/presets.ts渲染引擎packages/metal-fx/src/engine/renderer/core.ts官方 Demo 工程packages/metal-fx/demo/从npm install到套上MetalFx你的按钮只需一次包裹就拥有了液态金属光环。剩下的交给 WebGL 和着色器。【免费下载链接】Libraries.devHigh-crafted UI libraries for AI agents: Border beam, Orbs, Metal, Gooey, Voice, Image, Avatar bots项目地址: https://gitcode.com/gh_mirrors/bo/Libraries.dev创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考