Run Detail
completednemotron-3-ultra-550b-a55b:freeRecorded 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
22:14GPT-6.1 Terra Pro vs Terra: How Much Better Is Pro?
Oct 27, 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
30:00Did Elon Musk's team "train the gay away"... and make Grok 4.7 worse?
Sep 26, 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
29:00Grok 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
1
Duration
467.3s
Total Tokens
12,997
Input Tokens
312
Output Tokens
12,685
Reasoning Tokens
409
Reasoning Effort
default
Est. Cost
$0.0000
Started
11/6/2026, 1:22:53 PM
OR Provider
Nvidia
Finish Reason
stop
Generation ID
gen-1793971372-R3Lzkrgdh2PHRVrYQT5k
Turns (1)
Turn #1
312 in12,685 out409 reasoning12,997 total467.3s
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 orindexedDB— sandboxed frame, they throw. - Return the file as exactly one fenced
htmlblock.
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 geometric corvid — sharp angles, heavy black ink lines, one burnt-orange eye. It doesn't flap; it pops, locks, and spins on a single claw, feathers ruffling from impact. The look is late-night zine aesthetic: high contrast, halftone grit, motion lines that linger like chalk dust.
The page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BREAKBIRD</title>
<style>
:root{
--bg:#0a0a0a;--ink:#f0f0e8;--accent:#e85d2a;--muted:#3a3a3a;
--halftone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23f0f0e8' opacity='0.08'/%3E%3C/svg%3E");
}
*{margin:0;padding:0;box-sizing:border-box}
body{
min-height:100vh;background:var(--bg);color:var(--ink);
font-family:system-ui,monospace;display:flex;flex-direction:column;
align-items:center;overflow-x:hidden;position:relative;
}
body::before{
content:'';position:fixed;inset:0;background:var(--halftone);
pointer-events:none;opacity:0.6;z-index:1000;
}
#stage{position:relative;width:100%;max-width:600px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;margin-top:clamp(20px,5vh,60px)}
svg{width:100%;height:100%;display:block;filter:drop-shadow(0 4px 24px rgba(232,93,42,0.15))}
.controls{
display:flex;flex-wrap:wrap;gap:12px;justify-content:center;padding:24px 16px;
max-width:600px;width:100%;position:relative;z-index:10;
}
.panel{
background:rgba(240,240,232,0.03);border:1px solid var(--muted);
border-radius:8px;padding:16px 20px;min-width:180px;flex:1 1 200px;
backdrop-filter:blur(4px);position:relative;overflow:hidden;
}
.panel::after{
content:'';position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,transparent,var(--accent),transparent);
}
.panel h3{font-size:11px;text-transform:uppercase;letter-spacing:0.15em;color:var(--muted);margin-bottom:12px;font-weight:400}
.row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.row:last-child{margin-bottom:0}
label{font-size:12px;color:var(--ink);min-width:55px;opacity:0.8}
input[type=range]{
flex:1;-webkit-appearance:none;appearance:none;height:6px;background:var(--muted);
border-radius:3px;outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;appearance:none;width:18px;height:18px;
background:var(--accent);border-radius:50%;box-shadow:0 2px 8px rgba(232,93,42,0.4);
transition:transform 0.1s,box-shadow 0.1s;
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 4px 16px rgba(232,93,42,0.6)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;background:var(--accent);border:none;border-radius:50%;box-shadow:0 2px 8px rgba(232,93,42,0.4)}
.value{font-variant-numeric:tabular-nums;font-size:13px;color:var(--accent);min-width:36px;text-align:right}
select{
flex:1;background:var(--muted);border:1px solid var(--muted);color:var(--ink);
padding:8px 12px;border-radius:4px;font-size:13px;cursor:pointer;outline:none;
}
select:focus{border-color:var(--accent)}
button{
width:100%;background:var(--accent);border:none;color:#0a0a0a;
font-weight:700;text-transform:uppercase;letter-spacing:0.1em;
padding:12px;border-radius:4px;cursor:pointer;font-size:12px;
transition:background 0.15s,transform 0.05s;
}
button:hover{background:#ff703a}button:active{transform:scale(0.98)}
button:disabled{opacity:0.4;cursor:not-allowed}
.btn-row{display:flex;gap:8px}
.btn-row button{flex:1}
#callBtn{background:var(--ink);color:var(--bg)}
#callBtn:hover{background:#fff}
.status{font-size:11px;color:var(--muted);text-align:center;padding:0 16px 24px;min-height:18px;text-transform:uppercase;letter-spacing:0.1em}
@media(prefers-reduced-motion:reduce){
*{animation:none !important;transition:none !important}
}
</style>
</head>
<body>
<div id="stage">
<svg viewBox="0 0 300 300" preserveAspectRatio="xMidYMid meet" id="svg">
<defs>
<filter id="grit" x="-20%" y="-20%" width="140%" height="140%">
<feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch" result="noise"/>
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.15 0" in="noise" result="noiseAlpha"/>
<feBlend in="SourceGraphic" in2="noiseAlpha" mode="multiply"/>
</filter>
<filter id="impactFlash" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="4" result="blur"/>
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
<radialGradient id="eyeGlow" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="#ff8c42"/><stop offset="100%" stop-color="#e85d2a" stop-opacity="0"/></radialGradient>
</defs>
<rect width="300" height="300" fill="none"/>
<g id="bird" transform="translate(150,150)">
<!-- Shadow -->
<ellipse id="shadow" cx="0" cy="95" rx="45" ry="8" fill="#000" opacity="0.25" transform="scaleX(1)"/>
<!-- Body parts -->
<g id="tail" filter="url(#grit)">
<path id="tail1" d="M-8,10 Q-25,5 -30,15 Q-22,20 -8,25 Z" fill="var(--ink)"/>
<path id="tail2" d="M0,10 Q-18,12 -22,22 Q-14,24 0,28 Z" fill="var(--ink)" opacity="0.7"/>
<path id="tail3" d="M8,10 Q25,5 30,15 Q22,20 8,25 Z" fill="var(--ink)"/>
</g>
<g id="body">
<path id="belly" d="M-28,0 Q-30,-25 -5,-40 Q20,-35 28,0 Q20,25 -5,35 Q-30,25 -28,0 Z" fill="var(--ink)"/>
<path id="chest" d="M-15,-5 Q-10,-25 10,-30 Q25,-20 20,5 Q15,20 -5,25 Q-20,15 -15,-5 Z" fill="#1a1a1a"/>
<ellipse id="wingL" cx="-30" cy="5" rx="18" ry="32" fill="var(--ink)" transform="rotate(-15)"/>
<ellipse id="wingR" cx="30" cy="5" rx="18" ry="32" fill="var(--ink)" transform="rotate(15)"/>
</g>
<g id="head">
<path id="headShape" d="M-22,-45 Q-25,-65 0,-72 Q25,-65 22,-45 Q25,-30 0,-20 Q-25,-30 -22,-45 Z" fill="var(--ink)"/>
<path id="beak" d="M-8,-48 Q-2,-58 8,-48 Q0,-42 -8,-48 Z" fill="#2a2a2a"/>
<circle id="eye" cx="-2" cy="-54" r="6" fill="var(--accent)"/>
<circle id="pupil" cx="-2" cy="-54" r="2.5" fill="#0a0a0a"/>
<ellipse id="eyeShine" cx="-4" cy="-56" rx="1.5" ry="1" fill="var(--ink)" opacity="0.6"/>
<path id="brow" d="M-14,-58 Q-2,-52 10,-58" stroke="var(--ink)" stroke-width="3" fill="none" stroke-linecap="round"/>
</g>
<g id="legs">
<g id="legL">
<path id="thighL" d="M-12,30 Q-15,45 -10,58" stroke="var(--ink)" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
<path id="shinL" d="M-10,58 Q-8,72 -5,85" stroke="var(--ink)" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
<path id="footL" d="M-5,85 Q-15,90 -20,92 Q-10,88 -5,85 Z" fill="var(--accent)"/>
<path id="clawL1" d="M-12,92 Q-18,100 -16,105" stroke="var(--accent)" stroke-width="2.5" fill="none" stroke-linecap="round"/>
<path id="clawL2" d="M-5,92 Q-2,100 -3,105" stroke="var(--accent)" stroke-width="2.5" fill="none" stroke-linecap="round"/>
</g>
<g id="legR">
<path id="thighR" d="M12,30 Q15,45 10,58" stroke="var(--ink)" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
<path id="shinR" d="M10,58 Q8,72 5,85" stroke="var(--ink)" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
<path id="footR" d="M5,85 Q15,90 20,92 Q10,88 5,85 Z" fill="var(--accent)"/>
<path id="clawR1" d="M12,92 Q18,100 16,105" stroke="var(--accent)" stroke-width="2.5" fill="none" stroke-linecap="round"/>
<path id="clawR2" d="M5,92 Q2,100 3,105" stroke="var(--accent)" stroke-width="2.5" fill="none" stroke-linecap="round"/>
</g>
</g>
<!-- Motion lines -->
<g id="motionLines" stroke="var(--ink)" stroke-width="1.5" fill="none" opacity="0" stroke-linecap="round">
<line id="ml1" x1="0" y1="0" x2="0" y2="0"/>
<line id="ml2" x1="0" y1="0" x2="0" y2="0"/>
<line id="ml3" x1="0" y1="0" x2="0" y2="0"/>
<line id="ml4" x1="0" y1="0" x2="0" y2="0"/>
</g>
<!-- Impact particles -->
<g id="particles" fill="var(--accent)"></g>
</g>
</svg>
</div>
<div class="controls">
<div class="panel">
<h3>Tempo</h3>
<div class="row"><label>BPM</label><input type="range" id="bpm" min="60" max="160" value="100"><span class="value" id="bpmVal">100</span></div>
<div class="row"><label>Swing</label><input type="range" id="swing" min="0" max="100" value="35"><span class="value" id="swingVal">35%</span></div>
</div>
<div class="panel">
<h3>Style</h3>
<div class="row"><label>Mode</label>
<select id="style">
<option value="foundation">Foundation</option>
<option value="power">Power</option>
<option value="flow">Flow</option>
<option value="freestyle">Freestyle</option>
</select>
</div>
<div class="row"><label>Intensity</label><input type="range" id="intensity" min="1" max="10" value="7"><span class="value" id="intVal">7</span></div>
</div>
<div class="panel">
<h3>Control</h3>
<div class="btn-row">
<button id="callBtn" title="Call next move">Call Move</button>
<button id="freezeBtn" title="Hold current freeze">Freeze</button>
</div>
<div class="row" style="margin-top:10px"><label>Auto</label><input type="checkbox" id="auto" checked></div>
</div>
</div>
<div class="status" id="status">TOPROCK — INDIAN STEP</div>
<script>
// ===== BREAKBIRD ENGINE =====
const svg=document.getElementById('svg'), bird=document.getElementById('bird');
const shadow=document.getElementById('shadow');
const tail1=document.getElementById('tail1'), tail2=document.getElementById('tail2'), tail3=document.getElementById('tail3');
const belly=document.getElementById('belly'), chest=document.getElementById('chest');
const wingL=document.getElementById('wingL'), wingR=document.getElementById('wingR');
const headShape=document.getElementById('headShape'), beak=document.getElementById('beak');
const eye=document.getElementById('eye'), pupil=document.getElementById('pupil'), eyeShine=document.getElementById('eyeShine'), brow=document.getElementById('brow');
const thighL=document.getElementById('thighL'), shinL=document.getElementById('shinL'), footL=document.getElementById('footL'), clawL1=document.getElementById('clawL1'), clawL2=document.getElementById('clawL2');
const thighR=document.getElementById('thighR'), shinR=document.getElementById('shinR'), footR=document.getElementById('footR'), clawR1=document.getElementById('clawR1'), clawR2=document.getElementById('clawR2');
const motionLines=document.getElementById('motionLines'), ml1=document.getElementById('ml1'), ml2=document.getElementById('ml2'), ml3=document.getElementById('ml3'), ml4=document.getElementById('ml4');
const particlesG=document.getElementById('particles');
const statusEl=document.getElementById('status');
// Controls
const bpmIn=document.getElementById('bpm'), bpmVal=document.getElementById('bpmVal');
const swingIn=document.getElementById('swing'), swingVal=document.getElementById('swingVal');
const styleIn=document.getElementById('style');
const intensityIn=document.getElementById('intensity'), intVal=document.getElementById('intVal');
const callBtn=document.getElementById('callBtn'), freezeBtn=document.getElementById('freezeBtn'), autoIn=document.getElementById('auto');
// State
let bpm=100, swing=0.35, style='foundation', intensity=7, auto=true, frozen=false;
let moveQueue=[], currentMove=null, moveProgress=0, moveStartTime=0, lastBeat=0;
let beatInterval=600, swingOffset=0;
let particles=[], motionLineTimer=0;
// Easing — weight comes from these curves
const ease={
inBack:(t,s=1.7)=>(t*=t)*((s+1)*t-s),
outBack:(t,s=1.7)=>(--t)*t*((s+1)*t+s)+1,
inOutBack:(t,s=1.7)=>(t*=2)<1?t*t*((s+1)*t-s)*0.5:0.5*((t-=2)*t*((s+1)*t+s)+2),
outElastic:(t)=>{const p=0.3;return t===0?0:t===1?1:Math.pow(2,-10*t)*Math.sin((t-p/4)*(2*Math.PI)/p)+1},
outBounce:(t)=>{if(t<1/2.75)return 7.5625*t*t;if(t<2/2.75)return 7.5625*(t-=1.5/2.75)*t+0.75;if(t<2.5/2.75)return 7.5625*(t-=2.25/2.75)*t+0.9375;return 7.5625*(t-=2.625/2.75)*t+0.984375},
inCubic:t=>t*t*t, outCubic:t=>1-Math.pow(1-t,3), inOutCubic:t=>t<0.5?4*t*t*t:1-Math.pow(-2*t+2,3)/2,
linear:t=>t
};
// ===== MOVE DEFINITIONS =====
// Each move: {name, beats, phases:[{name,dur,ease,poseFn,onHit,onEnd}]}
// poseFn(t, intensity) — t is 0-1 through phase
// Weight: anticipation (slow in), hit (fast outBack), recovery (slow outElastic/outBounce)
const moves={
foundation:[
{name:'INDIAN STEP',beats:2,phases:[
{name:'prep',dur:0.3,ease:ease.inCubic,pose:(t,i)=>{setPose({bodyLean:-10*t,hipShift:5*t,headBob:-3*t,wingSpread:10*t})}},
{name:'step1',dur:0.35,ease:ease.outBack,pose:(t,i)=>{setPose({bodyLean:25*t,hipShift:-20*t,headBob:8*t,legL:{thigh:-60*t,shin:30*t,foot:-20*t},legR:{thigh:20*t,shin:-40*t,foot:10*t},wingSpread:40*t,tailFan:30*t});if(t>0.9)spawnImpact('L')}},
{name:'recover1',dur:0.35,ease:ease.outElastic,pose:(t,i)=>{setPose({bodyLean:25*(1-t),hipShift:-20*(1-t),headBob:8*(1-t),legL:{thigh:-60*(1-t),shin:30*(1-t),foot:-20*(1-t)},legR:{thigh:20*(1-t),shin:-40*(1-t),foot:10*(1-t)},wingSpread:40*(1-t),tailFan:30*(1-t)})}},
{name:'step2',dur:0.35,ease:ease.outBack,pose:(t,i)=>{setPose({bodyLean:-25*t,hipShift:20*t,headBob:8*t,legL:{thigh:20*t,shin:-40*t,foot:10*t},legR:{thigh:-60*t,shin:30*t,foot:-20*t},wingSpread:40*t,tailFan:30*t});if(t>0.9)spawnImpact('R')}},
{name:'recover2',dur:0.35,ease:ease.outElastic,pose:(t,i)=>{setPose({bodyLean:-25*(1-t),hipShift:20*(1-t),headBob:8*(1-t),legL:{thigh:20*(1-t),shin:-40*(1-t),foot:10*(1-t)},legR:{thigh:-60*(1-t),shin:30*(1-t),foot:-20*(1-t)},wingSpread:40*(1-t),tailFan:30*(1-t)})}},
]},
{name:'CROSSOVER',beats:2,phases:[
{name:'prep',dur:0.25,ease:ease.inCubic,pose:(t,i)=>{setPose({bodyLean:0,hipShift:0,headBob:-5*t,wingSpread:15*t})}},
{name:'cross',dur:0.4,ease:ease.outBack,pose:(t,i)=>{setPose({bodyLean:15*t,hipShift:-30*t,headBob:10*t,legL:{thigh:-80*t,shin:50*t,foot:-30*t},legR:{thigh:40*t,shin:-60*t,foot:20*t},wingSpread:60*t,tailFan:50*t});if(t>0.85)spawnImpact('L')}},
{name:'uncross',dur:0.35,ease:ease.outElastic,pose:(t,i)=>{setPose({bodyLean:15*(1-t),hipShift:-30*(1-t),headBob:10*(1-t),legL:{thigh:-80*(1-t),shin:50*(1-t),foot:-30*(1-t)},legR:{thigh:40*(1-t),shin:-60*(1-t),foot:20*(1-t)},wingSpread:60*(1-t),tailFan:50*(1-t)})}},
{name:'cross2',dur:0.4,ease:ease.outBack,pose:(t,i)=>{setPose({bodyLean:-15*t,hipShift:30*t,headBob:10*t,legL:{thigh:40*t,shin:-60*t,foot:20*t},legR:{thigh:-80*t,shin:50*t,foot:-30*t},wingSpread:60*t,tailFan:50*t});if(t>0.85)spawnImpact('R')}},
{name:'recover',dur:0.35,ease:ease.outElastic,pose:(t,i)=>{setPose({bodyLean:-15*(1-t),hipShift:30*(1-t),headBob:10*(1-t),legL:{thigh:40*(1-t),shin:-60*(1-t),foot:20*(1-t)},legR:{thigh:-80*(1-t),shin:50*(1-t),foot:-30*(1-t)},wingSpread:60*(1-t),tailFan:50*(1-t)})}},
]},
{name:'6-STEP',beats:4,phases:[
{name:'entry',dur:0.2,ease:ease.inCubic,pose:(t,i)=>{setPose({bodyLean:30*t,hipShift:0,headBob:-5*t,wingSpread:20*t})}},
{name:'step1',dur:0.2,ease:ease.outBack,pose:(t,i)=>{setPose({legL:{thigh:-40*t,shin:20*t,foot:-10*t},legR:{thigh:10*t,shin:-30*t,foot:5*t}});if(t>0.8)spawnImpact('L')}},
{name:'step2',dur:0.2,ease:ease.outBack,pose:(t,i)=>{setPose({legL:{thigh:-60*t,shin:40*t,foot:-20*t},legR:{thigh:-10*t,shin:-10*t,foot:0*t}});if(t>0.8)spawnImpact('L')}},
{name:'step3',dur:0.2,ease:ease.outBack,pose:(t,i)=>{setPose({bodyLean:10*t,legL:{thigh:-20*t,shin:10*t,foot:0*t},legR:{thigh:-50*t,shin:30*t,foot:-15*t}});if(t>0.8)spawnImpact('R')}},
{name:'step4',dur:0.2,ease:ease.outBack,pose:(t,i)=>{setPose({bodyLean:-10*t,legL:{thigh:30*t,shin:-20*t,foot:10*t},legR:{thigh:-70*t,shin:50*t,foot:-25*t}});if(t>0.8)spawnImpact('R')}},
{name:'step5',dur:0.2,ease:ease.outBack,pose:(t,i)=>{setPose({legL:{thigh:50*t,shin:-40*t,foot:20*t},legR:{thigh:-30*t,shin:20*t,foot:-10*t}});if(t>0.8)spawnImpact('L')}},
{name:'step6',dur:0.2,ease:ease.outBack,pose:(t,i)=>{setPose({legL:{thigh:10*t,shin:-10*t,foot:0*t},legR:{thigh:10*t,shin:-10*t,foot:0*t}});if(t>0.8)spawnImpact('R')}},
{name:'exit',dur:0.3,ease:ease.outElastic,pose:(t,i)=>{setPose({bodyLean:30*(1-t),hipShift:0,headBob:-5*(1-t),wingSpread:20*(1-t),legL:{thigh:10*(1-t),shin:-10*(1-t),foot:0},legR:{thigh:10*(1-t),shin:-10*(1-t),foot:0}})}}
]}
],
power:[
{name:'WINDMILL',beats:4,phases:[
{name:'drop',dur:0.3,ease:ease.inCubic,pose:(t,i)=>{setPose({bodyLean:60*t,hipShift:0,headBob:-20*t,wingSpread:80*t,legL:{thigh:-30*t,shin:60*t,foot:0},legR:{thigh:-30*t,shin:60*t,foot:0}});if(t>0.9)spawnImpact('BOTH')}},
{name:'spin1',dur:0.3,ease:ease.linear,pose:(t,i)=>{setPose({bodyLean:60+360*t,hipShift:20*Math.sin(t*Math.PI*2),headBob:-20,wingSpread:80,legL:{thigh:-30,shin:60,foot:0},legR:{thigh:-30,shin:60,foot:0}});spawnMotionLines(t)}},
{name:'spin2',dur:0.3,ease:ease.linear,pose:(t,i)=>{setPose({bodyLean:420+360*t,hipShift:20*Math.sin(t*Math.PI*2),headBob:-20,wingSpread:80,legL:{thigh:-30,shin:60,foot:0},legR:{thigh:-30,shin:60,foot:0}});spawnMotionLines(t)}},
{name:'rise',dur:0.4,ease:ease.outElastic,pose:(t,i)=>{setPose({bodyLean:780*(1-t),hipShift:0,headBob:-20*(1-t),wingSpread:80*(1-t),legL:{thigh:-30*(1-t),shin:60*(1-t),foot:0},legR:{thigh:-30*(1-t),shin:60*(1-t),foot:0}})}}
]},
{name:'HEADSPIN',beats:3,phases:[
{name:'setup',dur:0.3,ease:ease.inCubic,pose:(t,i)=>{setPose({bodyLean:0,hipShift:0,headBob:-40*t,wingSpread:60*t,legL:{thigh:-20*t,shin:40*t,foot:0},legR:{thigh:-20*t,shin:40*t,foot:0}});if(t>0.9)spawnImpact('HEAD')}},
{name:'spin',dur:0.8,ease:ease.linear,pose:(t,i)=>{setPose({bodyLean:720*t,hipShift:0,headBob:-40,wingSpread:60,legL:{thigh:-20,shin:40,foot:0},legR:{thigh:-20,shin:40,foot:0}});spawnMotionLines(t)}},
{name:'stop',dur:0.3,ease:ease.outBack,pose:(t,i)=>{setPose({bodyLean:720+180*t,hipShift:0,headBob:-40+40*t,wingSpread:60-60*t,legL:{thigh:-20+20*t,shin:40-40*t,foot:0},legR:{thigh:-20+20*t,shin:40-40*t,foot:0}});if(t>0.9)spawnImpact('BOTH')}},
{name:'recover',dur:0.4,ease:ease.outElastic,pose:(t,i)=>{setPose({bodyLean:900*(1-t),headBob:0,wingSpread:0,legL:{thigh:0,shin:0,foot:0},legR:{thigh:0,shin:0,foot:0}})}}
]},
{name:'AIR FREEZE',beats:2,phases:[
{name:'launch',dur:0.25,ease:ease.inCubic,pose:(t,i)=>{setPose({bodyLean:45*t,hipShift:0,headBob:-10*t,wingSpread:70*t,legL:{thigh:-70*t,shin:50*t,foot:-30*t},legR:{thigh:30*t,shin:-50*t,foot:20*t}});if(t>0.9)spawnImpact('BOTH')}},
{name:'hold',dur:0.6,ease:ease.linear,pose:(t,i)=>{setPose({bodyLean:45+5*Math.sin(t*Math.PI*4),hipShift:5*Math.cos(t*Math.PI*3),headBob:-10,wingSpread:70,legL:{thigh:-70,shin:50,foot:-30},legR:{thigh:30,shin:-50,foot:20}});if(Math.random()<0.02)spawnImpact('AIR')}},
{name:'land',dur:0.3,ease:ease.outBounce,pose:(t,i)=>{setPose({bodyLean:45*(1-t),hipShift:0,headBob:-10*(1-t),wingSpread:70*(1-t),legL:{thigh:-70*(1-t),shin:50*(1-t),foot:-30*(1-t)},legR:{thigh:30*(1-t),shin:-50*(1-t),foot:20*(1-t)}});if(t>0.8)spawnImpact('BOTH')}},
{name:'recover',dur:0.3,ease:ease.outElastic,pose:(t,i)=>{setPose({bodyLean:0,hipShift:0,headBob:0,wingSpread:0,legL:{thigh:0,shin:0,foot:0},legR:{thigh:0,shin:0,foot:0}})}}
]}
],
flow:[
{name:'THREAD',beats:3,phases:[
{name:'enter',dur:0.25,ease:ease.inCubic,pose:(t,i)=>{setPose({bodyLean:20*t,hipShift:-10*t,headBob:-5*t,wingSpread:30*t})}},
{name:'thread1',dur:0.3,ease:ease.outBack,pose:(t,i)=>{setPose({bodyLean:20+40*t,hipShift:-10-30*t,headBob:-5+15*t,legL:{thigh:-50*t,shin:30*t,foot:-15*t},legR:{thigh:20*t,shin:-40*t,foot:10*t},wingSpread:30+40*t});if(t>0.85)spawnImpact('L')}},
{name:'thread2',dur:0.3,ease:ease.outBack,pose:(t,i)=>{setPose({bodyLean:60-80*t,hipShift:-40+60*t,headBob:10-20*t,legL:{thigh:20*t,shin:-40*t,foot:10*t},legR:{thigh:-50*t,shin:30*t,foot:-15*t},wingSpread:70-40*t});if(t>0.85)spawnImpact('R')}},
{name:'thread3',dur:0.3,ease:ease.outBack,pose:(t,i)=>{setPose({bodyLean:-20+40*t,hipShift:20-30*t,headBob:-10+15*t,legL:{thigh:-50*t,shin:30*t,foot:-15*t},legR:{thigh:20*t,shin:-40*t,foot:10*t},wingSpread:30+40*t});if(t>0.85)spawnImpact('L')}},
{name:'exit',dur:0.35,ease:ease.outElastic,pose:(t,i)=>{setPose({bodyLean:20*(1-t),hipShift:-10*(1-t),headBob:-5*(1-t),wingSpread:30*(1-t),legL:{thigh:-50*(1-t),shin:30*(1-t),foot:-15*(1-t)},legR:{thigh:20*(1-t),shin:-40*(1-t),foot:10*(1-t)}})}}
]},
{name:'PRETZEL',beats:3,phases:[
{name:'coil',dur:0.3,ease:ease.inCubic,pose:(t,i)=>{setPose({bodyLean:-30*t,hipShift:20*t,headBob:-10*t,wingSpread:20*t,legL:{thigh:-40*t,shin:60*t,foot:0},legR:{thigh:40*t,shin:-60*t,foot:0}});if(t>0.9)spawnImpact('BOTH')}},
{name:'twist',dur:0.5,ease:ease.linear,pose:(t,i)=>{setPose({bodyLean:-30+360*t,hipShift:20*Math.cos(t*Math.PI*2),headBob:-10,wingSpread:20,legL:{thigh:-40,shin:60,foot:0},legR:{thigh:40,shin:-60,foot:0}});spawnMotionLines(t)}},
{name:'uncoil',dur:0.4,ease:ease.outElastic,pose:(t,i)=>{setPose({bodyLean:330*(1-t),hipShift:20*(1-t),headBob:-10*(1-t),wingSpread:20*(1-t),legL:{thigh:-40*(1-t),shin:60*(1-t),foot:0},legR:{thigh:40*(1-t),shin:-60*(1-t),foot:0}})}}
]}
],
freestyle:[
// Will be populated dynamically
]
};
// Build freestyle pool
moves.freestyle=[...moves.foundation,...moves.power,...moves.flow];
// ===== POSE APPLICATION =====
function setPose(p){
const i=intensity/10;
// Body
if(p.bodyLean!==undefined) bird.style.transform=`rotate(${p.bodyLean*i}deg) translateY(${p.hipShift*i}px)`;
if(p.hipShift!==undefined) shadow.setAttribute('transform',`translate(${p.hipShift*i*0.5},0) scaleX(${1+Math.abs(p.bodyLean)*0.002})`);
// Head
if(p.headBob!==undefined){
const hb=p.headBob*i;
headShape.setAttribute('transform',`translate(0,${hb})`);
beak.setAttribute('transform',`translate(0,${hb*0.5})`);
eye.setAttribute('cy',-54+hb);
pupil.setAttribute('cy',-54+hb);
eyeShine.setAttribute('cy',-56+hb);
brow.setAttribute('d',`M-14,${-58+hb*0.5} Q-2,${-52+hb*0.5} 10,${-58+hb*0.5}`);
}
// Wings
if(p.wingSpread!==undefined){
const ws=p.wingSpread*i;
wingL.setAttribute('transform',`translate(-30,5) rotate(${-15-ws}) scale(${1+ws*0.005},${1-ws*0.002})`);
wingR.setAttribute('transform',`translate(30,5) rotate(${15+ws}) scale(${1+ws*0.005},${1-ws*0.002})`);
}
// Tail
if(p.tailFan!==undefined){
const tf=p.tailFan*i;
tail1.setAttribute('d',`M-8,10 Q${-25-tf},5 ${-30-tf},15 Q${-22-tf},20 -8,25 Z`);
tail2.setAttribute('d',`M0,10 Q${-18-tf*0.7},12 ${-22-tf},22 Q${-14-tf*0.5},24 0,28 Z`);
tail3.setAttribute('d',`M8,10 Q${25+tf},5 ${30+tf},15 Q${22+tf},20 8,25 Z`);
}
// Legs
applyLeg('L',p.legL,i);
applyLeg('R',p.legR,i);
// Belly squash
if(p.bodyLean!==undefined){
const squash=1-Math.abs(p.bodyLean)*0.001*i;
belly.setAttribute('transform',`scale(${1+squash*0.1},${1-squash*0.1})`);
}
}
function applyLeg(side,leg,i){
if(!leg) return;
const thigh=document.getElementById(`thigh${side}`), shin=document.getElementById(`shin${side}`), foot=document.getElementById(`foot${side}`);
const claw1=document.getElementById(`claw${side}1`), claw2=document.getElementById(`claw${side}2`);
const s=side==='L'?-1:1;
if(leg.thigh!==undefined){
const a=leg.thigh*i*s;
thigh.setAttribute('d',`M${12*s},30 Q${15*s+a*0.3},${45+a*0.2} ${10*s+a*0.5},${58+a*0.5}`);
}
if(leg.shin!==undefined){
const a=leg.shin*i*s;
shin.setAttribute('d',`M${10*s},58 Q${8*s+a*0.2},${72+a*0.3} ${5*s+a*0.4},${85+a*0.5}`);
}
if(leg.foot!==undefined){
const a=leg.foot*i*s;
foot.setAttribute('d',`M${5*s},85 Q${15*s+a},90 ${20*s+a*1.5},92 Q${10*s+a*0.5},88 ${5*s},85 Z`);
claw1.setAttribute('d',`M${12*s},92 Q${18*s+a*1.2},100 ${16*s+a},105`);
claw2.setAttribute('d',`M${5*s},92 Q${2*s+a*0.5},100 ${3*s+a*0.3},105`);
}
}
// ===== IMPACT & MOTION =====
function spawnImpact(side){
const count=3+intensity;
for(let i=0;i<count;i++){
const ang=(side==='L'?-1:side==='R'?1:0)*(Math.PI/4)+(Math.random()-0.5)*0.8;
const spd=2+Math.random()*4*intensity/10;
const x=(side==='L'?-15:side==='R'?15:0)+Math.cos(ang)*20;
const y=90+Math.sin(ang)*20;
const p=document.createElementNS('http://www.w3.org/2000/svg','circle');
p.setAttribute('cx',x);p.setAttribute('cy',y);p.setAttribute('r',1.5+Math.random()*2);
p.setAttribute('fill','var(--accent)');p.setAttribute('opacity',0.8);
particlesG.appendChild(p);
particles.push({el:p,x,y,vx:Math.cos(ang)*spd,vy:Math.sin(ang)*spd,life:1,decay:0.02+Math.random()*0.03});
}
// Screen shake
bird.style.transition='transform 0.03s';
bird.style.transform+=` translate(${(Math.random()-0.5)*4}px,${(Math.random()-0.5)*3}px)`;
setTimeout(()=>bird.style.transition='',30);
// Flash
svg.style.filter='url(#impactFlash)';
setTimeout(()=>svg.style.filter='',50);
}
function spawnMotionLines(t){
if(motionLineTimer>0) return;
motionLineTimer=3;
const angle=currentMove?currentMove.phases.find(p=>p.name==='spin1'||p.name==='spin'||p.name==='twist')?0:0:0;
[ml1,ml2,ml3,ml4].forEach((ml,i)=>{
const a=(i*Math.PI/2)+t*Math.PI*4;
const len=40+intensity*5;
ml.setAttribute('x1',Math.cos(a)*20);ml.setAttribute('y1',Math.sin(a)*20);
ml.setAttribute('x2',Math.cos(a)*(20+len));ml.setAttribute('y2',Math.sin(a)*(20+len));
ml.style.opacity=0.6;
});
motionLines.style.opacity=0.6;
}
// ===== MOVE QUEUE =====
function pickNextMove(){
const pool=moves[style]||moves.freestyle;
const weights=pool.map(m=>m.name.includes('FREEZE')||m.name.includes('SPIN')||m.name.includes('WINDMILL')||m.name.includes('AIR')?intensity:10-intensity);
let sum=weights.reduce((a,b)=>a+b,0), r=Math.random()*sum;
for(let i=0;i<pool.length;i++){r-=weights[i];if(r<=0)return pool[i];}
return pool[0];
}
function queueMove(move){
moveQueue.push({...move,phases:move.phases.map(p=>({...p,elapsed:0,done:false}))});
}
function startMove(move){
currentMove={...move,phases:move.phases.map(p=>({...p,elapsed:0,done:false})),phaseIndex:0};
moveProgress=0;moveStartTime=performance.now();
statusEl.textContent=move.name;
// Beat sync
lastBeat=moveStartTime;
}
// ===== MAIN LOOP =====
function tick(now){
// Update beat interval from BPM
beatInterval=60000/bpm;
swingOffset=swing*0.5; // 0-0.5
// Auto queue
if(auto && !frozen && moveQueue.length<2 && (!currentMove || moveProgress>0.7)){
queueMove(pickNextMove());
}
// Start next move
if(!currentMove && moveQueue.length){
startMove(moveQueue.shift());
}
if(currentMove && !frozen){
const phase=currentMove.phases[currentMove.phaseIndex];
const phaseDur=phase.dur*beatInterval*(1+swingOffset*(Math.random()-0.5));
phase.elapsed+=now-(lastBeat||now);
lastBeat=now;
const t=Math.min(1,phase.elapsed/phaseDur);
const eased=phase.ease(t);
phase.pose(eased,intensity/10);
if(t>=1){
phase.done=true;
if(phase.onEnd) phase.onEnd();
currentMove.phaseIndex++;
if(currentMove.phaseIndex>=currentMove.phases.length){
currentMove=null;
}else{
phase.elapsed=0;
}
}
moveProgress=currentMove?(currentMove.phaseIndex+t)/currentMove.phases.length:0;
}
// Particles
for(let i=particles.length-1;i>=0;i--){
const p=particles[i];
p.x+=p.vx;p.y+=p.vy;p.vy+=0.15;p.life-=p.decay;
p.el.setAttribute('cx',p.x);p.el.setAttribute('cy',p.y);p.el.setAttribute('opacity',p.life*0.8);
if(p.life<=0){p.el.remove();particles.splice(i,1);}
}
// Motion lines fade
if(motionLineTimer>0){
motionLineTimer--;
motionLines.style.opacity=Math.max(0,motionLineTimer/3*0.6);
}else{
motionLines.style.opacity=0;
}
// Eye tracking
const eyeTargetX=currentMove?Math.sin(now/200)*2:0;
pupil.setAttribute('cx',-2+eyeTargetX);
eyeShine.setAttribute('cx',-4+eyeTargetX*0.5);
requestAnimationFrame(tick);
}
// ===== CONTROLS =====
bpmIn.oninput=e=>{bpm=+e.target.value;bpmVal.textContent=bpm};
swingIn.oninput=e=>{swing=+e.target.value/100;swingVal.textContent=Math.round(swing*100)+'%'};
styleIn.onchange=e=>{style=e.target.value;moveQueue=[];if(currentMove)currentMove=null};
intensityIn.oninput=e=>{intensity=+e.target.value;intVal.textContent=intensity};
callBtn.onclick=()=>{if(!frozen)queueMove(pickNextMove())};
freezeBtn.onclick=()=>{frozen=!frozen;freezeBtn.textContent=frozen?'RELEASE':'FREEZE';freezeBtn.style.background=frozen?'var(--ink)':'var(--accent)';freezeBtn.style.color=frozen?'var(--bg)':'#0a0a0a'};
autoIn.onchange=e=>{auto=e.target.callBtn.disabled=!auto};
// Init
setPose({bodyLean:0,hipShift:0,headBob:0,wingSpread:0,tailFan:0,legL:{thigh:0,shin:0,foot:0},legR:{thigh:0,shin:0,foot:0}});
queueMove(pickNextMove());
requestAnimationFrame(tick);
</script>
</body>
</html>
The notes
-
Move set & weight timing: Six moves across three styles — Foundation (Indian Step, Crossover, 6-Step), Power (Windmill, Headspin, Air Freeze), Flow (Thread, Pretzel) — plus Freestyle mixing all. Weight comes from phase-based easing: anticipation uses
inCubic(slow commitment), the hit usesoutBack(overshoot = mass stopping), recovery usesoutElastic/outBounce(residual energy dissipating). Each phase runs on beat divisions, not wall-clock time, so tempo changes preserve the "feel" — a 160 BPM windmill still has the same anticipation/recovery ratio as 80 BPM, just faster. -
Controls: BPM (60–160) and Swing (0–50%) retime the beat grid live. Style dropdown switches move pools — Foundation stays upright, Power goes to floor/spins, Flow threads legs through. Intensity (1–10) scales pose amplitude, particle count, and move selection bias (high = more power moves). "Call Move" queues one move manually; "Freeze" locks the current pose mid-air; "Auto" toggles the sequencer. The status line calls out the move name like a cypher MC.
-
Would fix: The SVG pose system is imperative and repetitive — a proper rig with FK/IK chains and procedural feather secondary motion would let me author moves as keyframe data instead of math functions. Also the particle system allocates DOM nodes per frame; a canvas layer or GPU instancing would handle 60fps at high intensity without GC spikes.
Attachments
nvidia/nemotron-3-ultra-550b-a55b:free — page