page-mascot

一个会注视光标、被戳时会眨眼的交互式角色。

查看演示 →

安装

npm i page-mascot

使用现有吉祥物

在演示页面挑选一个角色，将其两张精灵图下载到 public/mascots，然后让组件指向它们：

import { Mascot } from 'page-mascot'

<Mascot
  directions="/mascots/fox-directions.webp"
  reactions="/mascots/fox-reactions.webp"
/>

路径可以是你的应用所提供的任何路径，因此导入的图片同样可用。

或者，安装下面的技能后，让 agent 来完成：

/page-mascot put the fox on my page

绘制你自己的吉祥物

安装技能：

npx skills add nilbuild/page-mascot --skill page-mascot --global --yes

然后告诉你的 agent：

/page-mascot a chibi otter with chocolate-brown fur
/page-mascot make one that looks like me        [attach a photo]
/page-mascot a chibi fox, in the riso style

它会绘制九个方向和九种表情，将它们构建成两张对齐的精灵图，检查角色在图之间不会跳动，然后把组件放到你的页面上，使用与上面相同的两个 props。

绘图需要一个图像工具。Codex 自带；Claude Code 则通过 OpenAI images API：

export OPENAI_API_KEY=sk-...

或者获取这些提示词，在任何聊天界面中使用。

Props

在没有精细指针（fine pointer）的环境下，视线追踪会自动关闭；点击挤压动画也会遵循 prefers-reduced-motion 设置。

工作原理

每个角色由两张 3×3 精灵图组成：九个头部方向，以及九种表情。

指针的角度决定在方向精灵图上选取哪个单元格，并设有死区，使头部在光标靠近时保持稳定。点击时，会从表情精灵图中显示一个单元格，持续半秒。

同一个角色可以用六种风格绘制：彩色、水墨、素描、riso（孔版印刷）、纸张和像素。只有渲染方式改变，因此对齐始终保持一致。

许可证

MIT © Kamran Ahmed