// Realistic macOS notification banner with app icon, title, and body, suited to video overlays or product teasers.
Diagnose and fix browser, preview, or Electron export/download failures, especially image export issues involving Save As, Blob/Data URLs, the File System Access API, createWritable failures, and 0 KB files.
Safely track pull request feedback, resolve review comments or merge conflicts, validate fixes, and use a read-only cross-review before committing or pushing follow-up changes.
Single-file horizontal-swipe HTML deck. Built by copying the seed `assets/template.html` (which carries the proven 5-rule iframe nav script) and pasting slide layouts from `references/layouts.md`. Pitch decks, product overviews, study material — when you don't need the magazine aesthetic of `magazine-web-ppt`.
Single-file horizontal-swipe HTML deck. Built by copying the seed `assets/template.html` (which carries the proven 5-rule iframe nav script) and pasting slide layouts from `references/layouts.md`. Pitch decks, product overviews, study material — when you don't need the magazine aesthetic of `magazine-web-ppt`.
One-click contribution flow for Open Design (nexu-io/open-design) — even for non-coders. Pick one of four cards (ship a Skill or Design System you made with OD; translate docs; fix a typo / write a blog; report a bug), the agent validates and opens a PR (or issue) for you. Trigger words contribute to open design, ship my OD skill, ship my OD design system, translate OD docs, report an OD bug, od-contribute.
Map an extracted Figma / source-code token bag onto the active OD design system, producing a deterministic mapping the generate stage can consume.
| name | frame-macos-notification |
| zh_name | macOS 通知横幅 |
| en_name | macOS Notification Banner |
| emoji | 🔔 |
| description | Realistic macOS notification banner with app icon, title, and body, suited to video overlays or product teasers. |
| zh_description | 拟真 macOS 通知 banner + app icon + 标题正文, 适合 video overlay / 产品发布预告 |
| en_description | Realistic macOS notification banner with app icon, title, and body, suited to video overlays or product teasers. |
| category | card |
| scenario | video |
| aspect_hint | 1920×1080 视频或 480×120 横幅 |
| featured | 41 |
| tags | ["macos","notification","banner","overlay","frame"] |
| example_id | sample-frame-macos-notification |
| example_name | macOS 通知 · 新功能发布 |
| example_format | markdown |
| example_tagline | Big Sur 磨砂玻璃 banner |
| example_desc | App icon + 标题 + 双行正文, 视频角落叠加用 |
| example_source_url | https://hyperframes.heygen.com/catalog |
| example_source_label | 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"},"design_system":{"requires":false},"example_prompt":"Use the macOS Notification Banner template to turn my content into a realistic macOS notification banner for a video overlay or product teaser. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.","example_prompt_i18n":{"zh-CN":"用「macOS 通知横幅」模板把我的内容做成一段「拟真 macOS 通知 banner + app icon + 标题正文, 适合 video overlay / 产品发布预告」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"}} |
【模板: macOS 通知横幅】 【意图】把一段公告 / 消息 / 提示渲染成 macOS Big Sur+ 风格的通知横幅, 适合视频角落叠加、产品发布预告、社媒图。Inspired by hyperframes macos-notification。
【画布】两种用法:
【横幅结构】
background: rgba(245,245,247,0.78) + backdrop-filter: blur(40px) saturate(180%); 暗色版 rgba(28,28,30,0.78)。rgba(0,0,0,0.06) (light) / rgba(255,255,255,0.08) (dark); 顶部加 1px 亮 highlight rgba(255,255,255,0.5)。0 10px 40px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08)。【内容】
now 或具体时间 (12px, opacity 0.6) — 两端对齐。【字体】
SF Pro Text → fallback Inter / system-ui; 中文用 PingFang SC / Noto Sans SC。【可选附加】
transform: translateX(110%)→0, 200ms ease-out; 可被 prefers-reduced-motion 关闭。【设计细节】
backdrop-filter Safari 需要 -webkit- 前缀。