nilbuild/page-mascot

选用指南

AI 根据 README 整理 · 2026/10/14 16:40:35

使用方式

通过 npm 安装，以 React 组件形式使用，需提供方向图和反应图两个图片路径。

查看 README 依据

<img src=".github/fox.png" width="160" alt=""> # page-mascot An interactive character that watches the cursor and blinks when you poke it. **[See the fifty-two &rarr;](https://koboyo.com/page-mascot)** ## Install ```bash npm i page-mascot ``` ## Use existing mascots Pick a character on the [demo page](https://koboyo.com/page-mascot) and download its two sheets into `public/mascots`, then point the component at them: ```tsx import { Mascot } from 'page-mascot' <Mascot directions="/mascots/fox-directions.webp" reactions="/mascots/fox-reactions.webp" /> ```

部署要求

需要 Node.js 环境以使用 npm 安装，并需准备两个精灵图（方向图和反应图）。

查看 README 依据

<img src=".github/fox.png" width="160" alt=""> # page-mascot An interactive character that watches the cursor and blinks when you poke it. **[See the fifty-two &rarr;](https://koboyo.com/page-mascot)** ## Install ```bash npm i page-mascot ``` ## Use existing mascots Pick a character on the [demo page](https://koboyo.com/page-mascot) and download its two sheets into `public/mascots`, then point the component at them: ```tsx import { Mascot } from 'page-mascot' <Mascot directions="/mascots/fox-directions.webp" reactions="/mascots/fox-reactions.webp" /> ```

已知限制

没有精细指针时跟踪会关闭，且点击挤压效果尊重 prefers-reduced-motion 设置。

查看 README 依据

| `label` | `'mascot'` | what a screen reader calls it | | `className` | | | Tracking switches off without a fine pointer, and the click squash honours `prefers-reduced-motion`. ## How it works Each character is two 3×3 sprite sheets: nine head directions, and nine expressions.  The pointer's angle picks a cell on the directions sheet, with a dead zone so the head settles when the cursor is close. A click shows a cell from the reactions sheet for half a second.