Aurora Gradient Background
Slow-moving aurora gradient backdrop: three blurred HSL blobs on a deep base, GPU-friendly, reduced-motion static fallback.
Component code: AuroraBackground.tsx (1 file)
Delivered via signed URL with MCP
fetch_blocks
Full Construction Prompt
ROLE
AI Role
Senior front-end engineer. Build a reusable aurora background component: pure CSS blobs + blur, no canvas, no images.
STACK
Target Stack
React + TypeScript + Tailwind CSS. Animation via CSS keyframes on transform only (GPU-composited).
LAYOUT
Layout
Relative container, overflow hidden. Base layer solid --bg. Three absolutely-positioned radial blobs (60vmax) at fixed anchor points with blur(80px) and 60–75% opacity, mix-blend screen on dark base. Content slot renders above with z-10.
COLOR TOKENS
Color Tokens
--bg: 230 35% 7%; --blob-1: 265 90% 60%; --blob-2: 190 95% 50%; --blob-3: 330 85% 55%.
ANIMATION
Animation
Blobs drift on independent 18s/24s/30s alternate ease-in-out loops, translating ≤8% and scaling 1→1.15. prefers-reduced-motion: animation none (static gradient remains attractive).
RESPONSIVE
Responsive
Blob size in vmax units so composition holds at any aspect; blur reduces to 60px under 640px width for perf.
SAMPLE COPY
Sample Copy
Usage: hero sections, auth pages, CTA panels on dark themes.