Claude 里的小螃蟹，现在住在我博客的里

如果你最近在我的博客里多停留了一会儿，可能见过它：一只橙色的像素风小螃蟹，会从某条分隔线下面悄悄冒出来，在空白处走两步，掏出笔记本敲一会儿，或者举起一块写着「述尔」的小牌子，过一阵又缩回线下。

是不是很可爱？

它叫 Clawd，是 Anthropic 的吉祥物。

这篇说说它从哪来、会做什么，以及怎么把它放到你自己的网站上。

它从 Claude App 里来

Claude 的桌面 App 里藏着一个横版闯关小游戏，叫 Clawd Quest：操控小螃蟹跑跳、捡东西、完成一个个小任务——比如「天空忘了醒来，去把五颗日出火花找回来」（原文：The sky forgot to wake. Gather the five sunrise sparks.）。

它有生命值、有计分、有背景音乐，还有一个 Ultra 模式。这个游戏设计得相当用心。

翻 App 的安装包时我发现，游戏里小螃蟹的动作并不是视频或图片，而是用文本编码的像素画：每个动作是一张很小的网格（比如 24×17 格），配一个三五种颜色的调色板；第一帧记下整张网格，之后每一帧只记录「哪几个格子变了色」。这样一来，25 套动作加起来只有一百多 KB，压缩后传输不到 40KB。

既然是数据，就可以拿出来用代码重新画。我从中挑了 20 套：走路、横着爬、跑、东张西望、敲笔记本、敲台式机、草裙舞、冥想、思考、头顶亮灯泡、挥手、转晕……又按同样的格式画了两套原创动作：

• 看书：双钳捧起一本蓝封面的书，眼睛垂下来一行一行扫读，读完翻页；
• 举牌：举着一块木框小牌子上下晃。牌子上的字可以配置，在我这里写的是手绘的 9×9 像素字「述尔」。

它会做什么

自己找地方站。 每次出场，它会扫描当前屏幕里所有的横线——标题下的分隔线、文章里的 <hr>、列表的底线，以及图片、代码框的上边缘——找出线上方不压文字的那一段空白，从线下冒出来。

按空间挑动作。 举牌、亮灯泡这类个子高的动作，只在上方空间够的地方做；当前位置放不下，它会先走到空旷的地方再做。

跟着线走。 页面滚动时它站在线上跟着走；图片加载导致排版变化时也会跟着挪；线滚出屏幕后才退场，下次在新的屏幕里重新找线。

会互动。 鼠标主动凑过去，它要么挥手，要么转身就跑，身后没地方跑就钻回线下、从另一头冒出来；连着被追几次会转晕；站着不动时眼睛跟着鼠标转；点它一下会蹦起来，有时还撒一把彩带。

设计上的考虑

做这只螃蟹时，我给自己定了一条原则：它是页面的住客，不是页面的主角。 博客是拿来读的，螃蟹再可爱也不能抢正文的戏。下面这些取舍都从这条出发。

站在线上，而不是飘在角落。 网页上常见的看板娘、宠物挂件大多固定在屏幕一角，和内容没有关系。而文章页本来就有很多横线：分隔线、列表底线、图片和代码框的边缘。让它把这些线当地面，它就像真的住在页面里，而不是贴在玻璃上。

只在看得见的地方出现。 每次都在当前屏幕里找线，而不是固定在页脚——放在页脚的话，大多数人根本滚不到那里。线滚出屏幕它才退场，滚动时跟着线走，不会悬在半空。

不挡内容。 只站在上方没有文字的那段空白里；个子高的动作要上方留足空间才做；它本身不拦截点击，下面的链接照样能点。屏幕里没有合适的线时（比如长文正文中间），它就先不出来。

出现要克制。 每次出场只做三五个短动作，然后缩回线下，隔几秒到十几秒再随机出现。大部分时间它不在，偶尔出现才有惊喜，一直在动反而让人烦。

互动只回应「主动」的靠近。 滚动页面时，鼠标和螃蟹的相对位置也会变，但那不是读者想逗它。所以只有鼠标真的在移动、并且朝它靠近时，它才挥手或逃跑，不会一滚动就跑掉。

像素要清楚。 像素画最怕被缩放糊掉，所以它按屏幕的物理像素取整倍数绘制，视网膜屏上边缘依然锐利。牌子上的字用比螃蟹细一倍的像素画，字能看清，牌子也不会比螃蟹还抢眼。

尊重访客的设置。 访客在系统里开启了「减少动态效果」时，它不会出现。

怎么用

代码已开源在 GitHub：Tespera/clawd-crab。

任何网页，一行接入：

<script src="https://cdn.jsdelivr.net/gh/Tespera/clawd-crab@0.1/dist/clawd-crab.iife.js" data-sign="HELLO" defer></script>

脚本走 jsDelivr 的 CDN，国内也能访问；样式和像素数据都打包在这一个文件里，不需要额外的 CSS。

配置都写在这个标签上，常用的几项：

data-actions 和 data-exclude 里用的动作名称如下：

冒出、缩回、站立，以及鼠标互动时的反应（逃跑、转晕、撒彩带）不在这张表里，始终都有；不想要互动就用 data-interactive="false" 关掉。

牌子上的字：内置了英文字母、数字和常用符号的 5×7 像素字体，直接写就行。中文需要自己提供点阵（每个字一组字符串，# 是笔画），仓库的 README 里有写法。

前端工程里用：

import { mountClawd } from 'clawd-crab';

const clawd = mountClawd({ sign: 'HELLO', exclude: ['desktop'] });
// 页面卸载时
clawd.destroy();

Electron 这类基于网页的 App 同理；原生 App 可以放在 WebView 里用。

关于版权

项目代码以 MIT 协议开源。但除了「看书」「举牌」两套是我画的，其余像素素材都来自 Claude App，Clawd 是 Anthropic 的吉祥物，这些素材的版权归 Anthropic 所有，并不在 MIT 授权范围内。放在个人博客上玩玩问题不大，商用之前请自己确认清楚。

最后，如果你在这页的某条线上看到了它，试着把鼠标慢慢挪过去。