Liststagger-cascade

Cascade

Children fade-up one after another.

tap / hover to play

<motion.ul initial="hidden" animate="show"
  variants={{ show: { transition: { staggerChildren: 0.07 } } }}>
  {items.map((item) => (
    <motion.li
      key={item.id}
      variants={{ hidden: { opacity: 0, y: 12 }, show: { opacity: 1, y: 0 } }}
    >
      {item.label}
    </motion.li>
  ))}
</motion.ul>

How to use it

Copy-paste

Grab the code above and drop it onto any motion.* element.

Or name it

In Claude Code / Cursor, run /ss-motion stagger-cascade and the recipe lands in your code.

Personality

Pairs naturally with the silk seed (smooth, elegant).

20+ named motion moves

All copy-paste, all in StyleSeed’s design engine. MIT.

Browse the gallery Star