SVG Particle
0
Used by 0SVG Particle
Transform images/SVGs into interactive particle animations with hover and repulsion effects.
KEY FEATURES
- — Interactive particle image effect
- — Square, circle, or mixed particle shapes
- — Original, single, or multi-color particles
- — Roam and hide hover animations
- — Customizable transition timing
- — Adjustable particle count and size
- — Cursor-based particle repulsion
- — Multiple repulsion modes
- — Fit and fill image modes
- — Responsive image scaling
API Reference
All props map directly to the controls panel sliders and color pickers.
LAYOUT
PROP
TYPE
DEFAULT
DESCRIPTION
imageConfig
object
{"image":"https://res.cloudinary.com/dhwanyldj/image/upload/v1779715775/Lander_Logo_500_ej78sa.png","mode":"fit","sizeUnit":"%","widthPx":400,"heightPx":400,"widthPct":100,"heightPct":100,"scale":20}
Image prop.
particleShape
enum
square
Particle Shape prop.
particleColor
enum
original
Particle Color prop.
singleColor
color
#ffffff
Color prop.
multiColors
array
["#ffffff","#aaaaaa","#555555"]
Colors prop.
particleCount
number
20
Particle Count prop.
particleSize
number
5
Particle Size prop.
hoverEnabled
boolean
false
Hover Effects prop.
hoverConfig
object
{"hoverType":"roam","transition":{"type":"spring","stiffness":800,"damping":60,"mass":1,"duration":0.8,"ease":"easeOut"},"roamWidth":0,"roamHeight":0,"roamShape":"rectangle","roamOpacity":0.5,"hideType":"scatter"}
Hover Effects prop.
repulsionEnabled
boolean
false
Repulsion prop.
repulsionConfig
object
{"repulsionMode":"outside","repulsionForce":6,"repulsionRadius":80}
Repulsion prop.
