# Motion Particle Field

AI platform hero with a constellation of nodes behind the headline and calls to action.

- id: `motion-particle-field`
- Page: https://agentic-ui-kit.com/components/motion-particle-field
- Live preview: https://agentic-ui-kit.com/live/component/motion-particle-field

## Install

```bash
agentic-ui add motion-particle-field
npx shadcn@4.17.0 add @agentic-ui/motion-particle-field
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** canvas-2d-particle-field, area-scaled-particle-count, connecting-lines, pointer-repulsion, seeded-static-frame, snow-variant, ambient-drift-variant, pause-control, offscreen-pause, hidden-tab-pause, reduced-motion-fallback, theme-adaptive-palette
- **Intents:** navigate, communicate
- **Suits domains:** saas, ai-workspace, devtools, analytics
- **Interaction:** hover, click
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** AI platform hero with a constellation of nodes behind the headline and calls to action, Onboarding welcome screen with slow ambient drift behind the first step, Seasonal snow behind a marketing banner or a success moment
- **Avoid when:** Dense working views such as tables, forms or dashboards, or when another looping animation is already on screen, Billing, healthcare or legal screens, and the linear, stripe or enterprise personalities, where the policy shows a static frame, Long body text over the field, where moving dots compete with reading
- **Preserve when adapting:** canvas-aria-hidden, pause-control, seeded-static-frame, offscreen-pause, area-scaled-count
- **Replace when adapting:** variant, density, links, repel-radius, labels, children
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile expressive, library canvas, reduced-motion fallback yes, target 30 fps
- **Registry dependencies:** lib-motion