一个基于 Next.js 的浪漫动画网页，通过线稿美瞳眼睛和名字粒子系统呈现"看见"主题。
- 线稿美瞳风格眼睛：精细的线条设计，呈现写实而唯美的眼睛
- 177个名字粒子系统：每个名字独立动画，从瞳孔飞出
- 红心艺术呈现：前面金色系 + 后面红色系，层次分明
- 艺术字漂浮字幕："你在我眼里，更在我心里"动态展示
- 0-3秒：眼睛静止，主题"看见"淡入
- 3-4秒：瞳孔放大，准备释放
- 4秒起：名字逐个从瞳孔飞出
- 飞出间隔：300ms
- 特写展示：1000ms
- 前40个：金色系（显眼）
- 后137个：红色系（层次）
- 约4分47秒后：所有名字定位成红心
- 最终状态：红心 + 艺术字 + 背景音乐
- 音乐：《送你一朵小红花》
- 播放方式：自动循环播放
- 控制：左下角播放/暂停按钮
- 文件位置：
assets/送你一朵小红花.mp3
- Node.js: 24.x
- pnpm: >= 9.0.0
pnpm install
pnpm dev
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个独立的名字粒子
- 光效系统：金色/红色发光效果，增强视觉冲击力
- Emerging：从瞳孔内部飞出，向外扩散
- Featured：特写展示，放大到屏幕50%
- Reverting：缩小并飞向心形位置
- 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
35/F,Tencent Building,Kejizhongyi Avenue,Nanshan District,Shenzhen
