WebGL fluid background (banner)

--- name: frame-liquid-bg-hero zhname e: "流体背景 Hero 帧" enname e: "Liquid Background Hero" emoji: "🌊" description: "WebGL fluid displacement background + top-overlay quote, suitable for video intros / landing hero / posters" category: poster scenario: video aspecthint e: "1920×1080 (16:9) or 1080×1920 (9:16)" featured: 39 tags: ["liquid", "fluid", "background", "hero", "html-in-canvas", "vfx"] exampleid : sample-frame-liquid-bg-hero examplename : "Fluid Background Hero · Inspirational Quote" exampleformat : markdown exampletagline : "Aurora Violet Fluid" exampledesc : "Multi-layer radial-gradient breathing background + difference text" examplesourceurl : "https://hyperframes.heygen.com/catalog" examplesourcelabel : "hyperframes · vfx-liquid-background" od: mode: video surface: video scenario: video upstream: "https://github.com/nexu-io/html-anything" preview: type: html entry: index.html reload: debounce-100 designsystem : requires: false exampleprompt : "Use the "Fluid Background Hero Frame" template to turn my content into a "WebGL-style fluid displacement background + a quote overlaid at the top, suitable for video intros / landing hero pages / posters." Maintain the template's visual signature, use real content and data, and avoid lorem ipsum and placeholder images." --- [Template: Fluid Background Hero] 【Intent】Can be used as a video intro frame, a top hero for a SaaS landing page, or a poster background. WebGL fluid effect, but rendered using 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. The background should fill the entire canvas. 【Fluid Background : 3 Implementation Options, Choose Based on User Preference】 1. CSS Multi-Layer Radial-Gradient Offset Breathing (Most stable, default recommendation): - 3:5 large ellipsesradial-gradient(...) , colors taken from the palette. - Each ellipse is nested with@keyframes (translation + scale + hue-rotate), with a cycle of 8:14 seconds and staggered timing; the entire scene is layered withmix-blend-mode: screen oroverlay . - Add one layer ofbackdrop-filter: blur(80px) on top to blur the edges further. 2. Canvas + simple Perlin noise (intermediate): - 80 lines of inline JS, usingrequestAnimationFrame to draw metaballs or a simplex noise field. - Enable when performance allows; fall back to a static screenshot whenprefers-reduced-motion . 3. WebGL fragment shader (advanced, use with caution): - Use the jsdelivr CDN to loadregl or inline plain WebGL. - The shader generates domain-warp noise; a single quad with one uniformu_time . 【Top-level text layer】 - Centered or bottom-left: One giant quote (5:7vw, serif or bold sans), font:Source Serif Pro /Inter Tight /Manrope Black . - Use “paper white”#fafaf8 or “ink” for the text color, depending on the background’s lightness or darkness; addmix-blend-mode: difference to ensure readability on any fluid background color. - Subheading (small sans, opacity 0.7) on a single line. - Optional CTA chip or hairline + metadata row at the bottom. [Color Scheme : Choose 1 of 4; no rainbow] - 🌅 Solar Peach :#ffb18a +#f78b4c +#d97757 , warm orange-peach. - 🌊 Ocean Aqua :#5ac8fa +#0a84ff +#1e3a8a , ocean blue. - 🌌 Aurora Violet :#a78bfa +#7c5cff +#1e1b4b , aurora violet. - 🌿 Forest Mint :#86efac +#34d399 +#065f46 , Moss Forest. 【Design Details】 - Strictly prohibited: multi-color rainbows (>4 hues), PowerPoint gradients, and neon/fluorescent overlays. - Fonts: For Chinese text, useNoto Serif SC (display) /Noto Sans SC (subheadings). - External image links are strictly prohibited; use only CSS + SVG + optional canvas. - Must use the user-provided quote or title; if the user input is data, distill it into a quote of ≤ 18 characters. - Single HTML file; animations must be disabled viaprefers-reduced-motion .