A notification pill at the top of the screen that morphs into a card with a springy resize, then into an inline reply field. Messages queue with an unread count, collapse on a paused-on-hover timer and end in an All caught up state.
npx shadcn@latest add https://hyperblur.dev/r/popup-island-notification.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/popup-island-notification.tsx.
import { PopupIslandNotification } from "@/components/hyperblur/popup-island-notification"
<PopupIslandNotification notifications={messages} onReply={(id, text) => sendReply(id, text)} />| Prop | Type | Default | Description |
|---|---|---|---|
| notifications | { id; from; context; time; message; tint? }[] | Three messages | Queue shown one at a time. tint colors the avatar. |
| defaultExpanded | boolean | false (true when embedded) | Start as the expanded card. |
| duration | number | 6000 | Milliseconds before the expanded card collapses. Paused while hovered or focused. |
| position | "top" | "bottom" | "top" | Screen edge for the fixed island. |
| onReply | (id: string, text: string) => void | Called when a reply is sent. | |
| onMarkRead | (id: string) => void | Called by Mark read and after a reply. | |
| onExpandedChange | (expanded: boolean) => void | Called when the island grows or shrinks. | |
| loop | boolean | false | Refill the queue a moment after the last message is read. |
| embedded | boolean | false | Render in normal flow instead of fixed to the viewport. |
| accent | string | "#3ddc84" | Count, wave and send button color. |
| className | string | Extra classes on the root. | |
| style | React.CSSProperties | Inline styles on the root. |