## Glass Notifications (S—474)

A glass notification stack that fans out on hover or focus, with a light that follows the cursor.

- URL: https://sundaeui.dev/components/glass-notifications
- Category: UI components · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/glass-notifications.json`
- Tags: stack, toast, liquid-glass, frosted, glass, notifications, lock-screen

Notifications rest as a stack: the newest on top, the next two peeking behind it, narrower and fainter. Hover, focus or tap and the stack fans out on a spring so every card is readable.
Each card is frosted glass with a hairline edge and an inner highlight; a soft light follows the pointer across the stack. Dismiss a card and it slides away while the rest close the gap; an empty stack says so.

### Usage

```tsx
import { GlassNotifications } from '@/components/sundae/glass-notifications'

<GlassNotifications
  items={[
    { id: '1', app: 'Messages', title: 'Maya', body: 'Landed! See you in 20.', time: 'now', icon: '/apps/messages.png' },
    { id: '2', app: 'Calendar', title: 'Design review', body: 'Starts in 15 minutes', time: '9:45', icon: '#ff6a55' },
  ]}
  onDismiss={markRead}
/>
```

### Props

- `items` (`{ id, app, title, body, time, icon? }[]`, required): Newest first. icon is an image URL or a colour.
- `defaultExpanded` (`boolean`, default `false`): Start fanned out.
- `onDismiss` (`(id: string) => void`): Called after a card is dismissed.
- `tint` (`'clear' | 'smoke'`, default `'clear'`): Glass tint.

### When to use

- Lock-screen or overlay notifications in apps with photographic or video backgrounds.
- Activity feeds floating over a hero.

### When not to use

- Transient confirmations on plain pages: use Toast Stack.
- Long, actionable inboxes: use Notification Center.

### Accessibility

- An ordered list labelled with the count; each card is an article named by app and title.
- The stack opens on keyboard focus as well as hover; cards hidden behind the top card are aria-hidden until it opens.
- Dismiss buttons are labelled per notification; reduced motion removes the spring and slide.