目光跟随鼠标
根据鼠标所在的方向，切换九种头部朝向；鼠标靠近时回到正面。在没有精细指针的设备上，原组件会关闭跟随。
一个值得停靠的开源项目
Page
Mascot.
给网页，添一点性格。
Page Mascot 是 Kamran Ahmed（nilbuild）开源的交互吉祥物组件：它会看向你的鼠标，被轻点时做出表情。简单的页面，也可以有一点可爱。
开源ReactMIT 许可
本页介绍原项目；旁边是 VibeMarina 的定制海鸥示例。
VibeMarina / 定制示例可以互动
嗨，你也在做有趣的东西吗？
移动鼠标，或者轻轻点我一下。
Yachty
水手海鸥试试表情
只有一位船员：海鸥 Yachty。
09头部朝向
09角色表情
02精灵图
MIT原项目开源许可
01 / 关于原项目
小交互，也有大性格。
不是聊天机器人，也不需要把页面变成游戏。Page Mascot 用很小的交互，给作品添一个让人记住的细节。
轻轻一点，就有回应
点一下先眨眼，再出现爱心、闪光或笑脸；连续快速戳四下，还会有晕乎乎的表情。弹性动画会尊重减少动态效果设置。
换一套图，就是你的角色
使用现成角色，或自己画一套。原项目提供彩色、墨线、素描、孔版印刷、剪纸和像素六种风格。
功能说明参考原始 README ↗ · mascot.tsx ↗
02 / VibeMarina 定制版
认识 Yachty，叫它艇艇。
这一站，我们为 Page Mascot 画了一只水手海鸥：白色船员帽、蓝白水手服，再加一点点好奇心。
Yachty · 艇艇
名字来自 yacht，而不是第二个角色。
Yachty = yacht + y，沿用 VibeMarina 的游艇与港口意象。角色始终只有这只海鸥，而且它是本页的定制示例：不是 Page Mascot 的官方吉祥物，也不代表原作者背书。
03 / 实现方式
一个组件，两张小图。
每张精灵图都是 3×3：一张负责看向哪里，一张负责表情。把两张图放进项目里，再传给上游的 React 组件即可。
React / page-mascot
npm install page-mascotnpm install page-mascot
import { Mascot } from "page-mascot";
<Mascot
directions="/mascot/assets/yachty-directions.webp"
reactions="/mascot/assets/yachty-reactions.webp"
size={180}
label="Yachty the seagull"
/>
透明背景 · 等分格 · 固定身体位置 · 9 格
本页提供的是遵循上游格子顺序的 React 组件，并保留来源标注；它并不冒充 page-mascot 包本身。同样的两张图也可以直接用于上游组件。