---
name: nexu-io/stagger-list
source: https://app.decimal.ai/s/nexu-io-stagger-list@1/SKILL.md
source_sha256: ab53f9d8e9ea
---

# stagger-list

List items rise + fade in, one after another. Part of
[motion-anything](https://github.com/nexu-io/motion-anything); obeys `MOTION-SPEC.md`.

## When to use it
- Short above-the-fold lists, menus, nav items, or a dropdown opening.

## When NOT to use it (restraint)
- Long / off-screen lists — use `scroll-reveal`. Keep the whole sequence under ~600ms.

## How to apply
1. Copy `stagger-list.css` and `stagger-list.js` and link them.
2. Wrap items: `<ul data-stagger>…</ul>` (optional `data-stagger-step="70"`).

## Accessibility & performance
- `prefers-reduced-motion`: shown immediately. Transform/opacity only.