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

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

More social posts & cards