Aurora
No library Intermediate
Three blurred colour blobs — rose, blue, and violet — float slowly behind the card content, creating a soft ambient aurora effect. Pure CSS keyframes, no dependencies.
Three blurred colour blobs — rose, blue, and violet — float slowly behind the card content, creating a soft ambient aurora effect. Pure CSS keyframes, no dependencies.
Goal: Create an "Aurora" card animation.
Visual behavior: The card has a near-black background. Three large blurred circular blobs — rose (#f43f5e), blue (#3b82f6), and violet (#a855f7) — are positioned as absolute elements behind the card content (z-index lower than content). Each blob uses filter: blur(28–32px) and opacity ~0.4–0.45. They drift slowly and independently using individual translate keyframe animations with different durations (5s, 7s, 6s) and directions, creating a soft organic aurora light effect.
Technique: Three absolutely positioned divs inside an overflow: hidden container. Each has border-radius: 50% and its own named keyframe (translate X/Y values, ease-in-out, infinite). A z-index layering system keeps blobs behind the card's text content.
Accessibility: All blob animations paused under prefers-reduced-motion; blobs remain at initial position, aurora effect remains visible as static colour.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.