Show Your Finger · 手势滤镜

一个运行在浏览器里的实时手势识别特效相机：伸出双手，五指链条在双手之间闭环成形，每一段都可以挂不同的滤镜；翻转手掌，长边交叉成 X 形；还有立体柱体、辉光拖尾、跟随文字等 AM（Alight Motion）同款特效。

无需安装 App，打开网页、授权摄像头即可玩。所有计算都在本地浏览器完成，画面数据不出设备。

玩法指南

手势	效果
伸出双手	五段链条完整显现（拇指→食指→中指→无名指→小指→循环回拇指）
伸中指	点亮「食指↔中指」段的滤镜
伸无名指	点亮「中指↔无名指」段的滤镜
伸小指	点亮「无名指↔小指」与「小指↔拇指」段，五色闭环
翻转一只手（手心↔手背）	长边交叉，链条拧成 X 形
双手同伸 3 / 4 / 5 指	双手指尖构成三角柱体 / 四边柱体 / 五边柱体

控制区

• 显示：调试开关（指尖点位 / 手心手背标签 / 引导线框）、画面大小滑杆、沉浸全屏（Esc 退出）
• 特效模式：辉光拖尾 / 跟随文字（可自定义）/ 指尖粒子 / 故障干扰 / 立体柱体
• 五段滤镜：每段独立可选，共 16 种滤镜

滤镜库：负片 · 黑白 · 血红 · 冷蓝 · 翠绿 · 紫调 · 复古 · 高能 · 暗夜 · 模糊 · 故障 · 条纹 · 夜视 · 红外 · X光 · 马赛克

快速开始

npm install
npm run dev        # 开发服务器
npm run build      # 生产构建 → dist/

浏览器打开后点击「开启摄像头」，授权即可。

📱 手机使用注意：浏览器要求 HTTPS 或 localhost 环境才授予摄像头权限。 本机开发用 localhost 没问题；想在手机上通过局域网访问，需要部署到 HTTPS （如 GitHub Pages / Vercel / Netlify）或使用隧道工具。

技术栈

• React 19 + TypeScript + Vite + Tailwind CSS
• MediaPipe Hands：双手 21 关键点实时追踪，模型文件已本地化（public/mediapipe/hands/），不依赖 CDN
• Canvas 渲染管线：五个滤镜层全部为 Canvas，逐帧从主视频拷帧——全程只解码一路视频
• CSS clip-path: polygon()：按指尖坐标逐帧裁切滤镜区域
• CSS filter 链 + 纹理叠加层：夜视扫描线、条纹、暗角、故障抖动动画

实现要点

• 链条拓扑：相邻手指依次连线成段，小指循环回拇指闭环；段轮廓常显，伸出手指"点亮"对应段
• 手心/手背判断：手腕→食指根→小指根的缠绕方向（叉积符号），旋转不变、翻转即变号
• 交叉检测：结构顺序连线（不做角度排序），一只手翻转时两条长边自然交叉成 X 形
• 立体柱体：双手对应指尖构成棱柱的两个端面，对应顶点连线成侧棱——3 指三角柱、4 指四边柱、5 指五边柱
• 马赛克：Canvas 降采样（36 像素块宽）再关闭平滑放大
• 防抖动：所有指尖坐标滑动平均平滑

项目结构

app/
├── public/mediapipe/hands/   # MediaPipe 模型文件（本地化）
├── src/
│   ├── pages/Home.tsx        # 主页面：摄像头、手部追踪、滤镜层、特效层
│   ├── index.css             # 全局样式 + 滤镜纹理/动画
│   └── main.tsx              # 入口
└── vite.config.ts

License

MIT