Skip to content

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.
0