{"id":"frame-macos-notification","name":"frame-macos-notification","summary":"リアルなmacOS通知バナー+アプリアイコン+タイトル本文で、動画オーバーレイや製品発売プレビューに適しています","body":"【模板: macOS 通知横幅】\n【意图】把一段公告 / 消息 / 提示渲染成 macOS Big Sur+ 风格的通知横幅, 适合视频角落叠加、产品发布预告、社媒图。Inspired by hyperframes macos-notification。\n\n【画布】两种用法:\n- 视频叠加 1920×1080, 通知放右上角, 周围透明。\n- 单独 banner 480×120, 居中输出。\n\n【横幅结构】\n- 外框: 圆角 14px (macOS Big Sur 标准), 480×120 (或更长 480×180 含正文), 12-16px 内边距。\n- 背景: **frosted glass** 效果 — `background: rgba(245,245,247,0.78)` + `backdrop-filter: blur(40px) saturate(180%)`; 暗色版 `rgba(28,28,30,0.78)`。\n- 边框: 1px `rgba(0,0,0,0.06)` (light) / `rgba(255,255,255,0.08)` (dark); 顶部加 1px 亮 highlight `rgba(255,255,255,0.5)`。\n- 阴影: `0 10px 40px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08)`。\n\n【内容】\n- 左侧: **App icon** (44×44, 圆角 10px, CSS gradient + 1 个 emoji 或 monogram 字母, **不用外链图片**)。\n- 中间:\n  - 顶部 row: App 名 (SF Pro 13px, weight 600) + `now` 或具体时间 (12px, opacity 0.6) — 两端对齐。\n  - 标题 (15px, weight 600, 1 行截断)。\n  - 正文 (13px, weight 400, 1-2 行截断, line-height 1.35)。\n- 右侧 (可选): action button \"Open\" 或 \"Reply\" (capsule, 浅灰底)。\n\n【字体】\n- 主: `SF Pro Text` → fallback `Inter` / `system-ui`; 中文用 `PingFang SC` / `Noto Sans SC`。\n\n【可选附加】\n- 多条通知堆叠: 第一条在前, 后面 2 条向后向下递缩 (scale 0.96 + opacity 0.6 + translateY)。\n- 入场动效: 从屏幕外右侧滑入 `transform: translateX(110%)→0`, 200ms ease-out; 可被 `prefers-reduced-motion` 关闭。\n- 右上角控制 chip \"Clear\" (hover 显示, opacity 默认 0)。\n\n【设计细节】\n- light mode 背景白磨砂, dark mode (推荐 video) 几乎黑磨砂。\n- icon 不能用外链 emoji 图片, 用 unicode emoji 或 CSS 绘制几何。\n- 必须用用户提供的内容; 标题 + 正文清晰来自用户输入。\n- 单文件 HTML, 注意 `backdrop-filter` Safari 需要 `-webkit-` 前缀。","author":"@nexu-io","ownerProfile":null,"authorContacts":null,"sourceUrl":"https://github.com/nexu-io/html-anything/tree/main/next/src/lib/templates/skills/frame-macos-notification","license":"Apache-2.0","category":"card","lang":"en","tokens":742,"stars":0,"calls30d":1,"claimed":false,"visibility":"public","origin":"crawler","version":"0.1.0","createdAt":"2026-08-22","updatedAt":"2026-08-22","files":[{"path":"example.html","size":3421,"sha256":"f14cb0685847e34f08e9ad6d8c4ca8eb87ffaa31de98b241a2e9550d183e67cc"},{"path":"example.md","size":237,"sha256":"b549742b27c39c04ed9964e104e2649e050ec34be24ae85cd25d1502d9886841"}],"requires":{"mcp":[],"tools":[]},"safety":{"flags":[],"scannedAt":"2026-08-22","hasScripts":false,"networkEndpoints":["cdn.tailwindcss.com"]}}