frame-macos-notification

【Modelo: Banner de Notificação do macOS】 【Intenção】Renderizar um anúncio / mensagem / dica em um banner de notificação no estilo macOS Big Sur+, adequado para sobreposição de canto de vídeo, teasers de lançamento de produtos, imagens de mídia social. Inspirado em hyperframes macos-notification.

【Tela】Dois usos:

• Sobreposição de vídeo 1920×1080, notificação no canto superior direito, transparente ao redor.
• Banner individual 480×120, saída centralizada.

【Estrutura do Banner】

• Borda externa: Cantos arredondados 14px (padrão macOS Big Sur), 480×120 (ou mais longo 480×180 com corpo), preenchimento interno de 12-16px.
• Fundo: Efeito de vidro fosco — background: rgba(245,245,247,0.78) + backdrop-filter: blur(40px) saturate(180%); Modo escuro rgba(28,28,30,0.78).
• Borda: 1px rgba(0,0,0,0.06) (claro) / rgba(255,255,255,0.08) (escuro); Adicionar um destaque brilhante de 1px no topo rgba(255,255,255,0.5).
• Sombra: 0 10px 40px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08).

【Conteúdo】

• Lado esquerdo: Ícone do App (44×44, cantos arredondados 10px, gradiente CSS + 1 emoji ou letra de monograma, sem imagens de link externo).
• Centro:
  • Linha superior: Nome do App (SF Pro 13px, peso 600) + now ou hora específica (12px, opacidade 0.6) — alinhado em ambas as extremidades.
  • Título (15px, peso 600, truncado em 1 linha).
  • Corpo (13px, peso 400, truncado em 1-2 linhas, altura da linha 1.35).
• Lado direito (opcional): botão de ação "Abrir" ou "Responder" (cápsula, fundo cinza claro).

【Fontes】

• Principal: SF Pro Text → fallback Inter / system-ui; Para chinês, use PingFang SC / Noto Sans SC.

【Adicionais Opcionais】

• Empilhamento de várias notificações: A primeira notificação na frente, as 2 seguintes recuam para trás e para baixo (escala 0.96 + opacidade 0.6 + translateY).
• Animação de entrada: Desliza da direita para fora da tela transform: translateX(110%)→0, 200ms ease-out; Pode ser desativado por prefers-reduced-motion.
• Chip de controle no canto superior direito "Limpar" (exibido ao passar o mouse, opacidade padrão 0).

【Detalhes de Design】

• Fundo em modo claro: branco fosco, modo escuro (recomendado para vídeo): quase preto fosco.
• Ícones não podem usar imagens de emoji de link externo, use emojis unicode ou formas geométricas desenhadas com CSS.
• Deve usar o conteúdo fornecido pelo usuário; Título + corpo claramente originados da entrada do usuário.
• HTML de arquivo único, observe que o Safari precisa do prefixo backdrop-filter -webkit-.