# Aurora SaaS hero section

> A dark SaaS landing hero with a drifting aurora background, shimmering headline and floating glass stat cards. Pure HTML and CSS.

- Kind: Plan
- Page: https://ownlyplans.com/bhaskar/aurora-saas-hero-section/
- 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
Build a single-file HTML page: a dark SaaS landing hero for a product called "Lumen" (team workspace app).
Design:
- Background #07070d with three huge blurred circles (violet #6d4aff, teal #00d4c8, pink #ff4fa3) using mix-blend-mode: screen, blurred 70px, drifting slowly with CSS keyframes (14-18s, alternate, different delays). This is the aurora.
- Nav: gradient conic logo mark + wordmark, 4 muted links, a ghost "Sign in" pill button.
- Hero centered, max-width 880px: a small pill badge with a glowing green dot ("New: realtime team workspaces"), an H1 (clamp 42-84px, weight 800, letter-spacing -0.045em) "Ship ideas at the speed of thought" where the last word has an animated light gradient text shimmer, a 19px subtitle, and two buttons (solid white "Start free", glass "Watch the demo").
- Below: three glass cards (rgba white 6%, 1px border, backdrop blur) with a label, big number and a progress bar that animates from 0. Cards fade up in sequence and then float gently.
Rules: system font stack only, no external files, responsive (cards stack under 760px), respect prefers-reduced-motion. Entrance animation: elements fade up with staggered delays. Return only the complete HTML.
```

### 2. Add the nav and hero copy

Check: Logo, links, badge, shimmer headline, subtitle and buttons.

### 3. Add the glass stat cards

Check: Three cards with animated progress bars and a float loop.

### 4. Polish and check

Check: Stagger the entrances, check mobile and reduced motion.

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

## Files

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

## About

Paste one prompt into Claude, Cursor or Lovable and get a polished animated SaaS hero: soft aurora blobs drift behind a shimmering gradient headline, with glass stat cards that float and fill. No images, fonts or libraries, so it loads instantly.

---
Also available as JSON: https://ownlyplans.com/bhaskar/aurora-saas-hero-section/?format=json
MCP server: https://ownlyplans.com/mcp