Notification Stack

Create a notification inbox stack (a panel, not corner toasts). A card titled "Inbox" with a "N new" accent badge that pops in (spring from scale 0) whenever unread items exist, and a "Mark all read" text action. New notifications slide into the TOP of the list from 24px right at 96% scale with a spring (stiffness 420, damping 30), while existing rows glide down via animated layout (FLIP / Framer Motion layout prop). Each row: a small accent-tinted icon tile and one truncating line of text. "Mark all read" sweeps the stack out: rows exit to the right one after another (0.05s stagger, 200ms each), the badge pops away, and an "all caught up" empty state fades in. New arrivals after that rebuild the stack. Accessibility: the list uses aria-live="polite"; the badge carries an aria-label like "3 new notifications". If prefers-reduced-motion is set, add and remove rows instantly with no sweep. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.