Gradient Mesh Hero

Live preview — fully interactive

The prompt

Build an animated gradient-mesh hero section: four huge blurred color blobs drifting slowly behind a centered headline, under a film-grain noise overlay.

## Structure
- A fixed full-viewport .mesh container holding 4 absolutely positioned .blob divs (border-radius 50%, filter bl

Full prompt (2139 chars) unlocks after purchase

The code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { background: #08080d; color: #f2f2f7; font-family: 'Inter', system-ui, sans-serif; overflow: hidden; }
  .mesh { position: fixed; inset: 0; overflow: hidden; }
  .blob { position: absolute; b

Complete self-contained HTML unlocks after purchase

About this effect

A living hero background: four oversized radial-gradient blobs drift, scale and cross paths on 26-38 second loops, blurred into a seamless mesh. A static SVG-noise overlay adds analog film grain so the gradients never band on cheap displays. The eyebrow, masked headline lines, sub copy and CTAs enter with a soft GSAP fade-up stagger. Ideal for SaaS, AI and studio landing pages that need atmosphere without shipping a video file.