Particles Background

Particles can add a dynamic and engaging element to your website's visuals. They help create a feeling of depth, motion, and interaction, making the site more visually appealing.

Install using CLI

npm
pnpm
bun
yarn
npx shadcn-vue@latest add "https://inspira-ui.com/r/particles-bg.json"

Install Manually

Copy and paste the following code

ParticlesBg.vue

API

Prop NameTypeDefaultDescription
colorstring#FFFHexadecimal color code used for particles. Supports 3 or 6 character hex codes.
quantitynumber100The number of particles to generate and display on the canvas.
staticitynumber50Determines how much the particles move based on the mouse's proximity. Higher values reduce movement.
easenumber50Controls the easing effect of particle movement; lower values make particles follow the mouse more closely.

Credits

  • Credits to Magic UI for this fantastic component.
  • Credit to Prodromos Pantos for porting the original component to Vue & Nuxt.