frame-macos-notification

【テンプレート：macOS 通知バナー】 【意図】お知らせ／メッセージ／ヒントを macOS Big Sur+ スタイルの通知バナーとして表示します。動画の隅へのオーバーレイ、製品リリースの予告、SNS 用画像に適しています。Inspired by hyperframes macos-notification。

【キャンバス】使い方は 2 通りです：

• 動画へのオーバーレイ：1920×1080、通知を右上隅に配置し、周囲は透明にします。
• バナー単体：480×120、中央に配置して出力します。

【バナーの構成】

• 外枠：角丸 14px（macOS Big Sur 標準）、480×120（または本文を含む 480×180）、内側の余白は 12-16px。
• 背景：すりガラス効果 — background: rgba(245,245,247,0.78) + backdrop-filter: blur(40px) saturate(180%)。ダーク版は rgba(28,28,30,0.78)。
• 枠線：1px rgba(0,0,0,0.06)（ライト）／rgba(255,255,255,0.08)（ダーク）。上部に 1px の明るいハイライト rgba(255,255,255,0.5) を追加します。
• 影：0 10px 40px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08)。

【内容】

• 左側：アプリアイコン（44×44、角丸 10px、CSS gradient + 絵文字 1 つまたはモノグラム文字、外部リンク画像は使用しない）。
• 中央：
  • 上部の行：アプリ名（SF Pro 13px、weight 600）+ now または具体的な時刻（12px、opacity 0.6）— 両端揃え。
  • タイトル（15px、weight 600、1 行で省略）。
  • 本文（13px、weight 400、1-2 行で省略、line-height 1.35）。
• 右側（任意）：アクションボタン「Open」または「Reply」（カプセル型、薄いグレーの背景）。

【フォント】

• メイン：SF Pro Text → フォールバックは Inter / system-ui。中国語には PingFang SC / Noto Sans SC を使用します。

【任意の追加要素】

• 通知を複数重ねる場合：1 件目を手前に表示し、後ろの 2 件は後方かつ下方向にずらして縮小します（scale 0.96 + opacity 0.6 + translateY）。
• 表示アニメーション：画面外の右側からスライドインします transform: translateX(110%)→0、200ms ease-out。prefers-reduced-motion で無効にできます。
• 右上隅の操作用チップ「Clear」（ホバー時に表示、opacity はデフォルトで 0）。

【デザインの詳細】

• ライトモードでは白いすりガラス、ダークモード（動画におすすめ）ではほぼ黒いすりガラスにします。
• アイコンに外部リンクの絵文字画像は使用せず、Unicode 絵文字または CSS で描画した幾何学模様を使います。
• 必ずユーザーが提供した内容を使用します。タイトルと本文はユーザーの入力内容から明確に作成します。
• 単一ファイルの HTML とし、Safari では backdrop-filter に -webkit- プレフィックスが必要な点に注意してください。