Animated List

Animated list reveal with motion.

• Location: sabo/src/components/ui/animated-list.tsx

When to use

• Introduce list items with a subtle entrance motion.
• Works well for feature lists, steps, or notifications.

Usage

sabo/src/components/ui/animated-list.tsx

"use client";
import { AnimatedList } from "@/components/ui/animated-list";

export function Example() {
  return (
    <AnimatedList delay={800} className="max-w-sm">
      <div className="rounded-md border p-3">First item</div>
      <div className="rounded-md border p-3">Second item</div>
      <div className="rounded-md border p-3">Third item</div>
    </AnimatedList>
  );
}

Key props

children · ReactNode

The list items to animate. Each child will be revealed sequentially.

delay · number · default: "1000"

Time in milliseconds between each item’s reveal animation.

className · string

Additional CSS classes to apply to the list container.

Styling tip

• Keep items short; staggered delays help readability (100–150ms steps).
• Avoid combining with other heavy animations on the same screen.