Add .stagger-children to any parent and its children animate in sequence — no JavaScript needed. Supports up to 8 children with configurable delay and duration.

Feature grid with Tailwind

<div class="stagger-children grid grid-cols-1 sm:grid-cols-3 gap-4"
     style="--stagger-delay: 80ms">
  <div class="glass-subtle rounded-xl p-6">
    <div class="w-10 h-10 rounded-lg bg-violet-500/20 mb-3"></div>
    <h3 class="font-semibold text-white">Fast</h3>
    <p class="text-sm text-white/60 mt-1">
      Zero JS at runtime.
    </p>
  </div>
  <div class="glass-subtle rounded-xl p-6">
    <div class="w-10 h-10 rounded-lg bg-sky-500/20 mb-3"></div>
    <h3 class="font-semibold text-white">Composable</h3>
    <p class="text-sm text-white/60 mt-1">
      Mix with any Tailwind utility.
    </p>
  </div>
  <div class="glass-subtle rounded-xl p-6">
    <div class="w-10 h-10 rounded-lg bg-emerald-500/20 mb-3"></div>
    <h3 class="font-semibold text-white">Accessible</h3>
    <p class="text-sm text-white/60 mt-1">
      Respects reduced motion.
    </p>
  </div>
</div>

Customization

.fast-stagger {
  --stagger-delay: 30ms;     /* Faster cascade */
  --stagger-duration: 0.3s;  /* Quicker animations */
}

.slow-stagger {
  --stagger-delay: 120ms;    /* More dramatic timing */
}