# Animated mesh gradient hero

> A full-screen living mesh gradient with film grain and a floating wave headline. Loops forever in pure CSS.

- Kind: Plan
- Page: https://ownlyplans.com/bhaskar/animated-mesh-gradient-hero/
- Licence: CC BY 4.0 (reuse with credit)

## Steps

### 1. Paste the prompt

Paste this prompt into your AI tool. It builds everything in one go, then the steps below show what to check.

Prompt:

```text
Make a single HTML file with a full-screen animated mesh-gradient hero.
Background #12091f. Inside a fixed layer (inset -20%, filter blur(60px) saturate(1.4)) place four radial-gradient circles, each about 60vmax wide: coral #ff5e7e, amber #ffb347, violet #6a5cff, teal #19d3c5. Animate each with its own transform keyframes (translate + scale, 11-16s, ease-in-out, infinite alternate) so the colours slowly mix and never repeat obviously.
Add film grain: a fixed overlay using an inline SVG feTurbulence data URI, opacity .22, mix-blend-mode overlay.
Centered content: small letter-spaced uppercase kicker "Studio Flux · 2026", a huge H1 (clamp 48-132px, weight 800, letter-spacing -0.05em, soft shadow) "Flow in every color" where each word is a span that bobs up and down 12px on a staggered wave animation, a 20px paragraph and a frosted glass pill link "Explore the work". Entrances: fade up with blur-in, staggered.
System fonts, no external files, reduced-motion safe. Return only the complete HTML.
```

### 2. Animate them

Check: Different keyframes and durations so the mix keeps changing.

### 3. Add grain and content

Check: SVG noise overlay, kicker, wave headline and glass button.

Done when: You can see it working in the browser.

## Files

- prompt.md: https://ownlyplans.com/bhaskar/animated-mesh-gradient-hero/prompt/ (The full prompt.)
- index.html.md: https://ownlyplans.com/bhaskar/animated-mesh-gradient-hero/index-html/ (Complete code of the result in the video.)

## About

The smallest prompt of the set and the most striking: four blurred colour orbs wander across the screen, film grain adds texture, and the headline words ride a gentle wave. No JavaScript and no images.

---
Also available as JSON: https://ownlyplans.com/bhaskar/animated-mesh-gradient-hero/?format=json
MCP server: https://ownlyplans.com/mcp