🦋 手势精灵

伸出手掌，精灵随你飞舞！

基于 AI 手势识别的互动体验产品。通过摄像头捕捉手部动作，虚拟精灵跟随手掌移动、响应手势（张手/握拳/捏合/挥手），实现「隔空手势控制」的魔法效果。

✨ 功能一览

功能	说明
🖐️ 手势追踪	精灵跟随手掌移动，实时响应
✊ 握拳抓取	握拳抓住精灵，松手放飞，淡出消失
🤏 捏合缩放	拇指食指捏合，精灵缩放大小
💨 魔法爆发	快速挥手触发粒子爆发特效
🦋 6 种精灵	蝴蝶、蜻蜓、外星人、飞碟、幽灵、小火龙
🎨 4 种配色	海洋、火焰、月光、樱花（蝴蝶/蜻蜓专属）
📷 前后摄像头	支持切换前后摄像头
🔄 镜像翻转	一键镜像，适配不同使用场景
🦴 骨架显示	可视化手部骨架，调试/展示用
🔴 录屏功能	可调整录制框，MP4/WebM 格式输出
📱 移动端适配	触控交互、刘海屏安全区域、小屏自适应

🛠 技术栈

• 手势识别：MediaPipe Hands v0.4
• 渲染引擎：Canvas 2D
• 架构：单文件 HTML，纯前端，零构建，CDN 引入
• 兼容：Chrome 94+ / 鸿蒙浏览器 / Safari 15+（需 HTTPS）

🚀 部署

方式一：Vercel（推荐）

1. Fork 本仓库
2. 在 Vercel 导入该项目
3. 直接部署，无需配置
4. 绑定自定义域名（可选）

方式二：任意静态托管

将 index.html 上传到任意静态服务器即可，只需满足：

• 必须 HTTPS（摄像头 API 要求）
• 无需构建、无需后端

方式三：本地运行

# 任选一种方式启动本地服务器
npx serve .
# 或
python3 -m http.server 8080

访问 https://localhost:8080 即可体验。

🎮 使用方式

1. 打开页面，点击「开始体验」
2. 允许摄像头权限
3. 伸出手掌，精灵会飞到你手心
4. 试试这些手势：
   • 🖐️ 张手 → 翅膀展开
   • ✊ 握拳 → 抓住精灵（精灵淡出消失）
   • 🤏 捏合 → 缩放精灵大小
   • 💨 快速挥手 → 魔法爆发！
5. 点击顶部工具栏切换精灵和功能

📁 项目结构

├── index.html    # 唯一文件，包含全部代码
└── README.md     # 本文件

没错，就一个 HTML 文件 🎯

🏗️ 设计理念

• 零门槛：单文件、零构建、CDN引入，任何人都能部署
• 即时体验：打开即玩，无需注册登录
• 社交传播：录屏分享到微信/朋友圈，自带传播属性
• 跨端兼容：桌面+移动端+鸿蒙，一份代码全平台运行

📄 开源协议

MIT License — 自由使用、修改和分发。

---

未迟，一切都来得及 ✨