Run Detail
completedinklingRecorded 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
93.8s
Total Tokens
9,548
Input Tokens
305
Output Tokens
9,243
Reasoning Tokens
3,514
Reasoning Effort
default
Est. Cost
$0.0377
Started
11/6/2026, 1:17:29 PM
OR Provider
Together
Finish Reason
stop
Generation ID
gen-1793971048-JTcvwI7o3xkVSI4PBJEI
Turns (1)
Turn #1
305 in9,243 out3,514 reasoning9,548 total93.8s
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 sharp-angled, ink-brush crow—geometric body, blade-like beak, one glowing cyan eye—dancing on a dark textured floor. It moves like a breaker: heavy drops, circular footwork, sudden freezes, and slow recoveries that feel like real weight rather than smooth loops.
The page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Break Bird</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;700&display=swap');
/* Note: using system font fallback to avoid external dependency, but keeping import for style if allowed. Actually rules say no external. Removing import. */
</style>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #060a12;
color: #e8e8e8;
font-family: 'Courier New', Courier, monospace;
overflow: hidden;
height: 100vh;
width: 100vw;
}
canvas {
display: block;
position: fixed;
top: 0; left: 0;
z-index: 1;
}
.ui {
position: fixed;
bottom: 24px;
left: 24px;
z-index: 10;
background: rgba(6, 10, 18, 0.75);
backdrop-filter: blur(12px) saturate(1.2);
border: 1px solid rgba(0, 240, 255, 0.25);
border-radius: 16px;
padding: 20px 24px;
max-width: 340px;
box-shadow: 0 0 40px rgba(0, 240, 255, 0.08), inset 0 0 20px rgba(0, 240, 255, 0.03);
}
.ui h1 {
font-size: 14px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #00f0ff;
margin-bottom: 4px;
font-weight: 700;
}
.ui .sub {
font-size: 10px;
color: #8892a8;
margin-bottom: 16px;
letter-spacing: 0.05em;
}
.control {
margin-bottom: 14px;
}
.control label {
display: block;
font-size: 10px;
color: #8892a8;
margin-bottom: 6px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.control input[type="range"] {
width: 100%;
height: 4px;
background: rgba(255,255,255,0.1);
border-radius: 2px;
outline: none;
-webkit-appearance: none;
}
.control input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px; height: 14px;
border-radius: 50%;
background: #00f0ff;
cursor: pointer;
box-shadow: 0 0 10px rgba(0,240,255,0.5);
}
.control input[type="color"] {
width: 100%;
height: 28px;
border: none;
background: none;
cursor: pointer;
}
.btn-row {
display: flex;
gap: 8px;
margin-top: 4px;
}
button {
flex: 1;
background: rgba(0, 240, 255, 0.1);
border: 1px solid rgba(0, 240, 255, 0.3);
color: #00f0ff;
padding: 8px 0;
font-family: inherit;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
border-radius: 6px;
cursor: pointer;
transition: background 0.2s;
}
button:hover {
background: rgba(0, 240, 255, 0.25);
}
button.active {
background: #00f0ff;
color: #060a12;
font-weight: bold;
}
.status {
margin-top: 14px;
padding-top: 10px;
border-top: 1px solid rgba(255,255,255,0.05);
font-size: 11px;
color: #e8e8e8;
min-height: 1.2em;
}
.status .move-name {
color: #00f0ff;
font-weight: bold;
}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div class="ui">
<h1>Break Bird</h1>
<div class="sub">Geometric crow / Ink on dark paper</div>
<div class="control">
<label for="bpm">Tempo (BPM)</label>
<input type="range" id="bpm" min="60" max="160" value="95" step="5">
</div>
<div class="control">
<label for="energy">Energy / Amplitude</label>
<input type="range" id="energy" min="0.2" max="1.5" value="1" step="0.1">
</div>
<div class="control">
<label for="accent">Accent Color</label>
<input type="color" id="accent" value="#00f0ff">
</div>
<div class="btn-row">
<button id="btnDrop">Drop</button>
<button id="btnFreeze">Freeze</button>
<button id="btnChaos">Chaos</button>
</div>
<div class="status">
<span class="move-name" id="moveName">TOPROCK</span> — <span id="beatCount">0</span> beats
</div>
</div>
<script>
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
// Resize
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();
// State
let bpm = 95;
let energy = 1.0;
let accent = '#00f0ff';
let chaos = false;
let forcedState = null;
let forcedTimer = 0;
const states = {
TOPROCK: { name: 'TOPROCK', dur: 4 },
DROP: { name: 'DROP', dur: 1 },
DOWNROCK: { name: 'DOWNROCK', dur: 4 },
FREEZE: { name: 'FREEZE', dur: 2 },
RECOVER: { name: 'RECOVER', dur: 2 }
};
let currentState = 'TOPROCK';
let stateProgress = 0; // 0..1 within state
let beatInState = 0;
let totalBeats = 0;
let lastBeatTime = 0;
let beatInterval = 60000 / 95;
let mouseX = window.innerWidth / 2;
let mouseY = window.innerHeight / 2;
window.addEventListener('mousemove', e => {
mouseX = e.clientX;
mouseY = e.clientY;
});
// Controls
document.getElementById('bpm').addEventListener('input', e => {
bpm = parseInt(e.target.value);
beatInterval = 60000 / bpm;
});
document.getElementById('energy').addEventListener('input', e => {
energy = parseFloat(e.target.value);
});
document.getElementById('accent').addEventListener('input', e => {
accent = e.target.value;
});
document.getElementById('btnDrop').addEventListener('click', () => {
forcedState = 'DROP';
forcedTimer = 2; // beats
stateProgress = 0;
beatInState = 0;
});
document.getElementById('btnFreeze').addEventListener('click', () => {
forcedState = 'FREEZE';
forcedTimer = 3;
stateProgress = 0;
beatInState = 0;
});
document.getElementById('btnChaos').addEventListener('click', () => {
chaos = !chaos;
document.getElementById('btnChaos').classList.toggle('active', chaos);
});
// Helper easing
function easeInBack(t) { return 1 + 2.7 * t * t * t - 2.7 * t * t; }
function easeOutBounce(t) {
const n1 = 7.5625, d1 = 2.75;
if (t < 1/2.75) return n1 * t * t;
else if (t < 2/2.75) return n1 * (t -= 1.5/2.75) * t + 0.75;
else if (t < 2.5/2.75) return n1 * (t -= 2.25/2.75) * t + 0.9375;
else return n1 * (t -= 2.625/2.75) * t + 0.984375;
}
function easeWeight(t) {
// Sharp anticipation, quick impact, slow recovery
return t < 0.3 ? easeInBack(t/0.3) * 0.3 : 0.3 + (1 - Math.pow(1 - (t-0.3)/0.7, 3)) * 0.7;
}
// Bird pose generator
function getPose(stateName, p, beatPhase) {
// p: 0..1 progress through state
// beatPhase: 0..1 within current beat
const pose = {
cx: canvas.width / 2,
cy: canvas.height / 2 + 40,
scale: 1,
headRot: 0,
bodyRot: 0,
headY: 0,
bodyY: 0,
leftLeg: { hip: 0, knee: 0, footX: 0, footY: 0 },
rightLeg: { hip: 0, knee: 0, footX: 0, footY: 0 },
leftWing: { angle: 0, spread: 0 },
rightWing: { angle: 0, spread: 0 },
beakOpen: 0,
eyeScale: 1
};
const e = energy;
const cx = pose.cx;
const cy = pose.cy;
if (stateName === 'TOPROCK') {
// Standing, stepping, head bob
const bob = Math.sin(p * Math.PI * 2) * 15 * e;
pose.bodyY = bob;
pose.headY = bob * 0.8;
pose.headRot = Math.sin(p * Math.PI * 4) * 0.15 * e;
// Legs stepping
const step = Math.sin(p * Math.PI * 2) * 0.5 + 0.5;
pose.leftLeg.hip = -0.3 + step * 0.6;
pose.rightLeg.hip = 0.3 - step * 0.6;
pose.leftLeg.knee = 0.4 - step * 0.3;
pose.rightLeg.knee = 0.4 - (1-step) * 0.3;
pose.leftLeg.footY = 60 + Math.abs(Math.sin(p * Math.PI * 2)) * 10;
pose.rightLeg.footY = 60 + Math.abs(Math.sin(p * Math.PI * 2 + Math.PI)) * 10;
// Wings
pose.leftWing.angle = -0.3 + Math.sin(p * Math.PI * 3) * 0.2 * e;
pose.rightWing.angle = 0.3 - Math.sin(p * Math.PI * 3) * 0.2 * e;
pose.leftWing.spread = 0.6 + Math.sin(p * Math.PI * 2) * 0.2;
pose.rightWing.spread = 0.6 + Math.sin(p * Math.PI * 2 + Math.PI) * 0.2;
}
else if (stateName === 'DROP') {
// Falling with anticipation then impact
const fall = easeWeight(p);
pose.bodyY = fall * 120 * e;
pose.headY = fall * 100 * e;
pose.bodyRot = fall * 0.8;
pose.headRot = fall * 0.5;
pose.scale = 1 + fall * 0.2 * e;
// Legs tuck
pose.leftLeg.hip = -0.2 + fall * 0.4;
pose.rightLeg.hip = 0.2 - fall * 0.4;
pose.leftLeg.knee = 0.8 - fall * 0.6;
pose.rightLeg.knee = 0.8 - fall * 0.6;
pose.leftLeg.footY = 20 + fall * 40;
pose.rightLeg.footY = 20 + fall * 40;
// Wings spread for balance
pose.leftWing.angle = -1.2 * fall;
pose.rightWing.angle = 1.2 * fall;
pose.leftWing.spread = 1.2 * fall;
pose.rightWing.spread = 1.2 * fall;
}
else if (stateName === 'DOWNROCK') {
// On floor, circular footwork
const cycle = p * Math.PI * 4;
pose.bodyY = 80 + Math.sin(p * Math.PI * 2) * 10 * e;
pose.bodyRot = Math.sin(p * Math.PI * 2) * 0.1;
pose.headRot = Math.sin(p * Math.PI * 3) * 0.2;
// 6-step style circular motion
const legPhase = p * Math.PI * 6;
pose.leftLeg.hip = Math.sin(legPhase) * 0.5;
pose.rightLeg.hip = Math.sin(legPhase + Math.PI) * 0.5;
pose.leftLeg.knee = 0.6 + Math.cos(legPhase) * 0.3;
pose.rightLeg.knee = 0.6 + Math.cos(legPhase + Math.PI) * 0.3;
pose.leftLeg.footY = 40 + Math.abs(Math.sin(legPhase)) * 20;
pose.rightLeg.footY = 40 + Math.abs(Math.sin(legPhase + Math.PI)) * 20;
// Wings on ground supporting
pose.leftWing.angle = -0.8 + Math.sin(p * Math.PI * 2) * 0.2;
pose.rightWing.angle = 0.8 - Math.sin(p * Math.PI * 2) * 0.2;
pose.leftWing.spread = 0.9;
pose.rightWing.spread = 0.9;
}
else if (stateName === 'FREEZE') {
// Hold pose with breathing
const breath = Math.sin(p * Math.PI * 2) * 0.05;
pose.bodyY = 60 + breath * 20 * e;
pose.bodyRot = 0.3 + breath;
pose.headRot = -0.4;
// One leg high
pose.leftLeg.hip = -0.6;
pose.leftLeg.knee = 0.2;
pose.leftLeg.footY = -80 * e;
pose.rightLeg.hip = 0.4;
pose.rightLeg.knee = 1.2;
pose.rightLeg.footY = 90;
pose.leftWing.angle = -0.2;
pose.rightWing.angle = 0.6;
pose.leftWing.spread = 0.5;
pose.rightWing.spread = 0.8;
}
else if (stateName === 'RECOVER') {
// Pushing up and standing
const up = easeOutBounce(p);
pose.bodyY = 80 - up * 80 * e;
pose.bodyRot = 0.3 - up * 0.3;
pose.headRot = -0.4 + up * 0.4;
pose.leftLeg.hip = -0.6 + up * 0.3;
pose.rightLeg.hip = 0.4 - up * 0.1;
pose.leftLeg.knee = 0.2 + up * 0.2;
pose.rightLeg.knee = 1.2 - up * 0.8;
pose.leftLeg.footY = -80 * e + up * 140 * e;
pose.rightLeg.footY = 90 - up * 30;
pose.leftWing.angle = -0.2 + up * 0.1;
pose.rightWing.angle = 0.6 - up * 0.3;
}
// Mouse influence: head looks toward mouse slightly
const dx = (mouseX - cx) / canvas.width;
const dy = (mouseY - cy) / canvas.height;
pose.headRot += dx * 0.15 * e;
return pose;
}
// Drawing
function drawBird(pose) {
const cx = pose.cx;
const cy = pose.cy;
const s = pose.scale;
ctx.save();
ctx.translate(cx, cy);
ctx.scale(s, s);
ctx.rotate(pose.bodyRot);
// Shadow
ctx.fillStyle = 'rgba(0, 240, 255, 0.08)';
ctx.beginPath();
ctx.ellipse(0, 70, 40, 15, 0, 0, Math.PI * 2);
ctx.fill();
// Body
ctx.strokeStyle = '#e8e8e8';
ctx.lineWidth = 4;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
// Main body oval
ctx.beginPath();
ctx.ellipse(0, pose.bodyY, 35, 45, 0, 0, Math.PI * 2);
ctx.stroke();
// Head
ctx.save();
ctx.translate(0, pose.headY - 35);
ctx.rotate(pose.headRot);
// Head shape (diamond-ish)
ctx.beginPath();
ctx.moveTo(0, -25);
ctx.lineTo(20, 0);
ctx.lineTo(0, 25);
ctx.lineTo(-20, 0);
ctx.closePath();
ctx.stroke();
// Beak (accent)
ctx.strokeStyle = accent;
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(20, 0);
ctx.lineTo(35, 5);
ctx.lineTo(20, 10);
ctx.stroke();
// Eye
ctx.fillStyle = accent;
ctx.beginPath();
ctx.arc(10, -5, 4 * pose.eyeScale, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
// Legs
ctx.strokeStyle = '#e8e8e8';
ctx.lineWidth = 3;
function drawLeg(xOff, legData) {
const hipX = xOff + legData.hip * 30;
const hipY = pose.bodyY + 20;
const kneeX = hipX + Math.sin(legData.knee) * 25;
const kneeY = hipY + Math.cos(legData.knee) * 30;
const footX = hipX + legData.footX * 0.5; // simplified
const footY = kneeY + legData.footY;
ctx.beginPath();
ctx.moveTo(hipX, hipY);
ctx.lineTo(kneeX, kneeY);
ctx.lineTo(footX, footY);
ctx.stroke();
// Foot
ctx.beginPath();
ctx.moveTo(footX - 8, footY);
ctx.lineTo(footX + 8, footY);
ctx.lineTo(footX, footY + 10);
ctx.stroke();
}
drawLeg(-25, pose.leftLeg);
drawLeg(25, pose.rightLeg);
// Wings
ctx.lineWidth = 5;
ctx.strokeStyle = '#e8e8e8';
function drawWing(xOff, wingData) {
const shoulderX = xOff;
const shoulderY = pose.bodyY - 10;
const tipX = shoulderX + Math.sin(wingData.angle) * 50 * wingData.spread;
const tipY = shoulderY - Math.cos(wingData.angle) * 40 * wingData.spread;
ctx.beginPath();
ctx.moveTo(shoulderX, shoulderY);
ctx.quadraticCurveTo(
shoulderX + Math.sin(wingData.angle + 0.3) * 30,
shoulderY - 20,
tipX, tipY
);
ctx.stroke();
}
drawWing(-30, pose.leftWing);
drawWing(30, pose.rightWing);
ctx.restore();
}
// Background and effects
function drawBackground() {
// Dark gradient
const grad = ctx.createRadialGradient(
canvas.width/2, canvas.height/2, 0,
canvas.width/2, canvas.height/2, canvas.width
);
grad.addColorStop(0, '#0a0f1a');
grad.addColorStop(1, '#03060a');
ctx.fillStyle = grad;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Subtle grid
ctx.strokeStyle = 'rgba(0, 240, 255, 0.04)';
ctx.lineWidth = 1;
const step = 60;
for (let x = 0; x < canvas.width; x += step) {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height);
ctx.stroke();
}
for (let y = 0; y < canvas.height; y += step) {
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(canvas.width, y);
ctx.stroke();
}
// Noise texture (simple)
ctx.fillStyle = 'rgba(255,255,255,0.015)';
for (let i = 0; i < 200; i++) {
const nx = Math.random() * canvas.width;
const ny = Math.random() * canvas.height;
ctx.fillRect(nx, ny, 2, 2);
}
}
// Main loop
let lastTime = 0;
function loop(timestamp) {
if (!lastTime) lastTime = timestamp;
const dt = timestamp - lastTime;
lastTime = timestamp;
// Beat logic
const now = timestamp;
if (now - lastBeatTime > beatInterval) {
beatInState++;
totalBeats++;
lastBeatTime = now;
// State progression
if (forcedState) {
forcedTimer--;
if (forcedTimer <= 0) {
forcedState = null;
}
} else {
const stateDur = chaos ? Math.floor(Math.random() * 4) + 2 : states[currentState].dur;
if (beatInState >= stateDur) {
beatInState = 0;
// Cycle through states
const keys = Object.keys(states);
const idx = keys.indexOf(currentState);
currentState = keys[(idx + 1) % keys.length];
}
}
}
// If forced, override current
const activeState = forcedState || currentState;
const stateDur = chaos ? 4 : states[activeState].dur;
stateProgress = beatInState / stateDur;
// Update UI
document.getElementById('moveName').textContent = states[activeState].name;
document.getElementById('beatCount').textContent = totalBeats;
// Draw
drawBackground();
const pose = getPose(activeState, stateProgress, (now % beatInterval) / beatInterval);
drawBird(pose);
// Accent glow near bird
ctx.save();
ctx.globalAlpha = 0.15;
ctx.fillStyle = accent;
ctx.beginPath();
ctx.arc(pose.cx, pose.cy + pose.bodyY, 120, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
</script>
</body>
</html>
The notes
- The move set cycles through toprock, drop, downrock, freeze, and recovery, with each phase using custom easing (anticipation via
easeInBack, impact viaeaseOutBounce, and slow recovery curves) so the bird hits the floor with weight and takes time to stand back up rather than sliding smoothly between poses. - The controls change tempo (BPM), energy/amplitude (scaling the motion range), accent color (repainting the beak, eye, and glow), and allow forcing a drop or freeze; the Chaos toggle randomizes state durations so the routine breaks apart.
- With more time I would add actual floor-contact detection so the feet stop precisely at the ground plane during downrock, and build a second layer of arm/wing isolation so the upper body can continue a groove while the legs execute the 6-step independently.
Attachments
thinkingmachines/inkling — page