# page-mascot

> Cursor-following page mascot — A tiny React component that puts a character on your page which turns its head to follow the cursor and reacts when clicked.

- Page: https://tesign.com/en/item/page-mascot/
- JSON: https://tesign.com/en/item/page-mascot/index.json
- Korean Markdown: https://tesign.com/item/page-mascot/index.md
- Generated: 2026-09-17 01:56 UTC

## Numbers

- 307 stars — checked on GitHub 2026-09-15 03:29 UTC (+25 observed since the check)
- 7-day +39 observed via GH Archive (as of 2026-09-16 21:00 UTC)
- 24h +4 ★ · 30d +39 ★ (as of 2026-09-16 21:00 UTC)
- Star total = the value last checked on GitHub (stars_checked_at) + increases observed via GH Archive since. The 24h · 7d · 30d gains are GH Archive hourly events summed to the reference time (as_of). No score of ours.

## AT A GLANCE

- LICENSE: MIT (permissive) — https://spdx.org/licenses/MIT.html
- USAGE: Use, change and redistribute, commercially too. Keep the notice.
- OPEN SOURCE: YES
- LANGUAGE: Python
- PLATFORM: web
- CATEGORY: DESIGN
- Tags: react-component · mascot · cursor-tracking · fun · npm-package
- How to start: For developers
- SOURCES: GitHub https://github.com/nilbuild/page-mascot
- USE PACKAGE: https://koboyo.com/page-mascot

## ACTIVITY

- Last commit: 2026-09-14 10:26 UTC
- Latest release: [unconfirmed]
- Contributors: [unconfirmed]
- Open issues (incl. PRs): [unconfirmed]
- Made by: [unconfirmed]
- Checked on GitHub: 2026-09-15 03:29 UTC

## Signals and evidence

- NEW · 16h OLD WHEN SEEN

## TESIGN TAKE

The fun part isn't the mascot itself — it's that you can ask an agent to draw one and have it land on the page without touching an image editor.

## WHY IT MATTERS

page-mascot represents one character as two images: a 3×3 sheet of head directions and a 3×3 sheet of expressions. The cursor's angle picks a cell from the directions sheet (with a dead zone so the head settles when the cursor is close), and a click shows an expression cell for half a second. The same character can be drawn in six styles — colour, ink, sketch, riso, paper, pixel — without breaking alignment. 52 ready-made characters mean you can pick one without drawing anything, or ask a coding agent to draw a new one.

## BUILD FROM THIS

- Drop a playful mascot onto a personal blog or portfolio page
- Ask a coding agent to draw a character in your brand colours and place it directly
- Use it as a reference for respecting prefers-reduced-motion in a small interactive widget

## WHO IT'S FOR

- A personal site or blog owner wanting a small bit of fun on the page
- A developer using a coding agent who wants a custom character without an art tool

## START IN 5 MINUTES

```
# Pick a character: choose one at https://koboyo.com/page-mascot and download its two sheets
# Install: npm i page-mascot
# <Mascot directions="..." reactions="..." />
# Draw your own (needs an image-generation tool): npx skills add nilbuild/page-mascot --skill page-mascot --global --yes
```

## CAVEATS

- MIT © Kamran Ahmed
- Drawing a new character needs an image tool (Codex has its own; Claude Code needs an OpenAI Images API key)
- Cursor tracking turns off on devices with no fine pointer (touch-only)

## RECEIPT

- FIRST SEEN BY TESIGN: 2026-09-14 23:20 UTC
- AT SOURCE: 2026-09-14 06:55 UTC
- KEPT: 2026-09-17 01:24 UTC
- Published on TESIGN: 2026-09-17 01:24 UTC
- Text last updated: 2026-09-17 01:26 UTC

## How to read this

- This file was produced by the same build, from the same data, as the tesign.com item page. The text is editorial; the numbers are stored observations.
- null in the JSON means not observed — never zero. The Markdown writes [unconfirmed] for it.
- Star total = the value last checked on GitHub (stars_checked_at) + increases observed via GH Archive since. The 24h · 7d · 30d gains are GH Archive hourly events summed to the reference time (as_of). No score of ours.
- A summary, not legal advice.

[Image] https://tesign.com/img/page-mascot-0346198536.png