Skip to main content

​
Overview

The Particle Image component creates stunning particle animations applied to images, similar to the effects seen on NuxtLabs.com. It offers extensive customization options for particle behavior, appearance, and animation.

​
Usage

<ParticleImage
  imageSrc="/path/to/image.jpg"
  canvasWidth="800"
  canvasHeight="600"
  renderer="webgl"
  color="#FFFFFF"
  initPosition="random"
  initDirection="random"
  :responsiveWidth="true"
/>

​
Props

​
imageSrc
string
required
Source URL for the image to which the particle effect is applied.
​
class
string
Additional CSS classes to apply to the image element.
​
canvasWidth
string
Width of the particle effect canvas.
​
canvasHeight
string
Height of the particle effect canvas.
​
gravity
string
Gravity force affecting the particle movement.
​
particleSize
string
Size of the particles.
​
particleGap
string
Gap between particles.
​
mouseForce
string
Force applied to particles based on mouse movement.
​
renderer
'default' | 'webgl'
The renderer to use for particle generation, either default or WebGL.
​
color
string
default:"#FFF"
Hexadecimal color code used for particles. Supports 3 or 6 character hex codes.
​
colorArr
number[]
Array of numbers to define multiple particle colors.
​
initPosition
'random' | 'top' | 'left' | 'bottom' | 'right' | 'misplaced' | 'none'
default:"random"
Initial position of the particles when the animation starts.
​
initDirection
'random' | 'top' | 'left' | 'bottom' | 'right' | 'none'
default:"random"
Initial direction of the particles when the animation starts.
​
fadePosition
'explode' | 'top' | 'left' | 'bottom' | 'right' | 'random' | 'none'
default:"none"
Position where the particles fade out.
​
fadeDirection
'random' | 'top' | 'left' | 'bottom' | 'right' | 'none'
default:"none"
Direction in which the particles fade out.
​
noise
number
Noise of the particles.
​
responsiveWidth
boolean
default:"false"
Should the canvas be responsive.

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us