Generate Aurora-style UI with animated glassmorphic effects

Aurora UI is a design-style child skill ('ethereal, shifting lights, like the Northern Lights trapped beneath a pane of frosted glass'), part of the design-it family and not meant to be triggered directly. Three core principles: Blurred Color Orbs (large, out-of-focus, highly saturated color blobs floating in the background), Glassy Overlays (foreground elements are semi-transparent, using glassmorphism, so the aurora effect shines through), and Fluid Motion (background orbs slowly drift, expand, and contract rather than sitting static).

Use it when the user's request matches this ethereal, glowing-background aesthetic - hero sections, landing pages, or app backgrounds meant to feel atmospheric and premium rather than flat-colored. As a design sub-style, it's selected by the parent design-it skill's routing rather than invoked on its own.

Visual DNA requires dark, deep backgrounds with vibrant luminous accents - Midnight Luxury or a dark-mode-modified Yacht Club palette work well, injecting bright cyan, magenta, or lime green as the glowing orbs - paired with thin, elegant sans-serifs or sophisticated serifs in high-contrast white text, and a minimal foreground so the background stays the visual star. The web implementation places absolute-positioned, heavily blurred divs behind the main content: a radial-gradient orb (background: radial-gradient(circle, rgba(...) 0%, rgba(...) 0) 70%), filter: blur(80px)) animated with a float keyframe that translates and scales the orb across a 20-second loop, with multiple orbs staggered via negative animation-delay. Foreground content uses glassmorphic styling on top - background: rgba(255,255,255,0.03), backdrop-filter: blur(20px), a faint border - so the aurora glow reads through it.

.aurora-blob {
  position: absolute; width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(181,154,95,0.8) 0%, rgba(181,154,95,0) 70%);
  filter: blur(80px);
  animation: float 20s infinite ease-in-out alternate;
}

SwiftUI reproduces the same layering with a ZStack: a black background, two blurred Circle shapes with matching palette colors offset via animated state and looped with .repeatForever(autoreverses: true) over a 10-second ease-in-out duration, and glassy foreground content using the native .ultraThinMaterial background - the direct SwiftUI equivalent of the web's backdrop-filter: blur.

Flutter reproduces the loop with an AnimationController bound to SingleTickerProviderStateMixin, repeating in reverse over a 10-second duration to drive the same drift-and-blur behavior with dart:ui's blur filters.

Designers and developers building a premium, atmospheric hero section, landing page, or app background who want a drifting, glowing aurora effect behind glassmorphic content instead of a flat or static gradient.