# Fx Meteor Shower

Changelog hero card behind the latest release headline.

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

## Install

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

## Metadata

- **Level:** block
- **Category:** effects
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** diagonal-light-streaks, streak-and-spark-variants, count-capped-by-area, configurable-angle, seeded-layout, compositor-only-keyframe, token-tone-and-intensity, light-dark-theming, offscreen-pause, reduced-motion-fallback, accessible-decorative-layer
- **Intents:** communicate
- **Suits domains:** saas, devtools, ai-workspace, analytics, project-management
- **Interaction:** theme-switch, motion-preference
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Changelog hero card behind the latest release headline, Launch announcement band on a product landing page, Empty dashboard hero with a short welcome and one call to action, Upgrade or what's-new card in a settings area
- **Avoid when:** Dense tables, charts or forms where moving streaks compete with data, Signalling an alert or live status, because the effect is decorative and carries no information, Stacking with another ambient background in the same viewport
- **Preserve when adapting:** decorative-layer-aria-hidden, count-capped-by-area, faint-static-trail-fallback
- **Replace when adapting:** variant-and-angle, tone-and-intensity, count-and-speed, container-children
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.9/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/fx-foundation, @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** fx-foundation, lib-motion