# Animated mesh gradient hero
> A full-screen living mesh gradient with film grain and a floating wave headline. Loops forever in pure CSS.
- Category: Developer tools
- Version: 1.0
- Source: https://ownlyplans.com/bhaskar/animated-mesh-gradient-hero/
## Overview
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.
## Tech stack
- Animation
- CSS
- HTML
## Build 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.
## Assets
### prompt.md — The full prompt.
~~~~
# Animated mesh gradient hero
Copy this prompt into Claude, Cursor or Lovable.
```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.
```
~~~~
### index.html.md — Complete code of the result in the video.
~~~~
# index.html
The finished result as one file. Save it as index.html and open it.
```html
Mesh gradient loop
Studio Flux · 2026
Flow in every color
A living gradient background that loops forever in pure CSS. No images, no libraries.
Explore the work
```
~~~~
## Build instructions by tool
### Claude Code
Open a terminal in an empty folder, run `claude`, then paste the prompt.
```text
Build the "Animated mesh gradient hero" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/animated-mesh-gradient-hero/.
Stack: Animation, CSS, HTML.
Follow the plan's steps in order: Paste the prompt → Animate them → Add grain and content.
Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md.
Ask me before adding anything not in the plan. (Prepared for Claude Code.)
```
### Cursor
Open an empty folder in Cursor, start an Agent chat, then paste the prompt.
```text
Build the "Animated mesh gradient hero" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/animated-mesh-gradient-hero/.
Stack: Animation, CSS, HTML.
Follow the plan's steps in order: Paste the prompt → Animate them → Add grain and content.
Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md.
Ask me before adding anything not in the plan. (Prepared for Cursor.)
```
### Lovable
Start a new Lovable project and paste the prompt as your first message.
```text
Build the "Animated mesh gradient hero" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/animated-mesh-gradient-hero/.
Stack: Animation, CSS, HTML.
Follow the plan's steps in order: Paste the prompt → Animate them → Add grain and content.
Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md.
Ask me before adding anything not in the plan. (Prepared for Lovable.)
```
## Definition of done
- Every build step is complete and the app runs locally.
- The main user flow works end to end.
- Share your build on OwnlyPlans with a demo link, build time and tool.