lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
98 lines (96 loc) • 4.13 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const ParticlesBackground = ({ colors = ['#ff223e', '#5d1eb2', '#ff7300'], size = 3, countDesktop = 60, countTablet = 50, countMobile = 40, zIndex = 0, height = '100vh', }) => {
(0, react_1.useLayoutEffect)(() => {
const script = document.createElement('script');
script.src = "https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js";
script.onload = () => {
const particlesElement = document.getElementById('js-particles');
if (particlesElement && window.particlesJS) {
const getParticleCount = () => {
const screenWidth = window.innerWidth;
if (screenWidth > 1024)
return countDesktop;
if (screenWidth > 768)
return countTablet;
return countMobile;
};
window.particlesJS('js-particles', {
particles: {
number: {
value: getParticleCount(),
},
color: {
value: colors,
},
shape: {
type: 'circle',
},
opacity: {
value: 1,
random: false,
},
size: {
value: size,
random: true,
},
line_linked: {
enable: false,
},
move: {
enable: true,
speed: 2,
direction: 'none',
random: true,
straight: false,
out_mode: 'out',
},
},
interactivity: {
detect_on: 'canvas',
events: {
onhover: {
enable: false,
},
onclick: {
enable: false,
},
resize: true,
},
},
retina_detect: true,
});
}
};
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, [colors, size, countDesktop, countTablet, countMobile]);
return ((0, jsx_runtime_1.jsxs)("div", { id: "js-particles", style: {
width: '100%',
height: height,
position: 'absolute',
top: 0,
left: 0,
zIndex: zIndex,
pointerEvents: 'none',
}, children: [(0, jsx_runtime_1.jsx)("style", { children: `
#js-particles canvas {
position: absolute;
width: 100%;
height: 100%;
}
.particles-js-canvas-el {
position: absolute;
}
.particles-js-canvas-el circle {
fill: currentColor;
filter: url(#glow);
}
` }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", children: (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("filter", { id: "glow", children: [(0, jsx_runtime_1.jsx)("feGaussianBlur", { stdDeviation: "3.5", result: "coloredBlur" }), (0, jsx_runtime_1.jsxs)("feMerge", { children: [(0, jsx_runtime_1.jsx)("feMergeNode", { in: "coloredBlur" }), (0, jsx_runtime_1.jsx)("feMergeNode", { in: "SourceGraphic" })] })] }) }) })] }));
};
exports.default = ParticlesBackground;
//# sourceMappingURL=particles-background.js.map