Run Detail

completedbeam-1.0-501b-a23b

Unscored

Every model's answer from this round

Recorded for these videos

47:51

Ranking major U.S. Open-Weights Models. (Where does Ripple 65B fit in?)

Nov 6, 2026 · YouTube

38:58

Testing Particle-1: a post-trained DeepSeek V4.1 Flash specializing in coding and efficiency

Oct 28, 2026 · YouTube

29:55

Kimi K3.1 Pro Looked Incredible. Then I Kept Testing.

Oct 26, 2026 · YouTube

16:45

DeepSeek V4.1 Flash Is Shockingly Good for the Price

Sep 10, 2026 · YouTube

17:14

How much better is GPT-6 Astra over Claude Opus 5? Real Website and Coding Tests

Sep 5, 2026 · YouTube

29:13

Implementing a multiplayer game with GPT-6 Astra (+ Gemini 3.8, Opus 5, Sol Pro)

Sep 5, 2026 · YouTube

19:42

Meta Muse Spark 1.3 Review: A Huge Leap Forward

Sep 2, 2026 · YouTube

17:31

Testing Gemini 3.8 Flash on Real Coding Challenges (vs. other models)

Sep 2, 2026 · YouTube

Provider

openrouter

Challenge Version

v3.0

Turns

Duration

196.6s

Total Tokens

36,101

Input Tokens

574

Output Tokens

35,527

Reasoning Tokens

27,432

Reasoning Effort

default

Est. Cost

$0.0357

Started

10/16/2026, 4:49:35 PM

OR Provider

Nebius

Finish Reason

stop

Generation ID

gen-1792169375-qjhovyb7dPFOLuQKvD71

Turns (1)

Turn #1

574 in35,527 out27,432 reasoning36,101 total196.6s

user

Build one self-contained HTML page for a museum armoury exhibit: a standing figure and a slider that re-equips that same figure across three periods of human history.

Choose the periods

Choose any three periods from recorded human history, anywhere in the world. Put them in chronological order and keep adjacent choices at least 100 years apart. For each, name a specific year and place; if an exact year is impossible, give the tightest defensible date range and explain it in the label.

Choose periods you can depict accurately. You are judged on the drawing as well as the interface.

Requirements

One body, one rig. Build one inline SVG body with fixed proportions and named attachment points; armour, clothing, and weapons attach to it. Arms may move to hold equipment, but the torso, head, and legs keep their size and anchors. Do not cross-fade three unrelated figures.
Smooth and repeatable. Moving the slider must not make the figure jump, rescale, or drift. Returning to a period must recreate the same result exactly. No Math.random, clocks, or accumulated state.
Accurate labels. Under the figure, show the date, place, equipment name, materials, and weapon. At an exact stop it describes that period; between stops it says which periods the drawing is between. The label must match the drawing.
Date the weapon too. It must belong to the chosen period and place.
Give every period equal care. The last stop is not allowed to become a simplified placeholder.

House rules

One HTML file. Keep CSS, JavaScript, and SVG inline.
No libraries, CDN assets, network access, canvas, raster images, or font glyphs for the figure. Do not use localStorage, sessionStorage, cookies, or indexedDB.
It must work when opened as a local file.
Return exactly these sections:

The timeline

One line per period: date, place, equipment, weapon, and one specific detail a non-specialist might miss.

The rig

One paragraph explaining the attachment points, layer order, and interpolation between periods.

The file

One fenced html block containing the complete page.

The weakest period

Name the least certain historical choice and any accuracy compromise you made for legibility.

Review

I will move the slider slowly in both directions, watch the feet and shoulders for drift, compare labels to drawings, inspect the SVG structure, and go straight to the final period before judging the rest.

assistant

The timeline

480 BCE, Thermopylae, Greece — Hoplite panoply (Corinthian helmet, linothorax, greaves) — Dory spear (xiphos sidearm) — Aspis shield uses a porpax and antilabe, and the helmet crest is horsehair.
c. 100 CE, Rome, Roman Empire — Imperial legionary kit (galea, lorica segmentata, caligae) — Pilum and gladius — Segmented plates have shoulder doublings, and the scutum carries a boss and thunderbolt-style decoration.
c. 1450, Holy Roman Empire (southern Germany) — Gothic plate armour (sallet, bevor, full plate) — Longsword — Fluted Gothic plates, sabatons, and a two-handed longsword grip.

The rig

The SVG has one fixed body: head, neck, torso, pelvis, legs, and feet never change size or position, while the left and right arms are two-segment chains pivoted at the shoulders and elbows. Named anchors include the shoulders, elbows, wrists, hips, knees, ankles, and head; armour, clothing, and weapons are nested under those anchors or the torso/leg layers, so they inherit the same transforms. Each period’s gear uses a class (p0, p1, p2) and its opacity is set from the slider position, with only adjacent periods blending between stops. Arm angles are interpolated between period poses, so equipment moves with the hands instead of cross-fading separate figures. Layer order is legs, leg gear, torso, torso gear, then arms and held weapons, keeping held equipment in front of the body.

The file

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Armoury Timeline Figure</title>
<style>
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, sans-serif;
  background: #f2efe8;
  color: #222;
}
main {
  max-width: 920px;
  margin: 0 auto;
  padding: 24px;
}
h1 {
  font-size: 1.45rem;
  margin: 0 0 14px;
}
svg {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #c9c0b0;
  border-radius: 8px;
  background: #faf7f0;
}
.controls {
  margin: 16px 0 12px;
}
.controls label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}
input[type="range"] {
  width: 100%;
}
.ticks {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: #555;
  margin-top: 4px;
}
.panel {
  background: #fff;
  border: 1px solid #d8d0c0;
  border-radius: 8px;
  padding: 16px;
}
dl {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 6px 12px;
  margin: 0;
}
dt {
  font-weight: 600;
  color: #555;
}
dd {
  margin: 0;
}
</style>
</head>
<body>
<main>
<h1>Museum Armoury: One Figure, Three Periods</h1>

<svg id="figureSvg" viewBox="0 0 460 820" role="img" aria-label="Standing figure re-equipped across three historical periods">
  <rect width="460" height="820" fill="#f7f3ea"/>
  <line x1="40" y1="745" x2="420" y2="745" stroke="#b9b0a0" stroke-width="2"/>

  <g id="legs">
    <path d="M181,410 L209,410 L204,560 L176,560 Z" fill="#d8b08a"/>
    <path d="M176,560 L204,560 L199,700 L171,700 Z" fill="#d8b08a"/>
    <path d="M165,700 L205,700 L212,722 L158,722 Z" fill="#d8b08a"/>
    <path d="M251,410 L279,410 L284,560 L256,560 Z" fill="#d8b08a"/>
    <path d="M256,560 L284,560 L289,700 L261,700 Z" fill="#d8b08a"/>
    <path d="M255,700 L295,700 L302,722 L248,722 Z" fill="#d8b08a"/>
  </g>

  <g id="legGear">
    <path class="p0" d="M170,560 L205,560 L200,700 L165,700 Z" fill="#b87333"/>
    <path class="p0" d="M255,560 L290,560 L295,700 L260,700 Z" fill="#b87333"/>

    <g class="p1">
      <path d="M168,700 L205,700 L200,718 L173,718 Z" fill="#6b4a2a"/>
      <path d="M255,700 L292,700 L297,718 L260,718 Z" fill="#6b4a2a"/>
      <line x1="175" y1="700" x2="198" y2="685" stroke="#4a3018" stroke-width="3"/>
      <line x1="185" y1="700" x2="205" y2="688" stroke="#4a3018" stroke-width="3"/>
      <line x1="262" y1="700" x2="285" y2="685" stroke="#4a3018" stroke-width="3"/>
      <line x1="272" y1="700" x2="292" y2="688" stroke="#4a3018" stroke-width="3"/>
    </g>

    <g class="p2">
      <path d="M178,410 L212,410 L206,560 L172,560 Z" fill="#b0b0b0"/>
      <path d="M248,410 L282,410 L288,560 L254,560 Z" fill="#b0b0b0"/>
      <ellipse cx="190" cy="560" rx="18" ry="12" fill="#a0a0a0"/>
      <ellipse cx="270" cy="560" rx="18" ry="12" fill="#a0a0a0"/>
      <path d="M172,560 L204,560 L199,700 L167,700 Z" fill="#a0a0a0"/>
      <path d="M256,560 L288,560 L293,700 L261,700 Z" fill="#a0a0a0"/>
      <path d="M160,700 L210,700 L218,724 L152,724 Z" fill="#909090"/>
      <path d="M250,700 L300,700 L308,724 L242,724 Z" fill="#909090"/>
    </g>
  </g>

  <g id="torsoGroup">
    <path d="M185,235 L275,235 L265,360 L195,360 Z" fill="#e8e0d0"/>
    <path d="M190,360 L270,360 L275,410 L185,410 Z" fill="#e8e0d0"/>
    <rect x="218" y="192" width="24" height="43" fill="#d8b08a"/>
    <circle cx="230" cy="150" r="40" fill="#d8b08a"/>
    <circle cx="218" cy="145" r="3" fill="#5a3a2a"/>
    <circle cx="242" cy="145" r="3" fill="#5a3a2a"/>
    <path d="M222,165 Q230,172 238,165" stroke="#5a3a2a" fill="none" stroke-width="2"/>
  </g>

  <g id="torsoGear">
    <path class="p0" d="M178,232 L282,232 L272,362 L188,362 Z" fill="#c9a961"/>
    <path class="p0" d="M178,232 L205,225 L200,255 L178,260 Z" fill="#c9a961"/>
    <path class="p0" d="M282,232 L255,225 L260,255 L282,260 Z" fill="#c9a961"/>
    <rect class="p0" x="190" y="362" width="8" height="28" fill="#b8924a"/>
    <rect class="p0" x="205" y="362" width="8" height="32" fill="#b8924a"/>
    <rect class="p0" x="220" y="362" width="8" height="34" fill="#b8924a"/>
    <rect class="p0" x="235" y="362" width="8" height="34" fill="#b8924a"/>
    <rect class="p0" x="250" y="362" width="8" height="32" fill="#b8924a"/>
    <rect class="p0" x="262" y="362" width="8" height="28" fill="#b8924a"/>
    <path class="p0" d="M190,150 C190,92 270,92 270,150 L262,188 L246,176 L230,198 L214,176 L198,188 Z" fill="#b87333"/>
    <path class="p0" d="M222,92 L238,92 L236,55 L224,55 Z" fill="#8b1a1a"/>
    <path class="p0" d="M224,55 Q230,40 236,55" fill="#8b1a1a"/>
    <g class="p0">
      <rect x="150" y="365" width="12" height="95" rx="3" fill="#5a3a2a" transform="rotate(8 156 365)"/>
      <circle cx="156" cy="365" r="6" fill="#b87333"/>
    </g>

    <path class="p1" d="M170,228 L205,220 L210,245 L175,252 Z" fill="#b8b8b8"/>
    <path class="p1" d="M290,228 L255,220 L250,245 L285,252 Z" fill="#b8b8b8"/>
    <rect class="p1" x="182" y="236" width="96" height="12" fill="#b8b8b8"/>
    <rect class="p1" x="184" y="252" width="92" height="12" fill="#b0b0b0"/>
    <rect class="p1" x="186" y="268" width="88" height="12" fill="#b8b8b8"/>
    <rect class="p1" x="188" y="284" width="84" height="12" fill="#b0b0b0"/>
    <rect class="p1" x="190" y="300" width="80" height="12" fill="#b8b8b8"/>
    <rect class="p1" x="192" y="316" width="76" height="12" fill="#b0b0b0"/>
    <rect class="p1" x="194" y="332" width="72" height="12" fill="#b8b8b8"/>
    <rect class="p1" x="196" y="348" width="68" height="12" fill="#b0b0b0"/>
    <rect class="p1" x="196" y="362" width="6" height="24" fill="#d9c27a"/>
    <rect class="p1" x="208" y="362" width="6" height="28" fill="#d9c27a"/>
    <rect class="p1" x="220" y="362" width="6" height="30" fill="#d9c27a"/>
    <rect class="p1" x="232" y="362" width="6" height="30" fill="#d9c27a"/>
    <rect class="p1" x="244" y="362" width="6" height="28" fill="#d9c27a"/>
    <rect class="p1" x="256" y="362" width="6" height="24" fill="#d9c27a"/>
    <rect class="p1" x="188" y="360" width="84" height="10" fill="#6b4a2a"/>
    <rect class="p1" x="200" y="370" width="8" height="45" fill="#6b4a2a"/>
    <rect class="p1" x="215" y="370" width="8" height="50" fill="#6b4a2a"/>
    <rect class="p1" x="230" y="370" width="8" height="52" fill="#6b4a2a"/>
    <rect class="p1" x="245" y="370" width="8" height="48" fill="#6b4a2a"/>
    <path class="p1" d="M192,150 C192,95 268,95 268,150 L260,185 L248,172 L230,190 L212,172 L200,185 Z" fill="#b87333"/>
    <path class="p1" d="M198,175 L262,175 L270,195 L190,195 Z" fill="#b87333"/>
    <path class="p1" d="M192,150 L185,185 L200,190 L205,160 Z" fill="#b87333"/>
    <path class="p1" d="M268,150 L275,185 L260,190 L255,160 Z" fill="#b87333"/>
    <rect class="p1" x="195" y="88" width="70" height="10" rx="5" fill="#c93030"/>
    <g class="p1">
      <rect x="270" y="365" width="10" height="70" rx="2" fill="#5a3a2a" transform="rotate(-5 275 365)"/>
      <rect x="268" y="360" width="14" height="8" fill="#b87333"/>
    </g>

    <path class="p2" d="M180,230 L280,230 L272,360 L188,360 Z" fill="#c0c0c0"/>
    <line class="p2" x1="230" y1="230" x2="230" y2="360" stroke="#909090" stroke-width="2"/>
    <rect class="p2" x="188" y="360" width="84" height="12" fill="#b0b0b0"/>
    <path class="p2" d="M190,372 L210,372 L208,405 L192,405 Z" fill="#b0b0b0"/>
    <path class="p2" d="M215,372 L235,372 L233,408 L217,408 Z" fill="#b0b0b0"/>
    <path class="p2" d="M240,372 L260,372 L258,405 L242,405 Z" fill="#b0b0b0"/>
    <path class="p2" d="M155,225 L195,215 L200,250 L160,260 Z" fill="#b0b0b0"/>
    <path class="p2" d="M305,225 L265,215 L260,250 L300,260 Z" fill="#b0b0b0"/>
    <path class="p2" d="M190,150 C190,90 270,90 270,150 L265,185 L250,175 L230,195 L210,175 L195,185 Z" fill="#b0b0b0"/>
    <rect class="p2" x="205" y="155" width="50" height="6" fill="#222"/>
    <path class="p2" d="M205,185 L255,185 L260,215 L200,215 Z" fill="#b0b0b0"/>
    <rect class="p2" x="198" y="215" width="64" height="8" fill="#a0a0a0"/>
    <path class="p2" d="M260,150 L285,175 L275,205 L260,190 Z" fill="#b0b0b0"/>
  </g>

  <g id="armLeft" transform="translate(165,235)">
    <g id="upperRotLeft" transform="rotate(0)">
      <path d="M-12,0 L-12,95 L12,95 L12,0 Z" fill="#d8b08a"/>
      <rect class="p2" x="-13" y="0" width="26" height="95" rx="6" fill="#b0b0b0"/>
      <g transform="translate(0,95)">
        <g id="forearmRotLeft" transform="rotate(0)">
          <path d="M-10,0 L-10,95 L10,95 L10,0 Z" fill="#d8b08a"/>
          <rect class="p2" x="-11" y="0" width="22" height="95" rx="6" fill="#a0a0a0"/>
          <g transform="translate(0,95)">
            <g id="handLeft">
              <path d="M-8,0 L-8,12 L8,12 L8,0 Z" fill="#d8b08a"/>
              <rect class="p2" x="-9" y="0" width="18" height="16" rx="4" fill="#909090"/>
              <g class="p0" transform="translate(0,-10)">
                <circle cx="0" cy="0" r="78" fill="#8b5a2b" stroke="#5a3a1a" stroke-width="6"/>
                <circle cx="0" cy="0" r="24" fill="#b87333"/>
                <path d="M-18,-8 Q0,-28 18,-8 Q0,12 -18,-8 Z" fill="#222"/>
                <circle cx="-6" cy="-10" r="3" fill="#f2efe8"/>
                <circle cx="6" cy="-10" r="3" fill="#f2efe8"/>
              </g>
              <g class="p1" transform="translate(0,-10) rotate(5)">
                <rect x="-55" y="-85" width="110" height="170" rx="18" fill="#c93030" stroke="#5a2a1a" stroke-width="6"/>
                <circle cx="0" cy="0" r="16" fill="#b87333"/>
                <circle cx="-4" cy="-4" r="6" fill="#d8a060"/>
                <path d="M-10,-40 L5,-10 L-5,-10 L10,40" stroke="#f2efe8" stroke-width="4" fill="none"/>
              </g>
            </g>
          </g>
        </g>
      </g>
    </g>
  </g>

  <g id="armRight" transform="translate(295,235)">
    <g id="upperRotRight" transform="rotate(0)">
      <path d="M-12,0 L-12,95 L12,95 L12,0 Z" fill="#d8b08a"/>
      <rect class="p2" x="-13" y="0" width="26" height="95" rx="6" fill="#b0b0b0"/>
      <g transform="translate(0,95)">
        <g id="forearmRotRight" transform="rotate(0)">
          <path d="M-10,0 L-10,95 L10,95 L10,0 Z" fill="#d8b08a"/>
          <rect class="p2" x="-11" y="0" width="22" height="95" rx="6" fill="#a0a0a0"/>
          <g transform="translate(0,95)">
            <g id="handRight">
              <path d="M-8,0 L-8,12 L8,12 L8,0 Z" fill="#d8b08a"/>
              <rect class="p2" x="-9" y="0" width="18" height="16" rx="4" fill="#909090"/>
              <g class="p0" transform="rotate(-12)">
                <line x1="0" y1="120" x2="0" y2="-300" stroke="#8b5a2b" stroke-width="6"/>
                <path d="M-3,-300 L0,-330 L3,-300" fill="#b0b0b0"/>
                <path d="M-4,120 L0,145 L4,120" fill="#b0b0b0"/>
              </g>
              <g class="p1" transform="rotate(-8)">
                <line x1="0" y1="150" x2="0" y2="-260" stroke="#8b5a2b" stroke-width="5"/>
                <line x1="0" y1="-260" x2="0" y2="-330" stroke="#b0b0b0" stroke-width="3"/>
                <path d="M-4,150 L0,170 L4,150" fill="#b0b0b0"/>
              </g>
              <g class="p2" transform="rotate(-5)">
                <rect x="-4" y="-360" width="8" height="360" fill="#c0c0c0"/>
                <rect x="-2" y="-360" width="4" height="360" fill="#f0f0f0"/>
                <rect x="-12" y="0" width="24" height="12" fill="#8b5a2b"/>
                <rect x="-4" y="12" width="8" height="40" fill="#5a3a2a"/>
                <circle cx="0" cy="56" r="6" fill="#b87333"/>
              </g>
            </g>
          </g>
        </g>
      </g>
    </g>
  </g>

  <g id="anchors" opacity="0">
    <circle id="anchor-head" cx="230" cy="150" r="3"/>
    <circle id="anchor-neck" cx="230" cy="210" r="3"/>
    <circle id="anchor-chest" cx="230" cy="290" r="3"/>
    <circle id="anchor-waist" cx="230" cy="375" r="3"/>
    <circle id="anchor-pelvis" cx="230" cy="410" r="3"/>
    <circle id="anchor-shoulder-left" cx="165" cy="235" r="3"/>
    <circle id="anchor-shoulder-right" cx="295" cy="235" r="3"/>
    <circle id="anchor-hip-left" cx="195" cy="410" r="3"/>
    <circle id="anchor-hip-right" cx="265" cy="410" r="3"/>
    <circle id="anchor-knee-left" cx="190" cy="560" r="3"/>
    <circle id="anchor-knee-right" cx="270" cy="560" r="3"/>
    <circle id="anchor-ankle-left" cx="185" cy="700" r="3"/>
    <circle id="anchor-ankle-right" cx="275" cy="700" r="3"/>
  </g>
</svg>

<div class="controls">
  <label for="periodSlider">Historical period</label>
  <input id="periodSlider" type="range" min="0" max="2" step="0.001" value="0">
  <div class="ticks">
    <span>480 BCE, Greece</span>
    <span>c. 100 CE, Rome</span>
    <span>c. 1450, Germany</span>
  </div>
</div>

<section class="panel" aria-live="polite">
  <dl>
    <dt>Date</dt><dd id="infoDate"></dd>
    <dt>Place</dt><dd id="infoPlace"></dd>
    <dt>Equipment</dt><dd id="infoEquipment"></dd>
    <dt>Materials</dt><dd id="infoMaterials"></dd>
    <dt>Weapon</dt><dd id="infoWeapon"></dd>
    <dt>Detail</dt><dd id="infoDetail"></dd>
  </dl>
</section>
</main>

<script>
const periods = [
  {
    date: '480 BCE',
    place: 'Thermopylae, Greece',
    equipment: 'Hoplite panoply: Corinthian helmet, linothorax, greaves',
    materials: 'bronze, linen, wood, iron',
    weapon: 'Dory spear (xiphos sidearm)',
    detail: 'Aspis with porpax and antilabe; horsehair crest on the helmet.'
  },
  {
    date: 'c. 100 CE',
    place: 'Rome, Roman Empire',
    equipment: 'Imperial legionary kit: galea, lorica segmentata, caligae',
    materials: 'iron/steel, bronze, leather, wood',
    weapon: 'Pilum and gladius',
    detail: 'Segmented plates with shoulder doublings; scutum boss and bolt.'
  },
  {
    date: 'c. 1450',
    place: 'Holy Roman Empire (southern Germany)',
    equipment: 'Gothic plate armour: sallet, bevor, full plate',
    materials: 'steel, leather, textile',
    weapon: 'Longsword',
    detail: 'Fluted Gothic plates, sabatons, and a two-handed longsword grip.'
  }
];

const poses = [
  { la: [-30, 15], ra: [25, -15] },
  { la: [-28, 12], ra: [22, -12] },
  { la: [15, 10], ra: [-15, -10] }
];

const slider = document.getElementById('periodSlider');

function weights(s) {
  const w = [0, 0, 0];
  if (s <= 0) { w[0] = 1; return w; }
  if (s >= 2) { w[2] = 1; return w; }
  const i = Math.floor(s);
  const b = s - i;
  w[i] = 1 - b;
  w[i + 1] = b;
  return w;
}

function lerp(a, b, t) {
  return a + (b - a) * t;
}

function poseAt(s) {
  if (s <= 0) return poses[0];
  if (s >= 2) return poses[2];
  const i = Math.floor(s);
  const t = s - i;
  return {
    la: [lerp(poses[i].la[0], poses[i + 1].la[0], t), lerp(poses[i].la[1], poses[i + 1].la[1], t)],
    ra: [lerp(poses[i].ra[0], poses[i + 1].ra[0], t), lerp(poses[i].ra[1], poses[i + 1].ra[1], t)]
  };
}

function setInfo(date, place, equipment, materials, weapon, detail) {
  document.getElementById('infoDate').textContent = date;
  document.getElementById('infoPlace').textContent = place;
  document.getElementById('infoEquipment').textContent = equipment;
  document.getElementById('infoMaterials').textContent = materials;
  document.getElementById('infoWeapon').textContent = weapon;
  document.getElementById('infoDetail').textContent = detail;
}

function update() {
  const s = parseFloat(slider.value);
  const w = weights(s);

  for (let i = 0; i < 3; i++) {
    document.querySelectorAll('.p' + i).forEach(function (el) {
      el.setAttribute('opacity', w[i].toFixed(4));
    });
  }

  const p = poseAt(s);
  document.getElementById('upperRotLeft').setAttribute('transform', 'rotate(' + p.la[0] + ')');
  document.getElementById('forearmRotLeft').setAttribute('transform', 'rotate(' + p.la[1] + ')');
  document.getElementById('upperRotRight').setAttribute('transform', 'rotate(' + p.ra[0] + ')');
  document.getElementById('forearmRotRight').setAttribute('transform', 'rotate(' + p.ra[1] + ')');

  const eps = 0.002;
  const idx = Math.round(s);
  if (s >= 0 && s <= 2 && Math.abs(s - idx) < eps) {
    const per = periods[idx];
    setInfo(per.date, per.place, per.equipment, per.materials, per.weapon, per.detail);
  } else {
    let i = Math.floor(s);
    if (i < 0) i = 0;
    if (i > 1) i = 1;
    const a = periods[i];
    const b = periods[i + 1];
    setInfo(
      'Between ' + a.date + ' and ' + b.date,
      'Transitioning: ' + a.place + ' to ' + b.place,
      'Blending ' + a.equipment + ' and ' + b.equipment,
      a.materials + ' to ' + b.materials,
      a.weapon + ' to ' + b.weapon,
      'Intermediate state between ' + a.detail + ' and ' + b.detail
    );
  }
}

slider.addEventListener('input', update);
update();
</script>
</body>
</html>

The weakest period

The Roman stop (c. 100 CE) is the least certain: it compresses equipment from several early-imperial finds into one generic legionary, omits greaves, and shortens the pilum and scutum for legibility. The Greek and medieval stops are more visually specific, though the medieval longsword is shown at a slightly reduced length to fit the frame.

Attachments

reflection/beam-1.0-501b-a23b — page