frame-macos-notification

frame-macos-notification is a visual template skill that renders an announcement, message, or prompt as a realistic macOS Big Sur-style notification banner. It solves the need for convincing OS-notification visuals for video overlays, product launch teasers, and social media images, without hand-building the frosted-glass macOS look each time. Output is single-file HTML.

The template details a faithful notification design: a 14px-rounded frame (480x120, or 480x180 with body text), a frosted-glass background using semi-transparent fills plus backdrop-filter blur and saturation, subtle borders, a top highlight, and layered shadows. Content includes a CSS-drawn app icon (gradient plus an emoji or monogram, deliberately not an external image), an app name with timestamp, a truncated title, and one to two lines of body text, plus an optional Open/Reply capsule button. It offers two canvas modes (a 1920x1080 video overlay with the notification in the top-right on a transparent surround, or a standalone 480x120 banner) and optional extras such as stacked notifications, a slide-in entrance animation that respects prefers-reduced-motion, and a hover Clear chip. It notes practical details like the Safari -webkit- prefix for backdrop-filter and font fallbacks (SF Pro Text to Inter/system-ui, PingFang SC/Noto Sans SC for Chinese). It is inspired by the hyperframes macos-notification frame and part of the nexu-io open-design collection.

It targets video creators, product marketers, and designers who want a native-looking macOS notification for overlays or teasers. Use cases include corner overlays in product videos, launch announcement graphics, and social posts. As a self-contained template, it uses only user-provided content and avoids external image links.