警告：别在工作时间打开这个页面。 因为你大概率会滚到底，然后鬼使神差地写一张月亮明信片，发给一个很久没联系的人。
事情是这样的——我偷了一轮月亮，没花一分钱服务器： 零后端、零音频文件、零第三方素材，把满月、河灯、烟花、邮局，全部塞进一个网页。 你往下滚，是从异乡回团圆的五章书；你点夜空，灯会亮、烟花会炸； 滚到最后一页，还能把这张月亮变成一个链接直接寄出去—— 对方点开，会亲手拆开一枚火漆封缄的信。
从第一行代码到上线，全程只干了一件事：跟 TraeCode 聊天。
现在就试（手机电脑都能玩）：https://mid-autumn-festival-pi.vercel.app/
30 秒录屏，建议开声音，别剧透给自己：
一、我做了什么
一个纯前端的中秋主题滚动叙事互动网页《月之书 · MOON BOOK》。 它不是普通落地页——是一本书，一屏一章，共五章，滚到哪，情绪就到哪：
-
序 · 月之书 —— 票根式入场仪式，选"带声音进入"还是"安静进入"
-
Chapter I · 异乡 —— 城市天际线下的月夜，一个人和一轮月
-
Chapter II · 归途 —— 160vh 长滚动，流星划过，照亮回家的路线
-
Chapter III · 灯河 —— 轻触夜空，放一盏河灯。暖纸透光 shader，灯光沿轨迹漂向远方；进章还有"三灯迎客"
-
Chapter IV · 月圆 —— 点击夜空，绽放烟花（1400 粒子池），巨型墨字"但愿人长久，千里共婵娟"配朱红"婵娟"印 + 竖排"中秋"印
-
Chapter V · 月亮邮局 —— 选 8 档月相、写留言、署上名字，生成专属明信片：可下载 PNG，也可以直接变成一个链接寄给对方
最"心机"的一个设计：收到明信片链接的人，会看到一段火漆启封动画——像真的拆开一封从月亮寄来的信。
二、灵感来自哪
活动帖里说：“有人想做一张节日贺卡。”
但我觉得中秋的贺卡不该只是一张图——它应该有一段情绪的路径：从一个人的异乡，到想起回家的路，再到抬头看见同一轮月亮。
所以我把"贺卡"做成了一本书：前面四章负责把情绪铺满，第五章的明信片，才是真正"寄出去"的那一下。
它解决的假期问题是：异地亲友之间，中秋祝福不知道怎么说、说了又轻飘飘。 滚完这本书再写的那张明信片，分量会不一样。
三、效果预览
完整录屏见顶部 GIF。几个最值得截图的瞬间：
-
灯河章：点一下夜空，一盏暖黄的灯从水面亮起、漂远
-
月圆章：烟花在月盘前方炸开，墨色诗句压满整屏
-
月亮邮局：选好月相、写下名字，明信片实时生成
-
收信视角：火漆碎裂、信纸展开的启封动画
与其看图，不如自己滚一遍：https://mid-autumn-festival-pi.vercel.app/
四、用 TraeCode 创作的过程
整个项目从零到部署，全部在 TraeCode 里完成，几个关键节点：
-
架构先行：先让 TraeCode 出章节结构和滚动叙事方案——React 19 + react-three-fiber 搭 3D 舞台，GSAP ScrollTrigger + Lenis 驱动滚动，three 独立分包懒加载，首屏秒开
-
灯河章：手写"暖纸透光"shader 迭代了三轮；中途光晕莫名消失，TraeCode 定位到是
pow(负数)产生 NaN，一行修复 -
月圆章：烟花一开始开到月亮后面去了，对话几轮修正到月盘前方 z≈2.6，绽放位置终于"对味"
-
月亮邮局：不想为分享功能写后端，最后用 Canvas 绘制 + base64url，把整张明信片塞进一条链接——零后端也能"寄信"
-
收尾：WebAudio 全合成音效（一个音频文件都没用）、移动端 DPR/FOV 自适应、Vercel 部署配置，一次对话搞定
生产构建 0 错误，从第一行代码到可分享链接，全程没离开过 TraeCode。
五、最后
月亮我已经偷来了，链接就搁这儿。
今年中秋，别再群发"中秋快乐"—— 打开《月之书》，滚到底，写下 TA 的名字，把这块月亮直接寄过去。 你猜，对方拆完那枚火漆，会回你什么？
体验地址最后再放一次（反正你刚才已经点进来过一遍了）：https://mid-autumn-festival-pi.vercel.app/