GitHub radar

Page Mascot: Animated AI Character for Your Website

A React open source component to insert an animated interactive mascot on your website. It will follow your mouse and blink when clicked. With 52 predefined mascots or create your own using an AI agent skill.

01nilbuild/page-mascot 732TypeScript

A React open source component to add an animated mascot to your webpage! This mascot will follow your mouse cursor with 9 different head orientations and show one of 9 expressions upon clicking. We use 2 x 3 spritesheets to make sure the animations are fluid and all positions align perfectly. There are 52 prebuilt mascots available and 6 styles (color, ink, sketch, riso, paper, pixel). Made by Kamran Ahmed, creator of roadmap.sh. If you want me to build a particular mascot according to your description/image, please install this agent skill and ask. This should work out of the box on Codex, or you need an OpenAI API key for Claude Code to generate images.

Why a vibe-coder should care

Add some personality to your websites without worrying about building an animation system! Choose from our 52 pre-built mascots (all free!) that only require 2 images. Alternatively, ask me to build a custom mascot for you using just your description/image in one go!

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