# Remake prompt — Wild Records (10-second animal motion graphic)

Build a single self-contained HTML file (no build step, no libraries; only Google Fonts "Bricolage Grotesque" 500/800 and "JetBrains Mono" 500) that plays a 10.0-second looping motion graphic about four animal records.

## Spec
- Stage: inline SVGs with viewBox 1600x900 (16:9), stacked absolutely in one `.stage` box, width 100% up to 1200px, radius 6px. Page background #13110e, text #f2ebdd, muted #a39a8a. Single dark theme.
- Five shots, 2.0 s each, driven by a requestAnimationFrame timer: Cheetah (bg #e39b2d) "104 km/h — fastest sprint ever clocked on land"; Blue whale (gradient #14507a→#061a2c) "30 metres — the largest animal that has ever lived" with a 0–30 M ruler; Hummingbird (bg #0e4d3b, magenta #e83e8c flower) "80 — wing beats every second in the smallest species"; Owl (bg #1c1640, moon #f3e6c4) "270° — of head rotation, with a neck of 14 vertebrae" with a gold #f5b925 270° arc around the head; Finale: four 400px colour bands drop in, "Wild Records" title panel pops, recap "104 km/h / 30 m / 80 / s / 270°".
- Each shot enters with a clip-path circle wipe from (88%,50%), 0.45 s cubic-bezier(.7,0,.25,1); the previous shot stays visible underneath.
- Text rises (opacity 0→1, translateY 50px→0) over 0.5 s with delays .15/.25/.35/.45 s. Big number 280 units weight 800, counting 0→target from 0.2 s over 0.9 s with ease-out cubic.
- Animation details: cheetah gallops (legs ±42° every 0.36 s, body bob 12px, tail ±9°) while dashing in from −1300px and out to +1500px over 2 s, grass scrolls 400px/0.3 s; whale drifts −280→110px, fluke ±16°/1.4 s, bubbles rise 460px; hummingbird flies in from (760,−260), wings flap scaleY 1→−0.3 every 0.05 s, hovers ±10px; owl face slides ±170px inside a clipped head circle to fake a head turn, blinks every 2.6 s, arc draws 824.7→0 dashoffset over 1.2 s.
- Controls under the stage: Pause/Play pill and five chips (Cheetah, Blue whale, Hummingbird, Owl, Finale) with a progress fill; clicking the stage toggles pause (animation-play-state paused). prefers-reduced-motion turns off animation and autoplay.

## Full source (reproduce exactly)
```html
<title>Wild Records</title>
<meta name="claude:viewport-fit-sides" content="cover">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,800&family=JetBrains+Mono:wght@500&display=swap">
<style>
  /* Layout: one 16:9 stage of five full-bleed shots, a control strip beneath. Deliberately single dark theme, like a screening room. */
  :root {
    --page: #13110e;
    --ink: #f2ebdd;
    --muted: #a39a8a;
    --line: #2c2720;
    --savanna: #e39b2d;
    --ocean: #0b2e4a;
    --canopy: #0e4d3b;
    --night: #1c1640;
    --display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    color-scheme: dark;
  }
  html, body { background: var(--page); color: var(--ink); }
  body {
    font-family: var(--display);
    font-size: 16px;
    line-height: 1.5;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-block: 32px 48px;
  }
  .wrap { max-width: 1200px; margin: 0 auto; display: grid; gap: 20px; }
  header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 24px; }
  .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--savanna); margin: 0 0 4px; }
  h1 { margin: 0; font-weight: 800; font-size: clamp(36px, 6vw, 64px); line-height: .95; letter-spacing: -.02em; text-wrap: balance; }
  .dek { margin: 0; color: var(--muted); max-width: 42ch; }

  .stage { position: relative; width: 100%; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; border-radius: 6px; background: #000; }
  .scene { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; }
  .scene.prev { visibility: visible; z-index: 1; }
  .scene.active { visibility: visible; z-index: 2; animation: wipe .45s cubic-bezier(.7,0,.25,1) both; }
  @keyframes wipe { from { clip-path: circle(0% at 88% 50%); } to { clip-path: circle(140% at 88% 50%); } }

  .scene text { font-family: var(--display); font-variant-numeric: tabular-nums; }
  .t-label { font-family: var(--mono) !important; font-size: 28px; letter-spacing: 5px; }
  .t-big { font-size: 280px; font-weight: 800; letter-spacing: -8px; }
  .t-unit { font-size: 84px; font-weight: 800; letter-spacing: -2px; }
  .t-cap { font-size: 40px; font-weight: 500; }

  .a { transform-box: fill-box; }
  .active .rise { animation: rise .5s cubic-bezier(.2,.8,.2,1) var(--d, .3s) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: none; } }

  /* Cheetah */
  .active .dash { animation: dash 2s both; }
  @keyframes dash {
    0% { transform: translateX(-1300px); animation-timing-function: cubic-bezier(.1,.7,.3,1); }
    16% { transform: translateX(0); }
    80% { transform: translateX(60px); animation-timing-function: cubic-bezier(.6,0,.9,.4); }
    100% { transform: translateX(1500px); }
  }
  .bob { animation: bob .36s ease-in-out infinite alternate; }
  @keyframes bob { to { transform: translateY(-12px); } }
  .leg { transform-origin: 50% 8%; animation: leg .36s ease-in-out infinite alternate; }
  .leg.b { animation-delay: -.36s; }
  .leg.far { animation-delay: -.06s; }
  .leg.b.far { animation-delay: -.42s; }
  @keyframes leg { from { transform: rotate(42deg); } to { transform: rotate(-42deg); } }
  .tail { transform-origin: 100% 40%; animation: tail .72s ease-in-out infinite alternate; }
  @keyframes tail { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
  .scroll { animation: scroll .3s linear infinite; }
  @keyframes scroll { to { transform: translateX(-400px); } }
  .streak { animation: streak .55s linear infinite; }
  @keyframes streak { from { transform: translateX(1800px); } to { transform: translateX(-700px); } }

  /* Whale */
  .active .drift { animation: drift 2s linear both; }
  @keyframes drift { from { transform: translateX(-280px); } to { transform: translateX(110px); } }
  .swell { animation: swell 2.2s ease-in-out infinite alternate; }
  @keyframes swell { from { transform: translateY(-14px) rotate(-1deg); } to { transform: translateY(14px) rotate(1deg); } }
  .fluke { transform-origin: 100% 50%; animation: fluke 1.4s ease-in-out infinite alternate; }
  @keyframes fluke { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
  .flipper { transform-origin: 10% 50%; animation: flipper 1.4s ease-in-out infinite alternate; }
  @keyframes flipper { from { transform: rotate(-8deg); } to { transform: rotate(14deg); } }
  .bubble { animation: bubble 3.2s ease-in infinite; animation-delay: var(--d); }
  @keyframes bubble { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .8; } 100% { transform: translateY(-460px); opacity: 0; } }
  .ray { animation: ray 4s ease-in-out infinite alternate; animation-delay: var(--d); }
  @keyframes ray { from { opacity: .03; } to { opacity: .12; } }
  .active .draw { animation: draw .9s cubic-bezier(.3,.6,.2,1) .3s both; }
  @keyframes draw { from { stroke-dashoffset: 1200; } to { stroke-dashoffset: 0; } }

  /* Hummingbird */
  .active .approach { animation: approach 2s both; }
  @keyframes approach {
    0% { transform: translate(760px, -260px); animation-timing-function: cubic-bezier(.15,.8,.3,1); }
    22% { transform: translate(0, 0); }
    60% { transform: translate(-40px, 10px); }
    100% { transform: translate(-20px, -6px); }
  }
  .hover { animation: hover .5s ease-in-out infinite alternate; }
  @keyframes hover { from { transform: translateY(-10px); } to { transform: translateY(10px); } }
  .wing { transform-origin: 50% 100%; animation: flap .05s linear infinite alternate; }
  .wing.back { animation-delay: -.025s; }
  @keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(-.3); } }
  .sway { transform-origin: 50% 100%; animation: sway 3s ease-in-out infinite alternate; }
  @keyframes sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
  .pollen { animation: pollen 4s ease-in-out infinite; animation-delay: var(--d); }
  @keyframes pollen { 0% { transform: translate(0,0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(120px,-180px); opacity: 0; } }

  /* Owl */
  .twinkle { animation: twinkle 1.8s ease-in-out infinite alternate; animation-delay: var(--d); }
  @keyframes twinkle { from { opacity: .25; } to { opacity: 1; } }
  .active .turn { animation: turn 2s cubic-bezier(.5,0,.3,1) both; }
  @keyframes turn {
    0%, 16% { transform: translateX(0); }
    32%, 40% { transform: translateX(-170px); }
    54% { transform: translateX(0); }
    68%, 76% { transform: translateX(170px); }
    90%, 100% { transform: translateX(0); }
  }
  .blink { transform-origin: 50% 50%; animation: blink 2.6s infinite; }
  @keyframes blink { 0%, 44%, 50%, 100% { transform: scaleY(1); } 47% { transform: scaleY(.08); } }
  .active .arc { animation: arc 1.2s cubic-bezier(.5,0,.3,1) .3s both; }
  @keyframes arc { from { stroke-dashoffset: 824.7; } to { stroke-dashoffset: 0; } }

  /* Finale */
  .active .drop { animation: drop .45s cubic-bezier(.7,0,.2,1) var(--d) both; }
  @keyframes drop { from { transform: translateY(-100%); } to { transform: none; } }
  .active .pop { transform-origin: 50% 50%; animation: pop .5s cubic-bezier(.2,1.4,.4,1) .45s both; }
  @keyframes pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }

  .stage.paused *, .stage.paused { animation-play-state: paused !important; }

  .controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
  button { font: inherit; color: inherit; cursor: pointer; }
  button:focus-visible { outline: 2px solid var(--savanna); outline-offset: 2px; }
  .play {
    background: var(--ink); color: var(--page); border: 0; border-radius: 999px;
    padding: 8px 18px; font-weight: 800; font-size: 14px; min-width: 92px;
  }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }
  .chip {
    position: relative; overflow: hidden; flex: 1 1 120px;
    background: transparent; border: 1px solid var(--line); border-radius: 999px;
    padding: 8px 14px; text-align: left; font-family: var(--mono); font-size: 12px;
    letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  }
  .chip span { position: relative; }
  .chip .fill { position: absolute; inset: 0; width: 0; background: var(--sw); opacity: .35; }
  .chip.on { color: var(--ink); border-color: var(--sw); }
  .chip:hover { color: var(--ink); }
  .note { margin: 0; color: var(--muted); font-size: 13px; max-width: 70ch; }

  @media (prefers-reduced-motion: reduce) {
    .stage *, .scene.active { animation: none !important; }
  }
</style>

<div class="wrap">
  <header>
    <div>
      <p class="eyebrow">Motion graphic · 5 shots · 10 s loop</p>
      <h1>Wild Records</h1>
    </div>
    <p class="dek">Four animals, four numbers that sound made up and aren't. Sit back, or jump to a shot below.</p>
  </header>

  <div class="stage" id="stage">
    <!-- 1 · Cheetah -->
    <svg class="scene" viewBox="0 0 1600 900" data-dur="2" aria-label="Cheetah sprinting at 104 kilometres per hour">
      <rect width="1600" height="900" fill="#e39b2d"/>
      <circle cx="1270" cy="300" r="190" fill="#f4c46a"/>
      <rect y="672" width="1600" height="228" fill="#b8721c"/>
      <g fill="#fff4d8" opacity=".55">
        <rect class="a streak" x="0" y="470" width="260" height="6" rx="3" style="animation-delay:-.1s"/>
        <rect class="a streak" x="0" y="540" width="180" height="5" rx="3" style="animation-delay:-.35s"/>
        <rect class="a streak" x="0" y="610" width="320" height="6" rx="3" style="animation-delay:-.22s"/>
        <rect class="a streak" x="0" y="430" width="140" height="4" rx="2" style="animation-delay:-.45s"/>
      </g>
      <g class="a scroll" fill="#8d5512">
        <path d="M60 690 l14 -34 l8 30 l12 -22 l4 26z M460 700 l10 -26 l8 24 l10 -18 l4 20z M860 690 l14 -34 l8 30 l12 -22 l4 26z M1260 700 l10 -26 l8 24 l10 -18 l4 20z M1660 690 l14 -34 l8 30 l12 -22 l4 26z M2060 700 l10 -26 l8 24 l10 -18 l4 20z"/>
        <rect x="0" y="760" width="90" height="8" rx="4" opacity=".5"/>
        <rect x="400" y="820" width="140" height="8" rx="4" opacity=".5"/>
        <rect x="800" y="760" width="90" height="8" rx="4" opacity=".5"/>
        <rect x="1200" y="820" width="140" height="8" rx="4" opacity=".5"/>
        <rect x="1600" y="760" width="90" height="8" rx="4" opacity=".5"/>
        <rect x="2000" y="820" width="140" height="8" rx="4" opacity=".5"/>
      </g>
      <g transform="translate(640 565)">
        <g class="a dash"><g class="a bob">
          <g transform="translate(-205 -42)"><g class="a tail">
            <path d="M0 0 C -60 -30 -120 -10 -190 -40" fill="none" stroke="#f6d28b" stroke-width="15" stroke-linecap="round"/>
            <path d="M-120 -16 C -150 -22 -170 -30 -190 -40" fill="none" stroke="#3a2412" stroke-width="15" stroke-linecap="round" stroke-dasharray="10 14"/>
          </g></g>
          <g transform="translate(-160 -10)"><rect class="a leg b far" x="-11" y="0" width="22" height="112" rx="11" fill="#d7ab5e"/></g>
          <g transform="translate(150 -10)"><rect class="a leg far" x="-11" y="0" width="22" height="112" rx="11" fill="#d7ab5e"/></g>
          <path d="M-210 -20 C -210 -75 -90 -85 40 -70 C 120 -62 170 -80 215 -75 L 238 -30 C 200 -10 150 15 60 18 C -40 22 -120 30 -180 20 C -205 15 -210 0 -210 -20 Z" fill="#f6d28b"/>
          <g fill="#3a2412">
            <circle cx="-165" cy="-40" r="8"/><circle cx="-125" cy="-8" r="7"/><circle cx="-85" cy="-52" r="8"/>
            <circle cx="-45" cy="-22" r="7"/><circle cx="-5" cy="-56" r="7"/><circle cx="30" cy="-12" r="8"/>
            <circle cx="72" cy="-44" r="7"/><circle cx="112" cy="-14" r="6"/><circle cx="150" cy="-56" r="7"/>
            <circle cx="-150" cy="6" r="6"/><circle cx="-20" cy="6" r="6"/><circle cx="190" cy="-46" r="5"/>
          </g>
          <g transform="translate(-135 -10)"><rect class="a leg b" x="-11" y="0" width="22" height="112" rx="11" fill="#f6d28b"/></g>
          <g transform="translate(178 -18)"><rect class="a leg" x="-11" y="0" width="22" height="118" rx="11" fill="#f6d28b"/></g>
          <g transform="translate(240 -62)">
            <circle cx="-14" cy="-30" r="11" fill="#3a2412"/>
            <circle r="38" fill="#f6d28b"/>
            <ellipse cx="30" cy="10" rx="24" ry="17" fill="#f6d28b"/>
            <ellipse cx="52" cy="2" rx="7" ry="5" fill="#3a2412"/>
            <circle cx="14" cy="-8" r="5.5" fill="#3a2412"/>
            <path d="M16 -3 C 19 10 23 18 34 24" fill="none" stroke="#3a2412" stroke-width="4.5" stroke-linecap="round"/>
          </g>
        </g></g>
      </g>
      <text class="t-label rise" x="100" y="130" fill="#3a2412" style="--d:.15s">CHEETAH · ACINONYX JUBATUS</text>
      <text class="rise" x="92" y="380" fill="#2a1a0c" style="--d:.25s"><tspan class="t-big" data-count="104">104</tspan><tspan class="t-unit" dx="16">km/h</tspan></text>
      <text class="t-cap rise" x="100" y="445" fill="#3a2412" style="--d:.35s">fastest sprint ever clocked on land</text>
    </svg>

    <!-- 2 · Blue whale -->
    <svg class="scene" viewBox="0 0 1600 900" data-dur="2" aria-label="Blue whale, up to 30 metres long">
      <defs>
        <linearGradient id="deep" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stop-color="#14507a"/><stop offset="1" stop-color="#061a2c"/>
        </linearGradient>
      </defs>
      <rect width="1600" height="900" fill="url(#deep)"/>
      <g fill="#cfe7f7">
        <polygon class="ray" points="300,0 420,0 260,900 60,900" style="--d:0s"/>
        <polygon class="ray" points="720,0 800,0 900,900 640,900" style="--d:-1.4s"/>
        <polygon class="ray" points="1150,0 1260,0 1500,900 1240,900" style="--d:-2.6s"/>
      </g>
      <g transform="translate(800 540)">
        <g class="a drift"><g class="a swell">
          <g transform="translate(-460 -6)"><path class="a fluke" d="M0 0 C -40 -20 -90 -80 -130 -72 C -110 -38 -64 -6 0 0 C -64 6 -110 38 -130 72 C -90 80 -40 20 0 0 Z" fill="#4d7ea3"/></g>
          <path d="M520 0 C 520 -70 380 -112 150 -102 C -100 -92 -300 -52 -470 -8 L -470 4 C -300 46 -100 78 150 86 C 380 94 520 60 520 0 Z" fill="#5e8fb3"/>
          <path d="M515 20 C 470 70 330 92 150 86 C -40 80 -200 60 -330 32 C -180 50 0 58 160 56 C 330 54 450 44 515 20 Z" fill="#a9c9de"/>
          <g stroke="#7fa8c4" stroke-width="3" fill="none" stroke-linecap="round">
            <path d="M470 42 C 380 62 260 70 140 68"/><path d="M460 54 C 370 74 250 80 120 78"/>
          </g>
          <path d="M520 2 C 450 18 380 26 320 22" fill="none" stroke="#244e6e" stroke-width="5" stroke-linecap="round"/>
          <circle cx="380" cy="-6" r="7" fill="#0b2338"/>
          <path d="M-230 -64 L -268 -92 L -290 -56 Z" fill="#4d7ea3"/>
          <g transform="translate(230 50)"><ellipse class="a flipper" cx="70" cy="18" rx="80" ry="17" fill="#4d7ea3"/></g>
          <g fill="none" stroke="#cfe7f7" stroke-width="3">
            <circle class="a bubble" cx="440" cy="-90" r="10" style="--d:0s"/>
            <circle class="a bubble" cx="470" cy="-80" r="6" style="--d:-.8s"/>
            <circle class="a bubble" cx="410" cy="-100" r="14" style="--d:-1.6s"/>
            <circle class="a bubble" cx="455" cy="-95" r="8" style="--d:-2.4s"/>
            <circle class="a bubble" cx="425" cy="-85" r="5" style="--d:-1.1s"/>
          </g>
        </g></g>
      </g>
      <g stroke="#cfe7f7" stroke-width="4" fill="none">
        <line class="draw" x1="200" y1="800" x2="1400" y2="800" stroke-dasharray="1200"/>
      </g>
      <g fill="#cfe7f7" class="rise" style="--d:.9s">
        <rect x="198" y="784" width="4" height="32"/><rect x="598" y="790" width="4" height="20"/>
        <rect x="998" y="790" width="4" height="20"/><rect x="1398" y="784" width="4" height="32"/>
        <text class="t-label" x="200" y="856" text-anchor="middle" font-size="22">0</text>
        <text class="t-label" x="600" y="856" text-anchor="middle" font-size="22">10 M</text>
        <text class="t-label" x="1000" y="856" text-anchor="middle" font-size="22">20 M</text>
        <text class="t-label" x="1400" y="856" text-anchor="middle" font-size="22">30 M</text>
      </g>
      <text class="t-label rise" x="100" y="130" fill="#9cc6e3" style="--d:.15s">BLUE WHALE · BALAENOPTERA MUSCULUS</text>
      <text class="rise" x="92" y="370" fill="#f2f8fc" style="--d:.25s"><tspan class="t-big" data-count="30">30</tspan><tspan class="t-unit" dx="16">metres</tspan></text>
      <text class="t-cap rise" x="1500" y="345" text-anchor="end" fill="#9cc6e3" style="--d:.35s">the largest animal</text>
      <text class="t-cap rise" x="1500" y="395" text-anchor="end" fill="#9cc6e3" style="--d:.45s">that has ever lived</text>
    </svg>

    <!-- 3 · Hummingbird -->
    <svg class="scene" viewBox="0 0 1600 900" data-dur="2" aria-label="Hummingbird beating its wings up to 80 times a second">
      <rect width="1600" height="900" fill="#0e4d3b"/>
      <circle cx="420" cy="760" r="420" fill="#0b4233"/>
      <g transform="translate(470 900)"><g class="a sway">
        <path d="M0 0 C -10 -140 30 -260 0 -380" fill="none" stroke="#2f8a5f" stroke-width="14" stroke-linecap="round"/>
        <path d="M2 -150 C 60 -200 130 -190 170 -150 C 110 -130 50 -130 2 -150 Z" fill="#2f8a5f"/>
        <path d="M0 -240 C -60 -290 -130 -280 -160 -240 C -100 -220 -40 -220 0 -240 Z" fill="#2f8a5f"/>
        <g transform="translate(0 -380)">
          <path d="M0 0 C 30 -30 70 -44 120 -70 L 132 -12 L 120 46 C 70 22 30 22 0 0 Z" fill="#e83e8c"/>
          <path d="M120 -70 C 150 -84 170 -60 150 -40 C 170 -20 160 20 132 10 C 160 30 150 60 120 46 Z" fill="#ff6aa9"/>
          <ellipse cx="0" cy="0" rx="18" ry="14" fill="#2f8a5f"/>
        </g>
      </g></g>
      <g fill="#ffd36e">
        <circle class="a pollen" cx="620" cy="520" r="5" style="--d:0s"/>
        <circle class="a pollen" cx="600" cy="540" r="4" style="--d:-1.3s"/>
        <circle class="a pollen" cx="640" cy="500" r="3" style="--d:-2.6s"/>
      </g>
      <g transform="translate(880 520)">
        <g class="a approach"><g class="a hover">
          <path d="M-20 -60 C 40 -170 70 -200 90 -210 C 60 -150 30 -100 10 -50 Z" fill="#9ff0cc" opacity=".14"/>
          <g transform="translate(10 -40)"><ellipse class="a wing back" cx="14" cy="-90" rx="20" ry="90" fill="#7fe0b8" opacity=".55"/></g>
          <path d="M150 50 L 230 40 L 210 66 L 236 84 L 150 72 Z" fill="#1f7a55"/>
          <path d="M-60 -20 C -40 -58 40 -52 70 -18 C 100 14 140 46 170 62 C 110 66 60 48 20 40 C -30 32 -72 12 -60 -20 Z" fill="#3fd39a"/>
          <path d="M-40 10 C 0 30 60 46 120 56 C 70 58 20 50 -20 38 Z" fill="#c9f5e2"/>
          <path d="M-88 -30 L -205 -18" stroke="#1a1a14" stroke-width="6" stroke-linecap="round"/>
          <circle cx="-58" cy="-32" r="34" fill="#3fd39a"/>
          <path d="M-90 -12 C -74 10 -46 14 -26 -2 C -46 -8 -72 -8 -90 -12 Z" fill="#e0245e"/>
          <circle cx="-68" cy="-40" r="6.5" fill="#101010"/>
          <circle cx="-66" cy="-42" r="2" fill="#fff"/>
          <g transform="translate(0 -40)"><ellipse class="a wing" cx="0" cy="-95" rx="24" ry="95" fill="#b6f6da" opacity=".9"/></g>
        </g></g>
      </g>
      <text class="t-label rise" x="1500" y="130" text-anchor="end" fill="#7fe0b8" style="--d:.15s">HUMMINGBIRD · TROCHILIDAE</text>
      <text class="rise" x="1500" y="380" text-anchor="end" fill="#f2fff8" style="--d:.25s"><tspan class="t-big" data-count="80">80</tspan></text>
      <text class="t-cap rise" x="1500" y="445" text-anchor="end" fill="#7fe0b8" style="--d:.35s">wing beats every second</text>
      <text class="t-cap rise" x="1500" y="495" text-anchor="end" fill="#7fe0b8" style="--d:.45s">in the smallest species</text>
    </svg>

    <!-- 4 · Owl -->
    <svg class="scene" viewBox="0 0 1600 900" data-dur="2" aria-label="Owl turning its head through 270 degrees">
      <rect width="1600" height="900" fill="#1c1640"/>
      <circle cx="210" cy="180" r="96" fill="#f3e6c4"/>
      <circle cx="245" cy="160" r="88" fill="#1c1640" opacity=".18"/>
      <g fill="#f3e6c4">
        <circle class="twinkle" cx="420" cy="90" r="3" style="--d:0s"/><circle class="twinkle" cx="880" cy="140" r="4" style="--d:-.6s"/>
        <circle class="twinkle" cx="1100" cy="70" r="3" style="--d:-1.2s"/><circle class="twinkle" cx="1460" cy="760" r="3" style="--d:-.3s"/>
        <circle class="twinkle" cx="1320" cy="120" r="2.5" style="--d:-.9s"/><circle class="twinkle" cx="80" cy="420" r="3" style="--d:-1.5s"/>
        <circle class="twinkle" cx="1180" cy="820" r="2.5" style="--d:-.4s"/>
      </g>
      <path d="M-20 700 C 300 680 700 690 1000 670 C 1060 666 1100 650 1130 630" fill="none" stroke="#4a3426" stroke-width="34" stroke-linecap="round"/>
      <path d="M760 685 C 800 640 840 630 880 610" fill="none" stroke="#4a3426" stroke-width="14" stroke-linecap="round"/>
      <circle cx="620" cy="370" r="175" fill="none" stroke="#3a3270" stroke-width="3" stroke-dasharray="4 14"/>
      <circle class="arc" cx="620" cy="370" r="175" fill="none" stroke="#f5b925" stroke-width="8" stroke-linecap="round" stroke-dasharray="824.7 1100" transform="rotate(-90 620 370)"/>
      <g transform="translate(620 520)">
        <ellipse cx="0" cy="10" rx="135" ry="165" fill="#7a5b40"/>
        <ellipse cx="0" cy="50" rx="92" ry="118" fill="#d2b48c"/>
        <g fill="none" stroke="#7a5b40" stroke-width="5" stroke-linecap="round">
          <path d="M-40 20 l12 10 l12 -10"/><path d="M16 20 l12 10 l12 -10"/>
          <path d="M-60 70 l12 10 l12 -10"/><path d="M-12 70 l12 10 l12 -10"/><path d="M36 70 l12 10 l12 -10"/>
          <path d="M-40 120 l12 10 l12 -10"/><path d="M16 120 l12 10 l12 -10"/>
        </g>
        <path d="M-130 -20 C -170 60 -150 140 -100 170 C -110 100 -105 40 -130 -20 Z" fill="#5e4430"/>
        <path d="M130 -20 C 170 60 150 140 100 170 C 110 100 105 40 130 -20 Z" fill="#5e4430"/>
        <g fill="#f5a524"><path d="M-50 168 l-14 14 h40 l-12 -14z"/><path d="M50 168 l-14 14 h40 l-12 -14z"/></g>
        <g transform="translate(0 -150)">
          <defs><clipPath id="head"><circle r="120"/></clipPath></defs>
          <path d="M-110 -50 L -96 -150 L -40 -100 Z" fill="#7a5b40"/>
          <path d="M110 -50 L 96 -150 L 40 -100 Z" fill="#7a5b40"/>
          <circle r="120" fill="#7a5b40"/>
          <g clip-path="url(#head)">
            <g class="a turn">
              <circle cx="-50" cy="0" r="60" fill="#e8d2a8"/>
              <circle cx="50" cy="0" r="60" fill="#e8d2a8"/>
              <g class="a blink">
                <circle cx="-50" cy="0" r="35" fill="#f5b925"/><circle cx="50" cy="0" r="35" fill="#f5b925"/>
                <circle cx="-50" cy="0" r="19" fill="#120e22"/><circle cx="50" cy="0" r="19" fill="#120e22"/>
                <circle cx="-43" cy="-7" r="5" fill="#fff"/><circle cx="57" cy="-7" r="5" fill="#fff"/>
              </g>
              <path d="M-14 32 L 14 32 L 0 62 Z" fill="#f5a524"/>
            </g>
          </g>
        </g>
      </g>
      <text class="t-label rise" x="960" y="290" fill="#a99ee6" style="--d:.15s">OWL · STRIGIFORMES</text>
      <text class="rise" x="950" y="530" fill="#f3e6c4" style="--d:.25s"><tspan class="t-big" data-count="270">270</tspan><tspan class="t-unit" dx="8">°</tspan></text>
      <text class="t-cap rise" x="960" y="595" fill="#a99ee6" style="--d:.35s">of head rotation, with a</text>
      <text class="t-cap rise" x="960" y="645" fill="#a99ee6" style="--d:.45s">neck of 14 vertebrae</text>
    </svg>

    <!-- 5 · Finale -->
    <svg class="scene" viewBox="0 0 1600 900" data-dur="2" aria-label="Recap of all four records">
      <rect width="1600" height="900" fill="#13110e"/>
      <rect class="a drop" x="0" width="400" height="900" fill="#e39b2d" style="--d:0s"/>
      <rect class="a drop" x="400" width="400" height="900" fill="#0b2e4a" style="--d:.12s"/>
      <rect class="a drop" x="800" width="400" height="900" fill="#0e4d3b" style="--d:.24s"/>
      <rect class="a drop" x="1200" width="400" height="900" fill="#1c1640" style="--d:.36s"/>
      <g class="a pop">
        <rect x="290" y="300" width="1020" height="230" rx="8" fill="#13110e"/>
        <text x="800" y="465" text-anchor="middle" fill="#f2ebdd" font-size="150" font-weight="800" letter-spacing="-4">Wild Records</text>
      </g>
      <g text-anchor="middle">
        <text class="rise" x="200" y="740" fill="#2a1a0c" font-size="72" font-weight="800" style="--d:.7s">104 km/h</text>
        <text class="rise" x="600" y="740" fill="#f2f8fc" font-size="72" font-weight="800" style="--d:.8s">30 m</text>
        <text class="rise" x="1000" y="740" fill="#f2fff8" font-size="72" font-weight="800" style="--d:.9s">80 / s</text>
        <text class="rise" x="1400" y="740" fill="#f3e6c4" font-size="72" font-weight="800" style="--d:1s">270°</text>
        <text class="t-label rise" x="200" y="790" fill="#3a2412" font-size="22" style="--d:.8s">CHEETAH</text>
        <text class="t-label rise" x="600" y="790" fill="#9cc6e3" font-size="22" style="--d:.9s">BLUE WHALE</text>
        <text class="t-label rise" x="1000" y="790" fill="#7fe0b8" font-size="22" style="--d:1s">HUMMINGBIRD</text>
        <text class="t-label rise" x="1400" y="790" fill="#a99ee6" font-size="22" style="--d:1.1s">OWL</text>
      </g>
    </svg>
  </div>

  <div class="controls">
    <button class="play" id="play" type="button" aria-pressed="false">Pause</button>
    <div class="chips" id="chips"></div>
  </div>
  <p class="note">Figures: cheetah 104 km/h (29 m/s, timed in the wild); blue whale lengths reach about 30 m; the amethyst woodstar beats its wings around 80 times a second; owls turn their heads up to 270°.</p>
</div>

<script>
(() => {
  const stage = document.getElementById('stage');
  const scenes = [...stage.querySelectorAll('.scene')];
  const names = ['Cheetah', 'Blue whale', 'Hummingbird', 'Owl', 'Finale'];
  const swatches = ['#e39b2d', '#3d84bd', '#3fd39a', '#8f7fe8', '#f2ebdd'];
  const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
  const playBtn = document.getElementById('play');
  const chipsEl = document.getElementById('chips');

  const chips = names.map((n, i) => {
    const b = document.createElement('button');
    b.type = 'button';
    b.className = 'chip';
    b.style.setProperty('--sw', swatches[i]);
    b.innerHTML = '<i class="fill"></i><span>' + n + '</span>';
    b.addEventListener('click', () => go(i));
    chipsEl.appendChild(b);
    return b;
  });

  let idx = 0, elapsed = 0, last = performance.now(), playing = !reduce;
  const counters = scenes.map(s => [...s.querySelectorAll('[data-count]')]);

  function go(i) {
    scenes.forEach(s => s.classList.remove('prev'));
    if (i !== idx) scenes[idx].classList.replace('active', 'prev');
    scenes[i].classList.remove('active');
    void scenes[i].getBoundingClientRect();
    scenes[i].classList.add('active');
    idx = i; elapsed = 0;
    chips.forEach((c, j) => c.classList.toggle('on', j === i));
    paint();
  }

  function paint() {
    const dur = +scenes[idx].dataset.dur;
    chips.forEach((c, j) => {
      c.querySelector('.fill').style.width = (j === idx ? Math.min(elapsed / dur, 1) * 100 : j < idx ? 100 : 0) + '%';
    });
    const t = reduce ? 1 : Math.min(Math.max((elapsed - .2) / .9, 0), 1);
    const e = 1 - Math.pow(1 - t, 3);
    counters[idx].forEach(el => {
      const v = String(Math.round(+el.dataset.count * e));
      if (el.textContent !== v) el.textContent = v;
    });
  }

  function tick(now) {
    const dt = (now - last) / 1000; last = now;
    if (playing) {
      elapsed += dt;
      if (elapsed >= +scenes[idx].dataset.dur) go((idx + 1) % scenes.length);
      else paint();
    }
    requestAnimationFrame(tick);
  }

  function setPlaying(p) {
    playing = p;
    stage.classList.toggle('paused', !p);
    playBtn.textContent = p ? 'Pause' : 'Play';
    playBtn.setAttribute('aria-pressed', String(!p));
  }
  playBtn.addEventListener('click', () => setPlaying(!playing));
  stage.addEventListener('click', () => setPlaying(!playing));

  go(0);
  setPlaying(playing);
  requestAnimationFrame(tick);
})();
</script>
```

## Match checks
1. The loop lasts 10.0 s: five shots of 2.0 s, then it restarts on the cheetah.
2. Shot 1 background is #e39b2d and the number counts to "104" followed by "km/h".
3. Big numbers are Bricolage Grotesque 800 at 280 viewBox units; labels are JetBrains Mono uppercase with 5px letter-spacing.
4. Each shot enters with a circular wipe from the right side (88%, 50%) lasting 0.45 s.
5. The whale shot draws a ruler from x200 to x1400 labelled 0, 10 M, 20 M, 30 M.
6. The hummingbird's wings flap every 0.05 s and look blurred.
7. The owl's face slides out of its head circle left then right while a gold arc draws 270°.
8. The finale drops four bands (#e39b2d, #0b2e4a, #0e4d3b, #1c1640) and shows "Wild Records" on a #13110e panel.
9. Clicking the stage or the Pause button freezes every animation; chips jump to that shot.