Free
🛬 Landing Page

Aurora Veil Background

Layered aurora curtains drifting behind content — pure CSS gradients, zero canvas, GPU-cheap.

259 views 607 copies 250 words

The Prompt

# Aurora Veil — Animated Background

## Goal
Build a full-section aurora background: 3 translucent gradient 'curtains' slowly drifting and morphing behind any content. It must drop cleanly into an existing Next.js + Tailwind project as a self-contained component.

## Design Spec
- Base: deep navy-black (#070B14). Curtains: 3 absolutely-positioned layers, each a large (140% size) linear-gradient at different angles using teal/violet/magenta at 12-18% opacity, blur-3xl.
- Each curtain shaped by a different border-radius blob (e.g. 40% 60% 55% 45% / 55% 40% 60% 45%) so edges feel organic.
- A starfield sprinkle: 40 tiny 1px dots via box-shadow trick on a single div, 30% opacity.
- Top and bottom 160px fade masks to blend into surrounding sections.
- Content slot renders above via relative z-10 — component wraps children.

## Motion Spec
- Curtains animate independently: translate ±6%, rotate ±8°, border-radius morph — 26s/34s/42s alternating loops so the pattern never visibly repeats.
- Hue-rotate ±12° on the whole veil over 60s for slow color life.
- Static under reduced-motion: freeze at a hand-picked nice frame (define exact values).
- Respect `prefers-reduced-motion` — provide a static fallback that still looks intentional.

## Component API
- `<AuroraVeil intensity?: 'subtle'|'bold' className children />` — bold raises opacities ~1.5×.

## Quality Bar
- TypeScript strict, zero `any`. Tailwind only — no external CSS files.
- Works on mobile: touch targets ≥ 44px, no hover-only affordances.
- 60fps: animate only `transform` and `opacity`; use `will-change` sparingly.
- Accessible: correct roles/aria, keyboard operable, focus-visible styles.

You may also like