# 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.
- Category: Developer tools
- Version: 1.0
- Source: https://ownlyplans.com/bhaskar/aurora-saas-hero-section/
## Overview
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.
## 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
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.
## Assets
### prompt.md — The full prompt.
~~~~
# Aurora SaaS hero section
Copy this prompt into Claude, Cursor or Lovable.
```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.
```
~~~~
### 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
Aurora SaaS hero
New: realtime team workspaces
Ship ideas at the speed of thought
Lumen turns scattered notes, tasks and chats into one calm workspace your whole team actually enjoys opening.
```
~~~~
## Build instructions by tool
### Claude Code
Open a terminal in an empty folder, run `claude`, then paste the prompt.
```text
Build the "Aurora SaaS hero section" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/aurora-saas-hero-section/.
Stack: Animation, CSS, HTML.
Follow the plan's steps in order: Paste the prompt → Add the nav and hero copy → Add the glass stat cards → Polish and check.
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 "Aurora SaaS hero section" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/aurora-saas-hero-section/.
Stack: Animation, CSS, HTML.
Follow the plan's steps in order: Paste the prompt → Add the nav and hero copy → Add the glass stat cards → Polish and check.
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 "Aurora SaaS hero section" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/aurora-saas-hero-section/.
Stack: Animation, CSS, HTML.
Follow the plan's steps in order: Paste the prompt → Add the nav and hero copy → Add the glass stat cards → Polish and check.
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.