@u88888888/pickaxe-fluid

鼠标移动时的全站肥皂泡 WebGL 流体特效核心库（框架无关，提取自 pickaxe.co）。

安装

npm install @u88888888/pickaxe-fluid

快速开始

<canvas
  id="fluid"
  style="position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9999"
  aria-hidden="true"
></canvas>

<script type="module">
  import { initPickaxeFluid } from '@u88888888/pickaxe-fluid'

  const canvas = document.getElementById('fluid')
  const dispose = initPickaxeFluid(canvas)

  // 页面卸载时销毁
  window.addEventListener('beforeunload', () => dispose?.())
</script>

API

initPickaxeFluid(canvas)

| 参数 | 类型 | 说明 | |------|------|------| | canvas | HTMLCanvasElement | 用于渲染的 canvas 元素 |

返回值： (() => void) | null

• 成功：返回销毁函数，调用后停止动画并释放 WebGL 资源
• 失败：返回 null（不支持 WebGL2、用户开启减少动态效果等）

交互效果

• 鼠标移动：产生彩虹肥皂泡流体轨迹
• 鼠标点击：在点击位置产生爆发 splat 效果
• Canvas 建议使用 pointer-events: none，不阻挡页面交互
• 约 10 秒无操作后自动停帧以节省性能

环境要求

• 支持 WebGL2 的桌面浏览器（推荐 Chrome / Edge / Firefox）
• 需 (hover: hover) and (pointer: fine) 精确指针设备
• 用户系统开启 prefers-reduced-motion: reduce 时自动跳过

框架封装

如需在 Vue / React 中快速使用，可安装对应封装包：

| 框架 | 包名 | |------|------| | Vue 3 | @u88888888/vue-pickaxe-fluid | | React | @u88888888/react-pickaxe-fluid |

常见问题

看不到效果？

1. 硬刷新页面
2. 确认浏览器支持 WebGL2
3. 移动鼠标或点击页面（首次交互后启动动画）

白底页面效果较淡？

泡泡为半透明彩虹色，在浅色背景上比深色背景更淡，属正常现象。

License

MIT