← Back to library
aurorahero.html
Open full screen ↗ This is the actual page the prompt produces — scroll and click inside it.

About this one

A first-screen treatment that puts the motion behind the type instead of on it. Reads well on any dark palette and never fights the copy.

The prompt

Build a full-viewport hero section on a near-black background (#07060D).

BACKDROP
Place three large radial gradient blobs behind the content — violet, cyan and magenta — each at roughly 40% opacity and heavily blurred (24px). Animate the group with a single slow drift: 26s, ease-in-out, alternating, translating no more than 4% and scaling to 1.12. One movement for the whole field, not three competing ones. Overlay a fine SVG noise texture at 4% opacity so the gradient does not band on cheap displays.

CONTENT
Left-aligned inside a max-width 1240px container:
1. A small pill badge with a pulsing dot and a short status line.
2. Headline at clamp(2.4rem, 6.5vw, 4.6rem), tight negative letter-spacing (-0.025em), line-height 1.08, capped at 15 characters per line. Put a gradient text fill on one keyword only — the rest stays solid.
3. A one-paragraph lede capped at 54 characters per line, in the muted text colour.
4. Two buttons: a gradient-filled primary and a translucent ghost with an inset 1px border.

Below the buttons, a row of three stats — number in the display face at 1.7rem, small muted label underneath.

RULES
Mobile stacks everything and drops the headline to 2.4rem. Respect prefers-reduced-motion by freezing the drift entirely. No entrance animation on the text — the backdrop carries the motion.

More in Hero sections

Install 3D Website Full screen, opens straight from your home screen.