Animated list
Also called live activity feed, notification feed, or animated notifications
A feed where new items, like notifications or events, arrive one at a time at the top and push the rest down with a spring, to show live activity.
import { useEffect, useState } from 'react';
import { AnimatePresence, motion } from 'motion/react';
type Activity = { id: number; title: string; detail: string; color: string };
const EVENTS = [
{ title: 'New signup', detail: 'maya@studio.dev', color: 'bg-blue-500' },
{
title: 'Payment received',
detail: '$49 · Pro plan',
color: 'bg-green-500'
},
{ title: 'Site published', detail: 'acme.com', color: 'bg-purple-500' }
];
const EVERY_MS = 2000;
const MAX_ITEMS = 4;
const SPRING = { type: 'spring', stiffness: 350, damping: 30 } as const;
export function ActivityFeed() {
const [items, setItems] = useState<Activity[]>([]);
useEffect(() => {
let id = 0;
const timer = setInterval(() => {
const next = { id, ...EVENTS[id % EVENTS.length]! };
id += 1;
// Newest first; the oldest drops off the end once the list is full.
setItems((current) => [next, ...current].slice(0, MAX_ITEMS));
}, EVERY_MS);
return () => clearInterval(timer);
}, []);
return (
<ul aria-live='polite' className='flex w-[360px] flex-col gap-2'>
<AnimatePresence initial={false}>
{items.map((item) => (
// `layout` slides the older items down as a new one arrives.
<motion.li
key={item.id}
layout
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.9 }}
transition={SPRING}
className='flex items-center gap-3 rounded-xl border bg-background p-3 shadow-sm'
>
<span className={`size-9 shrink-0 rounded-lg ${item.color}`} />
<span className='min-w-0 flex-1 text-sm'>
<span className='block font-medium'>{item.title}</span>
<span className='block truncate text-muted-foreground'>
{item.detail}
</span>
</span>
<span className='text-xs text-muted-foreground'>now</span>
</motion.li>
))}
</AnimatePresence>
</ul>
);
}Add a live activity card to the landing page: a 360px wide list that adds a new event to the top every 2 seconds (New signup, Payment received $49, Site published), each with a colored icon, a title, a detail line, and “now”. New items scale up from 0.9 and fade in while the others slide down, using layout animations on a spring (stiffness 350, damping 30). Keep at most 4 items and fade the oldest out. Pause while off-screen, and under prefers-reduced-motion insert items without motion.
Paste into Layerwise or any AI coding tool.
What is Animated list?
An animated list adds items to the top of a feed one by one. Each new item fades and scales in at the top while the items below slide down to make room, usually on a spring so the motion settles naturally. Once the list is full, the oldest item at the bottom fades away.
Landing pages use it to make a product feel alive: payments arriving, new signups, finished deploys, incoming messages. Inside an app, the same pattern suits notification centers and activity feeds where the newest events matter most. Space arrivals 1 to 3 seconds apart so each one can be read.
Build it with layout animation: layout on each item inside AnimatePresence, so the push-down is a smooth transform instead of a jump. Cap the number of items so the page doesn’t grow forever, and pause a demo feed while it is off screen. In a real feed, announce new items through an aria-live="polite" region, and under reduced motion add them without the slide.
Often confused with
- Infinite scroll
- Infinite scroll appends older items at the bottom as you scroll. An animated list adds new items at the top on its own.
- Toast notification
- A toast is a short-lived message about something you just did. An animated list is a running feed of events that stays on the page.
Related terms
All termsLayout animation
An animation that smoothly moves and resizes elements when the layout changes, such as list items gliding to new spots after a sort or filter.
Stagger
Animating a group of items one after another with a small delay between each, so they arrive as a cascade.
Spring animation
An animation driven by simulated spring physics in place of a fixed duration and curve, so motion can overshoot, settle, and react naturally.
Toast notification
A brief message that slides into a corner of the screen to confirm an action, then disappears on its own after a few seconds.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.