frame-macos-notification

[Template: macOS notification banner] [Intent] Render an announcement / message / notice as a macOS Big Sur+ style notification banner, suitable for video corner overlay, product launch teaser, social media image. Inspired by hyperframes macos-notification.

[Canvas] Two use cases:

• Video overlay 1920×1080, notification placed in the top-right corner, transparent around it.
• Standalone banner 480×120, centered output.

[Banner structure]

• Outer frame: corner radius 14px (macOS Big Sur standard), 480×120 (or longer 480×180 with body), 12-16px padding.
• Background: frosted glass effect — background: rgba(245,245,247,0.78) + backdrop-filter: blur(40px) saturate(180%); dark version rgba(28,28,30,0.78)。
• Border: 1px rgba(0,0,0,0.06) (light) / rgba(255,255,255,0.08) (dark); add a 1px bright highlight at the top rgba(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, corner radius 10px, CSS gradient + 1 emoji or monogram letter, do not use external image links)。
• Middle:
  • Top row: App name (SF Pro 13px, weight 600) + now or specific time (12px, opacity 0.6) — justified to both ends.
  • Title (15px, weight 600, 1-line truncation).
  • Body (13px, weight 400, 1-2 line truncation, line-height 1.35).
• Right side (optional): action button "Open" or "Reply" (capsule, light gray background).

[Fonts]

• Primary: SF Pro Text → fallback Inter / system-ui; for Chinese use PingFang SC / Noto Sans SC。

[Optional additions]

• Multiple stacked notifications: first one in front, the following 2 shrink backward and downward (scale 0.96 + opacity 0.6 + translateY).
• Entrance animation: slide in from off-screen right transform: translateX(110%)→0, 200ms ease-out; can be prefers-reduced-motion dismissed.
• Top-right control chip "Clear" (shown on hover, opacity defaults to 0).

[Design details]

• light mode background white frosted, dark mode (recommended for video) nearly black frosted.
• The icon must not use external emoji images; use unicode emoji or CSS-drawn geometry.
• Must use user-provided content; title + body clearly come from user input.
• Single-file HTML, note backdrop-filter Safari requires the -webkit- prefix.