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.

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.

Component Code

You can copy and paste the following code to create these components:

ParticlesBg.vue

Credits

  • Credits to Magic UI for this fantastic component.