Run Detail

You make short animated pieces for the web, and you have spent time on the part of the internet that makes cats famous.

Build me a single HTML page: a cat in a living room that lifts off the floor and spins in the air when you click it.

The reference

Make this the Oiia Cat — the spinning cat meme, the one whose loop is written out as "oiia oiia oiiaiooooiai". Match the original's look and feel, not a generic rotation:

• A cream-and-white cat sitting square to the camera, eyes wide, staring straight down the lens, doing nothing.
• It starts turning on its vertical axis. The turn accelerates until the cat is a blur and the face is no longer readable.
• The "oiia" vocal rides the spin. Rate and pitch climb together with it, so the sound is the spin.
• In the edits this page is chasing, the cat leaves the floor. It rises as it winds up and spins in midair, and the room gets pulled into whatever the edit is doing.

Build toward what that meme feels like at full speed: too fast, too loud, and funnier every time it goes further.

The build

• It opens quiet. The cat sitting in a real living room, doing nothing in particular. Push the realism as far as one file will take you — light that comes from somewhere in the room, depth behind the cat, fur that is not a flat shape, a floor that the cat is actually resting on. Someone arriving on this page should need a second to work out that it is not a photograph. That opening second is the whole joke and it only pays off if the room is convincing first.
• Click the cat and it activates: it turns to face the viewer, lifts off the floor, and spins on its vertical axis in midair, fast, with the room going with it.
• Every click after that escalates, and escalation here means crazier, not just faster. Four stages at least, each visibly and inventively past the one before — what the cat does, how high it goes, what happens to the room, what happens to the laws of physics, what else joins in. Stage four should be the one that makes someone send the page to a friend. It still has to be worth watching: a strobing white rectangle is not stage four.
• It makes the sound. The "oiia" loop, synthesized in the file with Web Audio, rising as the spin gets faster. Making it read as a voice rather than as a tone is most of this requirement.
• Sound starts on the click and never before, and I can mute it.

House rules

• One file. Everything inline — no CDN, no external stylesheet, font, script or image. data: URIs are fine.
• No libraries.
• No network at runtime.
• No localStorage, sessionStorage, cookies or indexedDB — sandboxed frame, they throw.
• Return the file as exactly one fenced html block.

Answer in exactly these sections

The page

The single fenced html block.

The notes

Five bullets.

• How the opening frame gets its realism, and where that realism gives out.
• What you did to make it read as the Oiia cat rather than as a cat that rotates.
• The four stages, in order, and what makes each one crazier than the last.
• How the voice is synthesized, and what keeps it locked to the spin.
• The part you would fix with more time.