# Fx Foundation

Glowing hero panel on a dark marketing landing page.

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

## Install

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

## Metadata

- **Level:** block
- **Category:** effects
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** glow-tokens, light-shadow-tokens, theme-derived-gradient-scale, radial-linear-edge-fade-masks, shared-visibility-hook, shared-reduced-motion-hook, personality-motion-gating, offscreen-pause, composed-surface, light-beam-border, sheen-sweep, glass-surface, glass-solid-fallback, device-tier-fallback
- **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:** Glowing hero panel on a dark marketing landing page, Feature cards with a gradient ring and top highlight, Pricing tier highlighted with a travelling beam of light, Fading the edges of a marquee or screenshot strip with edgeFade
- **Avoid when:** Dense data tables or forms where decoration competes with the data, Glass variant over busy imagery without checking text contrast on the real backdrop, More than one or two animated beams in the same viewport, More than two glass surfaces visible at once (extra ones render solid)
- **Preserve when adapting:** decorative-layers-aria-hidden, token-derived-colors, offscreen-pause-and-static-fallback
- **Replace when adapting:** tone-and-secondary-tone, variant-border-shine-combination, surface-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/motion, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion