@u88888888/react-pickaxe-fluid
v1.0.1
Published
React 鼠标移动时全站肥皂泡流体特效
Maintainers
u88888888Readme
@u88888888/react-pickaxe-fluid
React 鼠标移动肥皂泡流体特效（基于 @u88888888/pickaxe-fluid）。
安装
npm install @u88888888/react-pickaxe-fluid @u88888888/pickaxe-fluid
@u88888888/pickaxe-fluid为核心依赖，需一并安装。
组件用法
import { PickaxeFluid } from '@u88888888/react-pickaxe-fluid'
export default function App() {
return (
<>
<PickaxeFluid />
{/* 你的页面内容 */}
</>
)
}Next.js（App Router）
文件顶部加 'use client'：
'use client'
import { PickaxeFluid } from '@u88888888/react-pickaxe-fluid'
export default function RootLayout({ children }) {
return (
<html>
<body>
<PickaxeFluid />
{children}
</body>
</html>
)
}Props
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| enabled | boolean | true | 是否启用 |
| zIndex | number | 9999 | Canvas 层级 |
| showHint | boolean | true | WebGL 不支持时显示提示 |
| className | string | - | Canvas className |
| style | CSSProperties | - | Canvas 额外样式 |
示例
<PickaxeFluid enabled zIndex={9999} showHint={false} />Hook 用法
需要自定义 canvas 时，使用 usePickaxeFluid：
import { useRef } from 'react'
import { usePickaxeFluid } from '@u88888888/react-pickaxe-fluid'
function CustomFluid() {
const canvasRef = useRef(null)
const status = usePickaxeFluid(canvasRef)
return (
<canvas
ref={canvasRef}
style={{
position: 'fixed',
inset: 0,
pointerEvents: 'none',
zIndex: 9999,
}}
aria-hidden
/>
)
}usePickaxeFluid 返回状态：loading | ready | unsupported | disabled | error
交互效果
- 鼠标移动：彩虹肥皂泡流体轨迹
- 鼠标点击：爆发 splat 效果
- Canvas 全屏固定，
pointer-events: none，不阻挡页面点击
环境要求
- React 17+
- 支持 WebGL2 的桌面浏览器
- 仅客户端渲染（SSR 框架需在 Client Component 中使用）
常见问题
看不到效果？
- 硬刷新页面
- 确认桌面浏览器且支持 WebGL2
- 移动鼠标或点击页面启动动画
Next.js 报错？
确认组件文件有 'use client' directive。
相关包
License
MIT