Notification Stack

Features

• Collapsed and expanded are the same transform: every tile position is --nst-i multiplied by either --nst-row (list) or --nst-peek (stack), so one index rewrite drives unfolding, restacking, delivering and clearing
• Painted-glass tiles: each card paints the slab's own wallpaper at its own offset under a dark-ink tint, a hairline rim and an inset highlight — frosted glass with nothing sampled and no backdrop-filter
• Two-stage iOS swipe: a short drag rests the row open on a stationary Clear drawer, a long drag past 55% of the row clears outright, and dragging back closes it
• Tap-to-expand on any tile, tap the empty wallpaper to collapse, and a segmented Stacked / List control that drives the same state
• Deliver adds a notification from a rotating pool onto the front of the stack with a spring entrance and a one-shot bell ring, capped at five tiles
• A lock-screen header — a tabular-numeral clock and the date — sits above the stack, decorative (aria-hidden) and never in the tab order
• Five fixed slots keep the frame from reflowing; the live cluster re-centres itself inside the box as tiles arrive and leave
• Buried tiles under a collapsed stack are inert and drop out of the hit-test, so no focus lands inside the pile and a tap on a peeking sliver reaches the wallpaper and unfolds it
• An "All caught up" empty state and a live tile count that rides the cluster down as it unfolds
• Keyboard support: Enter or Space activates a tile, Backspace or Delete clears the focused tile and moves focus to its neighbour, Escape closes an open drawer then collapses the stack
• Respects prefers-reduced-motion — the intro unfold is skipped, entrances land in place and every transition collapses

Accessibility

Live region

role="list" with aria-live="polite" on the stack, so arriving and leaving notifications are announced

Notification rows

role="listitem" wrappers around a real <button> whose aria-label names the app, the message and the time

Clear action

A real <button> with an explicit aria-label, held inert while the drawer is closed

Stack state

Segmented <button> pair with aria-pressed kept in sync with the collapsed state

Collapse target

The empty wallpaper is a decorative aria-hidden div — the accessible path to expand and collapse is the segmented control and Escape

Empty state

"All caught up" is exposed to assistive tech (only its bell glyph is aria-hidden) and is toggled with visibility, so it reaches the accessibility tree exactly while the stack is empty

Buried tiles

Layers under a collapsed stack are inert and drop out of the hit-test, so no focus ever lands on a tile hidden inside the pile and overlapping tiles never compete for the same tap; expanding restores them to the tab order

Focus indicators

:focus-visible outline in --ring on every control

Touch targets

Segment buttons and Deliver floored at --buttons-height-small; tiles are a full row tall

Decorative content

App icons, the pinwheel, the hint and the empty state are aria-hidden="true"

Reduced motion

prefers-reduced-motion: reduce skips the intro unfold and collapses every transition

Customise it with AI

Open Notification Stack in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the notification is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.