Notification macos

--- name: frame-macos-notification zhname e: "macOS Notification Banner" enname e: "macOS Notification Banner" emoji: "🔔" description: "SimulatedmacOS notification banner + app icon + title and body text, suitable for video overlays / product release teasers" category: card scenario: video aspecthint : "1920×1080 video or 480×120 banner" featured: 41 tags: ["macos", "notification", "banner", "overlay", "frame"] exampleid : sample-frame-macos-notification examplename : "macOS notification · New feature release" exampleformat : markdown exampletagline : "Big Sur frosted glass banner" exampledesc : "App icon + title + two-line body text, for video corner overlay" examplesourceurl : "https://hyperframes.heygen.com/catalog" examplesourcelabel : "hyperframes · macos-notification" od: mode: video surface: video scenario: video upstream: "https://github.com/nexu-io/html-anything" preview: type: html entry: index.html reload: debounce-100 designsystem : requires: false exampleprompt : "Use the 'macOS Notification Banner' template to turn my content into a 'realisticmacOS notification banner + app icon + title and body text, suitable for video overlays / product release teasers.' Maintain the template's visual signature, use real content and data, and avoid lorem ipsum and placeholder images." --- [Template:macOS Notification Banner] [Intent] Render an announcement / message / prompt as amacOS Big Sur+ style notification banner, suitable for video corner overlays, product launch teasers, and social media images. Inspired by hyperframes macos-notification. 【Canvas】Two usage scenarios: - Video overlay: 1920×1080, notification in the top-right corner, transparent background. - Standalone banner: 480×120, centered output. 【Banner Structure】 - Border: Rounded corners 14px (Big SurmacOS standard), 480×120 (or taller at 480×180 if including body text), 12:16px inner margin. - Background: frosted glass effect :background: rgba(245,245,247,0.78) +backdrop-filter: blur(40px) saturate(180%) ; dark versionrgba(28,28,30,0.78) . - Border: 1pxrgba(0,0,0,0.06) (light) /rgba(255,255,255,0.08) (dark); add a 1px light highlight at the toprgba(255,255,255,0.5) . - Shadow:0 10px 40px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08) . 【Content】 - Left side: App icon (44×44, 10px rounded corners, CSS gradient + 1 emoji or monogram letter, no external image links). - Center: - Top row: App name (SF Pro 13px, weight 600) + “now ” or specific time (12px, opacity 0.6) : justified. - Title (15px, weight 600, truncated to 1 line). - Body text (13px, weight 400, truncated to 1:2 lines, line-height 1.35). - Right side (optional): "Open" or "Reply" action button (capsule, light gray background). [Fonts] - Primary:SF Pro Text → fallbackInter /system-ui ; for Chinese, usePingFang SC /Noto Sans SC . [Optional Add-ons] - Stacked notifications: The first notification is at the front, with the next two scaling down and moving backward (scale 0.96 + opacity 0.6 +translateY ). - Entry animation: Slides in from off-screen on the righttransform: translateX(110%)→0 , 200ms ease-out; can be disabled viaprefers-reduced-motion . - "Clear" control chip in the top-right corner (displayed on hover, default opacity 0). [Design Details] - Light mode: white frosted background; dark mode (recommended for video): nearly black frosted background. - Icons must not use externally linked emoji images; use Unicode emojis or CSS to draw geometric shapes. - Must use user-provided content; the title and body text must clearly come from user input. - Single HTML file; note thatbackdrop-filter requires the-webkit- prefix in Safari.