Oneko is built on the Javascript programming language, consisting of a JS file and a 256 x 128 pixels spritesheet. The sprites show the different animations the cat cycles through, depending on mouse position and movement. As with its predecessors, the cat runs, scratches, sleeps, wakes up and yawns. If you install oneko.js and move the mouse, the cat will run after your cursor and stop and sit when the cursor is made still. After a period of inactivity, usually 10 seconds, the cat will scratch itself, then yawn, cuddle up into a loaf and fall asleep. It’s very calming and charming to watch the little kitty and considering how the internet was practically built on cute cats, it’s a great addition to add whimsy to your website or webapp. If you know coding and/or making pixel art, you can change things like the size, speed and positioning coordinates of the cat in the Javascript file or use the original Oneko sprites as inspiration to design your own cursor cat or anything else.
The oneko.js code is the ‘engine’ that brings life and movement to the cat. The script first makes sure the user’s browser has ‘reduced motion’ settings turned off before releasing the kitty. If it gets the purr ahead, then the following happens:
1. The script applies CSS to where the cat is, to keep it on top of the other website components and prevent any interference with buttons on the site.
2. It uses a ‘mousemove listener’ to check up on the mouse’s X and Y position so the cat can react accordingly – follows the cursor.
3. The script uses movement logic to calculate constantly the distance between the cat and the cursor, and also establishes a boundary control, which stops kitty from going AWOL off the visible screen.
4. The scripts then reads off the coordinates written into it for the frames of the oneko.gif spritesheet and ensures the correct sprite is read off the sheet and displayed on screen. There are a total of 32 sprites, with each sprite 32x32 px, in a 8 x 4 rectangular layout, and the directional and behaviour movements are mapped as coordinates for these individual sprites – e.g. yawning is tired: [[-3, -2]],.
5. When the cursor goes idle, the part of the script that halts the kitty and carries out the scratching, yawning and sleeping animations kicks in after a short period of time.
Below is the classic oneko spritesheet designed by Mr. Gotoh and made by Ari. The source code and default oneko spritesheet can be downloaded free from her GitHub repository.
As mentioned before, a traditional oneko spritesheet consists of 32 sprites, arranged in a rectangular grid eight sprites long and four wide. This is not mandatory however, and there have been seen spritesheets with different quantities of sprites, even ones where all 32 sprites were arranged in a single row! For the record, let's take the traditional 32-sprite (8x4 layout). The sprite positions and coordinates are listed below. We are starting from the first sprite on the very first row and working our way right and down the rows. The sprite positions are taken directly from Ari's oneko.js script and the coordinates are from the onandemo.js website.
0,0 scratchWallN :: cat facing north, scratching with left front paw
1,0 NW :: cat running in north-west direction, legs pointing outwards
2,0 Sleeping :: cat sleeping with eyes closed in a 'loaf', ZZZs close to body
3,0 E :: cat running east, legs spread out
4,0 scratchWallW :: cat facing west, scratching wall, front legs down the wall
5,0 scratchSelf :: cat scratching itself, back foot of left leg close to muzzle
6,0 scratchSelf :: cat scratching itself, back foot of left leg lined up parallel to head
7,0 scratchSelf :: cat scratching its chin, looking quizzical and at the viewer. It appears to be holding a diamond or gem in its paw
0,1 scratchWallN :: cat facing north, scratching with right front paw
1,1 NW :: cat running in north-west direction, legs pointing inwards
2,1 Sleeping :: cat sleeping with eyes closed in a 'loaf', ZZZs further out from body
3,1 E :: cat running eastwards, legs angled inwards
4,1 scratchWallW :: cat facing west, scratching wall, front legs up the wall
5,1 SE :: cat running in south-east direction, legs pointing outwards
6,1 SW :: cat running in south-west direction, legs angled inwards
7,1 scratchWallS :: cat facing south, scratching with left front paw
0,2 NE :: cat running in north-east direction, legs pointing outwards
1,2 N :: cat running northwards, legs pointing outwards
2,2 scratchWallE :: cat facing east, scratching wall, front legs down the wall
3,2 tired :: cat facing the viewer, standing still, yawning with eyes closed and mouth open
4,2 W :: cat running westwards, legs pointing outwards
5,2 SE :: cat running in south-east direction, legs tucked in
6,2 scratchWallS :: cat facing south, scratching with right front paw
7,2 S :: cat running southwards, legs tucked in and not very visible
0,3 NE :: cat running in north-east direction, legs tucked in
1,3 N :: cat running northwards, legs tucked in and only a bit of hind leg visible
2,3 scratchWallE :: cat facing east, scratching wall, front legs up the wall
3,3 idle :: cat sitting and facing the viewer, expressionless
4,3 W :: cat running westwards, legs angled inwards
5,3 SW :: cat running in south-west direction, legs pointing outwards
6,3 S :: cat running southwards, legs pointing outwards
7,3 alert :: cat sitting and facing the viewer, similar to idle, but with lines emanating from around the cat's head
