lightswind/dist/components/ui/particles-background.js

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.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// @ts-nocheck
import { useLayoutEffect } from 'react';
export const ParticlesBackground = ({ colors = ['#ff223e', '#5d1eb2', '#ff7300'], size = 3, countDesktop = 60, countTablet = 50, countMobile = 40, zIndex = 0, height = '100vh', }) => {
    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 (_jsxs("div", { id: "js-particles", style: {
            width: '100%',
            height: height,
            position: 'absolute',
            top: 0,
            left: 0,
            zIndex: zIndex,
            pointerEvents: 'none',
        }, children: [_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);
        }
      ` }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", children: _jsx("defs", { children: _jsxs("filter", { id: "glow", children: [_jsx("feGaussianBlur", { stdDeviation: "3.5", result: "coloredBlur" }), _jsxs("feMerge", { children: [_jsx("feMergeNode", { in: "coloredBlur" }), _jsx("feMergeNode", { in: "SourceGraphic" })] })] }) }) })] }));
};
export default ParticlesBackground;