Slide · Animate UI

import { Slide, Slides } from '@animate-ui/react/primitives/effects/slide';

export function Hero() {
  return (
    <>
      <Slide direction="up">
        <h1>Animated primitives for React</h1>
      </Slide>

      {/* Staggered: each child starts 100ms after the previous one. */}
      <Slides holdDelay={100} direction="up">
        <Card />
        <Card />
        <Card />
      </Slides>
    </>
  );
}