Effect · Animate UI

import { Effect, Effects } from '@animate-ui/react/primitives/effects/effect';

export function Hero() {
  return (
    <>
      <Effect fade blur slide zoom>
        <h1>Animated primitives for React</h1>
      </Effect>

      {/* Staggered: each child starts 100ms after the previous one. */}
      <Effects holdDelay={100} fade blur slide zoom>
        <Card />
        <Card />
        <Card />
      </Effects>
    </>
  );
}