CSS Particle Studio
Visually generate complex, interactive canvas particle backgrounds. Adjust the physics and export the exact React code instantly.
Generated React Code
import Particles from "react-tsparticles";
import { loadSlim } from "tsparticles-slim";
// 1. Initialize engine in your App/Component
// const particlesInit = useCallback(async engine => { await loadSlim(engine); }, []);
// 2. Render component
<Particles
id="tsparticles"
init={particlesInit}
options={{
"background": {
"color": {
"value": "transparent"
}
},
"fpsLimit": 120,
"interactivity": {
"events": {
"onClick": {
"enable": true,
"mode": "push"
},
"onHover": {
"enable": true,
"mode": "repulse"
},
"resize": true
},
"modes": {
"push": {
"quantity": 4
},
"repulse": {
"distance": 200,
"duration": 0.4
}
}
},
"particles": {
"color": {
"value": "#ffffff"
},
"links": {
"color": "#ffffff",
"distance": 150,
"enable": true,
"opacity": 0.5,
"width": 1
},
"move": {
"direction": "none",
"enable": true,
"outModes": {
"default": "bounce"
},
"random": false,
"speed": 2,
"straight": false
},
"number": {
"density": {
"enable": true,
"area": 800
},
"value": 80
},
"opacity": {
"value": 0.5
},
"shape": {
"type": "circle"
},
"size": {
"value": {
"min": 1,
"max": 3
}
}
},
"detectRetina": true
}}
/>