Баннер уведомлений macOS для видео и соцсетей
★ 7.2 · design
frame-macos-notification is a Claude Code skill that generates a realistic macOS Big Sur-style notification banner for video overlays, product launch announcements, and social media visuals. The banner renders at 480×120 px (or 480×180 with extended body text) and reproduces the Frosted Glass look using `rgba` backgrounds, `backdrop-filter: blur(40px) saturate(180%)`, layered shadows, and a 1 px border with a top highlight. The left slot holds a 44×44 px app icon built from a CSS gradient with an emoji or monogram — no external images required. The center shows the app name, timestamp, title, and up to two lines of body copy in SF Pro Text / Inter. Dark and light modes are both supported, along with a stacked-notifications effect (scale 0.96 + opacity fade) and a slide-in entrance animation (200 ms ease-out, respects `prefers-reduced-motion`). Output is a single self-contained HTML file with `-webkit-` prefixes for Safari compatibility.
- #macos
- #notification
- #banner
- #overlay
- #video
- #ui-component