为什么我的桌宠是《鸣潮》里的心月狐

做这个博客的时候，我一直想让右下角有点"活的东西"。翻设定稿翻到心月狐，就决定是她了——月亮、星辉、狐灵，和这个站点的整体气质是一路的。

真正动手之后才发现，让一只 Q 版狐狸"看起来活着"比想象中麻烦。最后给她拆了九个状态：待机、走动、开心、生气、睡觉、好奇、趴着、思考、互动。状态不是随便切的，而是要跟着页面上的事情走：

• 打开页面先待机，过一会儿自己溜达到角落蹲着
• 鼠标放上去是好奇，点一下是互动，摸头会开心
• 长时间不操作会犯困，睡着以后又开始打呼
• 番茄钟开始的时候她会一起进入"专注"，结束铃响了跳出来提醒我休息

技术上其实就是一个状态机加一堆 CSS 动画。图片是先把设定稿裁开、抠成透明 PNG 再一张张对齐的，前后调了好几轮，早期版本切换时会有一下白闪，后来把九张图在空闲时间全部预加载才解决。

聊天功能接的是 DeepSeek，但密钥只放在服务端的接口里，前端只能看到一个 /api/chat。这一点在部署到 Cloudflare Pages 之后反而更省事了：Pages Functions 本身就跑在 edge runtime 上，把原来的接口原样搬过去就行，桌宠的能力一点没丢。

写这条的时候她正在右下角打盹——明天还要继续调她的动作节奏，现在这个走路的频率有点急，看着像是在赶作业。