Notification Stack

Accessibility

• A named section with a list that announces additions politely.
• Every card has a labelled Dismiss button, so swiping is never the only way.
• Cards behind the top one are hidden from assistive tech and inert until the list opens.
• After a dismiss, focus moves to the next card or to the toggle.

Motion

• The stack springs from fan to list in 300 ms, scaling the cards from 0.92 to 1. The count stays put.
• A swipe follows the finger and reveals the Dismiss strip. It dismisses past 40% of the width or at 500 px/s.
• New items drop 12 px and fade in over 240 ms, and older cards slide back one step.
• With reduced motion, the list opens at once and Dismiss stays on the corner button.

Responsive behavior

• 384 px on Web and 358 px on Mobile.
• The header grows to 48 px on Mobile, with a 36 px toggle.
• On touch screens the Dismiss corner stays visible once the list is open.

Performance

• Collapsed, items past the third are transparent and inert.
• Drag position is a motion value, so a swipe does not re-render the stack.
• Removed items are filtered out and leave through AnimatePresence.

• Import NotificationStack from @/components/fetaui/notification-stack and pass items with id, title, body, time and icon.
• Items hide themselves when dismissed. Use onDismiss to remove them from your data too.
• id must be stable and unique. tone sets the icon tile.
• swipePreview is for docs. New items arrive from the top when you add them to items. Composes Button and Icon Button.