一键实现液态金属按钮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),仅供参考
企业数字化 ERP 产品动态
相关推荐
Qwen-Image LoRA微调实战:从原理到显存优化与效果验证 简介:面向需要微调阿里Qwen-Image(20B)多模态模型的AI开发者的LoRA训练实战指南。内容围绕三层融合架构解析、低秩分解数学原理、60图高效训练策略展开,并针对常见的手脚异常问题给出了数据增强与结构约束损失函数等可行方案&… · 2026/9/25 23:02:12
柏莱纳全屋定制方案 精装修房复古风 进口材质环保认证 随着国内高净值住宅市场的成熟,南京别墅、大平层等改善型自住需求持续增长,业主对全屋定制的要求早已从能用转向好看、耐用、适配、环保,尤其是精装修房改造、复古风格定制领域,业主对材质环保性、风格还原度、细节工艺的要求不断… · 2026/9/25 23:02:00
香港条形码申请代办哪家靠谱?俄罗斯条码代理资质怎么查?一次讲透 答案先撂这儿:香港条形码最终只认GS1 Hong Kong发证,俄罗斯条形码只认GS1 Rus发证,任何国内代办都是服务商而非官方授权发证方。所以“哪家靠谱”的核心不是看谁吹得响,而是看谁把资质、流程、案例摊开给你看。
1. 香港条码&#… · 2026/9/25 23:31:29
小牛NX大灯无损直上工程分析:碧烽功率约束、DC选型与四档光型匹配 小牛NX大灯升级的核心工程问题不是"哪款最亮",而是在NX的电气约束和灯具空间内,如何匹配功率、光型和DC转换器,实现稳定可靠的无损直上。本文从电气约束、接口分析、四档工程差异、DC电流计算、散热设计和安装合规六个维度… · 2026/9/25 23:31:03
Substrate区块链开发框架:从核心原理到自定义Pallet实战 1. 从零认识 Substrate:它到底是什么,能解决什么问题第一次接触 Substrate 的人,大概率是被一个词带进来的——"造链"。在区块链开发这个圈子里,Substrate 的名气这几年一直往上走,但很多人对它的理解停留在… · 2026/9/25 23:31:03
奥迪 Q5L 在武汉维修,4S 还是专修?车主决策避坑指南 Q5L 车主在武汉找维修,最纠结的不是有没有店,而是该回 4S 还是找外面的专修。答案要分情况:车辆在保、涉及索赔或召回,回 4S 最稳妥;已经出保,遇到空调压缩机、双离合顿挫、漏防冻液这类通病,或… · 2026/9/25 23:30:50
别再自建网关!2026年企业级AI大模型API聚合平台终极测评 2026 年企业想同时用上 GPT、Claude、Gemini、DeepSeek、Qwen、Llama 等主流模型,还要保障网络连通、统一结算与合规管控,靠自建网关的路越走越窄,API 聚合平台因此进入爆发期。本文从成本账出发,梳理主流平台的企业级能力,给信息负责人与研发团队一份选型参考。
自建网关的四笔… · 2026/9/25 23:30:50
创维E900V22D刷机全攻略:S905L3SB芯片兼容性解析与救砖实战 /* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:00:31
MQTT协议原理与Broker服务器搭建实战:从Mosquitto到EMQX /* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:00:37