Animated List

A real-time push feed where new items animate in from the top with spring physics — Stripe Radar style.

Installation

File Structure

animated-list.tsx

Usage

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

type Item = { id: number; message: string };

const [items, setItems] = useState<Item[]>([]);

// Prepend new items to show at top:
setItems((prev) => [newItem, ...prev].slice(0, 8));

<AnimatedList
  items={items}
  renderItem={(item) => (
    <div className="rounded-xl border p-3">{item.message}</div>
  )}
/>;

API Reference

AnimatedList

PropTypeDefault
items
T[]
-
renderItem
(item: T, index: number) => React.ReactNode
-
maxVisible?
number
8
gap?
string
"gap-3"
className?
string
-

Notes

  • Items must have a stable unique id property (string or number) — this is required for AnimatePresence to correctly track enter/exit animations.
  • Uses AnimatePresence mode="popLayout" so exiting items don't block layout shifts.
  • New items enter with y: -20 → 0 and scale: 0.95 → 1 on a spring; exits use a quick 150ms ease-in.
  • Cap your list with maxVisible to avoid accumulating too many DOM nodes in a live feed.