# Fx Light Beams

High-impact landing page hero headers with illuminated focal spotlight.

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

## Install

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

## Metadata

- **Level:** block
- **Category:** effects
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** vertical-rays, conic-spotlight, hero-combined-beams, configurable-density, configurable-color, light-dark-theming, motion-personality-integration, offscreen-pause, reduced-motion-fallback, accessible-decorative-layer
- **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:** High-impact landing page hero headers with illuminated focal spotlight, AI workspace chat entry backdrops with shimmering vertical beam columns, Premium SaaS dashboard banners highlighting flagship announcements, Developer portal welcome sections with subtle animated beam atmosphere
- **Avoid when:** Dense tabular data grids where background animation impairs data legibility, Ephemeral notification toasts or small dialog popovers, Ultra low-end embedded devices lacking hardware CSS acceleration
- **Preserve when adapting:** decorative-layers-aria-hidden, token-derived-colors, offscreen-pause-and-static-fallback
- **Replace when adapting:** ray-density-and-speed, spotlight-spread-and-tone, container-children
- **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 60 fps
- **Registry dependencies:** fx-foundation, lib-motion