CSS Scroll Timeline Gauge Needle — Native animation-timeline: scroll()

<div class="gng-page">
  <aside class="gng-stage">
    <p class="gng-hint">Scroll ↓ — the needle climbs</p>
    <div class="gng-gauge">
      <div class="gng-arc"></div>
      <div class="gng-needle"></div>
      <div class="gng-hub"></div>
      <div class="gng-reading"><span class="gng-num"></span><span class="gng-unit">km/h</span></div>
      <span class="gng-lo">0</span><span class="gng-hi">220</span>
    </div>
  </aside>
  <main class="gng-sections">
    <section class="gng-block"><span class="gng-tag">Idle</span><h2>A Needle Bound to Scroll, Not Time</h2><p>This speedometer needle does not animate on a timer — its rotation is a direct, deterministic function of how far you've scrolled, via <code>animation-timeline: scroll(root)</code>.</p></section>
    <section class="gng-block"><span class="gng-tag">Accelerating</span><h2>Keep Going</h2><p>The needle sweeps across the dial exactly in step with your scroll position — pause scrolling and it stops dead, instantly.</p></section>
    <section class="gng-block"><span class="gng-tag">Redline</span><h2>Top of the Dial</h2><p>By the bottom of the page the needle has swept to its maximum reading — scroll back up and watch it fall in perfect reverse.</p></section>
  </main>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0a0b12;color:#eef0f9}
code{background:rgba(234,88,12,.18);color:#fdba8c;padding:2px 6px;border-radius:5px;font-size:.9em;font-family:ui-monospace,Consolas,monospace}

.gng-page{display:flex;max-width:1020px;margin:0 auto}
.gng-stage{position:sticky;top:0;height:100vh;width:300px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:0 24px}
.gng-hint{font-size:12.5px;letter-spacing:.06em;color:#8f8ba0;text-align:center;text-transform:uppercase}

.gng-gauge{position:relative;width:240px;height:150px}
.gng-arc{
  position:absolute;inset:0 0 auto 0;width:240px;height:240px;border-radius:50%;
  background:conic-gradient(from 180deg,
    #16a34a 0deg, #16a34a 60deg,
    #eab308 60deg, #eab308 120deg,
    #ea580c 120deg, #ea580c 155deg,
    #dc2626 155deg, #dc2626 180deg,
    transparent 180deg, transparent 360deg);
  -webkit-mask:radial-gradient(circle,transparent 62%,#000 63%,#000 100%);
          mask:radial-gradient(circle,transparent 62%,#000 63%,#000 100%);
}
.gng-needle{
  position:absolute;left:50%;bottom:0;width:5px;height:112px;
  background:linear-gradient(to top,#f97316,#fde68a);
  border-radius:4px;transform-origin:bottom center;
  transform:translateX(-50%) rotate(-90deg);
  box-shadow:0 0 10px rgba(249,115,22,.6);
  animation:gng-sweep linear both;
  animation-timeline:scroll(root);
}
@keyframes gng-sweep{ to{ transform:translateX(-50%) rotate(90deg) } }
.gng-hub{position:absolute;left:50%;bottom:-8px;width:20px;height:20px;border-radius:50%;background:#1c1e2c;border:3px solid #f97316;transform:translateX(-50%)}
.gng-reading{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px}
.gng-num{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}
.gng-num::before{content:counter(gng-count)}
.gng-num{counter-reset:gng-count 0;animation:gng-count-up steps(20) both;animation-timeline:scroll(root)}
@keyframes gng-count-up{
  0%{counter-increment:gng-count 0}
  5%{counter-increment:gng-count 11}
  10%{counter-increment:gng-count 11}
  15%{counter-increment:gng-count 11}
  20%{counter-increment:gng-count 11}
  25%{counter-increment:gng-count 11}
  30%{counter-increment:gng-count 11}
  35%{counter-increment:gng-count 11}
  40%{counter-increment:gng-count 11}
  45%{counter-increment:gng-count 11}
  50%{counter-increment:gng-count 11}
  55%{counter-increment:gng-count 11}
  60%{counter-increment:gng-count 11}
  65%{counter-increment:gng-count 11}
  70%{counter-increment:gng-count 11}
  75%{counter-increment:gng-count 11}
  80%{counter-increment:gng-count 11}
  85%{counter-increment:gng-count 11}
  90%{counter-increment:gng-count 11}
  95%{counter-increment:gng-count 11}
  100%{counter-increment:gng-count 11}
}
.gng-unit{font-size:11px;color:#8f8ba0;letter-spacing:.08em;text-transform:uppercase}
.gng-lo,.gng-hi{position:absolute;bottom:2px;font-size:11px;color:#6d6a80;font-variant-numeric:tabular-nums}
.gng-lo{left:6px}
.gng-hi{right:6px}

.gng-sections{flex:1;min-width:0}
.gng-block{min-height:88vh;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:0 32px;max-width:520px}
.gng-tag{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#f97316}
.gng-block h2{font-size:clamp(26px,4.4vw,38px);letter-spacing:-.02em}
.gng-block p{color:#a3a1b4;font-size:15.5px;line-height:1.75}

@media (max-width:760px){
  .gng-page{flex-direction:column}
  .gng-stage{position:static;height:auto;padding:40px 24px}
}
@supports not (animation-timeline: scroll()){
  .gng-needle{transform:translateX(-50%) rotate(20deg);animation:none}
  .gng-num::before{content:"143"}
}

// The needle's rotation and the numeric readout are both driven entirely
// by CSS animation-timeline: scroll(root) -- there is no scroll listener
// and no requestAnimationFrame loop in this file. This script only reports
// feature support for the demo readout.
const supportsScrollTimeline = typeof CSS !== 'undefined' && CSS.supports('animation-timeline: scroll()');
console.log('[gauge-needle] animation-timeline: scroll() supported:', supportsScrollTimeline);
if (!supportsScrollTimeline) {
  console.log('[gauge-needle] falling back to a static mid-dial reading via @supports.');
}