Notification Stack

A polished notification stack component that matches iOS 26's liquid glass aesthetic. Drop it on any background — dark, light, gradient, image — and it adapts.What you can control

• Tint color — sets the translucent bubble fill; text color auto-derives from luminance or can be overridden manually

• Font — full Framer font picker (family, weight, size, line height) applied across all text

• Items — array of 1–5 notifications, each with name, message, timestamp, avatar image, and logo badge image

• Header — editable section title with independent color control

• Show Less pill — toggle visibility, change label text, pick from 6 SVG icon options or hide the icon

• Dismiss button — toggle visibility, pick from 3 SVG icon options

• Border radius — adjustable per-item corner rounding (0–40)

• Width — component fills its container; all content reflows responsively

Design details

• Backdrop blur with -webkit-backdrop-filter fallback detection — gracefully degrades to opaque tint on unsupported browsers

• Messages clamp to 3 lines with overflow ellipsis

• Avatars fall back to auto-generated initials when no image is provided

• Logo badges fall back to a generic chat icon

• Subtle hover effects: lift, shadow bloom, background brightening