# Fx Sparkles

Sparkles background behind a hero heading.

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

## Install

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

## Metadata

- **Level:** block
- **Category:** effects
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** twinkling-particle-cloud, star-and-dot-shapes, density-and-size-props, token-tones, optional-upward-drift, edge-and-radial-mask, static-seeded-frame, offscreen-pause, decorative-layer
- **Intents:** communicate
- **Suits domains:** marketing, saas, ai-workspace, ai-content, ecommerce
- **Interaction:** theme-switch, motion-preference
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** sparkles background behind a hero heading, twinkling stars particle effect behind text on a pricing or launch section, magical sparkle glitter effect for an AI feature card or upgrade banner, subtle starry background for a dark landing page section
- **Avoid when:** Dense tables, forms or charts where moving specks compete with data, Serious status or error screens, Another ambient canvas is already in the same viewport (use motion-particle-field for interactive particles instead)
- **Preserve when adapting:** decorative-canvas-aria-hidden, static-frame-fallback, pause-offscreen
- **Replace when adapting:** density-and-size, shape, tones, mask, 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