Tool Open source

page-mascot

page-mascot is a web component that adds an interactive character which tracks the cursor and displays a reaction when clicked. Each character uses two aligned 3×3 sprite sheets: one with nine head directions and one with nine expressions. The pointer angle selects a direction, with a dead zone near the cursor, while a click displays a reaction for half a second. Existing mascots can be supplied as image sheets, or the included coding-agent skill can generate nine directions and nine expressions for a custom character and place it on a page. It supports colour, ink, sketch, riso, paper, and pixel styles; tracking is disabled without a fine pointer, and click animation respects prefers-reduced-motion. The package is distributed through npm and licensed under the MIT License.

View repository Visit site Mentioned in 2 videos ↓

What page-mascot is used for

2 uses taken from transcripts — each links to the moment in the video.

  • Adds an interactive character to a website that follows the cursor and reacts to clicks. It supports existing characters and can use a coding-agent skill to generate and align custom mascots.

  • A web component that adds an interactive character to a page which follows the cursor, blinks, and reacts to clicks. It supports custom sprite sheets, reduced-motion settings, and an agent skill for generating character sheets.

Videos mentioning page-mascot

2 in the library.