Animated List

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

1. Drop Animated List onto your page.

2. Open Items and add your updates (icon + color recommended).

3. Set Delay (e.g., 1200ms) and enable Loop if you want continuous motion.

4. 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.