Motion Without a Library

Scroll reveals, hover states, staggered lists and page-load entrances are all CSS transitions on a data attribute. One observer flips the attribute when an element crosses the viewport, then stops observing it. That is the entire system.

• Kept: reveals, staggers, hovers, loading states, reduced-motion handling. All of it, at no runtime cost.
• Lost: shared-element transitions between routes, spring physics, gesture-driven drag, interruptible animations that retarget mid-flight.
• Verdict: if you are doing the first list, the dependency is not paying rent. If you need the second list, write it by hand once and you will want the library back.

{items.map((item, i) => (
  <li key={item.id} data-reveal style={{ '--reveal-delay': `${i * 60}ms` } as React.CSSProperties}>
    {item.label}
  </li>
))}