写完电台之后，角落里有了声音，但还是没有人味。
歌会一直放下去，可它不会回应你。你读完一篇很长的东西，关掉页面，什么都没发生。于是想再放一个东西进去——不用一直出声，但你在的时候它都在。
后来它变成了一只猫。叫 Agnes，银灰虎斑，住在左下角。
她不太说话
最早她是会主动搭话的。读到文章底部冒一句，深夜冒一句，滚动快了也会说点什么。做的时候觉得很聪明，用了三天就烦了。
一只总在找话说的猫，和一只住在那儿的猫，是两种东西。
所以后来全删了。不是调低频率，是删干净——现在你在页面上怎么滚、读到哪里、停多久，都不会让她开口。只有你点她，她才有反应。
删完之后我才想明白一件事：陪伴的反面不是沉默，是打扰。
现在她的日常很简单：趴着，看你读文章，听电台放歌。鼠标凑近了会抬头看一眼，你点她会探头，太久没人理她就趴下去睡。仅此而已。
她怎么知道我在看什么
这个我纠结了很久。
接上对话之后第一个问题是：她什么都不知道。你问「这篇讲了什么」，她只能瞎编——而一只会一本正经编造你文章的猫，比不会说话的猫糟糕得多。
所以给她定了两条规矩。
第一，她能看到的，只有系统真的交给她的东西。页面是哪一类、读到哪了、电台在放什么、你在正文里选中了哪几句。就这些，没有更多。她不知道就说不知道，不许猜，也不许把别人的观点当成我的。
第二，她只在真需要的时候才去查。你问「这段什么意思」，她只看你选中的那几句，不会把整篇翻出来——你能指着一段问，就说明你已经读到那儿了。但你问「这篇讲了什么」，她会真的去把文章读一遍，而不是看着标题和摘要装作读过。
差别很细，但用起来完全不一样。前者像有人坐你旁边一起看，后者像客服在念目录。
顺带一提，她控制不了电台。她知道在放什么，仅此而已。
一只像素猫身上的彩色线
这是整个项目里我最喜欢的 bug。
深色背景下，猫的轮廓边总隐约有几道紫的、蓝的细线。查了半天 CSS，什么都没写。又怀疑是浏览器缩放，换分辨率、换 DPR，还在。
最后把图片逐像素拆开看，才发现问题在文件本身：猫的轮廓周围散布着一堆几乎完全透明的像素，alpha 只有个位数，颜色却是纯蓝和纯品红——图片压缩在透明通道里留下的残渣。平时看不见，一到深色背景就现形了。
确认这不是渲染问题花了四步：逐像素统计透明度分布、手工合成一遍再和浏览器实际渲染对比（差异为零）、截图区域扫高饱和色、最后换成无损格式重新扫一遍归零。
修法很笨：把所有几乎透明的像素清掉，重新存成无损。文件变大了，动画那几个从十几 KB 涨到四十多 KB。值。
后来还顺手记了一个 WebP 动画的坑：帧头里表示「整帧替换」的那一位，值跟直觉是反的。写错了不会报错，画面会一帧一帧叠上去，越来越脏。
她还跟电台抢地方
左下角就那么大。电台的浮标被拖过来的时候，会正好压在她身上。
想了很久谁让谁。结论是她让——电台在放歌，让一只正在出声的东西挪位置是很奇怪的；一只猫挪两步，很自然。
但让位不是简单往上一推。她一挪开就不碰撞了，于是弹回去，回去又碰上，来回抖。最后的做法是：判断之前先假装自己没让过，量出真实要挪多少，量完再恢复。
听起来很小儿科。这类 bug 的共性都一样：你的修正动作本身，改变了触发它发生的条件。
关掉她之后
她右上角有个设置，可以把她关掉。
关掉之后左下角不会空着，会留一对耳朵尖。点一下，她就回来了。
这个细节是特意做的。不留点什么的话，一个不知道设置入口在哪的人，就真的再也找不回她了。
最后
做完之后回头看，她花掉的时间大部分不在「让她能做什么」上，而在「让她别做什么」上：删掉主动搭话，限定她能看到的范围，规定她什么时候不许去查，让电台压过来时她先退。
功能清单其实很短。趴着、抬头、探头、睡觉、说话，加上一对用来唤回她的耳朵。
但她在的时候，这个角落就不太一样了。
你如果在页面上看到她，可以点一下。
Conversation
留言