Run Detail

completedmuse-wonder

Unscored

Every model's answer from this round

Recorded for these videos

27:18

Gemini 4 Hydrogen: Cheaper Tokens, More Expensive Answers?

Nov 13, 2026 · YouTube

18:40

ERNIE 5.5 Flash Preview vs GLM 5.3 Flash: Baidu's new model is very impressive!

Nov 11, 2026 · YouTube

36:22

Fable 5.2 robbing me blind, plus: Nex AGI's N2.6 vs GLM 5.3 Flash

Nov 11, 2026 · YouTube

14:03

Gemini 4 Carbon: Can it handle my challenges? (First look with one-shot coding tests)

Nov 10, 2026 · YouTube

47:51

Ranking major U.S. Open-Weights Models. (Where does Ripple 65B fit in?)

Nov 6, 2026 · YouTube

10:57

"Crouton Alpha": the latest super-efficient coding model by Meta?

Nov 3, 2026 · YouTube

38:58

Testing Particle-1: a post-trained DeepSeek V4.1 Flash specializing in coding and efficiency

Oct 28, 2026 · YouTube

29:55

Kimi K3.1 Pro Looked Incredible. Then I Kept Testing.

Oct 26, 2026 · YouTube

31:28

Is this company reselling GPT Sol 6.1 at a loss (for non-agentic/text-only)?🤔 Is this sustainable?

Oct 20, 2026 · YouTube

17:58

Nemotron 3.5 Super VL vs Opus 5.5: Testing NVIDIA’s new coding juggernaut

Oct 15, 2026 · YouTube

16:04

Testing a *massive* new open-weights model 🤯: Muse Spark Open (vs. Nemotron, Opus 5.5, and more)

Oct 15, 2026 · YouTube

16:43

Gemini 4 Argon: Great 🐈 Animation, but a broken escalator. (Coding challenge vs Opus 5.5, Sol 6.1)

Oct 13, 2026 · YouTube

16:37

Meta's new "Muse Wonder" AI is impressive... but can it compete with Anthropic's models?

Oct 12, 2026 · YouTube

11:12

WOW... Haiku 5.5 is very impressive. RIP OpenAI?

Oct 7, 2026 · YouTube

22:47

Mistral Large 4 Is Cheap. But Is It Good Enough to Compete?

Oct 6, 2026 · YouTube

22:02

Is Pareto 26.10 Preview Just Routing to GPT Sol? I Tested It Against Sol 6.1 Pro

Oct 1, 2026 · YouTube

11:22

I Tested Sonnet 5.5 Against Opus 5.5. Is It Actually Cheaper?

Sep 28, 2026 · YouTube

19:21

I Tested the Stealth "Space Bunny Alpha" Model Before It Went Offline

Sep 23, 2026 · YouTube

10:58

So... how much better is Claude Opus 5.5 vs. GPT-6 Sol, really?

Sep 23, 2026 · YouTube

9:38

Claude Opus 5.5... the BEST new model for coding!! 🤩

Sep 22, 2026 · YouTube

Provider

openrouter

Challenge Version

v2.0

Turns

Duration

72.7s

Total Tokens

10,041

Input Tokens

746

Output Tokens

9,295

Reasoning Tokens

1,614

Reasoning Effort

default

Est. Cost

$0.1889

Started

10/12/2026, 5:41:18 PM

OR Provider

Turns (1)

Turn #1

746 in9,295 out1,614 reasoning10,041 total72.6s

user

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.

assistant

The page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>OIIA CAT</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#17110d;font-family:Georgia,serif}
body{display:flex;align-items:center;justify-content:center}
#stageBox{position:relative;width:min(100vw,1100px);height:min(100vh,720px);overflow:hidden;background:#2a1e16;box-shadow:0 0 80px #000;cursor:default}
#roomWrap{position:absolute;inset:0;transform-origin:50% 55%;will-change:transform,filter}
#bg{position:absolute;inset:0;width:100%;height:100%}
#vortex{position:absolute;inset:-40%;opacity:0;background:repeating-conic-gradient(from 0deg,#ff5da2 0 12deg,#ffd23f 12deg 24deg,#4de3ff 24deg 36deg,#8aff6a 36deg 48deg,#b98cff 48deg 60deg);animation:spinV 7s linear infinite;transition:opacity 1s;mix-blend-mode:screen;pointer-events:none}
@keyframes spinV{to{transform:rotate(360deg)}}
#stars{position:absolute;inset:0;opacity:0;transition:opacity 1s;pointer-events:none}
.star{position:absolute;background:#fff;border-radius:50%;box-shadow:0 0 8px #fff;animation:tw 1s infinite alternate}
@keyframes tw{from{opacity:.2}to{opacity:1}}
#glow{position:absolute;left:50%;top:58%;width:340px;height:340px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,230,150,.55),rgba(255,180,80,.18) 45%,transparent 70%);opacity:0;transition:opacity .6s;pointer-events:none}
#shadow{position:absolute;left:50%;bottom:9%;width:230px;height:42px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(0,0,0,.55),rgba(0,0,0,.25) 55%,transparent 72%);filter:blur(5px);z-index:5}
#catWrap{position:absolute;left:50%;bottom:10%;width:290px;height:330px;margin-left:-145px;z-index:10;cursor:pointer;will-change:transform;outline:none;-webkit-tap-highlight-color:transparent}
.catLayer{position:absolute;inset:0;will-change:transform,filter,opacity}
.catLayer svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 5px rgba(60,30,5,.25))}
.ghost{opacity:0;pointer-events:none}
#dust,#parts,#orbit{position:absolute;inset:0;pointer-events:none;z-index:8}
#orbit{z-index:9}
.p{position:absolute;border-radius:50%;pointer-events:none}
.orb{position:absolute;width:74px;height:86px;margin:-43px 0 0 -37px;pointer-events:none}
.orb svg{width:100%;height:100%}
.floaty{transition:transform 1s}
.s2 .float-sofa{animation:floaty 2.4s ease-in-out infinite}
.s3 .float-sofa,.s3 .float-lamp,.s3 .float-plant{animation:floaty 1.7s ease-in-out infinite}
.s4 .float-sofa,.s4 .float-lamp,.s4 .float-plant{animation:floaty .8s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-22px) rotate(-2deg)}}
.s2 #roomWrap{filter:saturate(1.15)}
.s3 #roomWrap{filter:saturate(1.5) contrast(1.08)}
.s4 #roomWrap{filter:saturate(1.9) contrast(1.12)}
.s3 #vortex{opacity:.22}.s4 #vortex{opacity:.62}
.s4 #stars{opacity:1}.s4 #glow{opacity:1}.s3 #glow{opacity:.55}
#lampGlow{position:absolute;right:7%;top:18%;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,205,110,.5),transparent 65%);pointer-events:none;z-index:3}
.s2 #lampGlow,.s3 #lampGlow,.s4 #lampGlow{animation:flick .35s infinite}
@keyframes flick{0%,100%{opacity:1}48%{opacity:.55}52%{opacity:1}78%{opacity:.7}}
#hud{position:absolute;left:16px;top:14px;z-index:20;color:#fff8e8;text-shadow:0 2px 8px #000;font-size:14px;letter-spacing:.14em}
#level{font-size:22px;font-weight:bold;letter-spacing:.08em}
#hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:20;color:#fff;background:rgba(0,0,0,.45);padding:8px 16px;border-radius:99px;font-size:14px;letter-spacing:.08em;animation:pulse 1.6s infinite;white-space:nowrap}
@keyframes pulse{50%{transform:translateX(-50%) scale(1.06)}}
#mute{position:absolute;right:14px;top:14px;z-index:30;border:2px solid #fff8;border-radius:50%;width:48px;height:48px;background:rgba(0,0,0,.5);color:#fff;font-size:22px;cursor:pointer}
#caption{position:absolute;left:50%;top:12%;transform:translateX(-50%);z-index:20;color:#fff;font-size:clamp(22px,5vw,54px);font-weight:900;letter-spacing:.12em;text-shadow:3px 3px 0 #ff2d95,-3px -2px 0 #00d9ff,0 6px 18px #000;opacity:0;pointer-events:none;white-space:nowrap}
.s1 #caption,.s2 #caption,.s3 #caption,.s4 #caption{opacity:1}
.shakeText{animation:shk .12s infinite}
@keyframes shk{25%{transform:translateX(calc(-50% - 2px)) rotate(-1deg)}75%{transform:translateX(calc(-50% + 2px)) rotate(1deg)}}
</style>
</head>
<body>
<div id="stageBox">
  <div id="roomWrap">
    <!-- LIVING ROOM : all drawn, no images -->
    <svg id="bg" viewBox="0 0 1100 720" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <defs>
        <linearGradient id="wall" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#e8d8bd"/><stop offset=".7" stop-color="#d9c29e"/><stop offset="1" stop-color="#b99f78"/></linearGradient>
        <linearGradient id="floorG" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#8a5a33"/><stop offset="1" stop-color="#5d3a1e"/></linearGradient>
        <radialGradient id="lampG"><stop offset="0" stop-color="#fff3b0"/><stop offset="1" stop-color="#ffb84d"/></radialGradient>
        <linearGradient id="win" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#bfe8ff"/><stop offset="1" stop-color="#fff2c4"/></linearGradient>
        <filter id="soft"><feGaussianBlur stdDeviation="3"/></filter>
      </defs>
      <rect width="1100" height="470" fill="url(#wall)"/>
      <rect y="430" width="1100" height="22" fill="#8f7350"/>
      <polygon points="0,452 1100,452 1100,720 0,720" fill="url(#floorG)"/>
      <g stroke="#4a2c14" stroke-width="3" opacity=".55">
        <path d="M550 452 L80 720M550 452 L300 720M550 452 L520 720M550 452 L760 720M550 452 L1020 720M550 452 L-80 720M550 452 L1180 720"/>
        <path d="M0 500 H1100M0 560 H1100M0 635 H1100"/>
      </g>
      <g opacity=".18" fill="#fff"><polygon points="120,452 430,452 300,720 0,720"/></g>
      <!-- window + daylight -->
      <g><rect x="55" y="70" width="230" height="260" rx="8" fill="#6b4a2c"/><rect x="70" y="85" width="200" height="230" fill="url(#win)"/><path d="M170 85V315M70 200H270" stroke="#6b4a2c" stroke-width="10"/><circle cx="225" cy="125" r="24" fill="#fff3a0"/><path d="M85 285 Q140 230 185 275 T265 260 V315 H85Z" fill="#7fb069" opacity=".8"/></g>
      <!-- pictures -->
      <g><rect x="360" y="80" width="110" height="140" fill="#5a3a22"/><rect x="372" y="92" width="86" height="116" fill="#f4e3c2"/><circle cx="415" cy="135" r="22" fill="#e07a5f"/><path d="M380 195 Q415 155 450 195Z" fill="#3d405b"/></g>
      <g><rect x="640" y="65" width="150" height="100" fill="#5a3a22"/><rect x="652" y="77" width="126" height="76" fill="#a8dadc"/><path d="M652 140 L700 100 L735 130 L760 108 L778 140Z" fill="#457b9d"/></g>
      <!-- sofa -->
      <g class="float-sofa floaty"><rect x="700" y="285" width="330" height="150" rx="28" fill="#7a4a5a"/><rect x="685" y="330" width="360" height="105" rx="24" fill="#935f72"/><rect x="720" y="305" width="130" height="85" rx="16" fill="#a97184"/><rect x="875" y="305" width="130" height="85" rx="16" fill="#a97184"/><rect x="735" y="330" width="55" height="38" rx="8" fill="#ffd166"/><rect x="930" y="330" width="55" height="38" rx="8" fill="#6ec6c0"/></g>
      <!-- bookshelf -->
      <g><rect x="880" y="70" width="150" height="230" fill="#5d3a22"/><g><rect x="895" y="90" width="18" height="60" fill="#c0392b"/><rect x="918" y="85" width="16" height="65" fill="#2471a3"/><rect x="939" y="95" width="20" height="55" fill="#229954"/><rect x="895" y="170" width="20" height="55" fill="#b7950b"/><rect x="920" y="165" width="16" height="60" fill="#7d3c98"/><rect x="960" y="180" width="45" height="45" fill="#e67e22"/></g><path d="M885 155H1025M885 235H1025" stroke="#3e2716" stroke-width="8"/></g>
      <!-- lamp -->
      <g class="float-lamp floaty"><rect x="835" y="300" width="10" height="150" fill="#333"/><polygon points="790,300 890,300 865,225 815,225" fill="#ffcf7d"/><circle cx="840" cy="275" r="18" fill="url(#lampG)" filter="url(#soft)"/></g>
      <!-- plant -->
      <g class="float-plant floaty"><polygon points="95,435 155,435 145,375 105,375" fill="#b55232"/><g stroke="#2e7d32" stroke-width="7" fill="none" stroke-linecap="round"><path d="M125 380 Q80 320 55 335M125 380 Q125 300 100 275M125 380 Q170 310 205 325M125 380 Q155 295 185 280"/></g></g>
      <!-- rug -->
      <ellipse cx="550" cy="610" rx="360" ry="78" fill="#8e3b46"/><ellipse cx="550" cy="610" rx="300" ry="60" fill="#c1666b"/><ellipse cx="550" cy="610" rx="210" ry="40" fill="#e8b4a0"/>
      <ellipse cx="550" cy="610" rx="360" ry="78" fill="none" stroke="#ffd9a0" stroke-width="4" stroke-dasharray="14 10" opacity=".7"/>
    </svg>
    <div id="vortex"></div><div id="stars"></div><div id="lampGlow"></div><div id="glow"></div>
    <div id="dust"></div><div id="parts"></div><div id="orbit"></div>
    <div id="shadow"></div>

    <!-- CAT ART : reusable symbol -->
    <svg width="0" height="0" style="position:absolute">
      <defs>
        <radialGradient id="fur" cx="45%" cy="35%"><stop offset="0" stop-color="#fff8ec"/><stop offset=".55" stop-color="#f3dfbd"/><stop offset="1" stop-color="#d9b98a"/></radialGradient>
        <radialGradient id="face" cx="50%" cy="35%"><stop offset="0" stop-color="#fffdf7"/><stop offset=".7" stop-color="#f7e8cd"/><stop offset="1" stop-color="#e2c69c"/></radialGradient>
        <filter id="furry" x="-20%" y="-20%" width="140%" height="140%"><feTurbulence type="fractalNoise" baseFrequency=".09" numOctaves="3" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale="5"/></filter>
      </defs>
      <symbol id="catArt" viewBox="0 0 300 340">
        <g filter="url(#furry)">
          <path d="M55 300 Q35 210 75 150 Q105 105 150 108 Q195 105 225 150 Q265 210 245 300 Q240 322 150 322 Q60 322 55 300Z" fill="url(#fur)"/>
          <ellipse cx="150" cy="245" rx="62" ry="72" fill="#fffdf8" opacity=".95"/>
          <path d="M48 285 Q10 275 22 235 Q30 205 58 225 Q75 255 62 292Z" fill="#e8cfa5"/>
          <ellipse cx="92" cy="312" rx="38" ry="16" fill="#fff6e6"/><ellipse cx="208" cy="312" rx="38" ry="16" fill="#fff6e6"/>
          <g fill="#d9b98a" opacity=".8"><circle cx="88" cy="310" r="4"/><circle cx="105" cy="314" r="4"/><circle cx="195" cy="314" r="4"/><circle cx="212" cy="310" r="4"/></g>
        </g>
        <g stroke="#c9a876" stroke-width="1.4" opacity=".5" fill="none">
          <path d="M70 180 l-8 18M78 165 l-10 14M230 180 l8 18M222 165 l10 14M95 300 l-6 10M205 300 l6 10M120 125 l-4 -10M180 125 l4 -10"/>
        </g>
        <g filter="url(#furry)">
          <path d="M62 92 L48 22 Q46 8 60 14 L108 48Z" fill="#eed9b4"/><path d="M238 92 L252 22 Q254 8 240 14 L192 48Z" fill="#eed9b4"/>
          <path d="M64 78 L58 32 L92 52Z" fill="#f2a7a7"/><path d="M236 78 L242 32 L208 52Z" fill="#f2a7a7"/>
          <circle cx="150" cy="105" r="82" fill="url(#face)"/>
          <path d="M82 62 Q105 28 145 38 Q110 48 96 78Z" fill="#e6c491" opacity=".8"/>
          <path d="M205 55 Q225 75 218 105 Q200 82 192 62Z" fill="#e6c491" opacity=".65"/>
        </g>
        <!-- wide staring eyes -->
        <ellipse cx="112" cy="102" rx="25" ry="29" fill="#fff"/><ellipse cx="188" cy="102" rx="25" ry="29" fill="#fff"/>
        <circle cx="112" cy="106" r="17" fill="#6aa84f"/><circle cx="188" cy="106" r="17" fill="#6aa84f"/>
        <circle cx="112" cy="106" r="10.5" fill="#111"/><circle cx="188" cy="106" r="10.5" fill="#111"/>
        <circle cx="106" cy="98" r="5" fill="#fff"/><circle cx="182" cy="98" r="5" fill="#fff"/><circle cx="118" cy="114" r="2.5" fill="#fff"/><circle cx="194" cy="114" r="2.5" fill="#fff"/>
        <path d="M88 78 Q112 66 136 78M164 78 Q188 66 212 78" stroke="#8a6b45" stroke-width="3" fill="none" stroke-linecap="round"/>
        <path d="M141 132 Q150 126 159 132 Q157 142 150 143 Q143 142 141 132Z" fill="#e77d8a"/>
        <path d="M150 143 Q148 152 138 150 M150 143 Q152 152 162 150" stroke="#9a5b62" stroke-width="2.5" fill="none" stroke-linecap="round"/>
        <g stroke="#fff" stroke-width="2" opacity=".9" stroke-linecap="round"><path d="M78 132 L18 122M80 145 L22 148M222 132 L282 122M220 145 L278 148"/></g>
        <g stroke="#d8bd93" stroke-width="1" opacity=".6"><path d="M95 55 l-5 12M205 55 l5 12M120 180 l-3 16M180 180 l3 16"/></g>
      </symbol>
    </svg>

    <div id="catWrap" role="button" aria-label="Click the cat" tabindex="0" title="click the cat">
      <div class="catLayer ghost" id="g2"><svg><use href="#catArt"/></svg></div>
      <div class="catLayer ghost" id="g1"><svg><use href="#catArt"/></svg></div>
      <div class="catLayer" id="catMain"><svg><use href="#catArt"/></svg></div>
    </div>
  </div>
  <div id="caption">OIIA OIIA OIIAIOOOOIAI</div>
  <div id="hud"><div id="level">LEVEL 0 — CAT DOING NOTHING</div><div id="sub">a perfectly normal living room</div></div>
  <button id="mute" aria-label="Mute">🔊</button>
  <div id="hint">👆 click the cat 👆</div>
</div>
<script>
const box=document.getElementById('stageBox'),wrap=document.getElementById('roomWrap'),cat=document.getElementById('catWrap'),
main=document.getElementById('catMain'),g1=document.getElementById('g1'),g2=document.getElementById('g2'),
shadow=document.getElementById('shadow'),level=document.getElementById('level'),sub=document.getElementById('sub'),
hint=document.getElementById('hint'),caption=document.getElementById('caption'),parts=document.getElementById('parts'),
orbit=document.getElementById('orbit'),stars=document.getElementById('stars');
for(let i=0;i<70;i++){let s=document.createElement('i');s.className='star';s.style.cssText=`left:${Math.random()*100}%;top:${Math.random()*100}%;width:${2+Math.random()*3}px;height:${2+Math.random()*3}px;animation-delay:${Math.random()}s`;stars.appendChild(s)}
const names=["LEVEL 0 — CAT DOING NOTHING","LEVEL 1 — OIIA","LEVEL 2 — OIIA OIIA","LEVEL 3 — PHYSICS HAS LEFT","LEVEL 4 — OIIAIOOOOIAI SINGULARITY"];
const subs=["a perfectly normal living room","it has begun","the room is involved now","gravity is a suggestion","send this to a friend"];
const speeds=[0,7,15,29,52], lifts=[0,55,115,180,245];
let stage=0,angle=0,speed=0,lift=0,t=0,last=performance.now(),muted=false,orbiters=[];
/* AUDIO — formant voice, created only on first click */
let AC=null,osc,osc2,voiceGain,master,filters=[];
function initAudio(){
 if(AC) return; AC=new (window.AudioContext||window.webkitAudioContext)();
 master=AC.createGain(); master.gain.value=.16; master.connect(AC.destination);
 voiceGain=AC.createGain(); voiceGain.gain.value=.8;
 let comp=AC.createDynamicsCompressor(); voiceGain.connect(comp); comp.connect(master);
 osc=AC.createOscillator(); osc.type='sawtooth'; osc2=AC.createOscillator(); osc2.type='square';
 let og=AC.createGain(); og.gain.value=.5; let og2=AC.createGain(); og2.gain.value=.18;
 osc.connect(og); osc2.connect(og2); og.connect(voiceGain); og2.connect(voiceGain);
 // breath noise for voice texture
 let nb=AC.createBuffer(1,AC.sampleRate,AC.sampleRate),d=nb.getChannelData(0); for(let i=0;i<d.length;i++)d[i]=Math.random()*2-1;
 let noise=AC.createBufferSource(); noise.buffer=nb; noise.loop=true; let nf=AC.createBiquadFilter(); nf.type='bandpass'; nf.frequency.value=1800; nf.Q.value=.6;
 let ng=AC.createGain(); ng.gain.value=.035; noise.connect(nf); nf.connect(ng); ng.connect(master); noise.start();
 // 3 formants in parallel from voiceGain
 voiceGain.disconnect(); let split=AC.createGain(); og.disconnect(); og2.disconnect(); og.connect(split); og2.connect(split);
 for(let i=0;i<3;i++){let f=AC.createBiquadFilter(); f.type='bandpass'; f.Q.value=i<2?7:4; let g=AC.createGain(); g.gain.value=[1,.55,.25][i]; split.connect(f); f.connect(g); g.connect(comp); filters.push(f)}
 let lfo=AC.createOscillator(); lfo.frequency.value=5.5; let lg=AC.createGain(); lg.gain.value=6; lfo.connect(lg); lg.connect(osc.frequency); lg.connect(osc2.frequency); lfo.start();
 osc.start(); osc2.start();
}
const vowels={o:[460,880,2400],i:[280,2250,3050],a:[760,1120,2450]},seq=['o','i','i','a'];
function updateAudio(){
 if(!AC||muted) return;
 let phase=((angle%(Math.PI*2))+Math.PI*2)%(Math.PI*2)/(Math.PI*2);
 let v=vowels[seq[Math.floor(phase*4)%4]];
 let f0=95+speed*5.2+(seq[Math.floor(phase*4)%4]==='a'?28:0);
 osc.frequency.setTargetAtTime(f0,AC.currentTime,.03); osc2.frequency.setTargetAtTime(f0*1.005+2,AC.currentTime,.03);
 filters.forEach((fl,i)=>fl.frequency.setTargetAtTime(v[i]*(1+speed*.004),AC.currentTime,.045));
 voiceGain.gain.setTargetAtTime(.55+.45*Math.abs(Math.sin(angle*2)),AC.currentTime,.03);
 master.gain.setTargetAtTime(.10+Math.min(.22,speed*.005),AC.currentTime,.1);
}
function burst(n,cols){
 for(let i=0;i<n;i++){let p=document.createElement('i');p.className='p';let s=4+Math.random()*9;p.style.cssText=`left:50%;top:55%;width:${s}px;height:${s}px;background:${cols[i%cols.length]}`;parts.appendChild(p);
  let a=Math.random()*Math.PI*2,v=90+Math.random()*260,x=0,y=0,vy=0;p._={x,y,vx:Math.cos(a)*v,vy:Math.sin(a)*v-80,el:p,life:1};particles.push(p._)}
}
let particles=[];
function makeOrbiters(){
 if(orbiters.length) return;
 for(let i=0;i<6;i++){let o=document.createElement('div');o.className='orb';o.innerHTML='<svg><use href="#catArt"/></svg>';orbit.appendChild(o);orbiters.push(o)}
}
function activate(){
 stage=Math.min(4,stage+1); initAudio(); if(AC.state==='suspended')AC.resume();
 box.className='s'+stage; level.textContent=names[stage]; sub.textContent=subs[stage];
 hint.style.display='none'; caption.classList.toggle('shakeText',stage>=3);
 burst(stage*14,['#ffd23f','#ff5da2','#4de3ff','#fff','#8aff6a']);
 if(stage===4) makeOrbiters();
}
cat.addEventListener('click',e=>{e.stopPropagation();activate()});
cat.addEventListener('keydown',e=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();activate()}});
document.getElementById('mute').addEventListener('click',e=>{e.stopPropagation();muted=!muted;e.target.textContent=muted?'🔇':'🔊';if(AC){muted?AC.suspend():AC.resume()}});
function frame(now){
 let dt=Math.min(.05,(now-last)/1000); last=now; t+=dt;
 let ts=speeds[stage], tl=lifts[stage];
 speed+=(ts-speed)*Math.min(1,dt*1.6); lift+=(tl-lift)*Math.min(1,dt*2.2);
 angle+=speed*dt;
 let c=Math.cos(angle), s=Math.sin(angle);
 let idle=stage===0?Math.sin(t*1.4)*2:0;
 let wob=stage>=3?Math.sin(t*9)* (stage*2):0;
 cat.style.transform=`translateY(${-lift+idle}px) rotate(${wob}deg)`;
 let blur=speed>8?Math.min(7,Math.abs(s)*speed*.16):0;
 main.style.transform=`scaleX(${c}) scaleY(${1+Math.abs(speed)*.0015})`;
 main.style.filter=`blur(${blur}px) brightness(${1+Math.abs(c)*.08})`;
 let go=speed>10?.38:0;
 g1.style.opacity=go; g2.style.opacity=go*.6;
 g1.style.transform=`scaleX(${Math.cos(angle-.55)}) translateX(${-14*s}px)`; g1.style.filter=`blur(4px) hue-rotate(40deg)`;
 g2.style.transform=`scaleX(${Math.cos(angle-1.1)}) translateX(${22*s}px)`; g2.style.filter=`blur(7px) hue-rotate(-60deg)`;
 shadow.style.transform=`translateX(-50%) scale(${1-lift/380})`; shadow.style.opacity=1-lift/420;
 let shake=stage>=3?(stage-2)*1.6:0;
 wrap.style.transform=`translate(${(Math.random()-.5)*shake}px,${(Math.random()-.5)*shake}px) rotate(${stage>=3?Math.sin(t*.7)*(stage-1)*1.4:0}deg) scale(${stage===4?1+Math.sin(t*2)*.015:1})`;
 caption.style.transform=`translateX(-50%) scale(${1+Math.abs(Math.sin(angle))* (stage*.06)})`;
 orbiters.forEach((o,i)=>{let a=t*(1.2+i*.12)+i*Math.PI/3,r=190+Math.sin(t*2+i)*25,x=innerWidth/2; o.style.left=(box.clientWidth/2+Math.cos(a)*r)+'px'; o.style.top=(box.clientHeight*.52+Math.sin(a)*r*.62-lift*.4)+'px'; o.style.transform=`rotate(${a*40}deg) scaleX(${Math.cos(a*3)})`});
 particles=particles.filter(p=>p.life>0); particles.forEach(p=>{p.vy+=320*dt;p.x+=p.vx*dt;p.y+=p.vy*dt;p.life-=dt*.7;p.el.style.transform=`translate(${p.x}px,${p.y}px) rotate(${p.x}deg)`;p.el.style.opacity=p.life;if(p.life<=0)p.el.remove()});
 if(stage>=2&&Math.random()<.25) burst(1,['#ffe9a8','#fff']);
 updateAudio(); requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
</script>
</div>
</body>
</html>

The notes

The opening frame gets its realism from a fully hand-drawn SVG living room — vanishing-point wood floor, rug ellipse the cat actually sits on, window daylight from the left versus warm lamp glow from the right, sofa/bookshelf/plant depth behind it, a soft blurred contact shadow, and a cat built from layered gradients plus an feTurbulence displacement filter and stray fur/whisker strokes so edges aren't flat vector shapes; it gives out on close inspection because the fur is still stylised strokes, the lighting is painted gradients rather than true shading on a 3D form, and the idle animation is only a subtle breathing bob.
It reads as the Oiia Cat rather than a generic rotating cat because the cat starts square-on, cream-and-white, wide green eyes with huge pupils staring straight down the lens doing nothing, then the spin is a vertical-axis turn simulated with scaleX = cos(angle) (so the face flattens, disappears edge-on, and returns mirrored) that accelerates into motion-blur with hue-shifted afterimage ghosts until the face is unreadable — exactly the meme's wind-up — while the caption and the soundtrack chant the "oiia oiia oiiaiooooiai" loop in sync.
The four stages are: (1) the cat lifts slightly and starts the oiia spin while the room stays almost normal; (2) it rises higher and faster with blur, ghosts, dust bursts, a flickering lamp and the sofa starting to float; (3) it climbs further, the whole room tilts and shakes, sofa/lamp/plant all levitate, saturation climbs and a psychedelic vortex bleeds in; (4) the singularity — highest and fastest spin, full rotating rainbow vortex, stars, god-glow, confetti, screen shake, and six miniature spinning cats orbiting the main cat.
The voice is synthesized with Web Audio only after the first click: a sawtooth plus detuned square "glottal" source with vibrato and breath noise run through three parallel bandpass formant filters whose frequencies are interpolated between the vowel formants for O, I and A; it stays locked to the spin because the vowel is chosen directly from the spin angle — each full rotation is divided into four quarters mapped to O-I-I-A — while fundamental pitch, formant scaling, loudness and pulse all rise with the measured angular velocity, and a mute button suspends the context.
With more time I would fix the spin's 3D readability — the scaleX trick has no true foreshortening of the ears/body or occlusion as the back of the head comes around, so I'd build a small multi-frame drawn turn-around (front, three-quarter, profile, back) and crossfade/frame-swap by angle instead of just mirroring the front view.

Attachments

meta/muse-wonder — page