Scroll Seismograph Needle Draw — Free HTML CSS JS Snippet

<div class="hint">Scroll ↓ to record the tremor</div>
<section class="seismo-stage">
  <div class="recorder">
    <div class="readout">MAGNITUDE <span id="mag">0.0</span></div>
    <svg viewBox="0 0 800 200" class="paper">
      <line x1="0" y1="100" x2="800" y2="100" class="baseline" />
      <path id="wave" class="wave"
        d="M0,100 L40,100 L60,95 L80,105 L100,100 L140,100 L160,92 L180,108 L200,100
           L240,100 L255,60 L270,140 L285,40 L300,150 L315,60 L330,110 L345,100
           L380,100 L400,98 L420,102 L440,100 L480,100 L500,96 L520,104 L540,100
           L580,100 L600,100 L800,100" />
      <circle id="pen" class="pen" r="5" cy="100" cx="0" />
    </svg>
  </div>
</section>
<div class="spacer"></div>

* { box-sizing: border-box; }
body { margin: 0; font-family: 'Courier New', monospace; background: #2b2620; color: #e8ddc8; }
.hint { position: sticky; top: 12px; text-align: center; font-size: 13px; letter-spacing: 0.05em; color: #c9a24a; z-index: 5; padding: 10px; }
.seismo-stage { height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 40%, #3a332a 0%, #201c17 75%); }
.spacer { height: 220vh; }

.recorder { width: min(92vw, 820px); background: #e8ddc8; border-radius: 6px; padding: 24px 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); border: 1px solid #c9b98a; }
.readout { font-size: 13px; letter-spacing: 0.1em; color: #7a1f1f; margin-bottom: 12px; font-weight: 700; }
.paper { width: 100%; height: auto; background:
    repeating-linear-gradient(0deg, transparent 0 19px, rgba(122,31,31,0.12) 19px 20px),
    #f4ecd8;
  border-radius: 2px;
}
.baseline { stroke: rgba(122,31,31,0.2); stroke-width: 1; }
.wave { fill: none; stroke: #7a1f1f; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pen { fill: #1c1c1c; stroke: #f4ecd8; stroke-width: 1.5; }

gsap.registerPlugin(ScrollTrigger);

var wave = document.getElementById('wave');
var pen = document.getElementById('pen');
var magEl = document.getElementById('mag');
var len = wave.getTotalLength();

wave.style.strokeDasharray = len;
wave.style.strokeDashoffset = len;

var state = { d: 0 };

function update(d) {
  wave.style.strokeDashoffset = len - d * len;
  var point = wave.getPointAtLength(d * len);
  pen.setAttribute('cx', point.x);
  pen.setAttribute('cy', point.y);
  var mag = 1.5 + Math.abs(Math.sin(d * 18)) * (d > 0.28 && d < 0.42 ? 7.5 : 1.5);
  magEl.textContent = mag.toFixed(1);
}

gsap.timeline({
  scrollTrigger: {
    trigger: '.seismo-stage',
    start: 'top top',
    end: '+=220%',
    scrub: 0.4,
    pin: true,
  },
}).to(state, {
  d: 1,
  ease: 'none',
  duration: 1,
  onUpdate: function () { update(state.d); },
});

update(0);