Setting it up
Grab the kit for a working starting point, or follow these four steps to wire it into a site you already have.
01
Get sprite sheets
Each skin is a 256x128 PNG: an 8x4 grid of 32x32 cells (idle, alert, eight directions at two frames each, scratch and sleep). Put them under assets/oneko/.
02
List them in JSON
js/on/index.json lists your folders. Each <folder>.json holds entries with a name, sprite and category. That list is the menu.
03
Add the script
switcher.js spawns the cat, reads the config and builds the picker. Click the cat or press C to open it.
04
Done
No build step, no framework. If you want to change the skin from your own code, call window.onekoSetSkin(sprite).
// js/on/pokemon.json — every entry becomes a menu item
[
{ "name": "Eevee", "sprite": "/assets/oneko/pokemon/eevee.png", "category": "Pokémon" },
{ "name": "Pikachu", "sprite": "/assets/oneko/pokemon/pikachu.png", "category": "Pokémon" }
]
<!-- in your HTML -->
<script src="/js/switcher.js" data-cat="/assets/oneko/classics/classic.png" defer></script>