GitHub radar
Page Mascot: Animated AI Character for Your Website
An open-source React component that adds an interactive animated mascot to your site. The character tracks your cursor and blinks on click — 52 ready-made options or generate your own with an AI agent skill.
Page Mascot is an open-source React component that places an interactive animated character on a web page. The character tracks the cursor across nine head directions and plays one of nine facial expressions on click. Each mascot is built from two 3×3 sprite sheets, so transitions are smooth and alignment holds across all poses. The project ships 52 ready-made characters in six visual styles: colour, ink, sketch, riso, paper, and pixel. Made by Kamran Ahmed, the creator of roadmap.sh. For a custom mascot matching your description or a photo, install the agent skill and ask — in Codex it works out of the box, in Claude Code it needs an OpenAI API key for image generation.
Why a vibe-coder should care
Your site gets a personality detail without writing an animation system from scratch. The 52 ready characters are free and need nothing beyond two image files. If you want something unique, one agent command generates a custom character from a description or a photo.
How to install
Copy this and send it to your agent — Claude Code, Codex, any of them:
Install the skill from https://github.com/nilbuild/page-mascot: `npx skills add nilbuild/page-mascot --skill page-mascot --global --yes` — then add a fox mascot to my page with `/page-mascot put the fox on my page` and show me the result; ask if you need an OpenAI API key for drawing.
Runs on any laptop — this is a browser component, no GPU needed. Drawing custom characters in Claude Code requires an OpenAI API key.
Open on GitHub▌ More finds