{
  "schema": "tesign-radar/item/1",
  "generated_at": "2026-09-17T01:56:13.055Z",
  "lang": "en",
  "slug": "page-mascot",
  "url": "https://tesign.com/en/item/page-mascot/",
  "alternates": {
    "ko": {
      "html": "https://tesign.com/item/page-mascot/",
      "json": "https://tesign.com/item/page-mascot/index.json",
      "markdown": "https://tesign.com/item/page-mascot/index.md"
    },
    "en": {
      "html": "https://tesign.com/en/item/page-mascot/",
      "json": "https://tesign.com/en/item/page-mascot/index.json",
      "markdown": "https://tesign.com/en/item/page-mascot/index.md"
    }
  },
  "name": "page-mascot",
  "use_label": "Cursor-following page mascot",
  "one_liner": "A tiny React component that puts a character on your page which turns its head to follow the cursor and reacts when clicked.",
  "text": {
    "why": "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.",
    "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.",
    "build": [
      "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": [
      {
        "role": "A personal site or blog owner wanting a small bit of fun on the page",
        "situation": null
      },
      {
        "role": "A developer using a coding agent who wants a custom character without an art tool",
        "situation": null
      }
    ],
    "start": [
      {
        "command": false,
        "text": "Pick a character: choose one at https://koboyo.com/page-mascot and download its two sheets"
      },
      {
        "command": false,
        "text": "Install: npm i page-mascot"
      },
      {
        "command": false,
        "text": "<Mascot directions=\"...\" reactions=\"...\" />"
      },
      {
        "command": false,
        "text": "Draw your own (needs an image-generation tool): npx skills add nilbuild/page-mascot --skill page-mascot --global --yes"
      }
    ],
    "caveat": [
      "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)"
    ]
  },
  "cta": {
    "type": "use_package",
    "label": "USE PACKAGE",
    "url": "https://koboyo.com/page-mascot"
  },
  "ready": "developer",
  "categories": [
    "design"
  ],
  "categories_confirmed": true,
  "tags": [
    "react-component",
    "mascot",
    "cursor-tracking",
    "fun",
    "npm-package"
  ],
  "platform": [
    "web"
  ],
  "license": {
    "spdx": "MIT",
    "scope": "permissive",
    "scope_text": "Use, change and redistribute, commercially too. Keep the notice.",
    "url": "https://spdx.org/licenses/MIT.html",
    "note": null,
    "open_source": true
  },
  "language": "Python",
  "source_urls": {
    "canonical": "https://koboyo.com/page-mascot",
    "github": "https://github.com/nilbuild/page-mascot",
    "huggingface": null,
    "app_store": null,
    "sightings": [
      {
        "source": "github",
        "url": "https://github.com/nilbuild/page-mascot",
        "posted_at": "2026-09-14T15:00:00.000Z",
        "hn_url": null
      }
    ]
  },
  "numbers": {
    "as_of": "2026-09-16T21:00:00.000Z",
    "stars": 307,
    "stars_unit": "GitHub stars",
    "stars_checked_at": "2026-09-15T03:29:45.508Z",
    "stars_observed_since_check": 25,
    "star_delta_24h": 4,
    "star_delta_7d": 39,
    "star_delta_30d": 39,
    "star_delta_unit": "GitHub stars gained in the window, GH Archive events summed to as_of",
    "spark_14d": [
      null,
      null,
      null,
      null,
      null,
      null,
      null,
      null,
      null,
      null,
      null,
      8,
      29,
      2
    ],
    "hf_likes": null,
    "hf_likes_observed_at": null,
    "hn_points": null,
    "hn_points_observed_at": null,
    "store": null,
    "method": "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."
  },
  "ranks": null,
  "activity": {
    "pushed_at": "2026-09-14T10:26:58.000Z",
    "owner_type": null,
    "open_issues": null,
    "contributors": null,
    "releases_count": null,
    "latest_release": null,
    "checked_at": null,
    "core_checked_at": "2026-09-15T03:29:45.508Z"
  },
  "signals": [
    {
      "kind": "new",
      "label": "NEW",
      "value": "16h OLD WHEN SEEN"
    }
  ],
  "images": {
    "og": "https://tesign.com/img/page-mascot-0346198536.png",
    "cover": "https://tesign.com/img/page-mascot-0346198536.png",
    "cover_width": 938,
    "cover_height": 446,
    "gallery": [
      "https://tesign.com/img/page-mascot-0346198536.png",
      "https://tesign.com/img/page-mascot-c348bd0af9.png"
    ],
    "alt": "Two sprite sheets of the same fox character: nine head directions on one, nine expressions on the other.",
    "tier": 2
  },
  "dates": {
    "first_seen_at": "2026-09-14T23:20:51.574Z",
    "source_created_at": "2026-09-14T06:55:59.000Z",
    "discovery_hours": 16.414603888888887,
    "launch_signal_at": "2026-09-14T15:00:00.000Z",
    "kept_at": "2026-09-17T01:24:00.673Z",
    "first_published_at": "2026-09-17T01:24:00.858Z",
    "updated_at": "2026-09-17T01:26:30.179Z",
    "ingestion_mode": "live"
  },
  "notes": [
    "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."
  ]
}