𝕏
Sign in
← All sections

Aurora Hero

HeroDark SaaSWorks in Claude Code · Cursor · v0
Build prompt
Build a full-viewport hero section. Near-black background (#07070c) with two large blurred colour orbs (violet #7c5cff top-left, lime #c6ff3d bottom-right) that drift slowly forever with a 9s ease-in-out alternate animation. Centered: a two-line headline at 64px, tight -0.05em tracking, a muted grey subline, and a white pill CTA button. Pure HTML/CSS, no libraries, respects prefers-reduced-motion by stopping the drift.
Code
<style>*{box-sizing:border-box;margin:0}body{font-family:Inter,system-ui,sans-serif;overflow:hidden}</style><style>body{background:#07070c;color:#fff;height:100vh;display:grid;place-items:center;text-align:center}
.b{position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(90px);opacity:.55;animation:f 9s ease-in-out infinite alternate}
.b1{background:#7c5cff;left:10%;top:-10%}.b2{background:#c6ff3d;right:5%;bottom:-25%;animation-delay:-4s}
@keyframes f{to{transform:translate(60px,40px) scale(1.15)}}
h1{position:relative;font-size:64px;letter-spacing:-.05em;line-height:1}p{position:relative;color:#aaa;margin:18px 0 26px}
a{position:relative;background:#fff;color:#000;padding:12px 22px;border-radius:999px;font-weight:700;text-decoration:none}</style>
<div class="b b1"></div><div class="b b2"></div><div><h1>Ship the launch<br>video tonight.</h1><p>Prompts that turn your product into motion.</p><a href="#">Start free</a></div>

More sections

Free
Preview
Free

Logo Reveal Intro

Hero · Bold type
Preview