# ParticleField

> The ParticleField component is an interactive visual effect built with Three.js that renders a field of animated particles connected by lines. Each particle moves with smooth motion, and when particles come within a defined distance, they dynamically connect, creating a lively network-like structure. The effect becomes more engaging as it reacts to mouse movement, causing nearby particles to subtly shift and follow the cursor’s influence. With customizable parameters like particle count, size, color, speed, and connection distance, the component can be tuned for minimal, elegant backdrops or vibrant, energetic visuals. It works especially well in hero sections, landing pages, or interactive showcases where motion and depth can enhance user engagement.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- Live preview: https://21st.dev/@ruixen.ui/components/particle-field

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/particle-field?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt