Aurora

npx shadcn@latest add https://ui.zyeon.ai/r/aurora.json

Build a React + TypeScript + Tailwind "Aurora" component — an animated
aurora-gradient background container. Its only dependency is a cn() class
merger (clsx + tailwind-merge). No hooks, no events, no browser APIs, so it
must stay a server component — do NOT add "use client".

Contract
- export function Aurora(props): props extend React.ComponentProps<"div">
  (rest props + ref spread onto the root div) plus:
  - intensity?: "subtle" | "medium" | "bold" (default "medium") — selects a
    color-mix alpha tier for the blobs: 20% / 32% / 45%.
  - speed?: number (default 18) — seconds for one drift cycle of the base
    blob; the other blobs derive their durations from it.
- children render above the effect layer; className merges onto the root, so
  sizing, borders and rounding come from the call site.

Behavior
- Root div: relative isolate overflow-hidden. It publishes two CSS custom
  properties via inline style: --zy-aurora-speed = `${speed}s` and
  --zy-aurora-alpha = the tier percentage. Consumer style is spread after
  them, so both are overridable per instance without touching source.
- One absolutely-positioned layer (aria-hidden, pointer-events-none, inset-0)
  holds three oversized blob divs (rounded-full + blur-3xl), each hanging off
  a different edge (top-left, top-right, bottom) so the center of the
  container stays calm for content.
- Each blob runs its own @keyframes loop cycling transform between three
  poses (translate3d in own-size percentages + scale 0.9–1.18). Durations
  derive from the speed var — 1x, calc(*1.4), calc(*0.8) — and the offset
  blobs get negative animation-delay (calc of the same var) so their phases
  never sync into a visible repeat.
- The @keyframes ship inside the component via a React 19 hoisted
  <style href="zyeon-aurora" precedence="medium"> tag — no Tailwind config
  edits, and multiple instances dedupe to one style tag by href.
- prefers-reduced-motion: every blob gets motion-reduce animation:none but
  remains rendered — the decoration stays visible, it just stops drifting.
  No functional loss.
- Children are wrapped in a relative z-10 div above the effect layer, so the
  glow can never intercept clicks or sit over text.

Rendering & styling
- Semantic tokens only. Each blob's fill is
  radial-gradient(closest-side, color-mix(in oklab, <token>
  var(--zy-aurora-alpha), transparent), transparent) with one token per blob:
  var(--primary), var(--chart-2), var(--chart-4). No hex / rgb() / oklch()
  anywhere — the aurora re-skins itself with the host theme and dark mode.
- The alpha ceiling (45% at "bold") plus blur-3xl keeps overlaid foreground
  text readable in both color schemes.
- Merge consumer className via cn() on the root div.

Customization levers
- Palette: swap var(--chart-2) / var(--chart-4) for any other theme tokens
  (--chart-1..5, --secondary, --accent) — one token string per blob.
- Intensity tiers: the ALPHA map is the single source of loudness; re-tune
  20/32/45 or add tiers (e.g. faint: "12%") without touching anything else.
- Speed: per instance via the prop, or override --zy-aurora-speed in style
  for one-off pacing; larger numbers are slower and calmer.
- Blob count: a fourth blob is one more div + one more @keyframes block;
  positions and sizes are percentage-based so they scale with the container.
- Scoped usage: it is just a div — wrap a card header, sidebar section or
  banner, not only page heroes; className rounding + overflow-hidden clip
  the glow to any shape.