# Fx Beams Collision

Beams background where light beams fall and collide with the floor.

- id: `fx-beams-collision`
- Page: https://agentic-ui-kit.com/components/fx-beams-collision
- Live preview: https://agentic-ui-kit.com/live/component/fx-beams-collision?piece=fx-beams-collision

## Install

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

## Metadata

- **Level:** block
- **Category:** effects
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** falling-beams, floor-line-collision, spark-burst, impact-flash, beam-count-and-speed, token-tones, static-mid-fall-frame, offscreen-pause, decorative-layer
- **Intents:** communicate
- **Suits domains:** marketing, saas, devtools, ai-agents, analytics
- **Interaction:** theme-switch, motion-preference
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** beams background where light beams fall and collide with the floor, hero section with falling light beams that burst into sparks, api traffic visual with streams landing on an edge, call to action banner with an animated beams collision effect
- **Avoid when:** Small cards where the floor line cannot breathe, Content that already has strong vertical lines or charts, Reduced-motion first products that only want static art
- **Preserve when adapting:** decorative-canvas-aria-hidden, static-frame-fallback, pause-offscreen
- **Replace when adapting:** beam-count, floor-position, speed, tones, children
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/fx-canvas-kit, react
- **Motion:** profile subtle, library canvas, reduced-motion fallback yes, target 30 fps
- **Registry dependencies:** fx-canvas-kit