frame-liquid-bg-hero

[Template: Fluid Background Hero] [Intent] Can be used as a video intro frame, SaaS landing top hero, or poster background. WebGL fluid feel, but drawn with CSS / canvas fallback to ensure the single file can be opened by double-clicking. Inspired by hyperframes vfx-liquid-background.

[Canvas] 1920×1080 (landscape) or 1080×1920 (portrait), choose one. Background fills the whole area.

[Fluid Background — 3 implementations, choose by user preference]

1. CSS multi-layer radial-gradient offset breathing (most stable, default recommendation):
   • 3-5 large ellipses radial-gradient(...), colors taken from the palette.
   • Each ellipse gets @keyframes translate + scale + hue-rotate, period 8-14s, staggered; overlay the whole frame with mix-blend-mode: screen or overlay。
   • add 1 layer of backdrop-filter: blur(80px) on top to make the edges blurrier.
2. Canvas + simple perlin noise (intermediate):
   • 80 lines of inline JS, use requestAnimationFrame to draw metaballs or a simplex noise field.
   • Enable when performance allows, fall back to a static screenshot when prefers-reduced-motion .
3. WebGL fragment shader (advanced, use with caution):
   • Use jsdelivr CDN to import regl or inline plain WebGL.
   • Write domain-warp noise in the shader; a single quad, one uniform u_time。

[Top Text Layer]

• Centered or bottom-left: one giant golden quote (5-7vw, serif or bold sans), font: Source Serif Pro / Inter Tight / Manrope Black。
• Text color uses paper white #fafaf8 or ink, depending on the background's lightness; add mix-blend-mode: difference to make it readable on any fluid color.
• Subtitle (small sans, opacity 0.7) in one line.
• Optional CTA chip or hairline + metadata row at the bottom.

[Color Palette — choose 1 of 4, no rainbow]

• 🌅 Solar Peach — #ffb18a + #f78b4c + #d97757, warm orange peach.
• 🌊 Ocean Aqua — #5ac8fa + #0a84ff + #1e3a8a, sea blue.
• 🌌 Aurora Violet — #a78bfa + #7c5cff + #1e1b4b, aurora purple.
• 🌿 Forest Mint — #86efac + #34d399 + #065f46, moss forest.

[Design Details]

• Strictly forbidden: multicolor rainbow (>4 hues), PowerPoint gradients, neon fluorescent overlays.
• Fonts: for Chinese use Noto Serif SC (display) / Noto Sans SC (subtitle).
• Strictly forbidden to use external linked images; all CSS + SVG + optional canvas.
• Must use the user-provided golden quote / title; if the user input is data → distill a golden quote of ≤ 18 characters.
• Single-file HTML, can be prefers-reduced-motion to disable animations.