Animated List

Animated List steps through your items on a timer, animating each card into place with smooth scale/opacity transitions.

Bring your “latest updates” to life. Animated List steps through your items on a timer, animating each card into place with smooth scale/opacity transitions. It automatically adapts to mobile/desktop, supports custom icons and colors, and lets you tune typography for name, description, and time. Choose a delay between items, loop continuously, and style the card/border/gradient to match your brand. Under the hood, the component maintains an index and reveals items cumulatively (newest at the top), with Framer Motion handling entry/exit for crisp performance. Key Features Sequential reveal: Items appear on a schedule (delay), stacking newest first. Looping: Restart from the first item for continuous motion. Responsive layout: Adjusts spacing, card radius, and icon size below your breakpoint. Custom visuals: Emoji/character icons with per-item color ; full control of background, borders, text, and optional gradient overlay. Typography controls: Separate fonts for Name , Description , and Time . Lightweight: No external CSS; animations powered by Framer Motion. Perfect For Notifications / activity feeds Product updates & changelogs Social/event timelines “What’s new” and marketing highlights How It Works (under the hood) The component increments an internal index on a fixed delay . A memoized slice returns items.slice(0, index + 1).reverse() so the newest revealed card appears on top. Loop resets the index when the end is reached. A resize listener toggles mobile mode using your breakpoint to adjust padding, icon size, and radii. Cards enter with a spring scale/opacity animation and exit cleanly via AnimatePresence. Props & Controls Content Items (Array) — each item: name (string) description (string) icon (string, e.g., "🔔") color (icon background) time (string, e.g., "1m ago") Behavior Delay (ms, default 1000) — interval between reveals. Loop Animation (boolean, default true) — restart once all items are shown. Mobile Breakpoint (px, default 768) — switches to compact sizing below this width. Appearance Background (card) Text Color (primary) Secondary Text (description/time) Border Color Show Gradient + Gradient Color (optional overlay) Name Font , Description Font , Time Font Quick Start Drop Animated List onto your page. Open Items and add your updates (icon + color recommended). Set Delay (e.g., 1200ms) and enable Loop if you want continuous motion. Tweak colors and Fonts ; adjust Mobile Breakpoint if needed. Tip: Use short names and concise descriptions for snappy, readable cards—especially on mobile. Implementation Notes Newest card animates in at the top (the list is reversed at render). Hover adds a subtle scale effect for interactivity. Cards use safe defaults for shadow, radius, and spacing; all tuned per breakpoint.

A polished, responsive feed that reveals