You've Seen This Before

当 Claude Code 在思考的时候，会显示一个小转圈加一个随机词。不是无聊的"思考中..."——而是会蹦出各种好玩的词，比如 Simmering（文火慢炖）、Moonwalking（太空步）、或者 Discombobulating（迷惑中）。

Where the Words Live

这些词是硬编码在 Claude Code 的源文件里的——一个巨大的 JavaScript 文件叫 cli.js。

有人（ππ！）用 Python 和正则表达式把所有转圈词从压缩代码里挖了出来（最新版 v2.1.79 有 191 个）。还有 8 个过去式的"完成词"（比如 Crunched），是思考结束后显示的。另外还有 2 个已退役的词（Sautéing 和 Flambéing），总共 201 个。

The Final Product

成品是一个单独的 HTML 文件——大约 970 行代码——打包了轮播、搜索、转圈动画、趣味解释弹窗和收集游戏。不需要外部库，不需要构建工具，不需要服务器。打开文件就能玩。

Check Your Understanding

Three Actors, Three Jobs

整个词汇库存放在四个 JavaScript 对象里。你可以把它们想象成四个文件柜，每个柜子存着同一批词的不同信息。

Inside the Emoji Map

const E = {
  'Thinking': '🤔',
  'Cooking':  '🍳',
  'Clauding': '🤖',
  // ... 还有 198 条
};

The Category Blueprint

D 里的每个类别是一个对象，有固定的结构：

{
  icon: '🧠',
  th:   'purple',
  en:   'Serious Thinking',
  zh:   '正经思考',
  f:    ['Thinking', 'Pondering', ...],
  w:    ['Thinking', 'Pondering', ...]
}

Watch Them Work Together

当你点击一个词卡时，三个数据对象会联手合作。来看看它们的"群聊"：

Check Your Understanding

The Filmstrip Trick

想象一条长长的胶片横着摆放，每一帧刚好是屏幕的宽度。一个窗口（视口）一次只显示一帧。要切换画面，只需要把整条胶片往左或往右拉。

这个轮播就是这么工作的。所有 10 张幻灯片在一个 Flexbox 行里并排放着。因为容器隐藏了溢出的部分，所以一次只能看到一张。

.slides-area {
  flex: 1;
  overflow: hidden;
}
.slides-track {
  display: flex;
  transition: transform .45s;
}
.slide {
  min-width: 100%;
}

The One-Line Slide

切换幻灯片简单得令人惊讶。一行代码完成所有重活：

function go(i) {
  cur = Math.max(0, Math.min(i, D.length-1));
  track.style.transform =
    `translateX(-${cur*100}%)`;
}

Three Ways to Navigate

轮播同时支持按钮点击、键盘操作和触屏滑动。三种方式都调用同一个 go() 函数：

Check Your Understanding

The Slot Machine Feel

点"随机转一个"，词就会飞速闪过，然后逐渐慢下来，直到最后一个词"停住"。感觉就像老虎机——代码的工作原理也很类似。

核心技巧：一个递归函数用越来越长的间隔调用自己。开始时很快（60毫秒），后面逐渐变慢（最多310毫秒），产生自然的减速效果。

Inside spin()

function spin() {
  let c = 0;
  const t = 12 + Math.floor(
    Math.random() * 8
  );
  (function tk() {
    const w = A[Math.floor(
      Math.random() * A.length
    )];
    sW.textContent = w;
    c++;
    if (c < t) {
      setTimeout(tk,
        60 + (c/t) * 250
      );
    }
  })();
}

The Deceleration Formula

魔法在这个表达式里：60 + (c/t) * 250

The Spinning Icon

在词快速闪过时，一个小图标在四个 Unicode 四分之一圆弧字符之间循环切换，制造旋转效果：

◐ ◓ ◑ ◒

一个 setInterval 每 150ms 切换一次。就是四个字符轮流登场——最简单的动画。

Check Your Understanding

The Search Data Pipeline

在搜索能工作之前，代码会预先构建一个扁平的列表，包含每个词的全部元数据：

const SD = D.flatMap(c =>
  c.w.map(w => ({
    w,
    zh: Z[w] || '',
    em: E[w] || '',
    cat: c.zh
  }))
);

The Bilingual Filter

过滤函数非常简洁——检查搜索词是否出现在英文名或中文翻译里：

const m = q
  ? SD.filter(d =>
      d.w.toLowerCase().includes(q)
      || d.zh.includes(q)
    )
  : SD;

Highlight Matches

显示结果时，匹配的文字会用动态正则来高亮：

d.w.replace(
  new RegExp(
    '(' + escapedQuery + ')',
    'gi'
  ),
  '<mark>$1</mark>'
)

Check Your Understanding

Tracking with a Set

怎么知道用户已经看过哪些词了？你需要一种绝不会存重复的数据结构。请出 Set：

const seen = new Set();

function markSeen(w) {
  if (seen.has(w)) return;
  seen.add(w);
  cNum.textContent = seen.size;
  cFill.style.width =
    (seen.size/TOTAL*100) + '%';
}

Milestone Toasts

每 10 个词就会有一个小庆祝从屏幕顶部滑下来。里程碑被定义为一个简单的数组，包含阈值和消息：

const MS = [
  [10,  '🌱', '初来乍到'],
  [50,  '⭐', '半百达成'],
  [100, '💯', '破百！'],
  [201, '🏆', '全部集齐！'],
  // ... 还有 10 个里程碑
];

const m = MS.find(
  x => x[0] === n
);
if (m) showToast(m[1], m[2]);

The Toast Animation

弹窗一开始藏在屏幕上方（top: -60px）。触发时，一个 CSS 类让它滑入视线：

.toast {
  position: fixed;
  top: -60px;
  transition: top .4s;
}
.toast.show {
  top: 1rem;
}

// JavaScript 里：
toast.classList.add('show');
setTimeout(=>
  toast.classList.remove('show')
, 2500);

Final Challenge