# Animated List — component for social posts & cards (react)

> **For AI agents:** find the right skill in one call — `curl -s "https://skills.varg.ai/api/search?q=<what the person wants>"` returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add `.md` to its path. Before generating anything, show the person the options on the use-case page.

Notification cards pop in one at a time at the top of a stack, pushing older ones down with a springy settle

- **Install:** `npx shadcn@latest add @magicui/animated-list`
- **Registry:** magic-ui · **Framework:** react · **License:** MIT
- **Docs and preview:** https://magicui.design/docs/components/animated-list
- **Source:** https://github.com/magicuidesign/magicui/blob/main/apps/www/registry/magicui/animated-list.tsx
- **Example:** https://skills.varg.ai/previews/lib-magic-ui-animated-list.mp4?v=49457 (Captured from the library’s own demo page (Magic UI))
- **Time:** Drive from the frame. Runs on its own clock (requestAnimationFrame, timers, springs or CSS). Drive it from frame / fps before rendering, or the render drifts.
- **Runs:** local render, free
- **Aspect:** any

## Prompt that renders it frame-exact

Use Animated List from Magic UI (https://magicui.design/docs/components/animated-list, MIT) for a stream of notifications, payments or sign-ups on one side of the frame or inside a phone mockup. It adds the next item on a setTimeout every `delay` ms and springs it in with motion, so it runs on wall time. For a render, derive the visible count from the frame, n = floor((frame / fps) / (delay / 1000)) + 1, and bring each new card in with Remotion's spring({ frame: frame - itemStart, fps }) on scale and opacity; in HyperFrames build the same entrances as a staggered timeline with a back-out ease. Fill the items with your own icon, title, time and colour, and keep 4–5 on screen.

## Used in

- [Testimonial & review ad](https://skills.varg.ai/video/testimonial-ad.md)
- [Captioned talking clip](https://skills.varg.ai/video/captioned-clip.md)
- [Post-story narration](https://skills.varg.ai/video/story-narration.md)
- [Post to video](https://skills.varg.ai/video/post-to-video.md)
- [Channel intro & end screen](https://skills.varg.ai/video/channel-intro.md)
- [Year in review / Wrapped](https://skills.varg.ai/video/wrapped.md)
- [Single & album promo](https://skills.varg.ai/video/release-promo.md)
- [Stream overlay package](https://skills.varg.ai/video/stream-overlay.md)

## More social posts & cards

- [Instagram Follow](https://skills.varg.ai/component/hf.instagram-follow.md) — `npx hyperframes add instagram-follow`
- [Liquid Glass Notification](https://skills.varg.ai/component/hf.liquid-glass-notification.md) — `npx hyperframes add liquid-glass-notification`
- [macOS Notification](https://skills.varg.ai/component/hf.macos-notification.md) — `npx hyperframes add macos-notification`
- [Native Notification Pop](https://skills.varg.ai/component/hf.native-notification-pop.md) — `npx hyperframes add native-notification-pop`
- [Notification Cascade](https://skills.varg.ai/component/hf.notification-cascade.md) — `npx hyperframes add notification-cascade`
- [Notification Pileup](https://skills.varg.ai/component/hf.notification-pileup.md) — `npx hyperframes add notification-pileup`