스크롤 리빌

<div class="viewport" id="vp">
  <div class="track" id="track">
    <div class="row">Row A</div>
    <div class="row">Row B</div>
    <div class="row">Row C</div>
    <div class="row">Row D</div>
    <div class="row">Row A</div>
    <div class="row">Row B</div>
    <div class="row">Row C</div>
    <div class="row">Row D</div>
  </div>
  <div class="line"></div>
</div>

.viewport{position:absolute;inset:6%;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.track{display:flex;flex-direction:column;gap:14px;padding:16px}
.row{padding:12px 16px;border-radius:10px;background:var(--bg);border:1px solid var(--line);color:var(--muted);
  font:600 13px/1.3 sans-serif;opacity:0;transform:translateY(24px);transition:opacity .5s ease-out,transform .5s ease-out,border-color .5s,color .5s}
.row.in{opacity:1;transform:translateY(0);color:var(--fg);border-color:var(--accent)}
.line{position:absolute;left:0;right:0;top:58%;height:2px;background:var(--accent-2);opacity:.5}

const vp = document.getElementById('vp');
const track = document.getElementById('track');
const io = new IntersectionObserver((entries) => {
  entries.forEach((en) => en.target.classList.toggle('in', en.isIntersecting));
}, { root: vp, threshold: 0.5 });
document.querySelectorAll('.row').forEach((r) => io.observe(r));

let y = 0;
function loop() {
  y -= 0.5;
  if (y < -track.scrollHeight / 2) y = 0;
  track.style.transform = 'translateY(' + y + 'px)';
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);