Hero sections
← Back to library
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.