Staggered Grid

A grid of cards that fade in sequentially when they enter the viewport. The stagger handles timing, the reveal handles the entrance.

Preview

01

Design

Pixel-perfect interfaces that scale across devices.
02

Develop

Clean, maintainable code with modern tooling.
03

Deploy

Ship to production with confidence and speed.
04

Measure

Understand what works with real user data.

Complete code

<motion-stagger interval="0.08" y="24" from="first">
  <motion-reveal y="0" duration="0.5">
    <div class="card">
      <h3>Design</h3>
      <p>Pixel-perfect interfaces that scale.</p>
    </div>
  </motion-reveal>

  <motion-reveal y="0" duration="0.5">
    <div class="card">
      <h3>Develop</h3>
      <p>Clean, maintainable code.</p>
    </div>
  </motion-reveal>

  <motion-reveal y="0" duration="0.5">
    <div class="card">
      <h3>Deploy</h3>
      <p>Ship with confidence.</p>
    </div>
  </motion-reveal>
</motion-stagger>

How it works

Two components with one responsibility each: stagger controls when each child appears, reveal controls how it appears.

Stagger timing

<motion-stagger interval="0.08" y="24" from="first">
  <!-- each child enters 80ms after the previous -->
</motion-stagger>

interval is the delay between each child starting its entrance. from controls where the cascade starts: "first" (default), "last", or "center".

Reveal entrance

<motion-reveal y="0" duration="0.5">
  <!-- fades in when it enters the viewport -->
</motion-reveal>

Setting y="0" means no vertical slide, just a fade. Use y="24" for a lift effect. The stagger wraps the reveal, so each child fades in sequence.

Variations

With slide-up

<motion-stagger interval="0.1" y="20" from="center">
  <motion-reveal y="20" duration="0.6">
    <div class="card">...</div>
  </motion-reveal>
</motion-stagger>

Use from="center" to fan outward from the middle. Works well for feature grids.

With viewport trigger

By default, the stagger fires when the first child enters the viewport. Add once to prevent re-triggering on scroll back.

<motion-stagger interval="0.08" y="24" once>
  <motion-reveal y="0">...</motion-reveal>
  <motion-reveal y="0">...</motion-reveal>
</motion-stagger>

Accessibility

Both components respect prefers-reduced-motion. Users get the final state immediately: all cards visible, no stagger, no fade animation.