# Fx Aurora Background

Luminous aurora hero section on high-end SaaS landing page.

- id: `fx-aurora-background`
- Page: https://agentic-ui-kit.com/components/fx-aurora-background
- Live preview: https://agentic-ui-kit.com/live/fx/fx-aurora-background

## Install

```bash
agentic-ui add fx-aurora-background
npx shadcn@4.17.0 add @agentic-ui/fx-aurora-background
```

## Metadata

- **Level:** block
- **Category:** effects
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** drifting-aurora-gradients, token-derived-palettes, intensity-scaling, edge-and-radial-fade-masks, filter-free-radial-layers, offscreen-pause, motion-personality-gating, static-reduced-motion-fallback, low-tier-static-fallback, polymorphic-container, aa-contrast-preservation
- **Intents:** communicate, explore-detail
- **Suits domains:** saas, ai-workspace, analytics, ecommerce, devtools
- **Interaction:** theme-switch, motion-preference
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Luminous aurora hero section on high-end SaaS landing page, Section divider with subtle dual-fade mask between feature blocks, Ambient backdrop for AI chat and generation interfaces, Highlighted card surface for pricing tiers or product launches
- **Avoid when:** High-density data tables or spreadsheets where background motion causes visual distraction, Static document reading or legal contracts
- **Preserve when adapting:** decorative-layers-aria-hidden, token-derived-palettes, offscreen-pause-and-static-fallback
- **Replace when adapting:** palette-and-intensity, mask-fade-direction, hero-content
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/fx-foundation, @agentic-ui/motion, @agentic-ui/motion-personalities, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 30 fps
- **Registry dependencies:** fx-foundation, lib-motion