一个网页吉祥物组件，能让页面上出现一个盯着鼠标看、点击还会眨眼的小角色

功能特性

一个 React 组件，你在页面里放一张九宫格朝向图和一张九宫格表情图，就能得到一个实时追踪鼠标位置、点击会做出反应的互动吉祥物。

• 鼠标往哪移，脑袋就往哪转。组件把鼠标相对吉祥物的角度算出来，从 3×3 的朝向图里挑对应格子显示，鼠标靠得近时有个死区，头会稳住不动
• 点一下吉祥物，它从 3×3 的反应图里挑个表情亮半秒钟，像是被戳到之后的眨眼或 squish 效果
• 自带六种画风：彩色、墨水、素描、riso 印刷、纸张、像素。同一角色换风格不用重画，对齐关系保持不变
• 自动做降级：没有精细指针的设备（比如纯触摸）会关掉追踪，开了 prefers-reduced-motion 的点击动画也会收住
• 支持自定义尺寸、屏幕阅读器标签、额外 CSS 类

使用方式

装包：

npm i page-mascot 基础用法，传两张精灵图路径：

import { Mascot } from 'page-mascot'

Mascot directions="/mascots/fox-directions.webp" reactions="/mascots/fox-reactions.webp" /> directions 是九格朝向图，reactions 是九格表情图，路径按你自己项目静态资源的路由来。size 默认 140px，label 默认读作 "mascot"。

官网上有 52 个现成角色可以直接下载素材。想要自己画的话，装个 CLI skill 然后描述角色长相，工具会帮你生成对齐好的两套图并插进页面。画图需要图像模型，Codex 自带，Claude Code 要走 OpenAI 图像 API，设个 OPENAI_API_KEY 就行。

👉 Github地址: github.com/nilbuild/page-mascot