一个基于 Next.js 的浪漫动画网页，通过线稿美瞳眼睛和名字粒子系统呈现"看见"主题。

• 线稿美瞳风格眼睛：精细的线条设计，呈现写实而唯美的眼睛
• 177个名字粒子系统：每个名字独立动画，从瞳孔飞出
• 红心艺术呈现：前面金色系 + 后面红色系，层次分明
• 艺术字漂浮字幕："你在我眼里，更在我心里"动态展示

1. 0-3秒：眼睛静止，主题"看见"淡入
2. 3-4秒：瞳孔放大，准备释放
3. 4秒起：名字逐个从瞳孔飞出
   • 飞出间隔：300ms
   • 特写展示：1000ms
   • 前40个：金色系（显眼）
   • 后137个：红色系（层次）
4. 约4分47秒后：所有名字定位成红心
5. 最终状态：红心 + 艺术字 + 背景音乐

• 音乐：《送你一朵小红花》
• 播放方式：自动循环播放
• 控制：左下角播放/暂停按钮
• 文件位置：assets/送你一朵小红花.mp3

• Node.js: 24.x
• pnpm: >= 9.0.0

pnpm install

pnpm dev

访问 http://localhost:5000

pnpm build

# 运行部署准备脚本
./scripts/edgeone-deploy.sh

# 上传到 EdgeOne 控制台
# 或使用 coscli
coscli upload out/ cos://your-bucket/ -r

# 1. 构建
pnpm build

# 2. 上传 out/ 目录到 EdgeOne
# 通过控制台拖拽上传
# 或使用 coscli 上传

# 3. 验证
curl -I https://your-domain.cloud.tencent.com/

查看完整的 EdgeOne 部署手册：

cat EDGEONE_DEPLOYMENT.md

查看快速参考卡：

cat EDGEONE_QUICK_REFERENCE.md

├── src/
│   ├── app/
│   │   ├── layout.tsx          # 布局组件
│   │   └── page.tsx            # 首页
│   ├── components/
│   │   └── EyeHeartAnimation.tsx  # 核心动画组件
│   └── data/
│       └── 177names.txt        # 名字数据
├── public/
│   └── assets/
│       └── 送你一朵小红花.mp3  # 背景音乐
├── scripts/
│   ├── edgeone-deploy.sh       # EdgeOne 部署脚本
│   ├── build.sh                # 构建脚本
│   ├── dev.sh                  # 开发脚本
│   └── start.sh                # 启动脚本
├── next.config.ts              # Next.js 配置
├── package.json                # 项目配置
├── tsconfig.json               # TypeScript 配置
├── .coze                       # Coze 配置
├── EDGEONE_DEPLOYMENT.md       # EdgeOne 部署手册
├── EDGEONE_QUICK_REFERENCE.md  # 快速参考卡
├── MUSIC_SETUP.md              # 音乐设置说明
└── README.md                   # 本文件

• 实时渲染：使用 Canvas API 实现流畅的 60fps 动画
• 粒子系统：177个独立的名字粒子
• 光效系统：金色/红色发光效果，增强视觉冲击力

1. Emerging：从瞳孔内部飞出，向外扩散
2. Featured：特写展示，放大到屏幕50%
3. Reverting：缩小并飞向心形位置
4. Positioned：定位在心形上，呼吸效果

• 前面名字（0-39）：金色系，非常显眼
• 后面名字（40-176）：红色系，层次渐变
  • 中心：鲜红色
  • 中间：红色
  • 边缘：深红色

• 框架：Next.js 16 (App Router)
• UI 库：React 19
• 语言：TypeScript 5
• 样式：Tailwind CSS 4
• 组件：Radix UI
• 动画：Canvas API + CSS Animation
• 构建：Next.js 内置构建系统

next.config.ts 已配置为静态导出：

export default {
  output: 'export',                    // 静态导出
  images: {
    unoptimized: true,                 // 禁用图片优化
  },
};

音乐文件路径在 src/components/EyeHeartAnimation.tsx 中：

<audio ref={audioRef} loop>
  <source src="/assets/送你一朵小红花.mp3" type="audio/mpeg" />
</audio>

如需更换音乐，修改此路径即可。

• Lighthouse Performance: > 90
• 动画帧率: 60fps
• 首次加载: < 2s
• 总动画时长: 约4分47秒

# 检查音乐文件
ls -la public/assets/送你一朵小红花.mp3

# 检查浏览器控制台是否有错误
# 某些浏览器可能需要用户交互才能播放

# 清理缓存
rm -rf .next node_modules out
pnpm install
pnpm build

# 1. 检查 _next/static/ 目录是否上传
# 2. 检查浏览器控制台错误
# 3. 清除浏览器缓存

更多问题解决方案，查看 EdgeOne 部署手册。

• ✅ 实现线稿美瞳风格眼睛
• ✅ 实现177个名字粒子系统
• ✅ 实现红心艺术呈现
• ✅ 添加背景音乐自动播放
• ✅ 添加艺术字漂浮字幕
• ✅ 优化动画时长匹配音乐
• ✅ 优化前面名字颜色更明显
• ✅ 完成 EdgeOne 部署配置

MIT License

• 设计灵感：眼眸与心的连接
• 音乐：《送你一朵小红花》
• 技术支持：Next.js、React、Tailwind CSS

• 文档：查看 EDGEONE_DEPLOYMENT.md
• 问题反馈：提交 Issue
• 技术支持：腾讯云 EdgeOne

---

看见 - 你在我眼里，更在我心里 ❤️

Made with ❤️ using Next.js