Page Mascot: add a cursor-following character to your website
TL;DR
Page Mascot is an open-source library that adds a small character to your page: it watches the cursor and reacts when users click it. It ships with dozens of designs, and an AI coding agent can generate a custom mascot from a description.
Small details make a website feel "alive". Page Mascot is an open-source library that adds a small character to a page: it follows the mouse cursor with its eyes and reacts when users click. It ships with dozens of templates, and you can ask an AI coding agent to create a custom mascot from a description.
Notable features
| Feature | Benefit |
|---|---|
| Cursor tracking | The character's eyes follow the mouse, making the page feel "alive". |
| Click reactions | Startled, smiling… a micro-interaction that builds goodwill. |
| Templates + AI-made characters | According to the video there are about 52 templates; you can have an AI agent draw a one-of-a-kind mascot. |
| Plug and play | Integrates into existing frontend projects without much performance impact. |
How the "eyes follow the mouse" effect works
In principle: listen for mousemove events, compute the angle from the eye to the cursor, then move the pupil in that direction within a small limit. The library packages this together with reaction animations so you don't have to build it yourself.
Use it in the right places
| Do | Avoid |
|---|---|
| Landing pages, 404 pages, waiting screens, onboarding | Checkout forms, serious business pages |
| Products with a friendly brand voice | Apps requiring deep focus or handling sensitive data |
| A small accent that doesn't cover content | A large mascot that gets in the way |
A mascot as part of the brand
A custom mascot can become part of a product's identity (think of Clippy, or GitHub's mascot). When creating one with AI, give the agent a clear brief (personality, colours, the expressions needed), then select and refine; don't use the first draft.
Accessibility and performance
- Turn off motion when users enable
prefers-reduced-motion. - Add
aria-hidden="true"since it's decorative; don't let it clutter screen readers. - On touch devices without a cursor, use alternative motion (random glances, reacting to taps).
- Limit heavy event listeners; throttle
mousemoveif needed.
How to apply it
- Frontend devs: try it on a 404 or landing page before adding it anywhere important.
- Designers/PMs: define a mascot personality that fits the brand voice; measure whether it actually increases engagement or just distracts.
- The whole team: check the licence of the library and character templates before commercial use.