nilbuild/page-mascot

What it solves

It provides a way to add interactive, cursor-tracking characters (mascots) to a website, allowing developers to easily implement characters that look at the user's mouse and react to clicks.

How it works

The system uses two 3x3 sprite sheets: one for head directions and one for expressions. The component calculates the angle of the pointer to select the appropriate cell from the directions sheet. When a user clicks the mascot, a cell from the reactions sheet is displayed for a short duration. It also supports an automated generation process where an AI agent can draw the nine directions and nine expressions in various styles (color, ink, sketch, riso, paper, and pixel) and assemble them into the aligned sheets.

Who it’s for

Web developers who want to add a playful, interactive element to their pages using React components.

Highlights

• Cursor-tracking head movement based on pointer angle.
• Click-triggered reactions (blinking/squashing).
• AI-powered generation of custom mascots via a skill installation.
• Support for multiple artistic styles including riso and pixel art.
• Accessibility considerations for screen readers and prefers-reduced-motion.