用 Border Beam 和 Liquid Gooey 为 React 界面注入生命力
设计师们喜欢在设计稿中添加一些精致的视觉点缀。有时是一条沿着定价卡片边框滑动的霓虹光束，有时是像水银液滴一样粘在一起并拉伸的按钮。当前端开发者看到这样的设计概念时，第一个想法通常都是一样的：又要开始写自定义 SVG 滤镜、折腾颜色混合矩阵，或者为一个小细节配置冗长的 CSS 动画了。
Jakub Antalík 决定将这些效果打包成轻量级的 React 库。在他名为 Libraries 的 monorepo 中，他收集了两个开箱即用的工具：Border Beam 和 Liquid Gooey。每个库都专注于解决一个问题，不会给你的项目引入不必要的依赖。
仓库里有什么
该仓库包含两个独立的 npm 包，每个都有自己专属的交互式演示页面：
- Border Beam — 一束沿任意区块或卡片边缘平滑滑动的动画光束。演示地址：beam. jakubantalik.com。
- Liquid Gooey — 粘性液体的物理效果和变形（即所谓的 gooey 效果），元素在移动时会连接和分离。演示地址：gooey. jakubantalik.com。
两个包可以独立安装，所以如果你只需要边框高亮效果，就不必引入不必要的代码到你的打包文件中。
Border Beam 的工作原理
边框流动光束在现代 SaaS 服务网站上很常见。它通常出现在高级定价区块或注册时的邮箱输入框中。
安装方式采用标准流程：
npm install border-beam
组件在底层渲染一个动画渐变层，并将其裁剪为父容器的形状。你无需手动计算圆角坐标或通过 getBoundingClientRect 计算偏移量。组件接受速度、光束大小、颜色和延迟等参数，可以无缝叠加在你现有的布局之上。
液体元素效果的使用
gooey 效果基于模糊（feGaussianBlur）和对比色矩阵（feColorMatrix）的组合。在 React 中直接配置这些 SVG 滤镜很不方便：你需要处理跨浏览器兼容性、优化重绘，并传递正确的滤镜 ID。
Liquid Gooey 库为你处理了这些繁琐的工作：
npm install liquid-gooey
它提供了现成的组件来创建元素合并和流动效果。如果你正在构建一个特殊的标签页切换器、交互式光标或浮动操作菜单，该组件可以将标准的区块移动转换为流畅的粘性动画。
便捷的 monorepo 组织方式
除了组件本身，仓库的架构也值得一看。Jakub 使用 pnpm，并将目录分为两部分：packages 用于存放库，apps 用于存放演示展示。
packages/ опубликованные библиотеки (по папке на npm-пакет)
sites/ демо-сайты для каждой библиотеки
这里设置了一个便捷的工作流。演示站点引用的不是 dist 中的编译后的包，而是通过别名直接引用 TypeScript 中的库源代码。当作者编辑组件时，展示页面会通过热重载实时更新，无需预先重新构建。
本地启动很简单：
npm install
# Запуск витрины для луча
npm run dev -w @sites/beam
# Запуск витрины для liquid-эффектов
npm run dev -w @sites/gooey
部署方面配置了两条独立的流水线：Border Beam 演示托管在 GitHub Pages 上并附加了 CNAME，Liquid Gooey 则通过 Cloudflare Pages 自动构建。发布到 npm 则通过 GitHub 上的 release 标签触发，由单独的工作流处理。
何时适合使用这些组件
视觉效果要适度使用。如果你在仪表板的每个卡片周围都加上流动光束，界面就会变成圣诞彩灯。但有些场景下这些库能节省大量时间：
- 着陆页和推广站点。突出主要行动号召按钮或推荐的订阅计划卡片。
- 新手引导。通过柔和的高亮来指示用户需要完成的步骤或输入框，以吸引用户注意力。
- 微型界面。特殊的标签页、手风琴菜单或模式切换器，标准平滑动画在这些地方显得过于平淡。
唯一需要注意的细节是：带模糊的 SVG 滤镜会产生 GPU 负载。对于包含数百行的大型列表，Liquid Gooey 不太适合，但对于紧凑的控制元素来说效果很好。
这里展示的是一个将频繁出现的设计模式打包成整洁 React 组件的实用范例。README 中的文档仍然比较简洁，但在线演示页面可以让你完整了解这些库的功能。如果你正在构建一个新的推广站点，或者想为熟悉的表单添加一点交互性，Border Beam 和 Liquid Gooey 绝对值得收藏。
相关项目