Transition Card

:root {
  color-scheme: only light;
  --bg: #0a0b12;
  --bg-alt: #141629;
  --fg: #f5f4f2;
  --muted: rgba(245, 244, 242, 0.68);
  --accent: #f6b042;
  --shadow: rgba(4, 5, 11, 0.45);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  background: radial-gradient(1200px 620px at 10% -10%, rgba(246, 176, 66, 0.25), transparent 60%),
    radial-gradient(1200px 720px at 95% 10%, rgba(89, 198, 255, 0.25), transparent 60%),
    linear-gradient(150deg, #06070d 0%, #101427 45%, #1b1d34 100%);
  color: var(--fg);
}

main {
  min-height: 100vh;
}

.hero {
  padding: 72px clamp(24px, 5vw, 80px) 40px;
  max-width: 720px;
}

.eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}

.hero h1 {
  font-family: "Fraunces", "Times New Roman", serif;
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  margin: 0 0 16px;
}

.subhead {
  margin: 0;
  font-size: 1.1rem;
  color: var(--muted);
}

.scroll-area {
  position: relative;
  height: calc((var(--card-count, 4) + 1) * 100vh);
}

.card-frame {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vw, 48px);
}

.card {
  position: absolute;
  width: min(860px, 90vw);
  min-height: 420px;
  padding: clamp(24px, 4vw, 40px);
  border-radius: 32px;
  background: rgba(15, 17, 32, 0.72);
  backdrop-filter: blur(20px);
  box-shadow: 0 40px 80px var(--shadow);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  grid-template-columns: minmax(180px, 280px) 1fr;
  gap: clamp(20px, 3vw, 40px);
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.media {
  width: 100%;
  border-radius: 24px;
  min-height: 220px;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.media-aurora {
  background-image: linear-gradient(135deg, rgba(122, 255, 247, 0.4), transparent 60%),
    radial-gradient(circle at 20% 20%, #7cffd3 0%, transparent 60%),
    radial-gradient(circle at 80% 30%, #6a70ff 0%, transparent 55%),
    linear-gradient(130deg, #1b2240, #1b2f5a);
}

.media-ember {
  background-image: linear-gradient(160deg, rgba(255, 191, 100, 0.5), transparent 60%),
    radial-gradient(circle at 70% 20%, #ff9a3c 0%, transparent 55%),
    radial-gradient(circle at 40% 70%, #ff4966 0%, transparent 60%),
    linear-gradient(140deg, #2a1412, #3b1d1f);
}

.media-lagoon {
  background-image: linear-gradient(150deg, rgba(120, 236, 255, 0.45), transparent 60%),
    radial-gradient(circle at 30% 20%, #61e7ff 0%, transparent 55%),
    radial-gradient(circle at 70% 65%, #6c7dff 0%, transparent 55%),
    linear-gradient(150deg, #0f1b2a, #1b2c4a);
}

.media-noir {
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 60%),
    radial-gradient(circle at 70% 30%, #2f2f3d 0%, transparent 50%),
    linear-gradient(135deg, #0a0a11, #1d1d2a);
}

.content h2 {
  font-family: "Fraunces", "Times New Roman", serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin: 0 0 12px;
}

.content p {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

.meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 244, 242, 0.7);
}

.footer {
  padding: 64px clamp(24px, 5vw, 80px) 96px;
  color: var(--muted);
}

@media (max-width: 860px) {
  .card {
    grid-template-columns: 1fr;
  }

  .media {
    min-height: 200px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
}

const section = document.getElementById("scroll-area");
const cards = Array.from(document.querySelectorAll(".card"));

section.style.setProperty("--card-count", cards.length);

let sectionTop = 0;
let sectionHeight = 0;
let viewportHeight = window.innerHeight;
let ticking = false;

const clamp = (value, min, max) => Math.min(Math.max(value, min), max);

function measure() {
  const rect = section.getBoundingClientRect();
  viewportHeight = window.innerHeight;
  sectionTop = window.scrollY + rect.top;
  sectionHeight = section.offsetHeight;
}

function updateCards() {
  const maxScroll = Math.max(sectionHeight - viewportHeight, 1);
  const scrollPosition = window.scrollY - sectionTop;
  const progress = clamp(scrollPosition / maxScroll, 0, 1);
  const spread = cards.length - 1;
  const scaled = progress * spread;

  cards.forEach((card, index) => {
    const distance = Math.abs(scaled - index);
    const clamped = clamp(distance, 0, 1);
    const opacity = 1 - clamped;
    const translateY = (scaled - index) * 40;
    const scale = 1 - clamped * 0.05;
    const blur = clamped * 8;

    card.style.opacity = opacity.toFixed(3);
    card.style.transform = `translateY(${translateY.toFixed(2)}px) scale(${scale.toFixed(3)})`;
    card.style.filter = `blur(${blur.toFixed(2)}px)`;
    card.setAttribute("aria-hidden", opacity < 0.5 ? "true" : "false");
  });

  ticking = false;
}

function onScroll() {
  if (!ticking) {
    window.requestAnimationFrame(updateCards);
    ticking = true;
  }
}

measure();
updateCards();

window.addEventListener("resize", () => {
  measure();
  updateCards();
});

window.addEventListener("scroll", onScroll, { passive: true });

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Scroll Transition Cards</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@600;700&family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <main>
    <header class="hero">
      <p class="eyebrow">Scroll Story</p>
      <h1>Transition Cards</h1>
      <p class="subhead">As you scroll, each card fades and slides into the next.</p>
    </header>

    <section class="scroll-area" id="scroll-area">
      <div class="card-frame">
        <article class="card" data-index="0">
          <div class="media media-aurora"></div>
          <div class="content">
            <h2>Aurora District</h2>
            <p>Soft gradients and glass-like layers bring a calm, luminous mood.</p>
            <div class="meta">
              <span>01</span>
              <span>Design Concept</span>
            </div>
          </div>
        </article>

        <article class="card" data-index="1">
          <div class="media media-ember"></div>
          <div class="content">
            <h2>Ember Core</h2>
            <p>Warm tones and sharp geometry shift the energy into motion.</p>
            <div class="meta">
              <span>02</span>
              <span>Brand Story</span>
            </div>
          </div>
        </article>

        <article class="card" data-index="2">
          <div class="media media-lagoon"></div>
          <div class="content">
            <h2>Lagoon Shift</h2>
            <p>Cool blues and bright accents transition into clarity and focus.</p>
            <div class="meta">
              <span>03</span>
              <span>Product Reveal</span>
            </div>
          </div>
        </article>

        <article class="card" data-index="3">
          <div class="media media-noir"></div>
          <div class="content">
            <h2>Noir Signal</h2>
            <p>High contrast, subtle grain, and bold framing close the sequence.</p>
            <div class="meta">
              <span>04</span>
              <span>Final Scene</span>
            </div>
          </div>
        </article>
      </div>
    </section>

    <footer class="footer">
      <p>Keep scrolling to replay the transitions.</p>
    </footer>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/@studio-freight/lenis@1.0.42/bundled/lenis.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
  <script src="script.js"></script>
</body>
</html>