Run Detail
completedclaude-haiku-5.5Recorded 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
198.3s
Total Tokens
44,424
Input Tokens
434
Output Tokens
43,990
Reasoning Tokens
34,744
Reasoning Effort
default
Est. Cost
$0.0220
Started
10/7/2026, 7:53:04 PM
OR Provider
Claude Platform on AWS
Finish Reason
stop
Generation ID
gen-1791402784-lQBT17lesgBLZUfArisy
Turns (1)
Turn #1
434 in43,990 out34,744 reasoning44,424 total198.2s
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
Cobalt is a plump, crested blue jay with a cream belly, an orange beak, and orange feet, drawn as flat riso-style shapes with thick ink outlines. It dances on a halftone-dot stage under a spotlight, so it reads as a bird in a cypher rather than a cartoon.
The page
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Cobalt — bird breaks</title>
<style>
html,body{margin:0;height:100%;overflow:hidden;background:#000;font:13px/1.35 ui-monospace,Menlo,Consolas,monospace;color:#15152a}
canvas#c{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:pointer}
#panel{position:fixed;left:12px;top:12px;background:rgba(255,255,255,.86);padding:10px 12px;border:2px solid #15152a;border-radius:4px;display:grid;gap:7px;min-width:210px}
#panel h1{margin:0 0 2px;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
#panel label{display:grid;gap:2px}
#panel .row{display:flex;justify-content:space-between;align-items:center;gap:8px}
#panel small{opacity:.6}
#hud{position:fixed;right:14px;bottom:12px;font-size:13px;letter-spacing:.08em;background:rgba(255,255,255,.86);padding:5px 9px;border:2px solid #15152a;color:#15152a}
button,select{font:inherit;color:#15152a}
button{border:2px solid #15152a;background:#fff;padding:3px 8px;cursor:pointer}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="panel">
<h1>Cobalt / bird breaks</h1>
<label><span>Tempo <span id="bpmv"></span></span><input id="bpm" type="range" min="70" max="150" value="100"></label>
<label><span>Energy <span id="envv"></span></span><input id="energy" type="range" min="0.4" max="1.6" step="0.05" value="1"></label>
<label>Move
<select id="move">
<option value="auto">auto (random)</option>
<option value="toprock">toprock</option>
<option value="sixstep">six-step</option>
<option value="windmill">windmill</option>
<option value="headspin">headspin</option>
<option value="flare">flare</option>
<option value="freeze">freeze</option>
</select>
</label>
<label>Palette
<select id="pal">
<option value="cobalt">cobalt</option>
<option value="night">night</option>
<option value="riso">riso</option>
</select>
</label>
<label class="row"><span>ghost trails</span><input id="trail" type="checkbox"></label>
<div class="row"><button id="pause">pause</button><small>click = stomp</small></div>
</div>
<div id="hud"></div>
<script>
'use strict';
const TAU = Math.PI * 2;
const clamp = (v, a, b) => Math.min(b, Math.max(a, v));
const $ = id => document.getElementById(id);
const cv = $('c'), ctx = cv.getContext('2d');
const tr = document.createElement('canvas'), tx = tr.getContext('2d');
const UI = {
bpm: $('bpm'), energy: $('energy'), move: $('move'), pal: $('pal'),
trail: $('trail'), pause: $('pause'), bpmv: $('bpmv'), envv: $('envv'), hud: $('hud')
};
const PALS = {
cobalt: { bg:'#f1ead9', ink:'#15152a', body:'#2a4fd8', belly:'#f4ecd8', beak:'#ffb23f', feet:'#ff7a2f',
dot:'rgba(21,21,42,0.13)', floor:'#dcd2bd', spot:'rgba(255,255,240,0.38)' },
night: { bg:'#0e1122', ink:'#05060e', body:'#3d4a86', belly:'#aab4da', beak:'#f2c94c', feet:'#ff8a4c',
dot:'rgba(190,200,255,0.12)', floor:'#161a31', spot:'rgba(170,185,255,0.16)' },
riso: { bg:'#ffe3d6', ink:'#2b1d4f', body:'#e8456f', belly:'#fff4ec', beak:'#2b1d4f', feet:'#2b1d4f',
dot:'rgba(43,29,79,0.16)', floor:'#f6c6b2', spot:'rgba(255,255,255,0.32)' }
};
let P = PALS.cobalt, patCache = null, W = 1, H = 1, DPR = 1, S = 1;
function resize() {
DPR = Math.min(2, window.devicePixelRatio || 1);
W = innerWidth; H = innerHeight;
for (const c of [cv, tr]) { c.width = Math.round(W * DPR); c.height = Math.round(H * DPR); }
ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
tx.setTransform(DPR, 0, 0, DPR, 0, 0);
S = clamp(Math.min(W, H) / 300, 0.7, 3.2);
patCache = null;
}
addEventListener('resize', resize);
function dotPattern() {
if (!patCache) {
const c = document.createElement('canvas'); c.width = c.height = 14;
const g = c.getContext('2d');
g.fillStyle = P.dot; g.beginPath(); g.arc(7, 7, 1.7, 0, TAU); g.fill();
patCache = ctx.createPattern(c, 'repeat');
}
return patCache;
}
/* ---------- rig ---------- */
// Pose channels. Angles: 0 = pointing down the body, positive swings toward +x (the bird's front).
const STANCE = { x:0, y:0, rot:0, neck:0, aL1:-0.9, aL2:-0.4, aR1:0.9, aR2:0.4,
lL1:0.12, lL2:0, lR1:-0.12, lR2:0, tail:0 };
const STIFF = { x:260, y:300, rot:220, neck:150, aL1:150, aL2:110, aR1:150, aR2:110,
lL1:200, lL2:140, lR1:200, lR2:140, tail:80 };
const KEYS = Object.keys(STIFF);
const pos = { ...STANCE }, vel = {};
KEYS.forEach(k => vel[k] = 0);
// Critically-underdamped-ish springs (zeta 0.38): each channel overshoots and settles,
// and the stiffness differs per joint, so hips lead and hands/feet follow through.
function step(target, dt) {
const n = Math.max(1, Math.ceil(dt * 240)), h = dt / n;
for (let i = 0; i < n; i++) {
for (const k of KEYS) {
const kk = STIFF[k], c = 2 * 0.38 * Math.sqrt(kk);
const a = kk * (target[k] - pos[k]) - c * vel[k];
vel[k] += a * h;
pos[k] += vel[k] * h;
}
}
}
/* ---------- moves: functions of beats-into-move (b) returning partial poses ---------- */
const MOVES = {
toprock: { len: 4, fn(b) {
const s = Math.sin(Math.PI * b), c = Math.cos(Math.PI * b);
const up = -4 * (1 - Math.cos(TAU * b)); // up on the and, down on the one
return { y: up, rot: 0.14 * s, neck: -0.15 * s,
aL1: -0.5 + 1.5 * s, aL2: -0.9 + 0.6 * s, aR1: 0.5 - 1.5 * s, aR2: 0.9 - 0.6 * s,
lL1: 0.2 + 0.35 * c, lL2: -0.45 * (1 - c) * 0.5, lR1: -0.2 - 0.35 * c, lR2: -0.45 * (1 + c) * 0.5 };
}},
sixstep: { len: 8, fn(b) {
const ph = Math.PI * b, s = Math.sin(ph), c = Math.cos(ph);
return { x: 9 * s, y: -6 * Math.abs(s), rot: 1.15 + 0.12 * c,
aL1: 0.12, aL2: 0.1, aR1: 0.12, aR2: -0.1,
lL1: 0.85 + 0.75 * c, lL2: -0.5 * Math.max(0, s) - 0.1,
lR1: -0.7 - 0.75 * c, lR2: -0.5 * Math.max(0, -s) - 0.1 };
}},
windmill: { len: 4, fn(b) {
const ph = TAU * b;
return { x: 4 * Math.sin(ph / 2), y: -18 + 3 * Math.sin(ph), rot: -b * Math.PI * 0.7,
aL1: 0.25, aL2: 0.5, aR1: -0.2, aR2: -0.5,
lL1: 1.1 + 0.45 * Math.sin(ph), lL2: -0.3, lR1: -1.1 - 0.45 * Math.sin(ph), lR2: 0.3,
tail: 0.4 * Math.sin(ph), neck: 0.2 };
}},
headspin: { len: 4, fn(b) {
const ph = TAU * b;
return { y: -26, rot: -b * Math.PI * 1.4 + 0.1 * Math.sin(ph),
aL1: -0.35, aL2: -0.5, aR1: 0.15, aR2: 0.3,
lL1: 1.0 + 0.55 * Math.sin(2 * ph), lL2: 0.2, lR1: -1.0 - 0.55 * Math.sin(2 * ph), lR2: -0.2,
neck: 0.3 * Math.sin(ph), tail: 0.5 * Math.sin(ph) };
}},
flare: { len: 4, fn(b) {
const ph = TAU * b / 2;
return { y: -12, rot: 0.7 + 0.35 * Math.sin(ph),
aL1: 0.3, aL2: 0.1, aR1: -0.1, aR2: 0.2,
lL1: 1.4 + 1.0 * Math.cos(ph), lL2: 0.7 * Math.sin(ph) - 0.2,
lR1: -1.4 + 1.0 * Math.cos(ph + Math.PI), lR2: -0.7 * Math.sin(ph) + 0.2,
tail: 0.6 * Math.cos(ph) };
}},
freeze: { len: 4, fn(b, v) {
const tr = 0.03 * Math.sin(b * 29) + 0.02 * Math.sin(b * 11); // breath and wobble on the hold
if (v === 0) return { y: -15, rot: 1.3 + tr, neck: 0.4, tail: 0.6,
aR1: 0.25, aR2: -0.25, aL1: -1.1, aL2: -0.6,
lL1: 2.5 + tr, lL2: 0.25, lR1: 2.9 - tr, lR2: -0.3 };
return { y: -24, rot: 0.5 + tr, neck: -0.2, tail: -0.3,
aL1: 0.9, aL2: 0.9, aR1: -0.2, aR2: -0.4,
lL1: 2.3 + tr, lL2: 0.1, lR1: -2.2 - tr, lR2: 0.1 };
}}
};
const WEIGHTS = { toprock: 3, sixstep: 3, windmill: 2, headspin: 2, flare: 2, freeze: 2 };
/* ---------- sequencer: setup (crouch) -> move -> recover (spring back to stance) ---------- */
let t = 0, beat = 0, hitEnv = 0, lastInt = -1, lastMove = '', paused = false, last = performance.now();
let cur = { type: 'recover', start: 0, len: 1, name: 'toprock', v: 0 };
function pickAuto() {
const bag = [];
for (const m in WEIGHTS) if (m !== lastMove) for (let i = 0; i < WEIGHTS[m]; i++) bag.push(m);
lastMove = bag[Math.floor(Math.random() * bag.length)];
return lastMove;
}
function advance() {
const nxt = cur.start + cur.len;
if (cur.type === 'recover') {
let name = UI.move.value; if (name === 'auto') name = pickAuto();
cur = { type: 'setup', start: nxt, len: 1, name, v: Math.random() < 0.5 ? 0 : 1 };
} else if (cur.type === 'setup') {
cur = { type: 'move', start: nxt, len: MOVES[cur.name].len, name: cur.name, v: cur.v };
} else {
cur = { type: 'recover', start: nxt, len: 1, name: cur.name, v: cur.v };
}
}
function target(A) {
const b = beat - cur.start;
if (cur.type === 'setup') return { ...STANCE, y: 9, neck: -0.35, tail: -0.25,
aL1: -1.5, aL2: -0.7, aR1: 1.5, aR2: 0.7, lL1: 0.55, lL2: -0.75, lR1: -0.55, lR2: -0.75 };
if (cur.type === 'recover') return { ...STANCE };
const part = MOVES[cur.name].fn(b, cur.v);
const tg = { ...STANCE };
for (const k in part) tg[k] = STANCE[k] + (part[k] - STANCE[k]) * A; // energy scales deviation
return tg;
}
/* ---------- drawing ---------- */
function drawStage(floorY) {
ctx.fillStyle = P.bg; ctx.fillRect(0, 0, W, H);
ctx.fillStyle = dotPattern(); ctx.fillRect(0, 0, W, floorY);
const g = ctx.createRadialGradient(W * 0.5, -H * 0.15, 10, W * 0.5, floorY * 0.6, H * 0.9);
g.addColorStop(0, P.spot); g.addColorStop(1, 'rgba(0,0,0,0)');
ctx.fillStyle = g; ctx.fillRect(0, 0, W, floorY);
ctx.fillStyle = P.floor; ctx.fillRect(0, floorY, W, H - floorY);
ctx.save();
ctx.beginPath(); ctx.rect(0, floorY, W, H - floorY); ctx.clip();
ctx.strokeStyle = P.ink; ctx.globalAlpha = 0.18; ctx.lineWidth = 1;
const vx = W * 0.5, vy = floorY - H * 0.35;
for (let i = -12; i <= 12; i++) { ctx.beginPath(); ctx.moveTo(vx, vy); ctx.lineTo(vx + i * W * 0.14, H); ctx.stroke(); }
for (let j = 1; j <= 8; j++) {
const y = floorY + (H - floorY) * Math.pow(j / 8, 1.8);
ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(W, y); ctx.stroke();
}
ctx.restore();
ctx.globalAlpha = 1;
ctx.fillStyle = P.ink; ctx.fillRect(0, floorY - 1, W, 2);
}
function feather(c, len, w, fill) {
c.beginPath(); c.ellipse(0, -len / 2, w, len / 2, 0, 0, TAU);
c.fillStyle = fill; c.strokeStyle = P.ink; c.lineWidth = 2.2; c.fill(); c.stroke();
}
function limb(c, ox, oy, a1, a2, l1, l2, col, w) {
const ex = ox + Math.sin(a1) * l1, ey = oy + Math.cos(a1) * l1;
const a = a1 + a2, hx = ex + Math.sin(a) * l2, hy = ey + Math.cos(a) * l2;
c.lineCap = 'round'; c.lineJoin = 'round';
c.beginPath(); c.moveTo(ox, oy); c.lineTo(ex, ey); c.lineTo(hx, hy);
c.strokeStyle = P.ink; c.lineWidth = w + 2.6; c.stroke();
c.strokeStyle = col; c.lineWidth = w; c.stroke();
return [hx, hy, a];
}
function drawBird(c, p, hipX, hipY, sq, time) {
c.save();
c.translate(hipX, hipY);
c.scale(S * (1 + sq), S * (1 - sq));
c.rotate(p.rot);
// legs (orange, two-segment)
let [fx, fy] = limb(c, -4, 0, p.lR1, p.lR2, 12, 11, P.feet, 3.6);
c.beginPath(); c.ellipse(fx + 3, fy + 0.5, 5, 2.4, 0, 0, TAU); c.fillStyle = P.feet; c.strokeStyle = P.ink; c.lineWidth = 1.6; c.fill(); c.stroke();
[fx, fy] = limb(c, 4, 0, p.lL1, p.lL2, 12, 11, P.feet, 3.6);
c.beginPath(); c.ellipse(fx + 3, fy + 0.5, 5, 2.4, 0, 0, TAU); c.fillStyle = P.feet; c.strokeStyle = P.ink; c.lineWidth = 1.6; c.fill(); c.stroke();
// tail fan
c.save(); c.translate(-17, -20); c.rotate(p.tail);
[-1.1, -0.75, -0.4].forEach(a => { c.save(); c.rotate(a); feather(c, 22, 5.5, P.body); c.restore(); });
c.restore();
// body + belly
c.beginPath(); c.ellipse(0, -26, 22, 26, 0, 0, TAU);
c.fillStyle = P.body; c.strokeStyle = P.ink; c.lineWidth = 2.6; c.fill(); c.stroke();
c.beginPath(); c.ellipse(5, -20, 13, 17, 0.1, 0, TAU);
c.fillStyle = P.belly; c.lineWidth = 2; c.fill(); c.stroke();
// back arm (behind), front arm (over body) — wings with feather tips
let [hx, hy, a] = limb(c, -9, -30, p.aL1, p.aL2, 20, 18, P.body, 7);
c.save(); c.translate(hx, hy); c.rotate(Math.PI - a); feather(c, 14, 4.5, P.body); c.restore();
[hx, hy, a] = limb(c, 9, -30, p.aR1, p.aR2, 20, 18, P.body, 7);
c.save(); c.translate(hx, hy); c.rotate(Math.PI - a); feather(c, 14, 4.5, P.body); c.restore();
// head on a neck pivot
c.save(); c.translate(5, -46); c.rotate(p.neck);
[[-7, -20, -0.75], [-4, -27, -0.3], [0, -29, 0.1]].forEach(([x, y, r]) => {
c.save(); c.translate(x, y); c.rotate(r); feather(c, 12, 3.8, P.body); c.restore();
});
c.beginPath(); c.ellipse(6, -12, 15, 14, 0, 0, TAU);
c.fillStyle = P.body; c.strokeStyle = P.ink; c.lineWidth = 2.4; c.fill(); c.stroke();
c.beginPath(); c.moveTo(19, -16); c.lineTo(31, -10); c.lineTo(19, -6); c.closePath();
c.fillStyle = P.beak; c.lineWidth = 2; c.fill(); c.stroke();
c.beginPath(); c.ellipse(10, -6, 5, 3, 0, 0, TAU); c.fillStyle = P.belly; c.fill();
const blink = (time % 3.1) < 0.09;
if (blink) { c.beginPath(); c.moveTo(8, -16); c.lineTo(16, -16); c.strokeStyle = P.ink; c.lineWidth = 1.8; c.stroke(); }
else {
c.beginPath(); c.arc(12, -16, 3.6, 0, TAU); c.fillStyle = P.ink; c.fill();
c.beginPath(); c.arc(13.4, -17.4, 1.1, 0, TAU); c.fillStyle = '#fff'; c.fill();
}
c.restore();
c.restore();
}
/* ---------- loop ---------- */
function frame(now) {
const dt = Math.min(0.05, (now - last) / 1000); last = now;
const bpm = +UI.bpm.value, A = +UI.energy.value;
if (!paused) { t += dt; beat += dt * bpm / 60; }
while (beat >= cur.start + cur.len) advance();
const bi = Math.floor(beat);
if (bi !== lastInt) {
lastInt = bi;
if (!paused) {
hitEnv = 1;
vel.y += 26 * A * (cur.type === 'move' ? 1 : 0.4); // landing impulse: weight, not wiggle
}
}
hitEnv *= Math.exp(-dt * 9);
step(target(A), dt);
const floorY = H * 0.8;
const sq = hitEnv * 0.07 * A;
const sh = clamp(1 + pos.y / 50, 0.35, 1);
const shake = hitEnv * 2.5;
const hipX = W * 0.5 + pos.x * S + Math.sin(t * 67) * shake;
const hipY = floorY - 23 * S + pos.y * S + Math.cos(t * 53) * shake * 0.6;
drawStage(floorY);
// contact shadow
ctx.save(); ctx.globalAlpha = 0.22 * sh; ctx.fillStyle = P.ink;
ctx.beginPath(); ctx.ellipse(hipX, floorY + 0.5, 52 * S * sh, 8 * S * sh, 0, 0, TAU); ctx.fill();
ctx.restore();
if (UI.trail.checked) {
tx.save(); tx.globalCompositeOperation = 'destination-out';
tx.fillStyle = 'rgba(0,0,0,0.1)'; tx.fillRect(0, 0, W, H); tx.restore();
drawBird(tx, pos, hipX, hipY, sq, t);
ctx.drawImage(tr, 0, 0, W, H);
} else {
tx.clearRect(0, 0, W, H);
}
drawBird(ctx, pos, hipX, hipY, sq, t);
const label = cur.type === 'move' ? cur.name.toUpperCase()
: cur.type === 'setup' ? 'set · ' + cur.name
: 'recover';
UI.hud.textContent = `${label} ${(bi % 4) + 1}/4 ${bpm} bpm`;
requestAnimationFrame(frame);
}
/* ---------- controls ---------- */
function syncLabels() {
UI.bpmv.textContent = UI.bpm.value;
UI.envv.textContent = (+UI.energy.value).toFixed(2);
}
UI.bpm.addEventListener('input', syncLabels);
UI.energy.addEventListener('input', syncLabels);
UI.pal.addEventListener('change', () => { P = PALS[UI.pal.value]; patCache = null; });
UI.pause.addEventListener('click', () => {
paused = !paused; UI.pause.textContent = paused ? 'play' : 'pause'; UI.pause.blur();
});
cv.addEventListener('pointerdown', () => {
hitEnv = 1; vel.y += 40 * (+UI.energy.value);
});
addEventListener('keydown', e => {
if (e.code === 'Space') { e.preventDefault(); UI.pause.click(); }
});
syncLabels();
resize();
requestAnimationFrame(frame);
</script>
</body>
</html>
The notes
- Move set and timing: Each move is a function of beats, not seconds, so it stays locked to the tempo slider. Every move gets a one-beat crouch (setup), then the move, then a one-beat recovery where the joints spring back to stance. Each joint is a damped spring (zeta about 0.38) with its own stiffness: hips are fast, hands and feet slower. The result is overshoot, follow-through, and settling, which read as weight; a plain interpolation would just arrive and stop. Each landing on the beat adds a downward velocity impulse and a squash, so the body absorbs energy instead of tweening.
- Controls: Tempo sets the beat clock for both the moves and the landings. Energy scales how far each pose deviates from stance and how hard the landings hit. Move picks auto (weighted random, never the same move twice) or one move to loop. Palette switches between cobalt, night, and riso. Ghost trails leaves a fading afterimage of the figure. Pause freezes the beat clock while the springs keep settling. Clicking the canvas stomps the bird, and Space pauses.
- Would fix with more time: The limbs are plain two-segment kinematics, so the hands don't actually plant on the floor during the floor moves and the windmill's legs don't clear the body. I'd add contact constraints so supported moves stay pinned to the floor, and a proper windmill that pivots on the shoulder rather than the hip.
Attachments
anthropic/claude-haiku-5.5 — page