Deconstructing the Astra Stacking Cards: How to Build 3D Layered Scroll Physics with Zero-Dependency CSS & JavaScript

When modern SaaS platforms like Astra introduce layered card stack animations, most frontend developers immediately reach for bulky third-party animation libraries like GSAP ScrollTrigger or Locomotive Scroll. But adding 100KB+ of JavaScript to run a scroll effect introduces measurable Main Thread drag, degrades Google Core Web Vitals (specifically Interaction to Next Paint – INP), and drains mobile battery. Here is how we engineered high-performance 3D layered stacking cards using 100% native CSS sticky positioning and a sub-millisecond vanilla JavaScript physics loop.

1. The Core CSS Sticky Stacking Mechanics

The foundation of the effect relies on native CSS sticky positioning. In CSS, an element with position: sticky remains in the document flow until its parent container crosses the defined top viewport threshold, at which point it pins. By giving subsequent siblings higher z-index values and controlled sticky offsets, subsequent cards naturally slide over previous cards as the user scrolls.

/* Container establishing the scroll track */
.card-stack-wrapper {
  display: flex;
  flex-direction: column;
  gap: 60px;
  position: relative;
  padding-bottom: 80px;
}

/* Base sticky card panel */
.stack-card-item {
  position: sticky;
  top: clamp(80px, 12vh, 120px);
  border-radius: 28px;
  background: #12111f;
  border: 1px solid rgba(129, 140, 248, 0.25);
  box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.7), 0 24px 60px rgba(0, 0, 0, 0.9);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
  will-change: transform, filter;
  overflow: hidden;
}

/* Ascending stacking order */
.stack-card-item:nth-child(1) { z-index: 10; }
.stack-card-item:nth-child(2) { z-index: 20; }
.stack-card-item:nth-child(3) { z-index: 30; }
.stack-card-item:nth-child(4) { z-index: 40; }

2. The Physics Loop: Sub-Millisecond Transform Calculations

To achieve that signature Astra polish where the underlying card slightly scales down (to 0.95) and dims as the next card scrolls up and layers over it, we attach a passive scroll listener. Using pure geometry with getBoundingClientRect(), we calculate the overlap percentage between card n and card n+1:

const stackCards = document.querySelectorAll(".stack-card-item");

function updateCardStack() {
  // Graceful mobile bypass: preserve native 60fps scrolling on touch
  if (window.innerWidth <= 768) {
    stackCards.forEach(c => {
      c.style.transform = "none";
      c.style.filter = "none";
    });
    return;
  }

  stackCards.forEach((card, i) => {
    if (i < stackCards.length - 1) {
      const nextCard = stackCards[i + 1];
      const cardRect = card.getBoundingClientRect();
      const nextRect = nextCard.getBoundingClientRect();

      const overlap = cardRect.bottom - nextRect.top;
      if (overlap > 0) {
        const progress = Math.min(1, Math.max(0, overlap / (cardRect.height * 0.75)));
        const scale = 1 - (progress * 0.05); // Scales down to 0.95
        const brightness = 1 - (progress * 0.2); // Dims to 0.8
        card.style.transform = `scale(${scale})`;
        card.style.filter = `brightness(${brightness})`;
      } else {
        card.style.transform = "scale(1)";
        card.style.filter = "brightness(1)";
      }
    }
  });
}

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

3. Mobile Ergonomics: Eliminating Viewport Clipping

The most common mistake when implementing stacking cards is leaving sticky positioning active on mobile devices. Because smartphones have limited vertical height (~600px visible area once address bars are rendered), sticky cards with tall content (text + visual mockup) get truncated, preventing the user from reading callouts or tapping CTA buttons.

Our responsive breakpoint at max-width: 768px shifts the cards to position: relative; top: auto; while utilizing order: -1 on the visual container. This displays the high-impact visual proof at the top of each card, followed by the headline, specifications, and full-width thumb-friendly action buttons.

Written by Brian Clark

Founder & Senior Architect at bclarkcodes.dev. Specializing in sub-second WordPress platforms, autonomous AI content pipelines, and custom real-time financial valuation tools. Direct phone: (769) 257-0448.

Direct Call: (769) 257-0448 Book a Free Call