Run Detail

completedmuse-spark-open

85very good

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

199.6s

Total Tokens

31,261

Input Tokens

883

Output Tokens

30,378

Reasoning Tokens

16,859

Reasoning Effort

default

Cached Input Tokens

128

Est. Cost

$0.1301

Started

10/15/2026, 6:31:53 PM

OR Provider

Together

Finish Reason

stop

Generation ID

gen-1792089113-qKHyS5bRYUQA4wjBuwv9

Turns (1)

Turn #1

883 in30,378 out16,859 reasoning128 cached31,261 total199.5s

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:#080705}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 20%,#1a140e 0%,#080705 70%)}
#scene{position:relative;width:min(1280px,100vw);height:min(800px,100vh);background:#0e0a06;overflow:hidden;perspective:1200px;box-shadow:0 30px 80px rgba(0,0,0,0.8),0 0 0 1px rgba(255,255,255,0.06);border-radius:6px}
#room{position:absolute;inset:0;transform-style:preserve-3d}
.back-wall{position:absolute;inset:0 0 42% 0;background:
  linear-gradient(180deg,rgba(255,255,255,0.06) 0%,transparent 18%),
  linear-gradient(180deg,#f0e6d3 0%,#e9ddd0 22%,#dccfc0 45%,#cbbba8 68%,#b8a692 100%);
  box-shadow:inset 0 -30px 60px rgba(60,40,20,0.18),inset 0 1px 0 rgba(255,255,255,0.7)}
.back-wall::after{content:"";position:absolute;inset:0;opacity:0.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.left-wall{position:absolute;top:0;left:0;width:18%;height:58%;background:linear-gradient(90deg,#c9b8a3 0%,#d8c9b6 100%);transform:skewY(-6deg);transform-origin:top left;box-shadow:inset -20px 0 30px rgba(0,0,0,0.15);opacity:0.95}
.right-wall{position:absolute;top:0;right:0;width:16%;height:58%;background:linear-gradient(270deg,#c9b8a3 0%,#d8c9b6 100%);transform:skewY(6deg);transform-origin:top right;box-shadow:inset 20px 0 30px rgba(0,0,0,0.15);opacity:0.95}
.window{position:absolute;top:7%;left:11%;width:210px;height:170px;background:#a8d8f0;border:10px solid #4a3526;border-radius:3px;box-shadow:0 12px 30px rgba(0,0,0,0.35),inset 0 0 30px rgba(255,255,255,0.4);overflow:hidden}
.window::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#87c4e8 0%,#b8e0f2 45%,#e6f4ff 100%)}
.window::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 48%,#4a3526 48%,#4a3526 52%,transparent 52%),linear-gradient(transparent 48%,#4a3526 48%,#4a3526 52%,transparent 52%)}
.window-sill{position:absolute;bottom:-10px;left:-10px;right:-10px;height:14px;background:linear-gradient(180deg,#e8ddd0,#b8a692);box-shadow:0 4px 10px rgba(0,0,0,0.3)}
.window-light{position:absolute;top:10%;left:13%;width:420px;height:320px;background:radial-gradient(ellipse at 20% 20%,rgba(255,248,220,0.95) 0%,rgba(255,236,180,0.55) 28%,rgba(255,220,150,0.18) 55%,transparent 72%);filter:blur(18px);mix-blend-mode:screen;pointer-events:none}
.light-patch{position:absolute;bottom:16%;left:14%;width:360px;height:190px;background:radial-gradient(ellipse at center,rgba(255,248,220,0.55) 0%,rgba(255,240,190,0.25) 40%,transparent 72%);filter:blur(14px);transform:perspective(700px) rotateX(58deg);pointer-events:none;transition:opacity 0.3s}
.sofa{position:absolute;bottom:42%;right:9%;width:380px;height:132px;background:linear-gradient(180deg,#7a8b82 0%,#66766e 55%,#5a6a62 100%);border-radius:22px 22px 12px 12px;box-shadow:0 18px 35px rgba(0,0,0,0.45),inset 0 6px 12px rgba(255,255,255,0.18),inset 0 -8px 12px rgba(0,0,0,0.2)}
.sofa::before{content:"";position:absolute;top:-18px;left:18px;right:18px;height:36px;background:linear-gradient(180deg,#8a9b92,#6e7f76);border-radius:14px;box-shadow:0 6px 12px rgba(0,0,0,0.2)}
.sofa-cushion{position:absolute;bottom:18px;width:150px;height:70px;background:linear-gradient(180deg,#8ea39a,#6f8279);border-radius:12px;box-shadow:inset 0 4px 8px rgba(255,255,255,0.15)}
.sofa-cushion.left{left:22px}.sofa-cushion.right{right:22px}
.sofa-pillow{position:absolute;top:18px;right:28px;width:90px;height:60px;background:linear-gradient(180deg,#d8c9b6,#b8a692);border-radius:10px;transform:rotate(-4deg);box-shadow:0 4px 10px rgba(0,0,0,0.2)}
.lamp{position:absolute;bottom:42%;left:37%;width:60px;height:170px;pointer-events:none}
.lamp-stand{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:6px;height:115px;background:linear-gradient(90deg,#3a2a1a,#6b5a4a,#3a2a1a);border-radius:3px}
.lamp-shade{position:absolute;top:0;left:50%;transform:translateX(-50%);width:64px;height:42px;background:radial-gradient(ellipse at 50% 30%,#fff8dc 0%,#f5e6c8 55%,#e8d5a8 100%);border-radius:50% 50% 30% 30% / 60% 60% 40% 40%;box-shadow:0 0 28px rgba(255,242,170,0.9),0 6px 14px rgba(0,0,0,0.3)}
.lamp-glow{position:absolute;top:28px;left:50%;transform:translateX(-50%);width:220px;height:220px;background:radial-gradient(ellipse at center,rgba(255,244,170,0.38) 0%,rgba(255,230,140,0.12) 45%,transparent 72%);filter:blur(12px)}
.lamp-base{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:28px;height:10px;background:#4a3526;border-radius:50%}
.plant{position:absolute;bottom:42%;left:7%;width:86px;height:120px}
.plant-pot{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:52px;height:42px;background:linear-gradient(180deg,#9c7a4a,#6b4a2a);border-radius:4px 4px 14px 14px;box-shadow:0 6px 12px rgba(0,0,0,0.3)}
.plant-leaves{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:84px;height:88px;background:radial-gradient(ellipse at 30% 25%,#5a8a5a 0%,#3d6b3d 45%,#2a4a2a 100%);border-radius:50% 50% 40% 40% / 60% 60% 40% 40%;box-shadow:inset 0 6px 12px rgba(255,255,255,0.12)}
.picture-frame{position:absolute;top:12%;width:70px;height:90px;background:#fffef8;border:6px solid #4a3526;box-shadow:0 6px 14px rgba(0,0,0,0.25)}
.picture-frame.f1{right:28%;background:linear-gradient(180deg,#d8c9b6,#a08060)}
.picture-frame.f2{right:18%;width:56px;height:56px;top:18%;background:linear-gradient(180deg,#b8c9d8,#7a8a9a)}
.floor{position:absolute;bottom:0;left:-6%;right:-6%;height:46%;background:
  repeating-linear-gradient(90deg,rgba(0,0,0,0.08) 0 2px,transparent 2px 122px),
  repeating-linear-gradient(90deg,#9c7d4a 0 120px,#8a6d3e 120px 122px),
  linear-gradient(180deg,rgba(0,0,0,0.18) 0%,transparent 22%);
  transform:perspective(750px) rotateX(57deg);transform-origin:bottom center;box-shadow:0 -12px 30px rgba(0,0,0,0.5)}
.floor::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.06) 50%,transparent 100%);opacity:0.6}
.rug{position:absolute;bottom:11%;left:50%;transform:translateX(-50%) perspective(750px) rotateX(57deg);width:540px;height:300px;background:
  radial-gradient(ellipse at center,#d0b07a 0%,#b9975e 38%,#a67e3e 68%,#8a6a32 100%);
  border-radius:50%;box-shadow:0 12px 30px rgba(0,0,0,0.45),inset 0 0 40px rgba(0,0,0,0.25);border:10px solid #7a5a2a}
.rug::before{content:"";position:absolute;inset:14px;border-radius:50%;border:2px solid rgba(255,255,255,0.18);pointer-events:none}
.rug::after{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,transparent 0 18px,rgba(0,0,0,0.04) 18px 19px);opacity:0.5}
#cat-container{position:absolute;left:50%;bottom:18%;width:260px;height:320px;transform:translateX(-50%);transform-style:preserve-3d;cursor:pointer;z-index:10;will-change:transform;transition:transform 0.9s cubic-bezier(0.34,1.56,0.64,1)}
#shadow{position:absolute;bottom:-6px;left:50%;width:150px;height:44px;background:radial-gradient(ellipse at center,rgba(0,0,0,0.45) 0%,rgba(0,0,0,0.22) 45%,transparent 72%);filter:blur(7px);transform:translateX(-50%) perspective(750px) rotateX(57deg);transition:all 0.9s cubic-bezier(0.34,1.56,0.64,1);pointer-events:none}
#cat{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.cat-body-wrap{position:absolute;inset:0}
.cat-torso{position:absolute;bottom:42px;left:50%;transform:translateX(-50%);width:176px;height:156px;background:linear-gradient(180deg,#fdf3d8 0%,#f7e8c2 18%,#e8d5a0 42%,#dcc69a 78%,#c9b48a 100%);border-radius:78px 78px 38px 38px / 88px 88px 32px 32px;box-shadow:inset 0 -18px 28px rgba(110,85,40,0.22),inset 0 14px 18px rgba(255,255,255,0.65),0 10px 24px rgba(0,0,0,0.28);overflow:hidden}
.cat-torso::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(92deg,transparent 0 3px,rgba(140,110,60,0.06) 3px 4px),repeating-linear-gradient(0deg,transparent 0 7px,rgba(255,255,255,0.04) 7px 8px);border-radius:inherit}
.torso-highlight{position:absolute;top:12%;left:14%;width:58%;height:38%;background:radial-gradient(ellipse at 20% 30%,rgba(255,255,255,0.42) 0%,transparent 62%);border-radius:50%}
.cat-chest{position:absolute;bottom:52px;left:50%;transform:translateX(-50%);width:108px;height:108px;background:radial-gradient(ellipse at 50% 28%,#fffef8 0%,#fff8e6 38%,#f5e6c8 72%,#e8d5a8 100%);border-radius:50% 50% 42% 42% / 62% 62% 38% 38%;box-shadow:inset 0 6px 14px rgba(255,255,255,0.9),inset 0 -6px 10px rgba(180,150,100,0.15)}
.cat-tail{position:absolute;bottom:48px;right:22px;width:72px;height:72px;background:linear-gradient(180deg,#e8d5a0 0%,#dcc69a 100%);border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;box-shadow:inset 0 6px 10px rgba(255,255,255,0.4),0 4px 10px rgba(0,0,0,0.15);transform:rotate(-18deg)}
.cat-tail::before{content:"";position:absolute;inset:8px;border-radius:inherit;background:repeating-linear-gradient(90deg,transparent 0 8px,rgba(180,140,90,0.12) 8px 10px)}
.cat-paws{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);width:140px;height:44px}
.paw{position:absolute;bottom:0;width:52px;height:38px;background:linear-gradient(180deg,#fffef8 0%,#fff8e6 50%,#f0e0c0 100%);border-radius:22px 22px 14px 14px;box-shadow:inset 0 4px 8px rgba(255,255,255,0.9),0 4px 10px rgba(0,0,0,0.18)}
.paw.left{left:12px}.paw.right{right:12px}
.paw-pad{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:28px;height:14px;background:radial-gradient(ellipse at center,#e8a0a0 0%,#d48a8a 100%);border-radius:50%;opacity:0.0}
.cat-head{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:202px;height:172px;z-index:2}
.cat-ears{position:absolute;top:6px;left:0;right:0;height:46px;z-index:1}
.ear{position:absolute;top:0;width:56px;height:52px}
.ear.left{left:18px;transform:rotate(-12deg)}.ear.right{right:18px;transform:rotate(12deg)}
.ear-outer{position:absolute;inset:0;background:linear-gradient(180deg,#f7e8c2 0%,#e8d5a0 60%,#dcc69a 100%);clip-path:polygon(50% 0%,0% 100%,100% 100%);border-radius:4px;box-shadow:inset 0 4px 8px rgba(255,255,255,0.5)}
.ear-inner{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:28px;height:28px;background:radial-gradient(ellipse at 50% 30%,#e8a0a0 0%,#c97a7a 55%,#a85a5a 100%);clip-path:polygon(50% 0%,0% 100%,100% 100%);opacity:0.95}
.cat-face{position:absolute;top:18px;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 50% 18%,#fdf6e3 0%,#f7e8c2 32%,#e8d5a0 62%,#dcc69a 88%,#c9b48a 100%);border-radius:50% 50% 44% 44% / 58% 58% 42% 42%;box-shadow:inset 0 12px 18px rgba(255,255,255,0.72),inset 0 -14px 22px rgba(110,85,40,0.18),0 8px 18px rgba(0,0,0,0.24);overflow:hidden}
.face-fur-texture{position:absolute;inset:0;opacity:0.55;background:
  repeating-linear-gradient(78deg,transparent 0 2px,rgba(120,90,40,0.04) 2px 3px),
  repeating-linear-gradient(-12deg,transparent 0 14px,rgba(255,255,255,0.05) 14px 15px);border-radius:inherit}
.face-highlight{position:absolute;top:8%;left:12%;width:62%;height:36%;background:radial-gradient(ellipse at 20% 30%,rgba(255,255,255,0.38) 0%,transparent 62%);border-radius:50%;pointer-events:none}
.muzzle{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);width:110px;height:72px}
.muzzle-white{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 20%,#fffef8 0%,#fff8e6 45%,#f5e6c8 78%);border-radius:40% 40% 50% 50% / 45% 45% 55% 55%;box-shadow:inset 0 4px 10px rgba(255,255,255,0.9)}
.nose{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:22px;height:16px}
.nose-tip{position:absolute;top:0;left:50%;transform:translateX(-50%);width:14px;height:10px;background:linear-gradient(180deg,#e8a0a0 0%,#c97a7a 100%);clip-path:polygon(50% 100%,0 0,100% 0);border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,0.2)}
.nose-tip::after{content:"";position:absolute;top:2px;left:3px;width:4px;height:3px;background:rgba(255,255,255,0.7);border-radius:50%}
.mouth{position:absolute;top:24px;left:50%;transform:translateX(-50%);width:40px;height:18px}
.mouth-line{position:absolute;top:0;left:50%;transform:translateX(-50%);width:1px;height:10px;background:#6b5a4a;opacity:0.7}
.mouth-curve{position:absolute;top:8px;width:18px;height:10px;border-bottom:1.5px solid #6b5a4a;border-radius:0 0 50% 50%;opacity:0.7}
.mouth-curve.left{left:2px;transform:rotate(12deg)}.mouth-curve.right{right:2px;transform:rotate(-12deg)}
.whiskers{position:absolute;top:6px;left:0;right:0;height:20px}
.whisker{position:absolute;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(80,60,40,0.35),transparent);width:32px}
.whisker.w1{left:-28px;top:4px;transform:rotate(-8deg)}.whisker.w2{left:-30px;top:10px}.whisker.w3{left:-28px;top:16px;transform:rotate(8deg)}
.whisker.w4{right:-28px;top:4px;transform:rotate(8deg)}.whisker.w5{right:-30px;top:10px}.whisker.w6{right:-28px;top:16px;transform:rotate(-8deg)}
.cat-eyes{position:absolute;top:52px;left:50%;transform:translateX(-50%);width:132px;height:48px;display:flex;justify-content:space-between;align-items:center}
.eye{position:relative;width:42px;height:42px;background:radial-gradient(ellipse at 50% 30%,#fffef0 0%,#f5f0d0 100%);border-radius:50%;box-shadow:inset 0 2px 6px rgba(0,0,0,0.15),0 2px 6px rgba(0,0,0,0.12),inset 0 -2px 4px rgba(0,0,0,0.08);overflow:hidden}
.eye-ball{position:absolute;inset:3px;border-radius:50%;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,#d8e8a0 0%,#a8c060 35%,#7a9a3a 70%,#5a7a2a 100%)}
.iris{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 35%,#c8d88a 0%,#a8c060 30%,#7a9a3a 65%,#4a6a1a 100%)}
.pupil{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:18px;height:26px;background:radial-gradient(ellipse at 30% 20%,#2a2a2a 0%,#000 60%);border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,0.5)}
.pupil::after{content:"";position:absolute;top:4px;left:4px;width:4px;height:8px;background:rgba(255,255,255,0.15);border-radius:50%}
.eye-highlight{position:absolute;top:6px;left:7px;width:10px;height:10px;background:radial-gradient(circle at 30% 30%,#fff 0%,rgba(255,255,255,0.9) 40%,transparent 70%);border-radius:50%;box-shadow:0 0 4px rgba(255,255,255,0.8)}
.eye-highlight.small{top:18px;left:28px;width:4px;height:4px;opacity:0.8}
.eyelid{position:absolute;left:0;right:0;height:50%;background:#e8d5a0;transition:transform 0.12s;pointer-events:none}
.eyelid.top{top:0;transform:translateY(-100%)}.eyelid.bottom{bottom:0;transform:translateY(100%)}
.eye.blink .eyelid.top{transform:translateY(0)}.eye.blink .eyelid.bottom{transform:translateY(0)}
.forehead-stripe{position:absolute;top:28px;left:50%;transform:translateX(-50%);width:36px;height:22px;background:linear-gradient(180deg,rgba(180,140,90,0.18) 0%,transparent 100%);border-radius:50%;filter:blur(1px)}
.cheek-fur{position:absolute;bottom:22px;width:18px;height:28px;background:radial-gradient(ellipse at center,rgba(180,140,90,0.12) 0%,transparent 70%);border-radius:50%;filter:blur(1px)}
.cheek-fur.left{left:14px}.cheek-fur.right{right:14px}
.ghost{position:absolute;inset:0;opacity:0;filter:blur(6px) brightness(1.1);pointer-events:none;display:none;transform-style:preserve-3d}
#orbit{position:absolute;inset:-90px;pointer-events:none;opacity:0;transition:opacity 0.5s}
.orbit-cat{position:absolute;top:50%;left:50%;width:70px;height:86px;margin:-43px 0 0 -35px;background:inherit;transform-origin:center}
#particles{position:absolute;inset:-60px;pointer-events:none}
.particle{position:absolute;width:6px;height:6px;background:radial-gradient(circle,#fff8dc 0%,#ffcc66 100%);border-radius:50%;box-shadow:0 0 8px #ffcc66;opacity:0}
#fx-overlay{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen}
#vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 58%,rgba(0,0,0,0.55) 100%);pointer-events:none}
#grain{position:absolute;inset:0;opacity:0.035;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");mix-blend-mode:multiply}
#chromatic{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent 0%,rgba(255,0,80,0.04) 50%,transparent 100%)}
#oiia-text{position:absolute;top:14%;left:50%;transform:translateX(-50%);font-size:54px;font-weight:900;letter-spacing:0.08em;color:#fff;text-shadow:0 0 12px #ff00ff,0 0 28px #00ffff,0 2px 0 #000;opacity:0;pointer-events:none;font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;text-transform:lowercase;white-space:nowrap;transition:opacity 0.3s}
#oiia-sub{position:absolute;top:22%;left:50%;transform:translateX(-50%);font-size:18px;font-weight:800;letter-spacing:0.35em;color:#ffe8a0;text-shadow:0 0 10px #ff6600,0 0 20px #ff00ff;opacity:0;pointer-events:none;font-family:Impact,sans-serif;white-space:nowrap}
#mute{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,0.55);border:1px solid rgba(255,255,255,0.18);color:#fff;font-size:18px;cursor:pointer;backdrop-filter:blur(10px);z-index:100;display:flex;align-items:center;justify-content:center;transition:all 0.2s}
#mute:hover{background:rgba(0,0,0,0.75);transform:scale(1.05)}
#hint{position:absolute;bottom:56px;left:50%;transform:translateX(-50%);color:#fff;background:rgba(0,0,0,0.58);padding:10px 18px;border-radius:20px;font-size:13px;letter-spacing:0.04em;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.12);transition:opacity 0.5s;pointer-events:none;white-space:nowrap;z-index:20}
#stage-label{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,0.72);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;font-weight:700;pointer-events:none;z-index:20;text-shadow:0 1px 4px rgba(0,0,0,0.8)}
#speed-meter{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,0.08);overflow:hidden;z-index:20}
#speed-bar{height:100%;width:0%;background:linear-gradient(90deg,#ff00ff,#00ffff,#ffcc00);transition:width 0.6s cubic-bezier(0.34,1.56,0.64,1);box-shadow:0 0 10px rgba(255,0,255,0.6)}
@keyframes spin{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
@keyframes breathe{0%,100%{transform:translateX(-50%) scaleY(1)}50%{transform:translateX(-50%) scaleY(1.015)}}
@keyframes tailWag{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(-12deg)}}
@keyframes textPulse{0%,100%{transform:translateX(-50%) scale(1);filter:brightness(1)}50%{transform:translateX(-50%) scale(1.06);filter:brightness(1.2)}}
@keyframes pulseLight{0%,100%{opacity:0.9;transform:perspective(700px) rotateX(58deg) scale(1)}50%{opacity:1;transform:perspective(700px) rotateX(58deg) scale(1.04)}}
@keyframes shake{0%,100%{transform:translate(0,0)}25%{transform:translate(1px,-1px)}50%{transform:translate(-1px,1px)}75%{transform:translate(1px,1px)}}
@keyframes insaneShake{0%{transform:translate(0,0) rotate(0deg)}25%{transform:translate(3px,-2px) rotate(0.4deg)}50%{transform:translate(-2px,3px) rotate(-0.4deg)}75%{transform:translate(2px,2px) rotate(0.3deg)}100%{transform:translate(0,0) rotate(0deg)}}
@keyframes orbit{from{transform:rotate(0deg) translateX(110px) rotate(0deg)}to{transform:rotate(360deg) translateX(110px) rotate(-360deg)}}
@keyframes floatParticle{0%{transform:translate(0,0) scale(1);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translate(var(--x),var(--y)) scale(0);opacity:0}}
@keyframes hueSpin{0%{filter:hue-rotate(0deg) saturate(1.2)}100%{filter:hue-rotate(360deg) saturate(1.6)}}
.stage-1 #cat{animation:spin 0.7s linear infinite}
.stage-1 #cat-container{transform:translateX(-50%) translateY(-60px)}
.stage-1 #shadow{transform:translateX(-50%) scale(0.68) perspective(750px) rotateX(57deg);opacity:0.28;filter:blur(10px)}
.stage-1 #oiia-text{opacity:1;animation:textPulse 0.7s ease-in-out infinite}
.stage-1 .light-patch{animation:pulseLight 0.7s ease-in-out infinite}
.stage-1 #room{filter:brightness(1.06) contrast(1.04)}
.stage-2 #cat{animation:spin 0.35s linear infinite;filter:brightness(1.08)}
.stage-2 #cat-container{transform:translateX(-50%) translateY(-140px)}
.stage-2 #shadow{transform:translateX(-50%) scale(0.42) perspective(750px) rotateX(57deg);opacity:0.14;filter:blur(14px)}
.stage-2 #oiia-text{opacity:1;animation:textPulse 0.35s ease-in-out infinite;font-size:62px}
.stage-2 #oiia-sub{opacity:0.85}
.stage-2 #room{animation:shake 0.12s linear infinite;filter:contrast(1.12) saturate(1.15)}
.stage-2 #chromatic{opacity:0.5}
.stage-2 .ghost{display:block;opacity:0.22;animation:spin 0.35s linear infinite}
.stage-2 #particles .particle{opacity:1;animation:floatParticle 1.2s ease-out infinite}
.stage-3 #cat{animation:spin 0.15s linear infinite;filter:blur(3px) brightness(1.18) contrast(1.1)}
.stage-3 #cat-container{transform:translateX(-50%) translateY(-220px)}
.stage-3 #shadow{transform:translateX(-50%) scale(0.22) perspective(750px) rotateX(57deg);opacity:0.06;filter:blur(18px)}
.stage-3 #oiia-text{opacity:1;animation:textPulse 0.15s ease-in-out infinite;font-size:72px;letter-spacing:0.12em}
.stage-3 #oiia-sub{opacity:1;font-size:22px}
.stage-3 #room{animation:shake 0.08s linear infinite, hueSpin 1.2s linear infinite;filter:contrast(1.25) saturate(1.4)}
.stage-3 .ghost{opacity:0.32;filter:blur(8px) brightness(1.2);animation-duration:0.15s}
.stage-3 #fx-overlay{opacity:0.35;background:radial-gradient(ellipse at center,transparent 30%,rgba(255,0,255,0.12) 60%,rgba(0,255,255,0.12) 100%)}
.stage-4 #cat{animation:spin 0.07s linear infinite;filter:blur(7px) brightness(1.35) contrast(1.25) saturate(1.4)}
.stage-4 #cat-container{transform:translateX(-50%) translateY(-300px)}
.stage-4 #shadow{opacity:0;transform:translateX(-50%) scale(0.05)}
.stage-4 #oiia-text{opacity:1;animation:textPulse 0.07s ease-in-out infinite;font-size:84px;text-shadow:0 0 16px #ff00ff,0 0 36px #00ffff,0 0 60px #ffcc00}
.stage-4 #oiia-sub{opacity:1;font-size:26px;animation:textPulse 0.07s ease-in-out infinite}
.stage-4 #room{animation:insaneShake 0.06s linear infinite, hueSpin 0.6s linear infinite;filter:contrast(1.4) saturate(1.8) brightness(1.1)}
.stage-4 #fx-overlay{opacity:0.55;background:radial-gradient(ellipse at center,rgba(255,255,255,0.08) 0%,rgba(255,0,255,0.18) 35%,rgba(0,255,255,0.18) 65%,transparent 80%)}
.stage-4 #orbit{opacity:1}
.stage-4 #chromatic{opacity:0.7}
.stage-4 .ghost{opacity:0.4;filter:blur(10px) brightness(1.3) hue-rotate(30deg)}
#cat-container:not(.stage-1):not(.stage-2):not(.stage-3):not(.stage-4) .cat-head{animation:breathe 2.8s ease-in-out infinite}
#cat-container:not(.stage-1):not(.stage-2):not(.stage-3):not(.stage-4) .cat-tail{animation:tailWag 3.2s ease-in-out infinite;transform-origin:bottom left}
@media(max-width:700px){#scene{border-radius:0}#oiia-text{font-size:36px}.sofa{width:280px;right:4%}.window{width:160px;height:130px;left:6%}.rug{width:420px;height:240px}#cat-container{width:220px;height:270px}}
</style>
</head>
<body>
<div id="scene">
  <div id="room">
    <div class="back-wall"></div>
    <div class="left-wall"></div>
    <div class="right-wall"></div>
    <div class="window"><div class="window-sill"></div></div>
    <div class="window-light"></div>
    <div class="light-patch"></div>
    <div class="sofa"><div class="sofa-cushion left"></div><div class="sofa-cushion right"></div><div class="sofa-pillow"></div></div>
    <div class="lamp"><div class="lamp-glow"></div><div class="lamp-shade"></div><div class="lamp-stand"></div><div class="lamp-base"></div></div>
    <div class="plant"><div class="plant-leaves"></div><div class="plant-pot"></div></div>
    <div class="picture-frame f1"></div>
    <div class="picture-frame f2"></div>
    <div class="floor"></div>
    <div class="rug"></div>
  </div>
  <div id="cat-container">
    <div id="shadow"></div>
    <div id="cat">
      <div class="cat-body-wrap">
        <div class="cat-torso"><div class="torso-highlight"></div></div>
        <div class="cat-chest"></div>
        <div class="cat-tail"></div>
        <div class="cat-paws"><div class="paw left"><div class="paw-pad"></div></div><div class="paw right"><div class="paw-pad"></div></div></div>
        <div class="cat-head">
          <div class="cat-ears">
            <div class="ear left"><div class="ear-outer"></div><div class="ear-inner"></div></div>
            <div class="ear right"><div class="ear-outer"></div><div class="ear-inner"></div></div>
          </div>
          <div class="cat-face">
            <div class="face-fur-texture"></div>
            <div class="face-highlight"></div>
            <div class="forehead-stripe"></div>
            <div class="cat-eyes">
              <div class="eye left"><div class="eye-ball"><div class="iris"></div><div class="pupil"></div><div class="eye-highlight"></div><div class="eye-highlight small"></div></div><div class="eyelid top"></div><div class="eyelid bottom"></div></div>
              <div class="eye right"><div class="eye-ball"><div class="iris"></div><div class="pupil"></div><div class="eye-highlight"></div><div class="eye-highlight small"></div></div><div class="eyelid top"></div><div class="eyelid bottom"></div></div>
            </div>
            <div class="muzzle">
              <div class="muzzle-white"></div>
              <div class="nose"><div class="nose-tip"></div></div>
              <div class="mouth"><div class="mouth-line"></div><div class="mouth-curve left"></div><div class="mouth-curve right"></div></div>
              <div class="whiskers"><div class="whisker w1"></div><div class="whisker w2"></div><div class="whisker w3"></div><div class="whisker w4"></div><div class="whisker w5"></div><div class="whisker w6"></div></div>
            </div>
            <div class="cheek-fur left"></div><div class="cheek-fur right"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="ghost" id="ghost1"></div>
    <div class="ghost" id="ghost2"></div>
    <div id="orbit"></div>
    <div id="particles"></div>
  </div>
  <div id="fx-overlay"></div>
  <div id="vignette"></div>
  <div id="grain"></div>
  <div id="chromatic"></div>
  <div id="oiia-text">oiia oiia oiia</div>
  <div id="oiia-sub">oiiaiooooiai</div>
  <button id="mute" aria-label="mute">🔊</button>
  <div id="hint">click the cat — it’s staring at you</div>
  <div id="stage-label">idle — staring</div>
  <div id="speed-meter"><div id="speed-bar"></div></div>
</div>
<script>
let stage=0,ctx,master,osc,wobble,wobbleGain,f1,f2,f3,g1,g2,g3,lp,vowelTimer,muted=false;
const cat=document.getElementById('cat');
const catContainer=document.getElementById('cat-container');
const scene=document.getElementById('scene');
const hint=document.getElementById('hint');
const muteBtn=document.getElementById('mute');
const oiiaText=document.getElementById('oiia-text');
const oiiaSub=document.getElementById('oiia-sub');
const particlesEl=document.getElementById('particles');
const orbitEl=document.getElementById('orbit');
const speedBar=document.getElementById('speed-bar');
const stageLabel=document.getElementById('stage-label');

function initAudio(){
  ctx=new (window.AudioContext||window.webkitAudioContext)();
  master=ctx.createGain();
  master.gain.value=muted?0:0.7;
  master.connect(ctx.destination);
}
function stopVoice(){
  if(vowelTimer)clearInterval(vowelTimer);
  vowelTimer=null;
  if(osc){
    try{osc.stop()}catch(e){}
    try{wobble.stop()}catch(e){}
    try{osc.disconnect()}catch(e){}
    try{f1.disconnect()}catch(e){}
    try{f2.disconnect()}catch(e){}
    try{f3.disconnect()}catch(e){}
    try{g1.disconnect()}catch(e){}
    try{g2.disconnect()}catch(e){}
    try{g3.disconnect()}catch(e){}
    try{lp.disconnect()}catch(e){}
    try{wobbleGain.disconnect()}catch(e){}
  }
  osc=wobble=f1=f2=f3=g1=g2=g3=lp=null;
}
function startVoice(s){
  stopVoice();
  if(!ctx)return;
  const baseFreq=[0,132,168,215,325][s];
  const spinDur=[0,0.7,0.35,0.15,0.07][s];
  const vowelDur=spinDur/4;
  osc=ctx.createOscillator();
  osc.type='sawtooth';
  osc.frequency.value=baseFreq;
  wobble=ctx.createOscillator();
  wobble.type='sine';
  wobble.frequency.value=5+s*1.8;
  wobbleGain=ctx.createGain();
  wobbleGain.gain.value=7+s*5;
  wobble.connect(wobbleGain);
  wobbleGain.connect(osc.frequency);
  f1=ctx.createBiquadFilter();f1.type='bandpass';f1.Q.value=9;f1.frequency.value=500;
  f2=ctx.createBiquadFilter();f2.type='bandpass';f2.Q.value=11;f2.frequency.value=900;
  f3=ctx.createBiquadFilter();f3.type='bandpass';f3.Q.value=13;f3.frequency.value=2500;
  g1=ctx.createGain();g1.gain.value=1.0;
  g2=ctx.createGain();g2.gain.value=0.72;
  g3=ctx.createGain();g3.gain.value=0.38;
  lp=ctx.createBiquadFilter();lp.type='lowpass';lp.frequency.value=s>=3?4200:3400;lp.Q.value=0.7;
  osc.connect(f1);osc.connect(f2);osc.connect(f3);
  f1.connect(g1);f2.connect(g2);f3.connect(g3);
  g1.connect(lp);g2.connect(lp);g3.connect(lp);
  lp.connect(master);
  if(s>=3){
    const shaper=ctx.createWaveShaper();
    shaper.curve=makeCurve(18*s);
    shaper.oversample='2x';
    // add subtle drive by inserting shaper before master
    lp.disconnect();
    lp.connect(shaper);
    shaper.connect(master);
    lp._shaper=shaper;
  }
  osc.start();wobble.start();
  const vowels=[
    {f1:480,f2:900,f3:2500,txt:'o'},
    {f1:310,f2:2320,f3:3050,txt:'i'},
    {f1:310,f2:2320,f3:3050,txt:'i'},
    {f1:780,f2:1220,f3:2600,txt:'a'}
  ];
  let idx=0;
  function setVowel(v){
    const now=ctx.currentTime;
    f1.frequency.linearRampToValueAtTime(v.f1,now+0.028);
    f2.frequency.linearRampToValueAtTime(v.f2,now+0.028);
    f3.frequency.linearRampToValueAtTime(v.f3,now+0.028);
    // tiny pitch nudge per vowel for speech-like
    const nudge=v.txt==='i'?1.04:v.txt==='a'?0.98:1;
    osc.frequency.linearRampToValueAtTime(baseFreq*nudge,now+0.04);
  }
  setVowel(vowels[0]);
  vowelTimer=setInterval(()=>{
    idx=(idx+1)%vowels.length;
    setVowel(vowels[idx]);
    // visual pulse sync
    if(idx%2===0){
      oiiaText.style.transform='translateX(-50%) scale(1.04)';
      setTimeout(()=>oiiaText.style.transform='translateX(-50%) scale(1)',60);
    }
    if(idx===0){
      const cur=osc.frequency.value;
      osc.frequency.linearRampToValueAtTime(cur*1.015,ctx.currentTime+0.08);
    }
  },vowelDur*1000);
  // long pitch climb
  osc.frequency.linearRampToValueAtTime(baseFreq*1.28,ctx.currentTime+3.5);
}
function makeCurve(amount){
  const n=44100,samples=new Float32Array(n);
  for(let i=0;i<n;i++){
    const x=i*2/n-1;
    samples[i]=(3+amount)*x*20*(Math.PI/180)/(Math.PI+amount*Math.abs(x));
  }
  return samples;
}
function updateParticles(s){
  particlesEl.innerHTML='';
  if(s<2)return;
  const count=s===2?10:s===3?18:28;
  for(let i=0;i<count;i++){
    const d=document.createElement('div');
    d.className='particle';
    const angle=Math.random()*360;
    const dist=40+Math.random()*80;
    const x=Math.cos(angle*Math.PI/180)*dist;
    const y=Math.sin(angle*Math.PI/180)*dist;
    d.style.left='50%';d.style.top='50%';
    d.style.setProperty('--x',x+'px');
    d.style.setProperty('--y',y+'px');
    d.style.animationDelay=(Math.random()*0.8)+'s';
    d.style.animationDuration=(0.6+Math.random()*0.6)+'s';
    d.style.background=s>=4?`hsl(${280+Math.random()*60} 100% 70%)`:'radial-gradient(circle,#fff8dc,#ffcc66)';
    particlesEl.appendChild(d);
  }
}
function updateOrbit(s){
  orbitEl.innerHTML='';
  if(s<4){orbitEl.style.opacity='0';return}
  orbitEl.style.opacity='1';
  for(let i=0;i<8;i++){
    const o=document.createElement('div');
    o.className='orbit-cat';
    o.style.width='56px';o.style.height='68px';
    o.style.position='absolute';o.style.top='50%';o.style.left='50%';
    o.style.margin='-34px 0 0 -28px';
    o.style.background='radial-gradient(ellipse at 50% 20%,#fdf6e3 0%,#f7e8c2 40%,#e8d5a0 100%)';
    o.style.borderRadius='50% 50% 40% 40% / 60% 60% 40% 40%';
    o.style.boxShadow='inset 0 4px 8px rgba(255,255,255,0.6),0 4px 10px rgba(0,0,0,0.3)';
    o.style.display='flex';o.style.alignItems='center';o.style.justifyContent='center';
    o.style.fontSize='22px';
    o.innerHTML='🐱';
    o.style.animation=`orbit ${0.9+i*0.05}s linear infinite`;
    o.style.animationDelay=`-${i*0.11}s`;
    o.style.filter=`hue-rotate(${i*45}deg) saturate(1.3)`;
    orbitEl.appendChild(o);
  }
}
function applyStage(s){
  stage=s;
  document.body.className='stage-'+s;
  scene.className='stage-'+s;
  catContainer.className='stage-'+s;
  const durs=[0,0.7,0.35,0.15,0.07];
  if(s>0){
    cat.style.animationName='spin';
    cat.style.animationDuration=durs[s]+'s';
    cat.style.animationTimingFunction='linear';
    cat.style.animationIterationCount='infinite';
  }else{
    cat.style.animationName='none';
  }
  const lifts=[0,60,140,220,300];
  catContainer.style.transform=`translateX(-50%) translateY(-${lifts[s]}px)`;
  const shadow=document.getElementById('shadow');
  const scales=[1,0.68,0.42,0.22,0.05];
  const ops=[0.42,0.28,0.14,0.06,0];
  shadow.style.transform=`translateX(-50%) scale(${scales[s]}) perspective(750px) rotateX(57deg)`;
  shadow.style.opacity=ops[s];
  shadow.style.filter=`blur(${7+s*3}px)`;
  const labels=['idle — staring','stage 1 — lift off','stage 2 — blur','stage 3 — vortex','stage 4 — ASCENSION'];
  stageLabel.textContent=labels[s];
  speedBar.style.width=(s*25)+'%';
  speedBar.style.opacity=s?1:0.4;
  if(s>0){
    oiiaText.style.opacity='1';
    oiiaText.style.animationDuration=durs[s]+'s';
    oiiaText.textContent=s>=3?'OIIA OIIA OIIAIOOOOIAI':'oiia oiia oiia';
    oiiaSub.style.opacity=s>=2?'1':'0';
    oiiaSub.style.animationDuration=durs[s]+'s';
    hint.style.opacity='0';
  }else{
    oiiaText.style.opacity='0';
    oiiaSub.style.opacity='0';
  }
  const ghosts=document.querySelectorAll('.ghost');
  ghosts.forEach((g,i)=>{
    if(s>=2){
      g.style.display='block';
      g.innerHTML=document.getElementById('cat').innerHTML;
      g.style.opacity=s===2?'0.22':s===3?'0.32':'0.38';
      g.style.animationName='spin';
      g.style.animationDuration=durs[s]+'s';
      g.style.animationTimingFunction='linear';
      g.style.animationIterationCount='infinite';
      g.style.animationDelay=`-${0.04+i*0.04}s`;
      g.style.filter=`blur(${6+i*2}px) brightness(1.1)`;
    }else{
      g.style.display='none';
      g.style.opacity='0';
    }
  });
  updateParticles(s);
  updateOrbit(s);
  if(s===4){
    // confetti burst
    for(let i=0;i<22;i++){
      const c=document.createElement('div');
      c.textContent=['✨','💫','🌀','⚡','💥'][Math.floor(Math.random()*5)];
      c.style.position='absolute';
      c.style.left=(20+Math.random()*60)+'%';
      c.style.top='-20px';
      c.style.fontSize=(14+Math.random()*18)+'px';
      c.style.pointerEvents='none';
      c.style.zIndex='30';
      c.style.animation=`floatParticle ${1+Math.random()}s ease-in forwards`;
      c.style.setProperty('--x',(Math.random()*200-100)+'px');
      c.style.setProperty('--y',(400+Math.random()*200)+'px');
      scene.appendChild(c);
      setTimeout(()=>c.remove(),2000);
    }
  }
}
catContainer.addEventListener('click',async(e)=>{
  e.stopPropagation();
  if(!ctx) initAudio();
  if(ctx&&ctx.state==='suspended') await ctx.resume();
  const next=Math.min(stage+1,4);
  // if already 4, loop back to 1 for replay fun
  const target=stage===4?1:next;
  applyStage(target);
  startVoice(target);
});
muteBtn.addEventListener('click',(e)=>{
  e.stopPropagation();
  muted=!muted;
  muteBtn.textContent=muted?'🔇':'🔊';
  if(master) master.gain.value=muted?0:0.7;
  if(muted) muteBtn.style.opacity='0.6'; else muteBtn.style.opacity='1';
});
scene.addEventListener('click',(e)=>{
  if(e.target===scene) catContainer.click();
});
// idle blink
setInterval(()=>{
  if(stage!==0) return;
  document.querySelectorAll('.eye').forEach(eye=>{
    eye.classList.add('blink');
    setTimeout(()=>eye.classList.remove('blink'),140);
  });
}, 2800+Math.random()*1800);
// subtle mouse parallax for depth
scene.addEventListener('mousemove',(e)=>{
  if(stage>=3) return;
  const r=scene.getBoundingClientRect();
  const x=(e.clientX-r.left)/r.width-0.5;
  const y=(e.clientY-r.top)/r.height-0.5;
  document.getElementById('room').style.transform=`translate(${x*10}px,${y*6}px)`;
  catContainer.style.marginLeft=x*8+'px';
});
applyStage(0);
</script>
</body>
</html>

The notes

How the opening frame gets its realism, and where that realism gives out: Light is motivated — cool window wash from the left and warm lamp glow from the right create two-tone shading, contact shadow and ambient occlusion under paws, wood grain, rug weave, sofa fabric and wall noise via inline SVG turbulence, plus vignette/grain for lens feel. It breaks on close inspection: fur is layered gradients not strands, no true SSS or ray-traced shadows, and the room is 2.5D planes with perspective tricks rather than geometry.
What you did to make it read as the Oiia cat rather than as a cat that rotates: Cream-and-white British-shorthair palette with white chest/muzzle/paws, round head, tiny pink nose, flat “w” mouth, huge amber eyes locked to camera with double specular highlights, sitting square with paws together, and the “oiia” text + vocal that rides the spin instead of a generic hum.
The four stages, in order, and what makes each one crazier than the last: 1 Lift-off — 60px rise, 0.7s/rev, light pulse and text sync; 2 Blur — 140px, 0.35s/rev, ghost doubles, chromatic aberration, shake and orbiting dust; 3 Vortex — 220px, 0.15s/rev, face blurs unreadable, hue-spin, room warp and fx overlay; 4 Ascension — 300px, 0.07s/rev, 8 orbiting mini-cats, confetti/emoji burst, insane shake, saturated strobe and bass drive — built to be screen-recordable, not just faster.
How the voice is synthesized, and what keeps it locked to the spin: Sawtooth glottal source through three parallel bandpass formants (F1/F2/F3) with gains 1.0/0.72/0.38, vowel table o(480/900) → i(310/2320) → i → a(780/1220) sequenced by setInterval; spin duration/4 sets vowel duration so pitch and syllable rate climb together, plus 5–12Hz vibrato and a 3.5s pitch ramp, low-pass and wave-shaper drive at stage 3–4 for loudness.
The part you would fix with more time: Replace gradient fur with a canvas fur shader with per-strand parallax and true thickness for the Y-spin, add a 3D room with depth-mapped furniture that actually lifts/floats, and implement AudioWorklet formant morphing with consonant bursts so “oi-ia” has plosive onsets instead of pure vowel interpolation.

Attachments

meta/muse-spark-open — page