Reveal on scroll

<div class="reveal-box" id="reveal-box">
  <p class="reveal-hint">Scroll inside this box ↓</p>
  <div class="reveal-item">01 · Plan</div>
  <div class="reveal-item">02 · Build</div>
  <div class="reveal-item">03 · Test</div>
  <div class="reveal-item">04 · Ship</div>
  <div class="reveal-item">05 · Learn</div>
  <div class="reveal-item">06 · Repeat</div>
</div>

.reveal-box {
  width: min(420px, 100%);
  height: 250px;
  overflow-y: auto;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.reveal-hint { margin: 0 0 120px; font: 600 14px system-ui, sans-serif; }

.reveal-item {
  margin-bottom: 14px;
  padding: 18px;
  border-radius: 12px;
  font: 600 15px system-ui, sans-serif;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* Hidden state. Only opacity and transform change, so nothing around it moves. */
.js-reveal .reveal-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--delay, 0ms);
}
.js-reveal .reveal-item.is-visible { opacity: 1; transform: none; }

/* Reduced motion: fade only, no movement. */
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal-item { transform: none; }
}

// Reveal on scroll: items start hidden and get `is-visible` when they enter
// the scroll area. Items that appear together are staggered slightly.

// The element that scrolls. For a normal page, use `document.body`.
const scrollArea = document.getElementById('reveal-box');
const staggerStep = 80; // ms between items revealed in the same moment

// Only hide items once JavaScript is running, so nothing is lost if the script fails.
scrollArea.classList.add('js-reveal');

const observer = new IntersectionObserver((entries) => {
  const appearing = entries.filter((entry) => entry.isIntersecting);
  appearing.forEach((entry, index) => {
    entry.target.style.setProperty('--delay', `${index * staggerStep}ms`);
    entry.target.classList.add('is-visible');
    observer.unobserve(entry.target); // reveal once, then stop watching
  });
}, {
  root: scrollArea === document.body ? null : scrollArea, // null means "the browser window"
  rootMargin: '0px 0px -10% 0px', // trigger slightly before the bottom edge
  threshold: 0.1,
});

scrollArea.querySelectorAll('.reveal-item').forEach((item) => observer.observe(item));