frame-liquid-bg-hero

Liquid Background Hero is a self-contained HTML design template that generates a WebGL-style fluid displacement background with a large quote overlaid on top. It targets video intro frames, SaaS landing-page hero sections, and poster backdrops, giving generated pages a modern animated-fluid look while still rendering as a single HTML file that opens by double-click. The core idea is a flowing, breathing background that never overwhelms an overlaid headline.

The template offers three implementation tiers ordered by complexity: the default and most robust is layered CSS radial-gradients with staggered keyframe animation and a backdrop blur; a mid-tier option uses roughly 80 lines of inline canvas JavaScript drawing metaballs or a simplex-noise field via requestAnimationFrame; and an advanced option uses a WebGL fragment shader with domain-warp noise, optionally pulling the regl library from the jsdelivr CDN. The text layer places a giant serif or bold sans quote using mix-blend-mode difference so it stays readable over any background color, with a subtitle and optional CTA chip. It ships four curated color palettes (Solar Peach, Ocean Aqua, Aurora Violet, Forest Mint) and forbids rainbow gradients, external linked images, and neon overlays. Animation degrades to a static state under prefers-reduced-motion.

It is aimed at designers, marketers, and AI-agent users who want a striking animated hero or intro frame from a single quote or headline. It is presentational only; the sole external-network option is optionally loading the regl library from a public CDN for the advanced shader path.