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.
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.
Notifications / activity feeds
Product updates & changelogs
Social/event timelines
“What’s new” and marketing highlights
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.
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
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.
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.
Syauqizaidan Khairan Khalaf
