What it looks like
Think of a phone lock screen receiving notifications. Every second by default, a new card is born at the top of the list: it starts tiny and transparent and grows with a light spring, while the cards below slide down. The sample card has rounded corners, a colored square with an icon on the left, a title, a gray timestamp and a short description. In light mode it is white with a soft shadow; in dark mode it turns translucent, with a thin border and a blurred backdrop. Hovering makes a card grow slightly. Once all items are shown, the oldest leaves at the bottom and the cycle repeats.
You may be looking for this if you asked for something like
- notifications popping up one by one, like on a phone
- a list of alerts that animates in by itself
- show visitors that people are buying on my site right now
- a recent activity feed that updates on its own
- that stacking notification effect from the iPhone
- cards that appear at the top and push the others down
- something to make my app look busy on the landing page
Also known as
- incoming notifications
- notification feed
- activity feed
- live social proof
- staggered list animation
- notification stack
When to use
- A social proof section on a landing page that simulates recent activity
- A SaaS hero that shows the product generating events
- A dashboard with an activity or notification feed
- A features page that presents the kinds of alerts the system sends
When to avoid
- Real, important notifications, since the list cycles nonstop and each item disappears on its own
- Areas meant for careful reading, where a new item every second distracts
How to ask your AI
Create an animated notification list on the landing page: each card enters at the top with a spring, pushes the others down and the sequence loops. Use my project colors, provide a static version for reduced motion and keep it light on phones.
With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising.
Questions about Recado
Can I change how fast the items in Recado appear?
Yes. Recado has a delay prop, in milliseconds, that sets the gap between one item and the next; the default is 1000, so one new card per second. Larger values make the feed calmer, which helps on pages with a lot of content around it.
Does Recado work in Nuxt with SSR?
It does, but the animation only starts in the browser. Recado builds its sequence after the page loads, so the server sends an empty list and the cards appear on the client. The demo wraps it in ClientOnly, and it is worth reserving the area height so the layout does not jump.
Does Recado respect reduced motion settings?
The original component always animates and does not read that preference. The THM Componentes prompt asks your AI for a static version for people who turn on reduced motion; with Recado, that can mean showing the cards already in place, without the spring entrance or the continuous cycling.
