frame-liquid-bg-hero

【Modelo: Fundo Fluido Hero】 【Intenção】Pode ser usado como quadro de abertura de vídeo, herói superior de landing page SaaS, imagem de fundo de pôster. Sensação de fluido WebGL, mas desenhado com CSS / canvas para degradação, garantindo que um único arquivo possa ser aberto com duplo clique. Inspirado por hyperframes vfx-liquid-background.

【Tela】1920×1080 (horizontal) ou 1080×1920 (vertical), escolha um. O fundo preenche a tela.

【Fundo Fluido — 3 Implementações, Escolha por Preferência do Usuário】

1. CSS radial-gradient em múltiplas camadas com respiração desalinhada (Mais estável, recomendado por padrão):
   • 3-5 elipses grandes radial-gradient(...), cores retiradas da paleta.
   • Cada elipse com @keyframes translate + scale + hue-rotate, período de 8-14s, fora de fase; a tela inteira com mix-blend-mode: screen ou overlay sobreposto.
   • Adicione 1 camada de backdrop-filter: blur(80px) na camada superior para suavizar as bordas.
2. Canvas + ruído Perlin simples (Intermediário):
   • 80 linhas de JS inline, usando requestAnimationFrame para desenhar metaballs ou campo de ruído simplex.
   • Habilite quando o desempenho permitir, volte para captura de tela estática quando prefers-reduced-motion.
3. WebGL fragment shader (Avançado, use com cautela):
   • Use jsdelivr CDN para importar regl ou WebGL puro inline.
   • Shader escreve ruído de distorção de domínio; um único quad, um uniform u_time.

【Camada de Texto Superior】

• Centralizado ou inferior esquerdo: Uma frase gigante inspiradora (5-7vw, serif ou sans-serif bold), fonte: Source Serif Pro / Inter Tight / Manrope Black.
• Cor do texto em branco papel #fafaf8 ou tinta, dependendo do brilho do fundo; adicione mix-blend-mode: difference para torná-lo legível em qualquer cor de fluido.
• Subtítulo (sans-serif pequeno, opacidade 0.7) em uma linha.
• Opcionalmente, um chip CTA ou linha fina + linha de metadados na parte inferior.

【Paleta de Cores — Escolha 1 de 4, sem arco-íris】

• 🌅 Solar Peach — #ffb18a + #f78b4c + #d97757, laranja pêssego quente.
• 🌊 Ocean Aqua — #5ac8fa + #0a84ff + #1e3a8a, azul oceano.
• 🌌 Aurora Violet — #a78bfa + #7c5cff + #1e1b4b, roxo aurora.
• 🌿 Forest Mint — #86efac + #34d399 + #065f46, menta floresta.

【Detalhes de Design】

• Estritamente proibido: arco-íris multicolorido (>4 matizes), gradientes do PowerPoint, sobreposições de neon fluorescente.
• Fontes: Para chinês, use Noto Serif SC (display) / Noto Sans SC (subtítulo).
• Estritamente proibido o uso de imagens externas; tudo em CSS + SVG + canvas opcional.
• Deve usar a frase inspiradora / título fornecido pelo usuário; se a entrada do usuário for dados → extraia uma frase inspiradora de ≤ 18 caracteres.
• HTML de arquivo único, pode ter animações desativadas por prefers-reduced-motion.