Kinetic Aurora
Dark hero with drifting aurora light, a blur-to-sharp word reveal and a magnetic call-to-action.
- staggered word reveal
- looping aurora drift
- magnetic button
- cursor spotlight
kinetic-aurora.prompt.md
# Build: "Kinetic Aurora" hero section You are a senior creative front-end engineer. Build one production-ready hero section exactly as specified below. Do not add sections, copy, or features that are not listed. ## Target stack React + Tailwind CSS v4 + Framer Motion ## Concept A dark, full-width hero where soft aurora light drifts slowly behind a big headline. The headline appears word by word, going from blurred to sharp. A white pill button gently follows the cursor (magnetic effect). ## Content (use verbatim) - Badge: "New: 40 motion blocks". Pill shape, glass effect, with a small pulsing dot in the Aurora B color. - Headline (h1): "Ship interfaces that feel alive" - Subheadline: "Motion-first sections you can paste into any stack, or hand to your AI agent as a precise brief." - Button: "Start building", followed by a right-arrow icon that nudges 4px right on hover ## Layout - Section min-height ~680px on desktop, ~560px on mobile. Content max-width ~1024px, vertically centered. - Alignment: center (center the text and the stack). - Headline: ~72px desktop / ~36px mobile, weight 600, line-height 1.05, tight tracking, white. - Subheadline: max-width ~36rem, 65% white, relaxed line-height. ## Design tokens - Background: #070A1A - Aurora A: #6D5BFF · Aurora B: #00D4C8 · Aurora C: #FF4FA3 - Button: white background, black text, fully rounded, colored glow shadow `0 10px 40px -10px #6D5BFF`. ## Motion choreography 1. **Aurora:** three large circular blobs (one per aurora color), `filter: blur(96px)`, `mix-blend-mode: screen`, 60% opacity. Each one loops on x/y translation plus scale 1 → 1.15 → 1 with ease-in-out. Loop durations are 16s, 16+3s and 16+6s so they never sync. 2. **Grain:** an SVG fractal-noise overlay at 12% opacity with `mix-blend-mode: overlay`, to stop the gradients banding. 3. **Spotlight:** a 600px radial white glow (8% alpha) follows the pointer through a spring (stiffness 80, damping 20). 4. **Entrance sequence:** - The badge fades in with a blur, from y+12px. - Each headline word animates from `opacity 0, y 0.6em, blur 12px` to sharp, over 0.8s with ease `[0.22, 1, 0.36, 1]`, staggered 70ms per word. - The subheadline follows, then the button springs in from scale 0.9 (stiffness 200, damping 18). 5. **Magnetic button:** on pointer move, translate the button toward the cursor by `offsetFromCenter × 0.35` through a spring (stiffness 220, damping 15, mass 0.4). Snap back on leave. On hover, a light sheen sweeps across it. On press, it scales to 0.94. ## Responsiveness Use container queries, or breakpoints if the stack lacks them. The section must look intentional from 360px up to 1440px wide. ## Accessibility - Respect `prefers-reduced-motion`: disable the drift, the stagger and the magnetism, and show content immediately. - All decorative layers get `aria-hidden` and `pointer-events: none`. - The button has a visible focus ring. ## Deliverable One self-contained component with no external images or fonts. Keep every value above editable from a single config object at the top of the file.