Run Detail
completedox-alphaRecorded for these videos
17:31Testing Gemini 3.8 Flash on Real Coding Challenges (vs. other models)
Sep 2, 2026 · YouTube
19:45Fable 5.1 writes an animated novel using Ren'Py... did it do better than Sol Pro 5.6?
Sep 1, 2026 · YouTube
14:09Testing IBM Granite-4.2-8B! Can it name 100 women?
Aug 31, 2026 · YouTube
17:37Tencent Hy4 Preview Tested: Is It Really Better Than Kimi K3 and GLM 5.3?
Aug 28, 2026 · YouTube
23:58Qwen 3.8 Flash Tested: UI, Coding, Physics & more - compared to Opus 5, Sol Pro, Grok
Aug 27, 2026 · YouTube
14:50Stealth Ox Alpha: a new GLM model! Full test (coding & writing) against Grok, Gemini, GPT & others
Aug 21, 2026 · YouTube
21:23Giving Qwen 3.8 27B another chance (+ GLM 5.2). Testing against GPT, Gemini, Grok etc.
Aug 18, 2026 · YouTube
51:00AI Coding Showdown: Grok 4.6, Gemini 3.7, Terra-Pro, Qwen3.8 2.4TB, Muse Glimmer & more
Aug 15, 2026 · YouTube
27:51Testing Gemini 3.7 Flash: Translation, Vision, and Coding Challenges
Aug 14, 2026 · YouTube
Provider
openrouter
Challenge Version
v2.0
Turns
1
Duration
566.3s
Total Tokens
35,777
Input Tokens
1,341
Output Tokens
34,436
Reasoning Effort
medium
Cached Input Tokens
64
Est. Cost
$0.0000
Started
8/21/2026, 2:28:30 AM
OR Provider
Stealth
Finish Reason
stop
Generation ID
gen-1787279310-Rkbu9deGjnDlpi2PQbJk
Turns (1)
Turn #1
1,341 in34,436 out64 cached35,777 total566.2s
user
You illustrate for a museum of arms and armour. Your drawings hang next to the real objects, and the curator reads your labels.
Build me the armoury slider: one HTML page, one figure, three eras.
The exhibit
A single standing figure. Below it, a slider. Drag the slider and the same figure is re-equipped for the era it lands on.
That is the exhibit. It lives or dies on the drawing, so draw properly.
The three eras
You choose all three yourself, and the choosing is part of the work. Pick things you actually know — you are judged on whether the drawing is right, not on how exotic the pick was.
1. Anywhere in the last five hundred years. Any year from 1526 onwards, anywhere on earth. Your choice — but set it at least a hundred and fifty years before your second era, so nobody could confuse the two drawings.
2. About a hundred years ago. A specific year between 1910 and 1945, and a specific place. Yours to pick.
3. Sometime between 2040 and 2140. Speculative, and yours to invent — but it must read as protective equipment descended from the two eras before it, not as a costume from a film.
Name the year and the place for all three. "Seventeenth-century Europe" is not an era; 1631, Saxony is.
The hard requirements
1. One body. It is the same person all three times. Same proportions, same height, same anchor points, standing in the same place. The arms may move to hold what they are holding; the torso, head and legs stay put and stay the same size. Across the full sweep of the slider the figure must never rescale, drift across the canvas, change pose wholesale or come apart at a joint.
This is an architectural requirement, not a styling note. Build a rig — a body with named attachment points, and kit that mounts to them. Three independent drawings cross-faded into each other is the failure mode I am looking for, and it is instantly visible: the figure twitches and resizes every time the slider crosses an era.
2. Continuity and reversibility. Dragging must never make the figure jump. Between two eras there is a transition, not a cut. And the drawing is a pure function of slider position: land on the first era, drag to the third, drag back, and you get pixel-for-pixel what you had before.
Your three choices are made once, by you, while you write the file. Nothing about the figure is decided at runtime — no accumulated state, no clock, no Math.random anywhere.
3. The label. Under the figure, a label giving the year, the place, the armour by its proper name, what it is made of, and the weapon. Between eras, the label says what it is between.
The label must describe the figure actually drawn above it. If it says cuirassier's three-quarter harness I expect to see plate to the knee, not a mail shirt.
4. The weapon is dated as tightly as the armour. It is not a prop. A weapon that outlives its armour by three centuries is the same error as the armour itself being wrong.
5. No horned Viking helmets. They never existed — nineteenth-century opera costume, not archaeology. Take that as the example, not the whole rule: popular-culture armour is not armour history, and the samurai who is all lacquer and no lacing, the knight too heavy to stand up unaided, and the future soldier wearing a video game are all in the same category.
House rules
- One file. Everything inline — no CDN, no external stylesheet, font, script or image.
data:URIs are fine. - Inline SVG for the figure. Not canvas, not an image, not a font glyph — I want to open devtools and read the armour.
- No libraries. No 3D engine.
- No network at runtime.
- No
localStorage,sessionStorage, cookies orindexedDB. It runs in a sandboxed frame where touching them throws. - No build step, no server. Opened as a local file, it works.
- Return the file as exactly one fenced
htmlblock.
Answer in exactly these sections
The timeline
Your three eras, in order, one line each: the year, the place, what they are wearing, what they are carrying, and one detail a non-specialist would get wrong that you got right.
The rig
One paragraph. Your attachment points, your layer order, and what happens to the drawing at a slider position between two eras.
The file
The single fenced html block.
The weakest era
Which of your three is the shakiest historically, and why. Name the anachronism you were most tempted by. If you knowingly kept one — because the accurate version is unreadable at this size, which is a real illustrator's problem — say which and say why.
What I check
I drag the slider slowly from end to end and watch the figure's feet and shoulders for drift, twitch and rescaling. I drag back and forth across one boundary looking for anything that changes when it shouldn't. I read every label against its drawing. I open devtools and look at how the third era is built compared to the first.
That last one matters. Three is not many, and the usual failure is a beautifully rendered first era and a future soldier made of three rounded rectangles. The last era gets the same care as the first. I will drag straight to the end before I do anything else.
If you ran out of room and know it, say so in "The weakest era". A stated weakness is a finding. Quietly thinning out towards the end and writing it up as three finished drawings is the worst answer available here.
assistant
The timeline
- 1526, Kingdom of Hungary — a hussar of the border cavalry: riveted mail shirt to the knee, steel spaulders/couters/vambraces, open-faced sisak with nasal bar, painted Hungarian shield; Hungarian sabre (szablya). Detail got right: no wings and no plate cuirass — wings are a late-16th-century invention, and in 1526 the hussar's torso is mail, not plate.
- 1916, Verdun, France — a French Army infantryman (poilu): Adrian M1915 helmet, horizon-blue greatcoat and trousers, puttees, belt pouches, épée bayonet at the belt; Lebel M1886/93 rifle. Detail got right: the Adrian is 0.7 mm pressed steel against shrapnel, not a bulletproof helmet, and the uniform is horizon blue, not khaki.
- 2087, Seoul, Republic of Korea — a civil-defence responder: composite hard-shell helmet with sensor crest and mandible guard, ceramic-plate carrier over soft armour, lamellar UHMWPE skirt to the knee, titanium forearm shells and knee caps; suppressed caseless carbine. Detail got right: no exoskeleton, no glow — passive, strapped-on protective equipment that visibly descends from the Adrian's crest and the mail skirt.
The rig
The body is drawn once — head, neck, torso, legs, feet — and never moves or rescales. Limbs are nested transform groups with named pivots: armL rotates about the shoulder (178,130), forearmL about the elbow (162,213), same on the right; hands and all hand-held weapons live inside the forearm groups so they follow the joints. Kit is not three drawings but ~40 mounted pieces, each tagged .k0/.k1/.k2 and parented to the body part it sits on (mail shirt on the torso group, vambraces inside the forearm groups, helmets in a headgear layer above the head). At slider position t each era's weight is a pure triangular function of t (they always sum to 1); kit pieces get that weight as opacity, and the four joint angles are the same weighted sums of three fixed poses — so between eras you see one steady body dissolving from one harness into the next, with arms gliding between holds. Every pixel is a pure function of the slider; there is no state, no clock, no randomness.
The file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Armoury Slider — one body, three eras</title>
<style>
html,body{margin:0;padding:0;background:#17181b;color:#d8d4c8;
font-family:Georgia,'Times New Roman',serif;}
.wrap{max-width:520px;margin:0 auto;padding:22px 14px 40px;}
h1{font-size:17px;letter-spacing:.22em;text-transform:uppercase;
text-align:center;font-weight:normal;color:#b9b2a0;margin:6px 0 2px;}
.sub{text-align:center;font-size:12px;color:#7d786c;font-style:italic;margin-bottom:10px;}
figure{margin:0;}
svg{display:block;width:100%;height:auto;background:#1d1e22;
border:1px solid #2c2d33;border-radius:3px;}
.controls{margin:14px 0 4px;}
input[type=range]{width:100%;accent-color:#a89a6a;cursor:ew-resize;}
.ticks{display:flex;justify-content:space-between;font-size:11.5px;color:#8d8778;}
.ticks span{cursor:pointer;padding:2px 4px;border-bottom:1px dotted #55503f;}
.ticks span:hover{color:#d8d4c8;}
#label{margin-top:14px;border:1px solid #33342f;background:#1f2019;
padding:12px 16px;border-radius:3px;min-height:96px;}
#l-era{font-size:14px;color:#e4ddc8;letter-spacing:.04em;margin-bottom:6px;}
#l-era b{color:#c9b98a;font-weight:normal;}
#l-body{font-size:12.5px;line-height:1.55;color:#a9a494;}
#l-body i{color:#8d8778;}
</style>
</head>
<body>
<div class="wrap">
<h1>The Armoury Slider</h1>
<div class="sub">One body. Three eras. Drag to re-equip.</div>
<figure>
<svg viewBox="0 0 420 660" aria-label="Standing figure re-equipped by era">
<defs>
<pattern id="mail" width="8" height="7" patternUnits="userSpaceOnUse">
<rect width="8" height="7" fill="#5f636b"/>
<circle cx="2" cy="2" r="2.4" fill="none" stroke="#9096a0" stroke-width="1"/>
<circle cx="6" cy="5.5" r="2.4" fill="none" stroke="#878d97" stroke-width="1"/>
</pattern>
</defs>
<!-- floor -->
<rect x="90" y="612" width="240" height="22" fill="#232428"/>
<ellipse cx="210" cy="612" rx="105" ry="9" fill="#000" opacity=".3"/>
<!-- ============ BASE BODY (never moves, never rescales) ============ -->
<g id="body">
<!-- legs -->
<path d="M196,315 L197,450" stroke="#4b4e57" stroke-width="23" stroke-linecap="round"/>
<path d="M197,450 L197,583" stroke="#4b4e57" stroke-width="15" stroke-linecap="round"/>
<path d="M224,315 L223,450" stroke="#4b4e57" stroke-width="23" stroke-linecap="round"/>
<path d="M223,450 L223,583" stroke="#4b4e57" stroke-width="15" stroke-linecap="round"/>
<path d="M188,580 L203,580 L205,597 Q206,608 193,608 L173,608 Q170,600 179,596 Z" fill="#33363c" stroke="#1f2126"/>
<path d="M217,580 L232,580 L241,596 Q250,600 247,608 L227,608 Q214,608 215,597 Z" fill="#33363c" stroke="#1f2126"/>
<!-- torso -->
<path d="M176,134 Q176,120 194,118 L226,118 Q244,120 244,134 L241,240 L243,298 Q243,320 210,332 Q177,320 177,298 L179,240 Z"
fill="#4b4e57" stroke="#2b2d33"/>
<!-- head + neck -->
<rect x="203" y="98" width="14" height="20" fill="#c8a184"/>
<ellipse cx="210" cy="80" rx="19" ry="26" fill="#c8a184" stroke="#8a6a4e"/>
<path d="M210,72 Q207,80 209,85" stroke="#8a6a4e" stroke-width="1.2" fill="none"/>
<!-- ============ LEFT ARM (pivot 178,130 / elbow 162,213) ============ -->
<g id="armL">
<path d="M178,132 L162,213" stroke="#4b4e57" stroke-width="18" stroke-linecap="round"/>
<path class="k0" d="M178,132 L162,213" stroke="url(#mail)" stroke-width="19" stroke-linecap="round"/>
<path class="k0" d="M164,120 Q178,108 194,120 L192,138 Q178,128 166,140 Z" fill="#b9bec6" stroke="#6d737d"/>
<path class="k1" d="M178,132 L162,213" stroke="#8593ad" stroke-width="19" stroke-linecap="round"/>
<path class="k2" d="M166,122 Q178,112 192,122 L190,136 Q178,128 168,138 Z" fill="#3a3f47" stroke="#23262b"/>
<g id="forearmL">
<path d="M162,213 L168,293" stroke="#4b4e57" stroke-width="15" stroke-linecap="round"/>
<path class="k0" d="M162,213 L168,293" stroke="url(#mail)" stroke-width="16" stroke-linecap="round"/>
<path class="k0" d="M152,228 L172,226 L176,284 L156,286 Z" fill="#b9bec6" stroke="#6d737d"/>
<path class="k0" d="M154,254 L174,252" stroke="#6d737d" fill="none"/>
<circle class="k0" cx="162" cy="213" r="11" fill="#b9bec6" stroke="#6d737d"/>
<path class="k1" d="M162,213 L168,293" stroke="#8593ad" stroke-width="16" stroke-linecap="round"/>
<path class="k1" d="M163,278 L173,280" stroke="#5d6a84" fill="none"/>
<path class="k2" d="M153,230 L171,228 L175,282 L157,284 Z" fill="#3a3f47" stroke="#23262b"/>
<path class="k2" d="M155,244 L173,242 M156,262 L174,260" stroke="#23262b" stroke-width="2" fill="none"/>
<circle cx="168" cy="297" r="7" fill="#c8a184" stroke="#8a6a4e"/>
<!-- Hungarian shield, strapped to the left forearm (1526) -->
<g class="k0">
<path d="M126,196 Q167,182 208,196 L208,298 Q208,322 167,331 Q126,322 126,298 Z" fill="#d8d3c8"/>
<path d="M167,186 L167,331 Q126,322 126,298 L126,196 Q146,189 167,186 Z" fill="#8c2f2f"/>
<path d="M126,196 Q167,182 208,196 L208,298 Q208,322 167,331 Q126,322 126,298 Z"
fill="none" stroke="#2a2622" stroke-width="5"/>
<circle cx="167" cy="258" r="9" fill="#9aa0a8" stroke="#5c6169"/>
</g>
</g>
</g>
<!-- ============ RIGHT ARM (pivot 242,130 / elbow 258,213) ============ -->
<g id="armR">
<path d="M242,132 L258,213" stroke="#4b4e57" stroke-width="18" stroke-linecap="round"/>
<path class="k0" d="M242,132 L258,213" stroke="url(#mail)" stroke-width="19" stroke-linecap="round"/>
<path class="k0" d="M256,120 Q242,108 226,120 L228,138 Q242,128 254,140 Z" fill="#b9bec6" stroke="#6d737d"/>
<path class="k1" d="M242,132 L258,213" stroke="#8593ad" stroke-width="19" stroke-linecap="round"/>
<path class="k2" d="M254,122 Q242,112 228,122 L230,136 Q242,128 252,138 Z" fill="#3a3f47" stroke="#23262b"/>
<g id="forearmR">
<path d="M258,213 L252,293" stroke="#4b4e57" stroke-width="15" stroke-linecap="round"/>
<path class="k0" d="M258,213 L252,293" stroke="url(#mail)" stroke-width="16" stroke-linecap="round"/>
<path class="k0" d="M248,228 L268,226 L264,284 L244,286 Z" fill="#b9bec6" stroke="#6d737d"/>
<path class="k0" d="M246,254 L266,252" stroke="#6d737d" fill="none"/>
<circle class="k0" cx="258" cy="213" r="11" fill="#b9bec6" stroke="#6d737d"/>
<path class="k1" d="M258,213 L252,293" stroke="#8593ad" stroke-width="16" stroke-linecap="round"/>
<path class="k1" d="M247,280 L257,278" stroke="#5d6a84" fill="none"/>
<path class="k2" d="M249,230 L267,228 L263,282 L245,284 Z" fill="#3a3f47" stroke="#23262b"/>
<path class="k2" d="M251,244 L265,242 M250,262 L264,260" stroke="#23262b" stroke-width="2" fill="none"/>
<circle cx="252" cy="297" r="7" fill="#c8a184" stroke="#8a6a4e"/>
<!-- sabre (1526) -->
<g class="k0">
<path d="M248,277 C246,220 241,150 231,62 L238,60 C249,148 254,220 256,277 Z"
fill="#cdd2d8" stroke="#7c828c"/>
<path d="M241,279 L263,275 L264,283 L242,287 Z" fill="#8f959e" stroke="#5c6169"/>
<rect x="248" y="282" width="8" height="30" rx="3" fill="#2e2620"/>
<circle cx="252" cy="315" r="5" fill="#8f959e" stroke="#5c6169"/>
</g>
<!-- Lebel M1886/93 (1916) -->
<g class="k1">
<path d="M251,548 L266,548 L265,596 Q258,602 252,596 Z" fill="#7a5230" stroke="#4c3118"/>
<path d="M253,548 L264,548 L262,336 L255,336 Z" fill="#7a5230" stroke="#4c3118"/>
<rect x="252" y="298" width="13" height="40" fill="#6a7078" stroke="#454a52"/>
<rect x="256" y="172" width="5" height="128" fill="#9aa0a8"/>
<rect x="254" y="165" width="8" height="8" fill="#6a7078"/>
<circle cx="267" cy="318" r="3" fill="#9aa0a8"/>
<path d="M267,318 L274,324" stroke="#9aa0a8" stroke-width="2.5"/>
<path d="M254,556 L256,360" stroke="#3a2c1c" stroke-width="2.5" fill="none"/>
</g>
<!-- caseless carbine (2087) -->
<g class="k2">
<rect x="251" y="226" width="13" height="10" fill="#23262b"/>
<circle cx="257" cy="231" r="1.5" fill="#9fb4bd"/>
<path d="M249,236 L263,236 L265,272 L251,272 Z" fill="#2e3238" stroke="#1d2024"/>
<rect x="249" y="272" width="16" height="30" fill="#3a3f47" stroke="#23262b"/>
<path d="M252,282 L262,282" stroke="#23262b"/>
<path d="M250,300 L259,300 L257,318 L249,316 Z" fill="#23262b"/>
<path d="M263,302 L272,302 L270,326 L262,326 Z" fill="#2e3238" stroke="#1d2024"/>
<rect x="254" y="302" width="5" height="164" fill="#3a3f47"/>
<rect x="251" y="466" width="12" height="34" rx="3" fill="#2e3238" stroke="#1d2024"/>
</g>
</g>
</g>
<!-- ============ HEADGEAR ============ -->
<g id="headgear">
<!-- open-faced sisak with nasal (1526) -->
<g class="k0">
<path d="M188,70 C188,44 197,36 210,36 C223,36 232,44 232,70 L237,75 Q210,82 183,75 Z"
fill="#a7adb6" stroke="#5c6169"/>
<path d="M230,68 L241,86 L231,90 Z" fill="#8f959e" stroke="#5c6169"/>
<path d="M206,74 L214,74 L213,92 L207,92 Z" fill="#a7adb6" stroke="#5c6169"/>
<circle cx="192" cy="52" r="1.5" fill="#5c6169"/>
<circle cx="210" cy="44" r="1.5" fill="#5c6169"/>
<circle cx="228" cy="52" r="1.5" fill="#5c6169"/>
</g>
<!-- Adrian M1915 (1916) -->
<g class="k1">
<path d="M186,66 C186,42 196,34 210,34 C224,34 234,42 234,66 Q210,58 186,66 Z"
fill="#7e8ba1" stroke="#525d72"/>
<path d="M205,33 L215,33 L216,62 L204,62 Z" fill="#6d7a90" stroke="#525d72"/>
<path d="M210,34 L210,60" stroke="#93a0b5" stroke-width="1.2"/>
<path d="M172,68 Q182,78 210,80 Q238,78 248,68 L244,62 Q236,72 210,74 Q184,72 176,62 Z"
fill="#7e8ba1" stroke="#525d72"/>
</g>
<!-- composite helmet with sensor crest + mandible (2087) -->
<g class="k2">
<path d="M187,70 C187,42 197,34 210,34 C223,34 233,42 233,70 L238,77 Q210,84 182,77 Z"
fill="#3a3f47" stroke="#23262b"/>
<path d="M204,32 L216,32 L217,58 L203,58 Z" fill="#59616d" stroke="#23262b"/>
<circle cx="207" cy="40" r="1.3" fill="#9fb4bd"/>
<circle cx="210" cy="46" r="1.3" fill="#9fb4bd"/>
<circle cx="213" cy="52" r="1.3" fill="#9fb4bd"/>
<rect x="231" y="58" width="5" height="14" fill="#2e3238"/>
<path d="M195,94 Q210,110 225,94 L223,103 Q210,116 197,103 Z" fill="#33373e" stroke="#23262b"/>
</g>
</g>
</g>
<!-- ============ TORSO-MOUNTED KIT ============ -->
<!-- 1526: mail shirt to the knee, belt -->
<g class="k0">
<path d="M174,126 Q210,112 246,126 L245,190 L247,300 L251,438 Q210,448 169,438 L173,300 L175,190 Z"
fill="url(#mail)" stroke="#3f434b" stroke-width="1.5"/>
<path d="M195,110 L225,110 L227,124 L193,124 Z" fill="url(#mail)" stroke="#3f434b"/>
<path d="M232,120 L245,190 L247,300 L251,438 L236,444 L234,300 L231,190 Z" fill="#000" opacity=".12"/>
<path d="M180,304 L204,304 L201,470 L187,470 Z" fill="#7c3f3a" stroke="#4c2422"/>
<path d="M216,304 L240,304 L234,470 L220,470 Z" fill="#7c3f3a" stroke="#4c2422"/>
<path d="M184,468 L202,468 L201,583 L204,597 Q205,608 192,608 L172,608 Q169,600 178,596 L186,583 Z"
fill="#241f1c" stroke="#120f0d"/>
<path d="M182,460 L204,460 L203,472 L181,472 Z" fill="#171310"/>
<path d="M218,468 L236,468 L235,583 L243,596 Q251,600 248,608 L228,608 Q215,608 216,597 L219,583 Z"
fill="#241f1c" stroke="#120f0d"/>
<path d="M216,460 L238,460 L237,472 L217,472 Z" fill="#171310"/>
<rect x="175" y="290" width="70" height="12" fill="#4a3220" stroke="#2a1c10"/>
<rect x="206" y="291" width="9" height="10" fill="#b9a15c"/>
</g>
<!-- 1916: horizon-blue greatcoat, trousers, puttees, boots, belt, bayonet -->
<g class="k1">
<path d="M180,304 L204,304 L201,560 L187,560 Z" fill="#6b7893" stroke="#4a5470"/>
<path d="M216,304 L240,304 L234,560 L220,560 Z" fill="#6b7893" stroke="#4a5470"/>
<path d="M185,556 L200,556 L199,583 L202,597 Q203,608 190,608 L172,608 Q169,600 178,596 L187,583 Z"
fill="#221d1a" stroke="#100d0b"/>
<circle cx="176" cy="606" r="1" fill="#4d4640"/><circle cx="184" cy="607" r="1" fill="#4d4640"/>
<circle cx="193" cy="607" r="1" fill="#4d4640"/><circle cx="200" cy="605" r="1" fill="#4d4640"/>
<path d="M220,556 L235,556 L234,583 L243,596 Q251,600 248,608 L230,608 Q217,608 218,597 L221,583 Z"
fill="#221d1a" stroke="#100d0b"/>
<circle cx="221" cy="605" r="1" fill="#4d4640"/><circle cx="228" cy="607" r="1" fill="#4d4640"/>
<circle cx="237" cy="607" r="1" fill="#4d4640"/><circle cx="244" cy="606" r="1" fill="#4d4640"/>
<path d="M186,468 L201,468 L200,576 L187,576 Z" fill="#a5946f" stroke="#7c6e4e"/>
<path d="M186,486 L200,485 M186,504 L200,503 M186,522 L200,521 M186,540 L200,539 M186,558 L200,557"
stroke="#7c6e4e" fill="none"/>
<path d="M219,468 L234,468 L233,576 L220,576 Z" fill="#a5946f" stroke="#7c6e4e"/>
<path d="M220,486 L234,485 M220,504 L234,503 M220,522 L234,521 M220,540 L234,539 M220,558 L234,557"
stroke="#7c6e4e" fill="none"/>
<path d="M172,128 Q210,112 248,128 L251,210 L254,300 L259,416 Q210,428 161,416 L166,300 L169,210 Z"
fill="#8593ad" stroke="#5d6a84" stroke-width="1.5"/>
<path d="M210,138 L210,420" stroke="#5d6a84" stroke-width="1.5"/>
<circle cx="214" cy="152" r="2.3" fill="#3c4456"/><circle cx="214" cy="192" r="2.3" fill="#3c4456"/>
<circle cx="214" cy="232" r="2.3" fill="#3c4456"/><circle cx="214" cy="272" r="2.3" fill="#3c4456"/>
<circle cx="214" cy="312" r="2.3" fill="#3c4456"/><circle cx="214" cy="352" r="2.3" fill="#3c4456"/>
<circle cx="214" cy="392" r="2.3" fill="#3c4456"/>
<rect x="174" y="330" width="26" height="9" fill="none" stroke="#5d6a84" stroke-width="1.5"/>
<rect x="220" y="330" width="26" height="9" fill="none" stroke="#5d6a84" stroke-width="1.5"/>
<rect x="170" y="118" width="18" height="9" fill="#6d7a94" stroke="#525d72"/>
<rect x="232" y="118" width="18" height="9" fill="#6d7a94" stroke="#525d72"/>
<path d="M193,114 L227,114 L231,131 L189,131 Z" fill="#6d7a94" stroke="#525d72"/>
<rect x="168" y="290" width="84" height="13" fill="#4a3220" stroke="#2a1c10"/>
<rect x="206" y="291" width="9" height="11" fill="#8f959e"/>
<rect x="177" y="301" width="17" height="15" fill="#3c2a1a" stroke="#241708"/>
<rect x="226" y="301" width="17" height="15" fill="#3c2a1a" stroke="#241708"/>
<rect x="167" y="300" width="10" height="10" fill="#4a3220"/>
<rect x="169" y="308" width="6" height="58" fill="#565b63" stroke="#33373e"/>
</g>
<!-- 2087: plate carrier, lamellar skirt, knees, boots -->
<g class="k2">
<rect x="196" y="110" width="28" height="10" rx="3" fill="#333947"/>
<path d="M174,126 Q210,112 246,126 L248,210 L246,302 L174,302 L172,210 Z"
fill="#4b5261" stroke="#2b2f38"/>
<rect x="178" y="116" width="13" height="22" fill="#333947"/>
<rect x="229" y="116" width="13" height="22" fill="#333947"/>
<rect x="186" y="142" width="48" height="118" rx="8" fill="#333947" stroke="#59627a" stroke-width="1.5"/>
<rect x="176" y="152" width="15" height="22" fill="#3a4150" stroke="#2b2f38"/>
<rect x="227" y="150" width="15" height="7" fill="#8b939e"/>
<path d="M176,252 L244,252 M176,268 L244,268 M176,284 L244,284" stroke="#333947" stroke-width="5"/>
<path d="M190,248 L190,256 M206,248 L206,256 M222,248 L222,256 M198,264 L198,272 M214,264 L214,272 M230,264 L230,272"
stroke="#2b2f38" stroke-width="3"/>
<path d="M172,302 L248,302 L249,324 Q239,333 229,324 Q219,333 210,324 Q200,333 191,324 Q181,333 171,324 Z"
fill="#545c6d" stroke="#23262b"/>
<path d="M171,324 L249,324 L250,347 Q240,356 230,347 Q220,356 210,347 Q200,356 190,347 Q180,356 170,347 Z"
fill="#474e5e" stroke="#23262b"/>
<path d="M170,350 L250,350 L251,373 Q241,382 231,373 Q221,382 210,373 Q199,382 189,373 Q179,382 169,373 Z"
fill="#545c6d" stroke="#23262b"/>
<path d="M169,376 L251,376 L252,399 Q242,408 232,399 Q222,408 211,399 Q200,408 190,399 Q180,408 168,399 Z"
fill="#474e5e" stroke="#23262b"/>
<path d="M168,402 L252,402 L253,425 Q243,434 233,425 Q223,434 212,425 Q201,434 191,425 Q181,434 167,425 Z"
fill="#545c6d" stroke="#23262b"/>
<path d="M167,428 L253,428 L254,451 Q244,460 234,451 Q224,460 213,451 Q202,460 192,451 Q182,460 166,451 Z"
fill="#474e5e" stroke="#23262b"/>
<circle cx="197" cy="450" r="9" fill="#3a3f47" stroke="#23262b"/>
<circle cx="223" cy="450" r="9" fill="#3a3f47" stroke="#23262b"/>
<path d="M186,556 L201,556 L200,583 L203,597 Q204,608 191,608 L172,608 Q169,600 178,596 L188,583 Z"
fill="#262a30" stroke="#17191d"/>
<path d="M176,598 Q184,594 190,598" stroke="#4a5058" fill="none"/>
<path d="M219,556 L234,556 L233,583 L243,596 Q251,600 248,608 L229,608 Q216,608 217,597 L220,583 Z"
fill="#262a30" stroke="#17191d"/>
<path d="M230,598 Q238,594 244,598" stroke="#4a5058" fill="none"/>
</g>
</svg>
</figure>
<div class="controls">
<input id="slider" type="range" min="0" max="2" step="0.002" value="0"
aria-label="Era slider, 0 to 2">
<div class="ticks">
<span data-t="0">1526 · Hungary</span>
<span data-t="1">1916 · Verdun</span>
<span data-t="2">2087 · Seoul</span>
</div>
</div>
<div id="label">
<div id="l-era"></div>
<div id="l-body"></div>
</div>
</div>
<script>
(function(){
var slider = document.getElementById('slider');
var lEra = document.getElementById('l-era');
var lBody = document.getElementById('l-body');
var k0 = Array.prototype.slice.call(document.querySelectorAll('.k0'));
var k1 = Array.prototype.slice.call(document.querySelectorAll('.k1'));
var k2 = Array.prototype.slice.call(document.querySelectorAll('.k2'));
var armL = document.getElementById('armL'), foreL = document.getElementById('forearmL');
var armR = document.getElementById('armR'), foreR = document.getElementById('forearmR');
var eras = [
{ head:'<b>1526</b> · Kingdom of Hungary — hussar of the border cavalry',
body:'<i>Armour:</i> riveted iron mail shirt to the knee, steel spaulders, couters and vambraces, '
+'open-faced <i>sisak</i> helmet with nasal bar, painted Hungarian shield of pine board and hide. '
+'<i>Materials:</i> riveted iron rings, steel plate, leather, pigskin and paint. '
+'<i>Weapon:</i> Hungarian sabre (<i>szablya</i>) — curved, single-edged, worn and held, not a later winged hussar\u2019s kit.' },
{ head:'<b>1916</b> · Verdun, France — French Army infantryman (<i>poilu</i>)',
body:'<i>Armour:</i> Adrian M1915 helmet of 0.7 mm pressed steel \u2014 shrapnel protection, not bulletproof \u2014 '
+'over horizon-blue wool greatcoat and trousers, canvas puttees, leather belt with cartridge pouches, '
+'\u00e9p\u00e9e bayonet scabbard at the hip. '
+'<i>Weapon:</i> Lebel M1886/93 rifle, 8 mm Lebel, tube magazine.' },
{ head:'<b>2087</b> · Seoul, Republic of Korea — civil-defence responder',
body:'<i>Armour:</i> composite hard-shell helmet with sensor crest and mandible guard (descended from the '
+'Adrian\u2019s comb), ceramic-plate carrier over soft armour, lamellar UHMWPE skirt to the knee '
+'(descended from the mail shirt), titanium forearm shells and knee caps. No exoskeleton, no power \u2014 '
+'straps, webbing and matte shells. '
+'<i>Weapon:</i> suppressed caseless carbine, 6.2 mm.' }
];
function between(a, b){
return '<i>Between eras \u2014</i> ' + a + ' is fading out and ' + b + ' is fading in, on the same standing body. '
+ 'Drag fully onto either era for the complete label.';
}
var bet01 = between('the hussar\u2019s mail, shield and sabre of 1526',
'the poilu\u2019s Adrian helmet, greatcoat and Lebel rifle of 1916');
var bet12 = between('the pressed steel, wool and bolt rifle of 1916',
'the composite plates, lamellar skirt and caseless carbine of 2087');
function setOp(list, v){ for (var i=0;i<list.length;i++) list[i].setAttribute('opacity', v.toFixed(3)); }
function render(){
var t = parseFloat(slider.value);
var w0 = Math.max(0, 1 - t);
var w1 = Math.max(0, 1 - Math.abs(t - 1));
var w2 = Math.max(0, Math.min(1, t - 1));
setOp(k0, w0); setOp(k1, w1); setOp(k2, w2);
// joint angles: weighted sums of the three fixed poses (pure function of t)
var aLs = w0 * 14, aLe = w0 * -80; // left: shield carry in 1526, hanging otherwise
var aRs = w0 * -8 + w2 * 3, aRe = w2 * 4; // right: sabre / rifle / carbine holds
armL.setAttribute('transform', 'rotate(' + aLs + ' 178 130)');
foreL.setAttribute('transform', 'rotate(' + aLe + ' 162 213)');
armR.setAttribute('transform', 'rotate(' + aRs + ' 242 130)');
foreR.setAttribute('transform', 'rotate(' + aRe + ' 258 213)');
if (t <= 0.02) { lEra.innerHTML = eras[0].head; lBody.innerHTML = eras[0].body; }
else if (t >= 1.98) { lEra.innerHTML = eras[2].head; lBody.innerHTML = eras[2].body; }
else if (Math.abs(t - 1) <= 0.02) { lEra.innerHTML = eras[1].head; lBody.innerHTML = eras[1].body; }
else if (t < 1) { lEra.innerHTML = 'Between eras'; lBody.innerHTML = bet01; }
else { lEra.innerHTML = 'Between eras'; lBody.innerHTML = bet12; }
}
slider.addEventListener('input', render);
var ticks = document.querySelectorAll('.ticks span');
for (var i=0;i<ticks.length;i++){
ticks[i].addEventListener('click', function(){
slider.value = this.getAttribute('data-t'); render();
});
}
render();
})();
</script>
</body>
</html>
The weakest era
1526 is the shakiest. The hussar's mail, shield, sabre and lack of wings are solid, but the exact headgear of a Mohács-era hussar is poorly documented — I drew a generic Central European open skull with nasal bar and neck flap, which is defensible but not a named, datable helmet the way the Adrian M1915 is. The anachronism I was most tempted by was the winged hussar — the romantic image, two centuries too early — and I resisted it. One knowingly kept compromise: the mail is drawn as visible rings at roughly twice true scale; real riveted mail at this figure size would read as a grey blur, so I coarsened the weave for legibility, the classic illustrator's trade. In 2087 the temptation was a powered exoskeleton with glowing optics — the video-game failure you named — and I kept it passive: straps, webbing, matte composite, a carbine that is visibly a rifle's grandchild. If anything is thin there, it's that the soft under-suit relies on the shared base body rather than its own panel detailing; the hard kit (carrier, skirt, shells, helmet) is fully drawn.
Attachments
stealth/ox-alpha — page