# Staggered Grid

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

Source: https://www.motion-components.dev/docs/recipes/staggered-grid/

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

## Complete code

```html
<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

```html
<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

```html
<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

```html
<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.

```html
<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.