Tales of Hark

Hawky

Hawky is a phoenix that lives on this website.

The idea is inspired from my colleague Brook, whose site brookjeynes.dev(opens in a new tab) has a cat that chases your cursor. That cat is oneko.js(opens in a new tab), which has been passed around the web since a 1990s cross-platform toy called Neko(opens in a new tab). I built a cat first, then decided to have a Phoenix bird.

Hawky is on every page here, including this one, so you can try these while you read them.

Video: Hawky Demo on the home page

What it responds to

Move your cursor. Hawky follows your cursor. Anything under about 30 pixels it ignores, so it does not twitch every time your hand moves. Past that it walks, and past about 100 pixels it takes off and flies, with a shadow underneath telling you how high it is. Stop for two seconds and it lands near your cursor.

Click Hawky. It falls asleep and stops following, with a small zZ over its head. Click again and it startles awake.

Leave it alone. After about 25 sec of idle state, it also goes sleeping. Moving the cursor wakes it.

Double-click Hawky. It catches fire, burns down to a pile of ash, and hatches out of it again as a chick. The whole thing runs about five seconds and cannot be interrupted.

Hover your cursor on it. After a moment a bubble appears counting down to the next rebirth.

Every hour. It does a rebirth cycle, burn itself & reborn from the ashes.

Every frame

56 frames at 32x32 pixels, in four colours: transparent, white, black, and one orange that only the fire uses.

The Hawky sprite sheet: seven rows of eight frames showing perching, taking off, three flight angles, the rebirth cycle, and the walk.
Figure: Sprite Sheet of Hawky generated with tools below

Tools I used

Learnings

  1. Never use Claude Code for image generation. It reaches for Python and Pillow and messes it up.
  2. If you want Claude as the main driver, tell it to call Codex via CLI and use its imagegen tool. Better results.
  3. Never generate a full sprite sheet in one shot. Do it in stages.
  4. Build one state at a time. One pose as the base, then left, right, up, down, the diagonals. Then walking, then flying.
  5. Adapt each stage into the sheet as you go, and ask it to keep reviewing.