Run Detail
completedmistral-large-4-0Recorded for these videos
27:18Gemini 4 Hydrogen: Cheaper Tokens, More Expensive Answers?
Nov 13, 2026 · YouTube
18:40ERNIE 5.5 Flash Preview vs GLM 5.3 Flash: Baidu's new model is very impressive!
Nov 11, 2026 · YouTube
36:22Fable 5.2 robbing me blind, plus: Nex AGI's N2.6 vs GLM 5.3 Flash
Nov 11, 2026 · YouTube
14:03Gemini 4 Carbon: Can it handle my challenges? (First look with one-shot coding tests)
Nov 10, 2026 · YouTube
47:51Ranking 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:58Testing Particle-1: a post-trained DeepSeek V4.1 Flash specializing in coding and efficiency
Oct 28, 2026 · YouTube
29:55Kimi K3.1 Pro Looked Incredible. Then I Kept Testing.
Oct 26, 2026 · YouTube
31:28Is this company reselling GPT Sol 6.1 at a loss (for non-agentic/text-only)?🤔 Is this sustainable?
Oct 20, 2026 · YouTube
17:58Nemotron 3.5 Super VL vs Opus 5.5: Testing NVIDIA’s new coding juggernaut
Oct 15, 2026 · YouTube
16:04Testing a *massive* new open-weights model 🤯: Muse Spark Open (vs. Nemotron, Opus 5.5, and more)
Oct 15, 2026 · YouTube
16:43Gemini 4 Argon: Great 🐈 Animation, but a broken escalator. (Coding challenge vs Opus 5.5, Sol 6.1)
Oct 13, 2026 · YouTube
16:37Meta's new "Muse Wonder" AI is impressive... but can it compete with Anthropic's models?
Oct 12, 2026 · YouTube
11:12WOW... Haiku 5.5 is very impressive. RIP OpenAI?
Oct 7, 2026 · YouTube
22:47Mistral Large 4 Is Cheap. But Is It Good Enough to Compete?
Oct 6, 2026 · YouTube
22:02Is Pareto 26.10 Preview Just Routing to GPT Sol? I Tested It Against Sol 6.1 Pro
Oct 1, 2026 · YouTube
11:22I Tested Sonnet 5.5 Against Opus 5.5. Is It Actually Cheaper?
Sep 28, 2026 · YouTube
19:21I Tested the Stealth "Space Bunny Alpha" Model Before It Went Offline
Sep 23, 2026 · YouTube
10:58So... how much better is Claude Opus 5.5 vs. GPT-6 Sol, really?
Sep 23, 2026 · YouTube
9:38Claude Opus 5.5... the BEST new model for coding!! 🤩
Sep 22, 2026 · YouTube
Provider
openrouter
Challenge Version
v2.0
Turns
1
Duration
147.2s
Total Tokens
15,082
Input Tokens
765
Output Tokens
14,317
Reasoning Effort
default
Est. Cost
$0.0304
Started
10/6/2026, 2:06:11 PM
OR Provider
Mistral
Finish Reason
stop
Generation ID
gen-1791295571-i3BzHT6mNkXABLJqQTZ9
Turns (1)
Turn #1
765 in14,317 out15,082 total147.2s
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 orindexedDB— sandboxed frame, they throw. - Return the file as exactly one fenced
htmlblock.
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.0">
<title>oiia oiia oiiaiooooiai</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; background:#1a1410; }
body { font-family: Georgia, 'Times New Roman', serif; }
/* ---------- THE ROOM ---------- */
#stage {
position:fixed; inset:0;
perspective:900px;
perspective-origin:50% 42%;
overflow:hidden;
cursor:pointer;
user-select:none;
-webkit-user-select:none;
}
/* warm lamp light from upper left, everything else falls off into shadow */
#room {
position:absolute; inset:-12%;
transform-style:preserve-3d;
will-change:transform;
}
.wall {
position:absolute;
background:
radial-gradient(ellipse 90% 70% at 18% 12%, rgba(255,214,160,0.20), rgba(255,214,160,0) 55%),
linear-gradient(180deg, #4a3a2c 0%, #3a2d22 55%, #2a2018 100%);
}
#wallBack { left:10%; right:10%; top:6%; height:58%; transform: translateZ(-260px); border-radius:4px;
box-shadow: inset 0 0 120px rgba(0,0,0,0.7); }
#wallLeft { left:-14%; width:26%; top:2%; height:66%; transform: rotateY(90deg) translateZ(-140px);
background: linear-gradient(90deg, #241a12, #3a2d22); }
#wallRight { right:-14%; width:26%; top:2%; height:66%; transform: rotateY(-90deg) translateZ(-140px);
background: linear-gradient(270deg, #1c140e, #332718); }
/* floorboards — real depth, cat rests on them */
#floor {
position:absolute; left:6%; right:6%; bottom:-6%; height:52%;
transform-origin:50% 0%;
transform: rotateX(78deg) translateZ(-40px);
background:
repeating-linear-gradient(90deg, rgba(0,0,0,0.28) 0 2px, rgba(0,0,0,0) 2px 92px),
repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 1px, rgba(0,0,0,0) 1px 7px),
linear-gradient(180deg, #6b4a2e 0%, #54371f 40%, #3a2716 100%);
box-shadow: inset 0 60px 90px rgba(0,0,0,0.55);
}
#floor::after { /* light pool on the floor under the lamp */
content:''; position:absolute; left:8%; top:6%; width:44%; height:60%;
background: radial-gradient(ellipse at 30% 20%, rgba(255,210,150,0.16), rgba(255,210,150,0) 70%);
}
/* baseboard */
#baseboard {
position:absolute; left:10%; right:10%; top:60%; height:3.5%;
transform: translateZ(-258px);
background: linear-gradient(180deg, #5a4630, #3a2c1e);
box-shadow: 0 3px 6px rgba(0,0,0,0.5);
}
/* ---------- FURNITURE ---------- */
.furn { position:absolute; transform-style:preserve-3d; }
/* floor lamp, upper left — the light source */
#lamp { left:6%; top:8%; width:16%; height:74%; transform: translateZ(-200px); }
#lamp .pole { position:absolute; left:46%; top:34%; width:8%; height:66%;
background: linear-gradient(90deg, #1c1410, #4a3826 45%, #1c1410); border-radius:4px; }
#lamp .base { position:absolute; left:28%; bottom:0; width:44%; height:4%;
background:#241a12; border-radius:50%; }
#lamp .shade { position:absolute; left:8%; top:0; width:84%; height:36%;
background: linear-gradient(180deg, #f5e3c0 0%, #e8cf9e 78%, #c9a86e 100%);
clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
box-shadow: 0 0 60px 24px rgba(255,214,150,0.30), 0 0 140px 60px rgba(255,200,130,0.12); }
#lamp .bulb { position:absolute; left:38%; top:30%; width:24%; height:8%;
background: radial-gradient(ellipse, #fff6dd, rgba(255,246,221,0) 70%); filter:blur(2px); }
/* sofa, right side, in shadow */
#sofa { right:2%; top:34%; width:34%; height:44%; transform: translateZ(-160px); }
#sofa .back { position:absolute; left:0; right:0; top:0; height:52%;
background: linear-gradient(180deg, #4a3a44, #352a32); border-radius:10px 10px 0 0; }
#sofa .seat { position:absolute; left:-3%; right:-3%; top:44%; height:30%;
background: linear-gradient(180deg, #5a4652, #3a2e38); border-radius:6px; }
#sofa .cushion { position:absolute; top:12%; height:34%; width:44%;
background: linear-gradient(180deg, #6b5560, #453642); border-radius:8px;
box-shadow: inset 0 -6px 10px rgba(0,0,0,0.4); }
#sofa .cushion.c1 { left:4%; } #sofa .cushion.c2 { right:4%; }
#sofa .armL { position:absolute; left:-4%; top:22%; width:10%; height:56%;
background:#3a2e38; border-radius:8px 0 0 6px; }
#sofa .armR { position:absolute; right:-4%; top:22%; width:10%; height:56%;
background:#332730; border-radius:0 8px 6px 0; }
#sofa .leg { position:absolute; bottom:-4%; width:4%; height:6%; background:#1c1418; }
#sofa .leg.l1{left:6%;} #sofa .leg.l2{right:6%;}
/* framed picture on the back wall */
#picture { left:56%; top:16%; width:11%; height:20%; transform: translateZ(-250px);
background:#2a1f16; border:6px solid #5a4426; box-shadow: 0 4px 10px rgba(0,0,0,0.5); }
#picture::after { content:''; position:absolute; inset:8%;
background: linear-gradient(160deg, #7a8a6a, #4a5a48 60%, #3a4a3e); opacity:0.7; }
/* rug under the cat */
#rug { left:26%; right:26%; bottom:2%; height:26%; transform: translateZ(-20px) rotateX(78deg);
border-radius:50%;
background: radial-gradient(ellipse, #6e3a3a 0%, #5a2e2e 55%, #4a2424 100%);
box-shadow: inset 0 0 40px rgba(0,0,0,0.5), 0 0 0 6px #54301f; }
/* a plant, far corner, mostly silhouette */
#plant { left:80%; top:30%; width:10%; height:40%; transform: translateZ(-230px); }
#plant .pot { position:absolute; bottom:0; left:20%; width:60%; height:26%;
background: linear-gradient(180deg, #6a4a3a, #4a3226); clip-path: polygon(8% 0, 92% 0, 78% 100%, 22% 100%); }
#plant .leaf { position:absolute; bottom:22%; left:50%; width:10%; height:70%;
background:#22301c; border-radius:50% 50% 50% 50%/70% 70% 30% 30%; transform-origin:bottom center; }
#plant .leaf:nth-child(2){ transform:translateX(-50%) rotate(-28deg); height:58%; }
#plant .leaf:nth-child(3){ transform:translateX(-50%) rotate(0deg); height:72%; }
#plant .leaf:nth-child(4){ transform:translateX(-50%) rotate(28deg); height:58%; }
#plant .leaf:nth-child(5){ transform:translateX(-50%) rotate(-52deg); height:44%; }
#plant .leaf:nth-child(6){ transform:translateX(-50%) rotate(52deg); height:44%; }
/* dust motes in the lamp light */
.mote { position:absolute; border-radius:50%; background:rgba(255,224,170,0.5);
filter:blur(1px); animation:drift 9s ease-in-out infinite; }
@keyframes drift {
0%,100% { transform:translate(0,0); opacity:0.0; }
20% { opacity:0.55; } 50% { opacity:0.25; } 80% { opacity:0.5; }
50% { transform:translate(14px,-30px); }
}
/* vignette + grain — the photograph finish */
#vignette { position:fixed; inset:0; pointer-events:none;
background: radial-gradient(ellipse at 46% 40%, rgba(0,0,0,0) 40%, rgba(10,6,3,0.55) 100%); }
#grain { position:fixed; inset:0; pointer-events:none; opacity:0.07; mix-blend-mode:overlay; }
/* ---------- THE CAT ---------- */
#catWrap {
position:absolute; left:50%; top:66%;
width:230px; height:250px;
transform: translate(-50%,-50%);
transform-style:preserve-3d;
will-change:transform;
}
#catShadow {
position:absolute; left:50%; bottom:6px; width:170px; height:34px;
transform:translateX(-50%);
background: radial-gradient(ellipse, rgba(0,0,0,0.5), rgba(0,0,0,0) 70%);
filter: blur(4px);
}
#cat {
position:absolute; inset:0;
transform-style:preserve-3d;
will-change:transform;
}
/* ---- hand-built cat, cream & white, sitting square to camera ---- */
#cat .part { position:absolute; }
/* haunches / body base */
#cat .body {
left:50%; bottom:14px; width:190px; height:130px;
transform:translateX(-50%);
background:
radial-gradient(ellipse 60% 50% at 35% 30%, #fdf6e8, rgba(253,246,232,0) 70%),
linear-gradient(180deg, #f7eeda 0%, #efe0c4 55%, #d9c49c 100%);
border-radius: 46% 46% 42% 42% / 60% 60% 40% 40%;
box-shadow: inset -18px -10px 26px rgba(150,110,60,0.28),
inset 14px 12px 22px rgba(255,255,255,0.6),
0 10px 18px rgba(0,0,0,0.35);
}
/* cream patches on the body */
#cat .patch1 { left:56%; bottom:60px; width:52px; height:44px;
background:#e8cf9e; border-radius:60% 40% 55% 45%/55% 60% 40% 45%; opacity:0.85;
filter:blur(1px); transform:rotate(14deg); }
#cat .patch2 { left:34%; bottom:34px; width:38px; height:30px;
background:#e8cf9e; border-radius:50%; opacity:0.7; filter:blur(1px); }
/* chest — white bib */
#cat .chest {
left:50%; bottom:52px; width:86px; height:96px; transform:translateX(-50%);
background:
radial-gradient(ellipse at 40% 25%, #ffffff, rgba(255,255,255,0) 75%),
linear-gradient(180deg, #fffdf6, #f2e8d4);
border-radius: 48% 48% 40% 40% / 55% 55% 45% 45%;
box-shadow: inset -10px -6px 16px rgba(160,120,70,0.18);
}
/* front paws, planted */
#cat .paw {
bottom:8px; width:44px; height:34px;
background: linear-gradient(180deg, #fffdf6, #efe2c8);
border-radius: 46% 46% 40% 40%/60% 55% 45% 45%;
box-shadow: inset -6px -4px 8px rgba(150,110,60,0.25), 0 3px 4px rgba(0,0,0,0.3);
}
#cat .pawL { left:calc(50% - 52px); }
#cat .pawR { left:calc(50% + 8px); }
#cat .toe { position:absolute; bottom:8px; width:2px; height:9px; background:rgba(150,110,60,0.4); border-radius:2px; }
#cat .toe.t1{ left:14px; } #cat .toe.t2{ left:22px; } #cat .toe.t3{ left:30px; }
/* tail curled around the side */
#cat .tail {
right:6px; bottom:16px; width:88px; height:34px;
background: linear-gradient(180deg, #f2e4c8, #dcc294);
border-radius: 40px 40px 30px 30px / 50% 50% 50% 50%;
transform: rotate(-8deg);
box-shadow: inset -8px -4px 10px rgba(150,110,60,0.3), 0 4px 8px rgba(0,0,0,0.3);
}
#cat .tailTip { right:2px; bottom:20px; width:26px; height:24px;
background:#fffdf6; border-radius:50%; }
/* head — the star. square to camera, wide eyes, dead stare */
#cat .head {
left:50%; bottom:118px; width:158px; height:140px; transform:translateX(-50%);
background:
radial-gradient(ellipse 55% 45% at 38% 28%, #fdf6e8, rgba(253,246,232,0) 70%),
linear-gradient(180deg, #f9f0dc 0%, #f0e2c6 60%, #ddc79e 100%);
border-radius: 48% 48% 46% 46% / 52% 52% 48% 48%;
box-shadow: inset -16px -10px 24px rgba(150,110,60,0.25),
inset 12px 10px 18px rgba(255,255,255,0.55),
0 8px 14px rgba(0,0,0,0.3);
}
/* cream cap & cheek patches */
#cat .cap { left:50%; top:-4px; width:96px; height:52px; transform:translateX(-50%);
background:#e8cf9e; border-radius:50% 50% 40% 40%/70% 70% 30% 30%; opacity:0.9; filter:blur(1px); }
#cat .cheekL { left:2px; top:56px; width:34px; height:30px; background:#e8cf9e;
border-radius:50%; opacity:0.65; filter:blur(1px); }
#cat .cheekR { right:2px; top:56px; width:34px; height:30px; background:#e8cf9e;
border-radius:50%; opacity:0.65; filter:blur(1px); }
/* ears */
#cat .ear { bottom:112px; width:44px; height:52px;
background: linear-gradient(180deg, #f4e8cf, #e2cd9f);
border-radius: 50% 50% 20% 20% / 70% 70% 30% 30%;
box-shadow: inset -6px -4px 8px rgba(150,110,60,0.3);
}
#cat .earL { left:calc(50% - 74px); transform:rotate(-14deg); }
#cat .earR { left:calc(50% + 30px); transform:rotate(14deg); }
#cat .earInner { position:absolute; left:12px; top:12px; width:20px; height:28px;
background:#e8a898; border-radius:50% 50% 20% 20%/70% 70% 30% 30%; opacity:0.8; }
/* THE EYES — wide, round, staring down the lens */
#cat .eye { bottom:158px; width:46px; height:50px; background:#fffdf6;
border-radius:50%;
box-shadow: inset 0 3px 6px rgba(120,90,50,0.25), 0 1px 2px rgba(0,0,0,0.2); }
#cat .eyeL { left:calc(50% - 62px); }
#cat .eyeR { left:calc(50% + 16px); }
#cat .iris { position:absolute; left:50%; top:52%; width:30px; height:34px;
transform:translate(-50%,-50%); border-radius:50%;
background: radial-gradient(circle at 40% 35%, #8aa04a 0%, #5a7030 45%, #2e3d18 80%);
box-shadow: inset 0 -4px 6px rgba(0,0,0,0.5); }
#cat .pupil { position:absolute; left:50%; top:50%; width:13px; height:22px;
transform:translate(-50%,-50%); border-radius:50%; background:#0c0c08; }
#cat .glint { position:absolute; left:8px; top:7px; width:8px; height:8px;
border-radius:50%; background:#fff; opacity:0.95; }
#cat .glint2 { position:absolute; right:6px; bottom:8px; width:4px; height:4px;
border-radius:50%; background:#fff; opacity:0.4; }
/* thin dark eye rims — what makes it stare */
#cat .eye::after { content:''; position:absolute; inset:-2px; border-radius:50%;
border:2px solid rgba(90,60,30,0.35); }
/* nose & mouth — small, centered, unbothered */
#cat .nose { left:50%; bottom:146px; width:16px; height:12px; transform:translateX(-50%);
background:#e09a8a; border-radius:50% 50% 50% 50%/60% 60% 40% 40%; }
#cat .mouth { left:50%; bottom:136px; width:26px; height:10px; transform:translateX(-50%);
border-bottom:2px solid rgba(120,80,50,0.5); border-radius:0 0 50% 50%; }
/* whiskers */
#cat .whisker { bottom:146px; width:52px; height:2px; background:rgba(255,255,255,0.75);
border-radius:2px; filter:blur(0.4px); }
#cat .wh1{ left:calc(50% - 84px); transform:rotate(8deg); bottom:150px; }
#cat .wh2{ left:calc(50% - 86px); transform:rotate(-2deg); bottom:144px; }
#cat .wh3{ left:calc(50% - 82px); transform:rotate(-12deg); bottom:138px; }
#cat .wh4{ left:calc(50% + 32px); transform:rotate(-8deg); bottom:150px; }
#cat .wh5{ left:calc(50% + 34px); transform:rotate(2deg); bottom:144px; }
#cat .wh6{ left:calc(50% + 30px); transform:rotate(12deg); bottom:138px; }
/* fur texture overlay on head+body */
#cat .fur { pointer-events:none; mix-blend-mode:multiply; opacity:0.5; }
/* motion-blur ghosts, only visible while spinning */
#ghostL, #ghostR {
position:absolute; inset:0; opacity:0; pointer-events:none;
filter: blur(7px) saturate(0.85);
}
#ghostL { transform: scaleX(0.72) translateX(9%); }
#ghostR { transform: scaleX(0.72) translateX(-9%); }
/* ---------- UI ---------- */
#hint {
position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
color:rgba(255,240,215,0.55); font-size:14px; letter-spacing:2px;
text-shadow:0 1px 3px rgba(0,0,0,0.8);
transition:opacity 1.2s; pointer-events:none; white-space:nowrap;
}
#stage.on #hint { opacity:0; }
#muteBtn {
position:fixed; top:16px; right:16px; z-index:50;
background:rgba(20,14,10,0.55); color:rgba(255,240,215,0.75);
border:1px solid rgba(255,240,215,0.25); border-radius:20px;
font-family:Georgia,serif; font-size:13px; letter-spacing:1px;
padding:7px 16px; cursor:pointer; backdrop-filter:blur(3px);
transition:background 0.2s, color 0.2s;
}
#muteBtn:hover { background:rgba(40,28,18,0.75); color:#fff; }
#stageLabel {
position:fixed; left:50%; top:22px; transform:translateX(-50%);
color:rgba(255,240,215,0.0); font-size:13px; letter-spacing:6px;
transition:opacity 0.8s, color 0.8s; pointer-events:none; text-transform:uppercase;
}
#stageLabel.show { opacity:1; color:rgba(255,240,215,0.5); }
/* speed lines / room-stretch, driven by JS */
#speedlines { position:fixed; inset:0; pointer-events:none; opacity:0; }
/* flash used between stages */
#flash { position:fixed; inset:0; background:#fff; opacity:0; pointer-events:none; }
/* chromatic split on the whole stage at high speed */
#chroma { position:fixed; inset:0; pointer-events:none; opacity:0; mix-blend-mode:screen; }
</style>
</head>
<body>
<div id="stage" title="click the cat">
<div id="room">
<div class="wall" id="wallBack"></div>
<div class="wall" id="wallLeft"></div>
<div class="wall" id="wallRight"></div>
<div id="floor"></div>
<div id="baseboard"></div>
<div id="rug"></div>
<div class="furn" id="lamp">
<div class="shade"></div><div class="bulb"></div><div class="pole"></div><div class="base"></div>
</div>
<div class="furn" id="sofa">
<div class="back"></div>
<div class="cushion c1"></div><div class="cushion c2"></div>
<div class="seat"></div>
<div class="armL"></div><div class="armR"></div>
<div class="leg l1"></div><div class="leg l2"></div>
</div>
<div id="picture"></div>
<div class="furn" id="plant">
<div class="leaf"></div><div class="leaf"></div><div class="leaf"></div>
<div class="leaf"></div><div class="leaf"></div><div class="pot"></div>
</div>
<!-- dust motes -->
<div class="mote" style="left:12%;top:22%;width:4px;height:4px;animation-delay:0s"></div>
<div class="mote" style="left:16%;top:34%;width:3px;height:3px;animation-delay:2s"></div>
<div class="mote" style="left:9%; top:44%;width:5px;height:5px;animation-delay:4s"></div>
<div class="mote" style="left:20%;top:16%;width:3px;height:3px;animation-delay:6s"></div>
<div class="mote" style="left:14%;top:52%;width:4px;height:4px;animation-delay:1s"></div>
<div class="mote" style="left:23%;top:28%;width:2px;height:2px;animation-delay:5s"></div>
</div>
<div id="catWrap">
<div id="catShadow"></div>
<div id="cat">
<!-- back to front -->
<div class="part tail"></div>
<div class="part tailTip"></div>
<div class="part body"></div>
<div class="part patch1"></div>
<div class="part patch2"></div>
<div class="part chest"></div>
<div class="part paw pawL"><div class="toe t1"></div><div class="toe t2"></div><div class="toe t3"></div></div>
<div class="part paw pawR"><div class="toe t1"></div><div class="toe t2"></div><div class="toe t3"></div></div>
<div class="part ear earL"><div class="earInner"></div></div>
<div class="part ear earR"><div class="earInner"></div></div>
<div class="part head">
<div class="part cap"></div>
<div class="part cheekL"></div>
<div class="part cheekR"></div>
</div>
<div class="part eye eyeL"><div class="iris"><div class="pupil"></div><div class="glint"></div><div class="glint2"></div></div></div>
<div class="part eye eyeR"><div class="iris"><div class="pupil"></div><div class="glint"></div><div class="glint2"></div></div></div>
<div class="part nose"></div>
<div class="part mouth"></div>
<div class="part whisker wh1"></div><div class="part whisker wh2"></div><div class="part whisker wh3"></div>
<div class="part whisker wh4"></div><div class="part whisker wh5"></div><div class="part whisker wh6"></div>
</div>
<!-- spin ghosts: clones of the cat, squashed, for motion blur -->
<div id="ghostL"></div>
<div id="ghostR"></div>
</div>
</div>
<div id="speedlines"></div>
<div id="chroma"></div>
<div id="vignette"></div>
<div id="grain"></div>
<div id="flash"></div>
<div id="hint">click the cat</div>
<div id="stageLabel"></div>
<button id="muteBtn">mute</button>
<script>
(function(){
'use strict';
/* ============================================================
OIIA CAT — one file, no libraries, no network.
============================================================ */
var stage = document.getElementById('stage');
var room = document.getElementById('room');
var catWrap = document.getElementById('catWrap');
var cat = document.getElementById('cat');
var shadow = document.getElementById('catShadow');
var ghostL = document.getElementById('ghostL');
var ghostR = document.getElementById('ghostR');
var speedEl = document.getElementById('speedlines');
var chromaEl = document.getElementById('chroma');
var flashEl = document.getElementById('flash');
var hintEl = document.getElementById('hint');
var labelEl = document.getElementById('stageLabel');
var muteBtn = document.getElementById('muteBtn');
/* clone the cat into the ghost layers for motion blur */
ghostL.appendChild(cat.cloneNode(true));
ghostR.appendChild(cat.cloneNode(true));
ghostL.firstChild.removeAttribute('id');
ghostR.firstChild.removeAttribute('id');
/* ---------- state ---------- */
var stageNum = 0; // 0 = calm, 1..4 = escalation
var spin = 0; // current rotation, radians
var spinVel = 0; // radians per second
var lift = 0; // how far off the floor, px
var liftVel = 0;
var wobble = 0;
var muted = false;
var lastT = performance.now();
var roomTilt = 0;
var roomSpin = 0;
var camShake = 0;
/* stage definitions: target spin speed, lift height, room behaviour */
var STAGES = [
null,
{ name:'oiia', vel: 7, lift: 26, roomSpin: 0.10, roomTilt: 4, shake: 0.4, ghost:0.35, chroma:0.00, sfxRate:1.0 },
{ name:'oiia oiia', vel: 16, lift: 90, roomSpin: 0.35, roomTilt: 10, shake: 1.2, ghost:0.55, chroma:0.06, sfxRate:1.35 },
{ name:'oiiaoiia', vel: 34, lift: 220, roomSpin: 0.90, roomTilt: 22, shake: 2.5, ghost:0.75, chroma:0.14, sfxRate:1.8 },
{ name:'oiiaiooooiai',vel: 70, lift: 420, roomSpin: 2.20, roomTilt: 40, shake: 5.0, ghost:0.92, chroma:0.30, sfxRate:2.4 }
];
/* ============================================================
THE VOICE — "oiia oiia oiiaiooooiai"
A vocal-ish synth: a glottal-ish pulse train through a
moving formant filter (the "oi" mouth shape), with a
little pitch wobble and a soft "h" breath on the attack.
Rate and pitch are slaved to the spin, so the sound IS
the spin.
============================================================ */
var AC = null, master = null, comp = null;
var oiiaTimer = null, oiiaBusy = false;
var noiseBuf = null;
function initAudio(){
if (AC) return;
var Ctx = window.AudioContext || window.webkitAudioContext;
AC = new Ctx();
master = AC.createGain(); master.gain.value = 0.0;
comp = AC.createDynamicsCompressor();
comp.threshold.value = -10; comp.ratio.value = 6;
master.connect(comp); comp.connect(AC.destination);
/* noise buffer for the breathy "h" */
noiseBuf = AC.createBuffer(1, AC.sampleRate * 0.2, AC.sampleRate);
var d = noiseBuf.getChannelData(0);
for (var i=0;i<d.length;i++) d[i] = Math.random()*2-1;
}
/* one "oiia" syllable */
function oiia(pitchMul){
if (!AC || muted) return;
var t = AC.currentTime;
var dur = 0.16;
/* --- glottal-ish source: a few harmonics with a pulse shape --- */
var src = AC.createBufferSource();
var len = Math.floor(AC.sampleRate * dur);
var buf = AC.createBuffer(1, len, AC.sampleRate);
var ch = buf.getChannelData(0);
var f0 = 150 * pitchMul; // base pitch
var phase = 0, env = 0;
for (var i=0;i<len;i++){
var tt = i / AC.sampleRate;
/* amplitude envelope: quick attack, vocal-ish decay */
var e = Math.min(1, tt/0.015) * Math.pow(1 - tt/dur, 1.4);
/* pulse train with slight jitter = voice, not tone */
phase += f0 / AC.sampleRate;
var jitter = 1 + 0.03*Math.sin(tt*90) + 0.015*Math.sin(tt*233);
var pulse = (phase % (1/jitter)) < 0.18 ? 1 : 0.15;
/* harmonics rolled off */
var s = 0;
for (var h=1; h<=8; h++) s += pulse * Math.sin(2*Math.PI*f0*h*tt) / h;
ch[i] = s * e * 0.5;
phase = phase % 1;
}
src.buffer = buf;
/* --- formant filter: the "oi" shape (rounded lips, open throat) --- */
var f1 = AC.createBiquadFilter(); f1.type='peaking';
f1.frequency.value = 420 * pitchMul; f1.Q.value = 6; f1.gain.value = 14;
var f2 = AC.createBiquadFilter(); f2.type='peaking';
f2.frequency.value = 900 * pitchMul; f2.Q.value = 4; f2.gain.value = 8;
var lp = AC.createBiquadFilter(); lp.type='lowpass'; lp.frequency.value = 2600;
/* --- breath "h" on the attack --- */
var breath = AC.createBufferSource(); breath.buffer = noiseBuf;
var bp = AC.createBiquadFilter(); bp.type='bandpass'; bp.frequency.value=2400; bp.Q.value=0.8;
var bg = AC.createGain();
bg.gain.setValueAtTime(0, t);
bg.gain.linearRampToValueAtTime(0.10, t+0.02);
bg.gain.linearRampToValueAtTime(0, t+0.07);
/* --- syllable envelope --- */
var g = AC.createGain();
g.gain.setValueAtTime(0, t);
g.gain.linearRampToValueAtTime(0.9, t+0.018);
g.gain.exponentialRampToValueAtTime(0.001, t+dur);
src.connect(f1); f1.connect(f2); f2.connect(lp); lp.connect(g);
breath.connect(bp); bp.connect(bg); bg.connect(g);
g.connect(master);
src.start(t); breath.start(t);
src.stop(t+dur+0.02); breath.stop(t+0.1);
/* tiny pitch fall at the end of the syllable — the "oi-ah" */
f1.frequency.exponentialRampToValueAtTime(300*pitchMul, t+dur);
f2.frequency.exponentialRampToValueAtTime(700*pitchMul, t+dur);
}
/* the loop: syllables scheduled faster as the spin speeds up */
function scheduleOiia(){
if (!AC || muted) return;
var s = STAGES[stageNum];
if (!s) return;
var interval = 0.34 / s.sfxRate; // seconds between "oiia"s
oiia(s.sfxRate * (0.9 + Math.random()*0.2));
oiiaTimer = setTimeout(scheduleOiia, interval * 1000);
}
function startOiia(){
stopOiia();
if (!AC || muted) return;
scheduleOiia();
}
function stopOiia(){
if (oiiaTimer){ clearTimeout(oiiaTimer); oiiaTimer = null; }
}
/* a low room-shake rumble that follows the spin */
var rumbleOsc = null, rumbleGain = null;
function startRumble(){
if (!AC || muted || rumbleOsc) return;
rumbleOsc = AC.createOscillator(); rumbleOsc.type='sawtooth';
rumbleOsc.frequency.value = 40;
var lp = AC.createBiquadFilter(); lp.type='lowpass'; lp.frequency.value=90;
rumbleGain = AC.createGain(); rumbleGain.gain.value = 0;
rumbleOsc.connect(lp); lp.connect(rumbleGain); rumbleGain.connect(master);
rumbleOsc.start();
}
function stopRumble(){
if (rumbleOsc){ try{rumbleOsc.stop();}catch(e){} rumbleOsc=null; rumbleGain=null; }
}
/* a "pop" when the cat leaves the floor */
function pop(vol){
if (!AC || muted) return;
var t = AC.currentTime;
var o = AC.createOscillator(); o.type='sine';
o.frequency.setValueAtTime(220, t);
o.frequency.exponentialRampToValueAtTime(60, t+0.12);
var g = AC.createGain();
g.gain.setValueAtTime(vol, t);
g.gain.exponentialRampToValueAtTime(0.001, t+0.15);
o.connect(g); g.connect(master);
o.start(t); o.stop(t+0.2);
}
/* a stage-transition chord — the room "hits" */
function thump(vol){
if (!AC || muted) return;
var t = AC.currentTime;
var o = AC.createOscillator(); o.type='triangle';
o.frequency.setValueAtTime(120, t);
o.frequency.exponentialRampToValueAtTime(30, t+0.3);
var g = AC.createGain();
g.gain.setValueAtTime(vol, t);
g.gain.exponentialRampToValueAtTime(0.001, t+0.35);
o.connect(g); g.connect(master);
o.start(t); o.stop(t+0.4);
/* noise burst */
var n = AC.createBufferSource(); n.buffer = noiseBuf;
var nf = AC.createBiquadFilter(); nf.type='lowpass'; nf.frequency.value=400;
var ng = AC.createGain();
ng.gain.setValueAtTime(vol*0.6, t);
ng.gain.exponentialRampToValueAtTime(0.001, t+0.25);
n.connect(nf); nf.connect(ng); ng.connect(master);
n.start(t); n.stop(t+0.3);
}
/* ============================================================
STAGE TRANSITIONS
============================================================ */
var stageNames = ['', 'oiia', 'oiia oiia', 'oiiaoiia', 'oiiaiooooiai'];
function flash(){
flashEl.style.transition = 'none';
flashEl.style.opacity = 0.85;
requestAnimationFrame(function(){
flashEl.style.transition = 'opacity 0.5s';
flashEl.style.opacity = 0;
});
}
function setStage(n){
stageNum = n;
var s = STAGES[n];
spinVel = s.vel;
liftVel = 0;
camShake = s.shake;
labelEl.textContent = stageNames[n];
labelEl.classList.add('show');
setTimeout(function(){ labelEl.classList.remove('show'); }, 1600);
flash();
thump(0.5);
startOiia();
if (n >= 2) startRumble(); else stopRumble();
}
/* ============================================================
THE LOOP
============================================================ */
var blurAmount = 0;
function frame(now){
var dt = Math.min(0.05, (now - lastT) / 1000);
lastT = now;
if (stageNum > 0){
var s = STAGES[stageNum];
/* spin accelerates toward the stage's speed */
spinVel += (s.vel - spinVel) * Math.min(1, dt * 2.2);
spin += spinVel * dt;
/* lift: rises, with a little bobble at the top */
var targetLift = s.lift;
liftVel += (targetLift - lift) * Math.min(1, dt * 3);
liftVel *= (1 - dt * 2.5);
lift += liftVel * dt;
wobble += dt * (3 + spinVel * 0.15);
var bob = Math.sin(wobble) * Math.min(14, spinVel * 0.35);
/* the room goes with it */
roomSpin += s.roomSpin * dt;
roomTilt += (s.roomTilt - roomTilt) * Math.min(1, dt * 1.5);
/* camera shake */
var shk = camShake * Math.min(1, spinVel / s.vel);
var sx = (Math.random()-0.5) * shk * 2;
var sy = (Math.random()-0.5) * shk * 2;
/* ---- apply transforms ---- */
cat.style.transform =
'rotateY(' + (spin * 180/Math.PI) + 'deg)' +
' translateY(' + (-lift - bob) + 'px)' +
' rotateZ(' + (Math.sin(wobble*0.7) * Math.min(4, spinVel*0.06)) + 'deg)';
catWrap.style.transform =
'translate(-50%,-50%) translateY(' + (-lift*0.4 - bob*0.4) + 'px)';
/* shadow shrinks and fades as the cat rises */
var shScale = Math.max(0.2, 1 - lift/500);
var shOp = Math.max(0.05, 0.5 - lift/700);
shadow.style.transform = 'translateX(-50%) scale(' + shScale + ',' + (shScale*0.6) + ')';
shadow.style.opacity = shOp;
/* room: spin + tilt + shake, perspective doing the work */
room.style.transform =
'rotateZ(' + (roomSpin * 2) + 'deg)' +
' rotateX(' + (roomTilt*0.4 + sy*0.4) + 'deg)' +
' rotateY(' + (sx*0.6) + 'deg)' +
' translate(' + (sx*3) + 'px,' + (sy*3 + Math.sin(wobble)*shk) + 'px)' +
' scale(' + (1 + roomTilt*0.004) + ')';
/* motion-blur ghosts */
var g = s.ghost * Math.min(1, spinVel / s.vel);
ghostL.style.opacity = g; ghostR.style.opacity = g;
ghostL.style.transform = 'scaleX(' + (0.72 - g*0.1) + ') translateX(' + (9 + g*4) + '%) rotateY(' + (spin*180/Math.PI) + 'deg)';
ghostR.style.transform = 'scaleX(' + (0.72 - g*0.1) + ') translateX(' + (-9 - g*4) + '%) rotateY(' + (spin*180/Math.PI) + 'deg)';
/* the cat itself blurs as it approaches unreadable */
blurAmount += ((Math.min(6, spinVel * 0.09)) - blurAmount) * Math.min(1, dt*4);
cat.style.filter = blurAmount > 0.3 ? 'blur(' + blurAmount.toFixed(2) + 'px)' : 'none';
/* speed lines radiating from the cat */
var slOp = Math.min(0.5, spinVel / 140);
speedEl.style.opacity = slOp;
if (slOp > 0.02){
var cx = window.innerWidth/2, cy = window.innerHeight*0.62;
var grad = 'radial-gradient(circle at ' + cx + 'px ' + cy + 'px, rgba(255,255,255,0) 18%, rgba(255,240,210,' + (slOp*0.5).toFixed(3) + ') 20%, rgba(255,255,255,0) 23%)';
var lines = '';
for (var i=0;i<14;i++){
var a = (i/14)*Math.PI*2 + spin;
var x2 = cx + Math.cos(a)*Math.max(window.innerWidth, window.innerHeight);
var y2 = cy + Math.sin(a)*Math.max(window.innerWidth, window.innerHeight);
lines += '<div style="position:absolute;left:' + cx + 'px;top:' + cy + 'px;width:' + Math.hypot(x2-cx,y2-cy) + 'px;height:2px;background:linear-gradient(90deg,rgba(255,244,214,' + (slOp*0.8).toFixed(3) + '),rgba(255,244,214,0));transform:rotate(' + (a*180/Math.PI) + 'deg);transform-origin:left center"></div>';
}
speedEl.innerHTML = '<div style="position:absolute;inset:0;background:' + grad + '"></div>' + lines;
}
/* chromatic aberration on the whole room at high speed */
chromaEl.style.opacity = s.chroma * Math.min(1, spinVel/s.vel);
chromaEl.style.background =
'radial-gradient(ellipse at 30% 40%, rgba(255,0,60,0.25), rgba(255,0,60,0) 60%),' +
'radial-gradient(ellipse at 70% 60%, rgba(0,120,255,0.25), rgba(0,120,255,0) 60%)';
/* rumble follows the spin */
if (rumbleOsc && !muted){
var rr = Math.min(0.20, spinVel * 0.004);
rumbleGain.gain.setTargetAtTime(rr, AC.currentTime, 0.05);
rumbleOsc.frequency.setTargetAtTime(35 + spinVel*0.6, AC.currentTime, 0.05);
}
/* master volume follows the spin too */
if (master && !muted){
var mv = Math.min(1, 0.25 + spinVel * 0.012);
master.gain.setTargetAtTime(mv, AC.currentTime, 0.08);
}
/* stage 4: the laws of physics start leaving */
if (stageNum === 4){
physicsBreaking(dt, s);
}
}
requestAnimationFrame(frame);
}
/* ---------- stage 4: extra passengers and broken physics ---------- */
var debris = []; // things that join the spin
var physicsT = 0;
function physicsBreaking(dt, s){
physicsT += dt;
var frac = Math.min(1, spinVel / s.vel);
/* the lamp shade, the picture, a cushion — they leave too */
if (physicsT > 1.2 && debris.length < 1) spawnDebris('lampShade');
if (physicsT > 3.0 && debris.length < 2) spawnDebris('picture');
if (physicsT > 5.0 && debris.length < 3) spawnDebris('cushion');
if (physicsT > 7.5 && debris.length < 4) spawnDebris('plant');
for (var i = debris.length - 1; i >= 0; i--){
var d = debris[i];
d.a += d.va * dt;
d.y -= d.vy * dt;
d.vy *= (1 - dt*0.4);
d.x += Math.sin(physicsT*2 + i) * 20 * dt;
d.el.style.transform = 'translate(' + d.x + 'px,' + d.y + 'px) rotate(' + (d.a*180/Math.PI) + 'deg)';
d.el.style.opacity = Math.max(0, 1 - physicsT*0.05);
if (physicsT > 22) { d.el.remove(); debris.splice(i,1); }
}
/* gravity gets optional: the cat bobs higher, the room tilts more */
if (frac > 0.7){
room.style.transform += ' skewX(' + (Math.sin(physicsT*3)*3) + 'deg)';
}
}
function spawnDebris(kind){
var el = document.createElement('div');
el.style.position = 'fixed';
el.style.pointerEvents = 'none';
el.style.zIndex = 5;
if (kind === 'lampShade'){
el.style.left = '9%'; el.style.top = '12%'; el.style.width = '120px'; el.style.height = '90px';
el.style.background = 'linear-gradient(180deg,#f5e3c0,#c9a86e)';
el.style.clipPath = 'polygon(18% 0, 82% 0, 100% 100%, 0 100%)';
el.style.boxShadow = '0 0 50px 18px rgba(255,214,150,0.35)';
} else if (kind === 'picture'){
el.style.left = '58%'; el.style.top = '18%'; el.style.width = '70px'; el.style.height = '100px';
el.style.background = '#2a1f16'; el.style.border = '5px solid #5a4426';
} else if (kind === 'cushion'){
el.style.left = '74%'; el.style.top = '46%'; el.style.width = '110px'; el.style.height = '70px';
el.style.background = 'linear-gradient(180deg,#6b5560,#453642)';
el.style.borderRadius = '10px';
} else {
el.style.left = '82%'; el.style.top = '36%'; el.style.width = '60px'; el.style.height = '110px';
el.style.background = 'linear-gradient(180deg,#2c3a24,#1c2818)';
el.style.borderRadius = '40% 40% 30% 30%';
}
document.body.appendChild(el);
debris.push({ el:el, a:Math.random()*6, va:(Math.random()-0.5)*10, y:0, vy:60+Math.random()*80, x:0 });
}
/* ============================================================
INPUT
============================================================ */
stage.addEventListener('click', function(){
initAudio();
if (AC.state === 'suspended') AC.resume();
stage.classList.add('on');
if (stageNum === 0){
/* first click: the cat turns to face you, then lifts off */
pop(0.5);
setStage(1);
/* a little "settle" — the cat finds the spin */
spinVel = 2;
} else if (stageNum < 4){
setStage(stageNum + 1);
} else {
/* past stage four: the room resets, the cat lands, it happens again */
resetAll();
}
});
function resetAll(){
stopOiia(); stopRumble();
stageNum = 0; spin = 0; spinVel = 0; lift = 0; liftVel = 0;
roomSpin = 0; roomTilt = 0; camShake = 0; physicsT = 0;
cat.style.transform = ''; cat.style.filter = '';
catWrap.style.transform = 'translate(-50%,-50%)';
shadow.style.transform = 'translateX(-50%)'; shadow.style.opacity = '';
room.style.transform = '';
ghostL.style.opacity = 0; ghostR.style.opacity = 0;
speedEl.style.opacity = 0; speedEl.innerHTML = '';
chromaEl.style.opacity = 0;
debris.forEach(function(d){ d.el.remove(); }); debris = [];
if (master) master.gain.setTargetAtTime(0, AC.currentTime, 0.1);
flash();
thump(0.3);
/* the cat is sitting again, doing nothing. the loop is ready. */
setTimeout(function(){
if (master && !muted) master.gain.setTargetAtTime(0, AC.currentTime, 0.05);
}, 400);
}
muteBtn.addEventListener('click', function(e){
e.stopPropagation();
muted = !muted;
muteBtn.textContent = muted ? 'unmute' : 'mute';
if (muted){
stopOiia(); stopRumble();
if (master) master.gain.setTargetAtTime(0, AC.currentTime, 0.05);
} else {
if (AC && AC.state === 'suspended') AC.resume();
if (stageNum > 0){ startOiia(); if (stageNum >= 2) startRumble(); }
if (master) master.gain.setTargetAtTime(Math.min(1, 0.25 + spinVel*0.012), AC.currentTime, 0.1);
}
});
/* a tiny bit of idle life: the cat breathes, the eyes track slightly */
var idleT = 0;
function idle(now){
var dt = Math.min(0.05, (now - lastT)/1000);
if (stageNum === 0){
idleT += dt;
/* breathing */
var br = 1 + Math.sin(idleT * 2.2) * 0.012;
cat.style.transform = 'scaleY(' + br.toFixed(4) + ')';
cat.style.transformOrigin = 'bottom center';
/* pupils drift a hair, then snap back — it is staring at YOU */
var px = Math.sin(idleT*0.3)*2, py = Math.cos(idleT*0.23)*1.5;
var pupils = cat.querySelectorAll('.pupil');
for (var i=0;i<pupils.length;i++){
pupils[i].style.transform = 'translate(calc(-50% + ' + px.toFixed(1) + 'px), calc(-50% + ' + py.toFixed(1) + 'px))';
}
/* blink, rarely */
if (Math.random() < dt * 0.15){
var eyes = cat.querySelectorAll('.eye');
for (var j=0;j<eyes.length;j++){ eyes[j].style.transform = 'scaleY(0.08)'; }
setTimeout(function(){
var e2 = cat.querySelectorAll('.eye');
for (var k=0;k<e2.length;k++) e2[k].style.transform = '';
}, 130);
}
}
requestAnimationFrame(idle);
}
/* grain: a tiny procedural noise tile, no image needed */
(function makeGrain(){
var c = document.createElement('canvas'); c.width = c.height = 128;
var cx = c.getContext('2d');
var img = cx.createImageData(128,128);
for (var i=0;i<img.data.length;i+=4){
var v = Math.random()*255;
img.data[i]=v; img.data[i+1]=v; img.data[i+2]=v; img.data[i+3]=255;
}
cx.putImageData(img,0,0);
document.getElementById('grain').style.backgroundImage = 'url(' + c.toDataURL() + ')';
})();
requestAnimationFrame(frame);
requestAnimationFrame(idle);
})();
</script>
</body>
</html>
The notes
-
The opening frame's realism, and where it gives out. The room is built from layered CSS: a back wall with a warm radial light pool in the upper left, side walls rotated in 3D so there's actual depth behind the cat, floorboards on a rotated plane with repeating seam lines and an inset shadow, a baseboard, a shaded lamp whose glow bleeds onto the wall and floor, a sofa and plant in shadow, a rug the cat rests on, drifting dust motes in the light beam, a vignette, and a procedural grain tile. The cat itself is ~30 hand-placed gradient shapes — cream patches over a white bib, inset shadows for fur volume, round rimmed eyes with green irises and two glints, whiskers, a curled tail — plus an idle loop: breathing, tiny pupil drift, and a rare blink. The realism gives out exactly where it should: the moment you click, because the joke is that the photograph was never a photograph.
-
Reading as the Oiia cat, not a rotating cat. Three things: the cat sits square to the camera with a dead, wide-eyed stare before anything happens (the meme's whole setup is "doing nothing"); the spin is on its vertical axis with squashed, blurred ghost clones on either side so it reads as motion blur rather than a texture rotating; and the face is deliberately destroyed — at speed the cat gets a real CSS blur proportional to spin velocity, so the face stops being readable exactly as the original loop does. The cream-and-white coloring, the white chest bib, and the dead stare are the specific cat.
-
The four stages. Stage 1 (oiia): the cat turns to face you, lifts a little off the rug, spins at a human-turning-head pace, the room tilts a few degrees, the "oiia" loop starts. Stage 2 (oiia oiia): it rises to about head height, the room begins rotating with it, speed lines radiate from the cat, a faint chromatic split appears, and the voice climbs in rate and pitch. Stage 3 (oiiaoiia): the cat is well off the floor, bobbing, the room is visibly spinning and tilting, the cat is a blur, a low rumble joins the voice, and the whole frame shakes. Stage 4 (oiiaiooooiai): the cat is near the ceiling, the room is spinning fast enough to skew, and the laws of physics start leaving — the lampshade, the picture, a sofa cushion, and the plant tear themselves off and orbit with the cat before drifting away. A fifth click flashes white, resets everything, and the cat is sitting on the rug again, doing nothing, ready to go again.
-
The voice. Each "oiia" is synthesized per syllable in Web Audio: a pulse-train source with eight rolled-off harmonics and slight jitter (so it reads as a voice, not a tone), run through two peaking formant filters tuned to the "oi" mouth shape (roughly 420 Hz and 900 Hz) with a pitch fall at the end for the "-ah", plus a short band-passed noise burst on the attack for the breathy "h". Syllables are scheduled on a timer whose interval divides by the stage's rate multiplier, and the formant frequencies and base pitch multiply with it too — so rate and pitch climb together with the spin, and the sound literally is the spin. A low sawtooth rumble through a lowpass follows spin speed from stage 2 up, and the master gain rides the spin as well. Everything starts on the first click (AudioContext created in the click handler) and never before; the mute button in the corner kills the loop, the rumble, and the master gain, and restores them on unmute.
-
What I'd fix with more time. The cat is a flat billboard with ghost clones for blur — a real fix would be a second billboard at 90° crossfading with the first so the spin reads as volume, plus per-part parallax (ears and tail lagging the head) so the blur feels like fur, not a smeared sticker. The stage-4 debris is plain divs; with more time they'd be mini versions of the actual furniture with their own shadows. And the voice would get a proper "oiia oiia oiiaiooooiai" rhythm pattern — the meme's cadence is syncopated, not uniform, and a little pattern sequencer would make the loop unmistakable.
Attachments
mistralai/mistral-large-4-0 — page