Challenges/Bird Breakdance Animation/Run

Run Detail

completedmuse-spark-1.3

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

22:14

GPT-6.1 Terra Pro vs Terra: How Much Better Is Pro?

Oct 27, 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

30:00

Did Elon Musk's team "train the gay away"... and make Grok 4.7 worse?

Sep 26, 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

29:00

Grok 4.7: improved, but GLM 5.3 FlashX beat it anyway (benchmark against Gemini, Sol, etc.)

Sep 22, 2026 · YouTube

Provider

openrouter

Challenge Version

v1.0

Turns

Duration

149.6s

Total Tokens

15,616

Input Tokens

301

Output Tokens

15,315

Reasoning Tokens

4,954

Reasoning Effort

default

Est. Cost

$0.0655

Started

11/3/2026, 9:54:57 PM

OR Provider

Turns (1)

Turn #1

301 in15,315 out4,954 reasoning15,616 total149.5s

user

You make short animated pieces for the web.

Build me a single HTML page: a bird, breakdancing.

The build

It animates on load and keeps going.
The dancing should read as breaking — weight, timing, recovery between moves. Not a looping wiggle.
The art is yours. Canvas, SVG, CSS, WebGL, pixels, line art, whatever suits the bird you have in mind. A page that looks like nobody else's counts for more here than a clean version of the obvious one.
Give me something to do. Controls of your choosing; what they change is part of what is being judged.

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 bird

Two sentences: what the bird is, and the look you went for.

The page

The single fenced html block.

The notes

Three bullets.

The move set, and how you got the timing to feel like weight rather than interpolation.
What your controls change.
The part you would fix with more time.

assistant

The bird

A scrappy city pigeon in a tiny red snapback, gold chain and miniature sneakers. The look is chunky ink on stained paper with halftone belly, spray-paint wall and wobbly hand-drawn lines.

The page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>B-BIRD — Pigeon Breaks</title>
<style>
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%;overflow:hidden;background:#efe3cb;font-family:"Trebuchet MS",Verdana,system-ui,sans-serif}
  #c{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
  #title{position:fixed;top:10px;left:14px;pointer-events:none;transform:rotate(-3deg);z-index:5}
  #title h1{background:#1c1a1e;color:#fffedf;padding:6px 14px 7px;font-size:22px;letter-spacing:2px;display:inline-block;box-shadow:4px 4px 0 #e94f37}
  #title h1 span{color:#ffd23f}
  #title p{margin-top:6px;background:#fffedf;border:2px solid #1c1a1e;display:inline-block;padding:2px 8px;font-size:12px;font-weight:700}
  #hypeWrap{position:fixed;top:12px;right:14px;width:170px;z-index:5;transform:rotate(2deg)}
  #hypeWrap label{font-size:11px;font-weight:900;letter-spacing:2px;background:#1c1a1e;color:#ffd23f;padding:2px 6px}
  #hypeBar{height:14px;border:3px solid #1c1a1e;background:#fffedf;margin-top:4px;overflow:hidden}
  #hypeFill{height:100%;width:50%;background:repeating-linear-gradient(45deg,#e94f37,#e94f37 6px,#ffd23f 6px,#ffd23f 12px);transition:width .2s}
  #bar{position:fixed;left:50%;transform:translateX(-50%) rotate(-.5deg);bottom:10px;z-index:5;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;background:#fffedf;border:3px solid #1c1a1e;box-shadow:6px 6px 0 #1c1a1e;padding:8px 10px;max-width:96vw}
  button{font:inherit;font-weight:900;font-size:12px;letter-spacing:.5px;border:3px solid #1c1a1e;background:#fff;color:#1c1a1e;padding:7px 10px;cursor:pointer;box-shadow:3px 3px 0 #1c1a1e;transition:transform .08s}
  button:hover{transform:translate(-1px,-1px) rotate(-1deg)}
  button:active{transform:translate(2px,2px);box-shadow:0 0 0 #1c1a1e}
  button.hot{background:#ffd23f} button.power{background:#e94f37;color:#fff} button.hype{background:#3ec1d3}
  #tempoWrap{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:900;border:3px solid #1c1a1e;padding:5px 8px;background:#e8e0c8}
  input[type=range]{width:90px;accent-color:#e94f37}
  #moveTag{position:fixed;left:14px;bottom:86px;z-index:5;background:#1c1a1e;color:#ffd23f;font-weight:900;font-size:13px;letter-spacing:2px;padding:6px 10px;transform:rotate(-2deg)}
  #hint{position:fixed;right:14px;bottom:86px;z-index:5;font-size:11px;font-weight:700;background:#fffedfb8;border:2px dashed #1c1a1e;padding:4px 8px;transform:rotate(1.5deg)}
  @media(max-width:700px){#hint{display:none}#title h1{font-size:16px}}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="title"><h1>B-BIRD <span>★ BREAKS ★</span></h1><br><p>pigeon style • cardboard certified</p></div>
<div id="hypeWrap"><label>CROWD HYPE</label><div id="hypeBar"><div id="hypeFill"></div></div></div>
<div id="moveTag">TOPROCK</div>
<div id="hint">click stage = toss crumb • bird watches it</div>
<div id="bar">
  <div id="tempoWrap">TEMPO <input id="tempo" type="range" min="78" max="132" value="102"> <span id="bpmL">102</span></div>
  <button data-q="toprock" class="hot">TOPROCK</button>
  <button data-q="footwork" class="hot">FOOTWORK</button>
  <button data-q="baby" class="hot">FREEZE</button>
  <button data-q="windmill" class="power">POWER!</button>
  <button id="hypeBtn" class="hype">HYPE!</button>
  <button id="floorBtn">FLOOR: CARDBOARD</button>
  <button id="sndBtn">BEATBOX: OFF</button>
</div>
<script>
(function(){
"use strict";
var cv=document.getElementById('c'),ctx=cv.getContext('2d');
var W=0,H=0,DPR=1,groundY=0,cx=0;
function resize(){DPR=Math.min(2,window.devicePixelRatio||1);W=window.innerWidth;H=window.innerHeight;cv.width=W*DPR;cv.height=H*DPR;cv.style.width=W+'px';cv.style.height=H+'px';ctx.setTransform(DPR,0,0,DPR,0,0);groundY=H*0.78;cx=W/2;}
window.addEventListener('resize',resize);resize();
// state
var BPM=102,beatPos=0,lastT=performance.now(),hype=0.55,floorMode=0,floorNames=['CARDBOARD','ROOFTOP','MOON'],grav=[1,1,0.32];
var particles=[],crumbs=[],bubbles=[];
var squash=0,prevY=0,queued=null,loopCount=0,mirror=1,blink=0,nextBlink=2.5,beakOpen=0,shake=0;
var segs=[{n:'bounce',d:4},{n:'toprock',d:8},{n:'drop',d:2},{n:'footwork',d:8},{n:'baby',d:3},{n:'windmill',d:6},{n:'tired',d:3},{n:'headfreeze',d:5}];
var total=0;segs.forEach(function(s){s.start=total;total+=s.d;});
var moveTag=document.getElementById('moveTag'),hypeFill=document.getElementById('hypeFill');
function R(a,b){return a+Math.random()*(b-a);}
function dust(x,y,n,col){for(var i=0;i<n;i++)particles.push({k:'d',x:x+R(-14,14),y:y+R(-4,4),vx:R(-90,90),vy:R(-160,-20),life:R(.4,.9),t:0,c:col||'#cbb99a'});}
function feather(x,y){for(var i=0;i<6;i++)particles.push({k:'f',x:x,y:y,vx:R(-140,140),vy:R(-220,-40),life:R(.7,1.3),t:0,rot:R(0,6),vr:R(-8,8)});}
function sweat(x,y){particles.push({k:'s',x:x,y:y,vx:R(-40,40),vy:R(-120,-40),life:.7,t:0});}
function bubble(txt,x,y,c){bubbles.push({txt:txt,x:x,y:y,t:0,life:1.4,c:c||'#fffedf'});}
function crumb(x){crumbs.push({x:x,y:groundY-60,vy:0});if(crumbs.length>12)crumbs.shift();}
// audio - tiny beatbox
var AC=null,master=null,noiseBuf=null,nextT=0,beatIdx=0,soundOn=false;
function initAudio(){if(AC)return;try{AC=new (window.AudioContext||window.webkitAudioContext)();master=AC.createGain();master.gain.value=0.5;master.connect(AC.destination);noiseBuf=AC.createBuffer(1,AC.sampleRate*0.5,AC.sampleRate);var d=noiseBuf.getChannelData(0);for(var i=0;i<d.length;i++)d[i]=Math.random()*2-1;nextT=AC.currentTime+0.1;beatIdx=Math.floor(beatPos*2);}catch(e){}}
function kick(t){var o=AC.createOscillator(),g=AC.createGain();o.type='sine';o.frequency.setValueAtTime(160,t);o.frequency.exponentialRampToValueAtTime(44,t+0.12);g.gain.setValueAtTime(0.9,t);g.gain.exponentialRampToValueAtTime(0.001,t+0.22);o.connect(g);g.connect(master);o.start(t);o.stop(t+0.25);}
function hat(t,open){var s=AC.createBufferSource();s.buffer=noiseBuf;var f=AC.createBiquadFilter();f.type='highpass';f.frequency.value=7000;var g=AC.createGain();g.gain.setValueAtTime(open?0.25:0.18,t);g.gain.exponentialRampToValueAtTime(0.001,t+(open?0.18:0.05));s.connect(f);f.connect(g);g.connect(master);s.start(t);s.stop(t+0.25);}
function snare(t){var s=AC.createBufferSource();s.buffer=noiseBuf;var f=AC.createBiquadFilter();f.type='bandpass';f.frequency.value=1800;var g=AC.createGain();g.gain.setValueAtTime(0.5,t);g.gain.exponentialRampToValueAtTime(0.001,t+0.14);s.connect(f);f.connect(g);g.connect(master);s.start(t);s.stop(t+0.2);var o=AC.createOscillator(),g2=AC.createGain();o.type='triangle';o.frequency.value=190;g2.gain.setValueAtTime(0.3,t);g2.gain.exponentialRampToValueAtTime(0.001,t+0.1);o.connect(g2);g2.connect(master);o.start(t);o.stop(t+0.12);}
function chirp(){if(!AC||!soundOn)return;var t=AC.currentTime,o=AC.createOscillator(),g=AC.createGain();o.type='sawtooth';o.frequency.setValueAtTime(2200,t);o.frequency.exponentialRampToValueAtTime(900,t+0.12);g.gain.setValueAtTime(0.12,t);g.gain.exponentialRampToValueAtTime(0.001,t+0.15);o.connect(g);g.connect(master);o.start(t);o.stop(t+0.16);}
function schedule(){if(!AC||!soundOn)return;var spb=60/BPM/2;while(nextT<AC.currentTime+0.15){var b=beatIdx%8;if(b%2===0)kick(nextT);if(b===2||b===6)snare(nextT);hat(nextT,b===7);if(b===4){var o=AC.createOscillator(),g=AC.createGain();o.type='square';o.frequency.value=b%4===0?110:82.5;g.gain.setValueAtTime(0.12,nextT);g.gain.exponentialRampToValueAtTime(0.001,nextT+0.2);o.connect(g);g.connect(master);o.start(nextT);o.stop(nextT+0.22);}nextT+=spb;beatIdx++;}}
setInterval(schedule,40);
// controls
var tempo=document.getElementById('tempo'),bpmL=document.getElementById('bpmL');
tempo.addEventListener('input',function(){BPM=+tempo.value;bpmL.textContent=BPM;});
document.querySelectorAll('[data-q]').forEach(function(b){b.addEventListener('click',function(){queued=b.getAttribute('data-q');hype=Math.min(1,hype+0.08);initAudio();if(AC&&AC.state==='suspended')AC.resume();});});
document.getElementById('hypeBtn').addEventListener('click',function(){initAudio();if(AC&&AC.state==='suspended')AC.resume();hype=Math.min(1,hype+0.35);shake=Math.max(shake,6);dust(cx+R(-120,120),groundY,10,'#ffd23f');var words=['OOOH!','YEAH!','GO BIRD!','SKRRR!'];bubble(words[Math.floor(Math.random()*words.length)],cx+R(-140,140),H*0.3,'#ffd23f');for(var i=0;i<3;i++)crumb(cx+R(-180,180));chirp();});
document.getElementById('floorBtn').addEventListener('click',function(){floorMode=(floorMode+1)%3;this.textContent='FLOOR: '+floorNames[floorMode];bubble(floorNames[floorMode]+'!',cx,H*0.35,'#3ec1d3');});
var sndBtn=document.getElementById('sndBtn');
sndBtn.addEventListener('click',function(){initAudio();if(!AC)return;if(AC.state==='suspended')AC.resume();soundOn=!soundOn;sndBtn.textContent='BEATBOX: '+(soundOn?'ON':'OFF');if(soundOn){nextT=AC.currentTime+0.05;beatIdx=Math.floor(beatPos*2);}});
cv.addEventListener('pointerdown',function(e){initAudio();if(AC&&AC.state==='suspended')AC.resume();crumb(e.clientX);hype=Math.min(1,hype+0.05);});
// pose
function segAt(lb){for(var i=0;i<segs.length;i++){if(lb>=segs[i].start&&lb<segs[i].start+segs[i].d)return {s:segs[i],u:(lb-segs[i].start)/segs[i].d};}return {s:segs[0],u:0};}
function getPose(lb,t){
  var info=segAt(lb),n=info.s.n,u=info.u,G=grav[floorMode],en=0.65+hype*0.7;
  var p={x:cx,y:groundY-105,rot:0,sx:1,sy:1,fLx:-18,fLy:72,fRx:18,fRy:72,wL:0.6,wR:-0.6,wPlant:0,head:0,beak:0,eyeX:0};
  var b=lb;
  if(n==='bounce'){var bb=Math.abs(Math.sin(b*Math.PI));p.y=groundY-105-bb*10*en;p.x=cx+Math.sin(b*1.2)*8;p.rot=Math.sin(b*Math.PI)*0.06;p.fLy=72-Math.max(0,Math.sin(b*Math.PI*2))*10;p.fRy=72-Math.max(0,-Math.sin(b*Math.PI*2))*10;p.wL=0.6+Math.sin(b*Math.PI*2)*0.5;p.wR=-0.6+Math.sin(b*Math.PI*2+1)*0.5;p.head=Math.sin(b*Math.PI)*0.25;p.beak=(b%1<0.12)?0.6:0;}
  else if(n==='toprock'){var sw=Math.sin(b*Math.PI*0.5*mirror);p.x=cx+sw*58*mirror;p.y=groundY-105-Math.abs(Math.sin(b*Math.PI))*16*en*G;if(u>0.8)p.y+= (u-0.8)*90; // anticipation crouch into drop
    p.rot=sw*0.14;var st=Math.sin(b*Math.PI);p.fLy=72-Math.max(0,st)*34*en;p.fRx=-14+Math.cos(b*Math.PI*0.5)*22;p.wL=-0.8+Math.sin(b*Math.PI)*0.9;p.wR=0.8-Math.sin(b*Math.PI)*0.9;p.head=-sw*0.3;p.beak=(b%2>1.85)?0.8:0;if(Math.abs(st)>0.96&&Math.random()<0.3)dust(p.x,groundY,1);}
  else if(n==='drop'){var k=u<0.5?u*2:(1-u)*2;p.y=groundY-105+(1-Math.sin(u*Math.PI))*0 - u*70;p.x=cx+20*mirror*(1-u);p.rot=u*0.5*mirror;p.sx=1+Math.sin(u*Math.PI)*0.15;p.sy=1-Math.sin(u*Math.PI)*0.18;p.fLx=-30;p.fLy=50;p.fRx=30;p.fRy=50;p.wL=-1.4;p.wR=1.4;p.head=-0.4;p.beak=0.7;if(u>0.9)dust(p.x,groundY,6);}
  else if(n==='footwork'){var a=u*Math.PI*2*mirror+0.5;p.x=cx+Math.cos(a)*72;p.y=groundY-38-Math.abs(Math.sin(b*Math.PI*2))*8;p.rot=-0.35+Math.sin(a)*0.35;p.wPlant=1;p.wL=-1.2;p.wR=1.2;var sw2=Math.sin(b*Math.PI*2);p.fLx=Math.cos(b*3.1)*62;p.fLy=-10-Math.max(0,sw2)*38;p.fRx=-Math.cos(b*3.1)*62;p.fRy=-10-Math.max(0,-sw2)*38;p.head=0.5;p.beak=0.3;if(Math.floor(b*2)!==Math.floor((b-0.02)*2))dust(p.x,groundY,2);}
  else if(n==='baby'){p.x=cx+10*mirror;p.y=groundY-52;p.rot=0.55*mirror+Math.sin(t*9)*0.025;p.wPlant=1;p.wL=1.5;p.wR=-0.4;p.fLx=-22;p.fLy=-72;p.fRx=26;p.fRy=-58;p.head=-0.6*mirror+Math.sin(t*7)*0.05;p.beak=0.9;if(Math.random()<0.06)sweat(p.x+30,p.y-60);}
  else if(n==='windmill'){var sp=u*Math.PI*4*mirror;p.rot=-0.6+sp;p.x=cx+Math.sin(u*Math.PI*2)*26;p.y=groundY-34-Math.abs(Math.sin(sp))*10*G;p.fLx=-72;p.fLy=-46;p.fRx=72;p.fRy=-46;p.wL=-1.1;p.wR=1.1;p.wPlant=(Math.sin(sp)>0)?1:0;p.head=0.3;p.beak=0.5;if(Math.random()<0.5)particles.push({k:'s',x:p.x+R(-30,30),y:p.y,vx:R(-60,60),vy:R(-60,0),life:.5,t:0});}
  else if(n==='tired'){p.x=cx-10;p.y=groundY-42+Math.sin(t*3)*3;p.rot=1.35+Math.sin(t*2)*0.04;p.sx=1+Math.sin(t*6)*0.03;p.sy=1+Math.sin(t*6+1)*0.04;p.fLx=-40;p.fLy=20;p.fRx=30;p.fRy=34;p.wL=0.2;p.wR=0.2;p.head=-0.9;p.beak=1;if(Math.random()<0.12)sweat(p.x+40,p.y-40);}
  else if(n==='headfreeze'){var hu=Math.min(1,u*4),eu=1-Math.pow(1-hu,3);p.x=cx;p.y=(groundY-42)*(1-eu)+(groundY-118)*eu - (u>0.85?(u-0.85)*300:0);p.rot=Math.PI*mirror*eu+1.35*(1-eu)+Math.sin(t*8)*0.02*eu;p.fLx=-34*eu-40*(1-eu);p.fLy=-78*eu+20*(1-eu);p.fRx=38*eu+30*(1-eu);p.fRy=-70*eu+34*(1-eu);p.wL=1.4;p.wR=1.4;p.wPlant=eu>0.5?1:0;p.head=eu>0.5?0.2:-0.9;p.beak=eu>0.7?1:0.4;}
  // look at crumb
  if(crumbs.length){var nc=crumbs[crumbs.length-1],dx=nc.x-p.x;p.eyeX=Math.max(-4,Math.min(4,dx*0.02));p.head+=Math.max(-0.3,Math.min(0.3,dx*0.001));}
  // blink & beak decay
  p.blink=blink>0?1:0;
  return {p:p,name:n,u:u};
}
// drawing helpers
function ink(fn){ctx.save();ctx.lineJoin='round';ctx.lineCap='round';fn();ctx.restore();}
function halftone(x,y,rx,ry){ctx.save();ctx.fillStyle='rgba(28,26,30,0.14)';for(var i=-rx;i<rx;i+=9)for(var j=-ry;j<ry;j+=9){if((i*i)/(rx*rx)+(j*j)/(ry*ry)<1&&((i+j)%18===0)) {ctx.beginPath();ctx.arc(x+i,y+j,1.4,0,7);ctx.fill();}}ctx.restore();}
function drawBG(t){
  var sky=ctx.createLinearGradient(0,0,0,H);if(floorMode===2){sky.addColorStop(0,'#0d102e');sky.addColorStop(1,'#2b2f6b');}else if(floorMode===1){sky.addColorStop(0,'#ff9a5a');sky.addColorStop(.6,'#ffd23f');sky.addColorStop(1,'#e94f37');}else{sky.addColorStop(0,'#e8dcc0');sky.addColorStop(1,'#d9c49a');}
  ctx.fillStyle=sky;ctx.fillRect(0,0,W,H);
  if(floorMode===2){ctx.fillStyle='#fff';for(var i=0;i<70;i++){var sx=(i*197)%W,sy=(i*131)%(H*0.6);ctx.globalAlpha=0.4+0.6*Math.abs(Math.sin(t*2+i));ctx.fillRect(sx,sy,2,2);}ctx.globalAlpha=1;ctx.fillStyle='#f4f1de';ctx.beginPath();ctx.arc(W*0.82,H*0.18,44,0,7);ctx.fill();ctx.fillStyle='#3ec1d3';ctx.beginPath();ctx.arc(W*0.82,H*0.18,44,0,7);ctx.globalAlpha=0.25;ctx.fill();ctx.globalAlpha=1;}
  // bricks / skyline
  ctx.save();ctx.fillStyle=floorMode===1?'#2b2135':'#b98a5e';ctx.fillRect(0,0,W,H*0.52);
  ctx.strokeStyle='rgba(28,26,30,0.25)';ctx.lineWidth=2;for(var y=14;y<H*0.52;y+=34){ctx.beginPath();ctx.moveTo(0,y);ctx.lineTo(W,y);ctx.stroke();for(var x=(y%68?0:40);x<W;x+=80){ctx.beginPath();ctx.moveTo(x,y);ctx.lineTo(x,y+34);ctx.stroke();}}
  if(floorMode===1){ctx.fillStyle='#1c1a1e';for(var k=0;k<12;k++){var bx=k*140-((t*10)%140),bh=60+((k*53)%90);ctx.fillRect(bx,H*0.52-bh,90,bh);ctx.fillStyle='#ffd23f';for(var wy=0;wy<3;wy++)for(var wx=0;wx<3;wx++)if((k+wx+wy)%2)ctx.fillRect(bx+10+wx*24,H*0.52-bh+10+wy*22,12,14);ctx.fillStyle='#1c1a1e';}}
  // graffiti
  ctx.save();ctx.translate(W*0.5,H*0.26);ctx.rotate(-0.04);ctx.font='900 '+(Math.min(90,W*0.09))+'px Trebuchet MS';ctx.textAlign='center';ctx.lineWidth=8;ctx.strokeStyle='#1c1a1e';ctx.strokeText('B-BIRD',0,0);ctx.fillStyle='#e94f37';ctx.fillText('B-BIRD',-3,-3);ctx.fillStyle='#ffd23f';ctx.font='900 18px Trebuchet MS';ctx.fillText('★ PIGEON STYLE ★',0,32);ctx.restore();
  // floor
  ctx.fillStyle=floorMode===2?'#9a9ab0':floorMode===1?'#3a3340':'#6b5a44';ctx.fillRect(0,groundY,W,H-groundY);
  // cardboard
  ctx.save();ctx.translate(cx,groundY+ (H-groundY)*0.42);var cw=Math.min(560,W*0.8),ch=Math.min(190,(H-groundY)*0.72);ctx.rotate(0);ctx.fillStyle=floorMode===2?'#b8b9c9':'#c89a62';ctx.strokeStyle='#1c1a1e';ctx.lineWidth=5;ctx.beginPath();ctx.ellipse(0,0,cw/2,ch/2,0,0,7);ctx.fill();ctx.stroke();ctx.strokeStyle='rgba(28,26,30,0.3)';ctx.lineWidth=2;ctx.beginPath();ctx.moveTo(-cw/2+20,0);ctx.lineTo(cw/2-20,0);ctx.stroke();ctx.beginPath();ctx.moveTo(0,-ch/2+8);ctx.lineTo(0,ch/2-8);ctx.stroke();ctx.fillStyle='rgba(28,26,30,0.15)';ctx.font='900 22px Trebuchet MS';ctx.textAlign='center';ctx.fillText('FRAGILE • THIS SIDE UP',0,8);ctx.restore();
  // boombox
  var bx2=Math.max(70,W*0.12),by2=groundY-46,bnc=Math.abs(Math.sin(beatPos*Math.PI))*6*(0.5+hype);
  ctx.save();ctx.translate(bx2,by2-bnc*0.3);ctx.fillStyle='#1c1a1e';ctx.strokeStyle='#1c1a1e';ctx.lineWidth=4;roundRect(-64,-34,128,68,8);ctx.fill();ctx.fillStyle='#3ec1d3';ctx.fillRect(-58,-28,52,56);ctx.fillRect(6,-28,52,56);ctx.fillStyle='#1c1a1e';ctx.beginPath();ctx.arc(-32,0,18+bnc*0.4,0,7);ctx.fill();ctx.beginPath();ctx.arc(32,0,18+bnc*0.4,0,7);ctx.fill();ctx.fillStyle='#ffd23f';ctx.fillRect(-10,-20,20,12);ctx.fillStyle='#fff';for(var n=0;n<5;n++){var hh=6+Math.abs(Math.sin(t*8+n))*14;ctx.fillRect(-8+n*4,-8-hh,2.5,hh);}ctx.restore();
  function roundRect(x,y,w,h,r){ctx.beginPath();ctx.moveTo(x+r,y);ctx.arcTo(x+w,y,x+w,y+h,r);ctx.arcTo(x+w,y+h,x,y+h,r);ctx.arcTo(x,y+h,x,y,r);ctx.arcTo(x,y,x+w,y,r);ctx.closePath();}
}
function drawShadow(x,y,s){ctx.save();ctx.globalAlpha=0.25;ctx.fillStyle='#1c1a1e';ctx.beginPath();ctx.ellipse(x,groundY+14,s,12,0,0,7);ctx.fill();ctx.restore();}
function drawLeg(hx,hy,fx,fy,mirror){var mx=(hx+fx)/2+14,my=(hy+fy)/2;ink(function(){ctx.strokeStyle='#1c1a1e';ctx.lineWidth=11;ctx.beginPath();ctx.moveTo(hx,hy);ctx.quadraticCurveTo(mx,my,fx,fy-8);ctx.stroke();ctx.strokeStyle='#e07a2e';ctx.lineWidth=6;ctx.beginPath();ctx.moveTo(hx,hy);ctx.quadraticCurveTo(mx,my,fx,fy-8);ctx.stroke();});ctx.save();ctx.translate(fx,fy);ctx.rotate(Math.atan2(fy-my,fx-mx)*0.2);ctx.fillStyle='#e94f37';ctx.strokeStyle='#1c1a1e';ctx.lineWidth=3.5;ctx.beginPath();if(ctx.roundRect)ctx.roundRect(-16,-12,32,16,6);else ctx.rect(-16,-12,32,16);ctx.fill();ctx.stroke();ctx.fillStyle='#fffedf';ctx.fillRect(-16,-4,32,5);ctx.fillStyle='#1c1a1e';for(var i=-8;i<10;i+=7){ctx.fillRect(i,-12,2,6);}ctx.restore();}
function drawWing(sx,sy,ang,len,plant){var ex=sx+Math.cos(ang)*len*0.55,ey=sy+Math.sin(ang)*len*0.55,hx=ex+Math.cos(ang+0.4)*len*0.55,hy=ey+Math.sin(ang+0.4)*len*0.55;ink(function(){ctx.strokeStyle='#1c1a1e';ctx.lineWidth=14;ctx.beginPath();ctx.moveTo(sx,sy);ctx.lineTo(ex,ey);ctx.lineTo(hx,hy);ctx.stroke();ctx.strokeStyle='#9aa0b5';ctx.lineWidth=9;ctx.beginPath();ctx.moveTo(sx,sy);ctx.lineTo(ex,ey);ctx.lineTo(hx,hy);ctx.stroke();});ctx.save();ctx.translate(hx,hy);ctx.rotate(ang);ctx.fillStyle='#7c829c';ctx.strokeStyle='#1c1a1e';ctx.lineWidth=3;for(var i=0;i<3;i++){ctx.save();ctx.rotate(-0.4+i*0.4);ctx.beginPath();ctx.ellipse(12,0,14,5,0,0,7);ctx.fill();ctx.stroke();ctx.restore();}ctx.restore();if(plant){ctx.save();ctx.translate(hx,hy);ctx.strokeStyle='#ffd23f';ctx.lineWidth=3;for(var k=0;k<3;k++){ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(Math.cos(k*2.1)*22,Math.sin(k*2.1)*22);ctx.stroke();}ctx.restore();}return {x:hx,y:hy};}
function drawBird(p,t){
  drawShadow(p.x,groundY,52*p.sx);
  ctx.save();ctx.translate(p.x,p.y);if(shake>0)ctx.translate(R(-shake,shake)*0.4,R(-shake,shake)*0.4);ctx.rotate(p.rot);ctx.scale(p.sx,p.sy);
  // tail
  ink(function(){ctx.fillStyle='#7c829c';ctx.strokeStyle='#1c1a1e';ctx.lineWidth=4;for(var i=0;i<3;i++){ctx.save();ctx.translate(-52,8+i*10-10);ctx.rotate(2.9+i*0.18+Math.sin(t*6+i)*0.06);ctx.beginPath();ctx.ellipse(-18,0,20,7,0,0,7);ctx.fill();ctx.stroke();ctx.restore();}});
  // legs (behind body slightly)
  drawLeg(-16,28,p.fLx,p.fLy);drawLeg(16,28,p.fRx,p.fRy);
  // body
  ink(function(){ctx.fillStyle='#b9bac7';ctx.strokeStyle='#1c1a1e';ctx.lineWidth=5;ctx.beginPath();ctx.ellipse(0,0,58,50,0,0,7);ctx.fill();ctx.stroke();});
  halftone(0,14,44,30);
  // neck shine
  ctx.save();ctx.fillStyle='#3ec1d3';ctx.globalAlpha=0.7;ctx.beginPath();ctx.ellipse(28,-12,16,22,0.4,0,7);ctx.fill();ctx.fillStyle='#9b5de5';ctx.globalAlpha=0.55;ctx.beginPath();ctx.ellipse(30,-8,10,14,0.4,0,7);ctx.fill();ctx.restore();
  // chain
  ink(function(){ctx.strokeStyle='#8a6a1a';ctx.lineWidth=6;ctx.beginPath();ctx.arc(18,18,26,0.3,2.6);ctx.stroke();ctx.strokeStyle='#ffd23f';ctx.lineWidth=4;ctx.beginPath();ctx.arc(18,18,26,0.3,2.6);ctx.stroke();});ctx.save();ctx.translate(18,44);ctx.rotate(Math.sin(t*5)*0.2);ctx.fillStyle='#ffd23f';ctx.strokeStyle='#1c1a1e';ctx.lineWidth=3;ctx.beginPath();ctx.arc(0,0,9,0,7);ctx.fill();ctx.stroke();ctx.fillStyle='#1c1a1e';ctx.font='900 10px sans-serif';ctx.textAlign='center';ctx.fillText('B',0,3.5);ctx.restore();
  // wings as arms
  var wl=drawWing(-24,-8,p.wL,64,p.wPlant),wr=drawWing(24,-6,p.wR,64,p.wPlant);
  // head
  var hx=38,hy=-38;ctx.save();ctx.translate(hx,hy);ctx.rotate(p.head);
  ink(function(){ctx.fillStyle='#c9cad6';ctx.strokeStyle='#1c1a1e';ctx.lineWidth=5;ctx.beginPath();ctx.arc(0,0,27,0,7);ctx.fill();ctx.stroke();});
  // eye
  ctx.save();ctx.translate(6,-4);ctx.fillStyle='#fff';ctx.strokeStyle='#1c1a1e';ctx.lineWidth=3;ctx.beginPath();ctx.arc(0,0,11,0,7);ctx.fill();ctx.stroke();if(p.blink){ctx.fillStyle='#1c1a1e';ctx.fillRect(-11,-2,22,4);}else{ctx.fillStyle='#1c1a1e';ctx.beginPath();ctx.arc(2+p.eyeX,-1,5,0,7);ctx.fill();ctx.fillStyle='#fff';ctx.beginPath();ctx.arc(3.5+p.eyeX,-2.5,1.8,0,7);ctx.fill();}ctx.restore();
  // cheek
  ctx.fillStyle='rgba(233,79,55,0.5)';ctx.beginPath();ctx.arc(-6,8,6,0,7);ctx.fill();
  // beak
  ctx.save();ctx.translate(22,4);ctx.fillStyle='#ff9a2e';ctx.strokeStyle='#1c1a1e';ctx.lineWidth=3;ctx.beginPath();ctx.moveTo(0,-6);ctx.lineTo(16,0);ctx.lineTo(0,6);ctx.closePath();ctx.fill();ctx.stroke();if(p.beak>0.1){ctx.save();ctx.translate(1,5);ctx.rotate(0.5*p.beak);ctx.fillStyle='#c96a1a';ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(13,1);ctx.lineTo(0,7);ctx.closePath();ctx.fill();ctx.stroke();ctx.restore();}ctx.restore();
  // hat
  ctx.save();ctx.translate(-4,-22);ctx.rotate(-0.25+Math.sin(t*4)*0.03+p.rot*0.05);ctx.fillStyle='#e94f37';ctx.strokeStyle='#1c1a1e';ctx.lineWidth=4;ctx.beginPath();ctx.ellipse(0,0,24,12,0,Math.PI,0);ctx.fill();ctx.stroke();ctx.beginPath();ctx.moveTo(-24,-2);ctx.lineTo(-44,-6);ctx.lineTo(-42,2);ctx.lineTo(-24,4);ctx.closePath();ctx.fill();ctx.stroke();ctx.fillStyle='#ffd23f';ctx.beginPath();ctx.arc(0,-12,4,0,7);ctx.fill();ctx.stroke();ctx.restore();
  ctx.restore();
  ctx.restore();
  // spin lines for windmill
  if(p&&curName==='windmill'){ctx.save();ctx.globalAlpha=0.3;ctx.strokeStyle='#fffedf';ctx.lineWidth=4;ctx.beginPath();ctx.ellipse(p.x,p.y,110,26,0,0,7);ctx.stroke();ctx.restore();}
}
var curName='toprock';
// main loop
function frame(now){
  var dt=Math.min(0.05,(now-lastT)/1000);lastT=now;var t=now/1000;
  beatPos+=dt*BPM/60;
  if(queued){for(var i=0;i<segs.length;i++)if(segs[i].n===queued){var base=Math.floor(beatPos/total)*total;var target=base+segs[i].start+0.001;if(target<beatPos-1)target+=total;beatPos=target;bubble(queued.toUpperCase()+'!',cx,H*0.32,'#ffd23f');break;}queued=null;}
  var lb=beatPos%total;if(lb<0.05&&beatPos>1){loopCount++;mirror=loopCount%2?1:-1;}
  var res=getPose(lb,t);curName=res.name;var p=res.p;
  // squash physics: detect landing velocity
  var vy=(p.y-prevY)/Math.max(dt,0.001);prevY=p.y;
  if(vy>420&&p.y>groundY-120){squash=Math.min(1,vy/1400);dust(p.x,groundY,5);shake=Math.max(shake,3);}
  squash*=Math.exp(-dt*7);p.sx*=1+squash*0.28;p.sy*=1-squash*0.32;
  shake*=Math.exp(-dt*6);
  // blink
  nextBlink-=dt;if(nextBlink<0){blink=0.12;nextBlink=R(1.8,4.2);}if(blink>0)blink-=dt;
  p.beak=Math.max(p.beak,beakOpen);beakOpen*=Math.exp(-dt*5);
  hype=Math.max(0.15,hype-dt*0.03);hypeFill.style.width=(hype*100)+'%';
  // move tag
  var names={bounce:'BOUNCE • WARM UP',toprock:'TOPROCK',drop:'DROP!',footwork:'FOOTWORK • 6-STEP',baby:'BABY FREEZE ❄',windmill:'WINDMILL ⚡',tired:'RECOVERY…',headfreeze:'HEAD FREEZE!!'};
  moveTag.textContent=names[curName]||curName;
  // auto bubbles on big moments
  if(curName==='baby'&&res.u<0.05&&Math.random()<0.9){bubble('HOLD IT!',p.x+90,p.y-110,'#fffedf');shake=Math.max(shake,4);dust(p.x,groundY,4,'#fff');}
  if(curName==='headfreeze'&&res.u<0.05){bubble('OOOOH!!',p.x+110,p.y-140,'#e94f37');shake=Math.max(shake,7);chirp();}
  if(curName==='windmill'&&Math.random()<0.08)feather(p.x,p.y-20);
  // update particles
  drawBG(t);
  // crumbs
  for(var ci=crumbs.length-1;ci>=0;ci--){var c=crumbs[ci];c.vy+=900*dt;c.y+=c.vy*dt;if(c.y>groundY+6){c.y=groundY+6;c.vy*=-0.3;if(Math.abs(c.vy)<20)c.vy=0;}ctx.save();ctx.translate(c.x,c.y);ctx.rotate(ci);ctx.fillStyle='#e8b64c';ctx.strokeStyle='#1c1a1e';ctx.lineWidth=2;ctx.beginPath();ctx.ellipse(0,0,7,5,0,0,7);ctx.fill();ctx.stroke();ctx.restore();}
  // crowd hands
  ctx.save();for(var hI=0;hI<Math.floor(W/70);hI++){var hx2=hI*70+30,hy2=H-14-Math.abs(Math.sin(t*4+hI))* (6+hype*22);ctx.fillStyle=hI%2?'#1c1a1e':'#3a3340';ctx.strokeStyle='#1c1a1e';ctx.beginPath();ctx.ellipse(hx2,hy2+18,22,20,0,Math.PI,0);ctx.fill();for(var f=0;f<3;f++){ctx.fillRect(hx2-12+f*10,hy2-8,7,16);}}ctx.restore();
  drawBird(p,t);
  // particles draw
  for(var pi=particles.length-1;pi>=0;pi--){var q=particles[pi];q.t+=dt;if(q.t>q.life){particles.splice(pi,1);continue;}var k=q.t/q.life;ctx.save();ctx.globalAlpha=1-k;if(q.k==='d'){ctx.fillStyle=q.c;ctx.beginPath();ctx.arc(q.x+q.vx*q.t,q.y+q.vy*q.t+60*q.t*q.t,5*(1-k)+2,0,7);ctx.fill();}else if(q.k==='f'){ctx.translate(q.x+q.vx*q.t,q.y+q.vy*q.t+120*q.t*q.t);ctx.rotate(q.rot+q.vr*q.t);ctx.fillStyle='#c9cad6';ctx.strokeStyle='#1c1a1e';ctx.lineWidth=2;ctx.beginPath();ctx.ellipse(0,0,8,4,0,0,7);ctx.fill();ctx.stroke();}else{ctx.fillStyle='#3ec1d3';ctx.beginPath();ctx.arc(q.x+q.vx*q.t,q.y+q.vy*q.t,3,0,7);ctx.fill();}ctx.restore();}
  // bubbles
  for(var bi=bubbles.length-1;bi>=0;bi--){var bb2=bubbles[bi];bb2.t+=dt;if(bb2.t>bb2.life){bubbles.splice(bi,1);continue;}ctx.save();ctx.translate(bb2.x,bb2.y-bb2.t*30);ctx.rotate(-0.05);ctx.globalAlpha=1-bb2.t/bb2.life;ctx.fillStyle=bb2.c;ctx.strokeStyle='#1c1a1e';ctx.lineWidth=3;ctx.font='900 18px Trebuchet MS';var wdt=ctx.measureText(bb2.txt).width+20;ctx.beginPath();if(ctx.roundRect)ctx.roundRect(-wdt/2,-18,wdt,30,10);else ctx.rect(-wdt/2,-18,wdt,30);ctx.fill();ctx.stroke();ctx.fillStyle='#1c1a1e';ctx.textAlign='center';ctx.fillText(bb2.txt,0,3);ctx.restore();}
  // vignette grain
  ctx.save();ctx.globalAlpha=0.08;ctx.fillStyle='#1c1a1e';for(var g=0;g<40;g++){ctx.fillRect(Math.random()*W,Math.random()*H,2,2);}ctx.restore();
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
setTimeout(function(){bubble('B-BIRD IS IN!',cx,H*0.35,'#ffd23f');},600);
})();
</script>
</body>
</html>

The notes

The move set, and how you got the timing to feel like weight rather than interpolation.
What your controls change.
The part you would fix with more time.

Attachments

meta/muse-spark-1.3 — page