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.
Use it with Claude or any AI tool. Copy the prompt and paste it in. The link inside gives the AI the whole page as Markdown.
Live preview of the result built from this prompt. Click to pause.
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.
Build it step by step
Sign in to tick steps off-
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.
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 and links
What people built
Show yoursNobody has shared a build yet. Yours could be the first.
Show what you built
Built this plan? Sign in to share your demo video, live app and screenshots.