Put a 90s-style interactive mascot on your website
You can now put a 90s-style desktop mascot on your website that watches the cursor and blinks when clicked.
Developer Kamran Ahmed released page-mascot, an open-source web component that gained 728 GitHub stars this week. The character relies on two 3×3 sprite sheets: one sheet turns the head across nine directions based on the cursor's angle, while the second triggers an expression reaction for half a second when clicked.
Why it matters: It brings back nostalgia without ruining usability. Cursor tracking shuts off on touchscreens without a fine pointer, and click animations respect prefers-reduced-motion settings. You can use pre-made characters or use an included AI skill to generate custom mascots in six visual styles, including pixel, riso, and ink.
Here's the gist to use it: run npm i page-mascot, grab the sprite sheets for a character from the demo page, and pass their paths into the component's directions and reactions props.
BonziBuddy would be proud.
Sources
- page-mascot on GitHub — https://github.com/nilbuild/page-mascot

