SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsframe-macos-notification

frame-macos-notification

Design & creation

View repository

Updated 10-16 06:51

About this skill

[Template: macOS notification banner] [Intent] Render a piece of announcement / message / prompt into 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 usages:

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

[Banner structure]

  • Outer frame: rounded corners 14px (macOS Big Sur standard), 480×120 (or longer 480×180 including 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, rounded corners 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: the 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 dismissed by prefers-reduced-motion .
  • Top-right control chip "Clear" (shown on hover, opacity defaults to 0).

[Design details]

  • light mode background white frosted, dark mode (recommended for video) almost 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.