Notification
The message on his screen: dark or light glass in the corner, eight seconds, then gone.
Try it
Sarahnow
dinner’s ready, come eat with me
She can see: in a match, about 12 min left
F7On my wayF8After this matchF9Love you
Variant
Sender
Mood
<Notification message={message} variant="full" />When to use
- Only for a message from someone he allowed. Nothing else in the product draws over a game.
- Full for his first week; compact after that; whisper in ranked with polite mode on.
- Urgent only when she marked it so. She has three a day.
Don’t use it
- System news, tips or updates. Those wait in the desktop app.
- More than one card on screen. A second message stacks into one line.
Variants
Sarahnow
one more game then come watch a movie?
Sarah · 1 messageF6Read
whisperSarahUrgentnow
call me when you can, it’s important
F7On my wayF8After this matchF9Love you
Sarah and Mumnow
Both say dinner’s ready
Sent to Sarah · After this match
repliedAnatomy
- Photo and ping. Who it is, before a word is read.
- Name and mood. The mood as a face and a word.
- Message. Two lines at most, at 15px.
- What she can see. Full only: so “after this match” is honest.
- Reply keys. Full and urgent: F7, F8, F9.
- Fuse. A 2px magenta line that burns down over eight seconds.
Motion
| Token | Value | Where it lands |
|---|---|---|
| in | 200ms, ease-out | Drops 8px from the top edge and fades in |
| hold | 8000ms | The fuse burns; adjustable to “until I answer” |
| out | 160ms | Fades upward |
| reduced | fade only | No movement, fuse stilled |
Content
- Her words, untouched. The product never rewrites a message.
- “now”, never a clock time: it’s always just arrived.
Accessibility
Each card is a status region named in full (“Message from Sarah, feeling lonely: …”). It never takes focus; keys listen only while it shows. Eight seconds is adjustable up to “until I answer” and every message stays in history (2.2.1). Nothing flashes (2.3.1).
| Key | What it does |
|---|---|
| F7 | On my way |
| F8 | After this match |
| F9 | Love you |
| F6 | Read a whispered message |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| message | Message | — | Sender, text, mood and context. |
| variant | 'full' | 'compact' | 'whisper' | 'urgent' | 'compact' | How much it shows. |
| fuse | boolean | true | The burning line; off for stills. |
| fuseKey | string | number | — | Change to restart the fuse. |
| tone | 'dark' | 'light' | 'dark' | Dark glass by default; light is a white card for people who read it faster over a dark map. He picks it in Overlay settings. |
Tokens
| Token | Value | Where it lands |
|---|---|---|
| --cm-notification-bg | rgba(20, 20, 23, 0.82) | Notification ground |
| --cm-notification-radius | 16px | Notification corners |
| --cm-notification-fuse | #ff2d95 | The line that burns down |
| --cm-notification-duration | 8000ms | How long it stays |
| --cm-overlay-edge | rgba(255, 255, 255, 0.08) | Its hairline |
| --cm-overlay-text | #f6f6f7 | Name and message |
| --cm-overlay-text-2 | #9a9aa2 | Time and context |
| --cm-status-urgent | #ca0e6f / #ff2d95 | Urgent messages |