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
Free
Featured
Aurora Hero Section
🛬 Landing Page
Full-viewport hero with aurora gradient backdrop and split-text headline reveal.
5.1k 441Cursorv0Lovable
Free
Ink Flow Waves
🎨 Portfolio
Slow liquid ink waves rendered with layered SVG paths and turbulence — organic motion for editorial sites.
4.5k 685CursorClaude CodeWindsurf
Free
FAQ Accordion Pro
🛬 Landing Page
Two-column FAQ section with buttery height animation, deep-link anchors and a 'still stuck' contact card.
4.4k 54CursorClaude CodeLovable
Free
Conversion CTA Banner
🛬 Landing Page
Pre-footer CTA banner with animated gradient border, urgency-free copy structure and dual action hierarchy.
4.3k 827CursorClaude CodeLovable