nilbuild/page-mascot

解决的问题

它提供了一种向网站添加交互式、光标追踪角色（吉祥物）的方法，使开发人员能够轻松实现注视用户鼠标并对点击做出反应的角色。

工作原理

该系统使用两个 3x3 精灵表：一个用于头部方向，另一个用于表情。组件会计算指针的角度，以从方向表中选择相应的单元格。当用户点击吉祥物时，会短暂显示反应表中的一个单元格。它还支持自动化生成流程，AI 代理可以以多种风格（彩色、墨水、素描、孔版印刷、纸张和像素）绘制九个方向和九个表情，并将它们组装成对齐的表格。

适用人群

希望使用 React 组件为页面添加有趣且交互式元素的 Web 开发人员。

亮点

• 基于指针角度的光标追踪头部移动。
• 点击触发的反应（眨眼/压扁）。
• 通过安装技能实现 AI 驱动的自定义吉祥物生成。
• 支持多种艺术风格，包括孔版印刷和像素艺术。
• 针对屏幕阅读器和 prefers-reduced-motion 的无障碍性考虑。