diff --git a/package-lock.json b/package-lock.json index 22ae375..e906c3d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,8 @@ "@astrojs/react": "^4.1.5", "@astrojs/tailwind": "^5.1.4", "@radix-ui/react-slot": "^1.1.1", + "@tsparticles/engine": "^3.7.1", + "@tsparticles/react": "^3.0.0", "@types/react": "^19.0.7", "@types/react-dom": "^19.0.3", "astro": "^5.1.7", @@ -21,7 +23,8 @@ "react-dom": "^19.0.0", "tailwind-merge": "^2.6.0", "tailwindcss": "^3.4.17", - "tailwindcss-animate": "^1.0.7" + "tailwindcss-animate": "^1.0.7", + "tsparticles": "^3.7.1" } }, "node_modules/@alloc/quick-lru": { @@ -1711,6 +1714,599 @@ "integrity": "sha512-fTIQwLF+Qhuws31iw7Ncl1R3HUDtGwIipiJ9iU+UsDUwMhegFcQKQHd51nZjb7CArq0MvON8rbgCGQYWHUKAdg==", "license": "MIT" }, + "node_modules/@tsparticles/basic": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/basic/-/basic-3.7.1.tgz", + "integrity": "sha512-oJMJ3qzYUROYaOEsaFXkVynxT2OTWBXbQ9MNc1bJi/bVc1VOU44VN7X/KmiZjD+w1U+Qalk6BeVvDRwpFshblw==", + "funding": [ + { + "type": "github", + "url": "/~https://github.com/sponsors/matteobruni" + }, + { + "type": "github", + "url": "/~https://github.com/sponsors/tsparticles" + }, + { + "type": "buymeacoffee", + "url": "https://www.buymeacoffee.com/matteobruni" + } + ], + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1", + "@tsparticles/move-base": "3.7.1", + "@tsparticles/plugin-hex-color": "3.7.1", + "@tsparticles/plugin-hsl-color": "3.7.1", + "@tsparticles/plugin-rgb-color": "3.7.1", + "@tsparticles/shape-circle": "3.7.1", + "@tsparticles/updater-color": "3.7.1", + "@tsparticles/updater-opacity": "3.7.1", + "@tsparticles/updater-out-modes": "3.7.1", + "@tsparticles/updater-size": "3.7.1" + } + }, + "node_modules/@tsparticles/engine": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/engine/-/engine-3.7.1.tgz", + "integrity": "sha512-GYzBgq/oOE9YJdOL1++MoawWmYg4AvVct6CIrJGx84ZRb3U2owYmLsRGabYl0qX1CWWOvUG569043RJmyp/vQA==", + "funding": [ + { + "type": "github", + "url": "/~https://github.com/sponsors/matteobruni" + }, + { + "type": "github", + "url": "/~https://github.com/sponsors/tsparticles" + }, + { + "type": "buymeacoffee", + "url": "https://www.buymeacoffee.com/matteobruni" + } + ], + "hasInstallScript": true, + "license": "MIT" + }, + "node_modules/@tsparticles/interaction-external-attract": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-attract/-/interaction-external-attract-3.7.1.tgz", + "integrity": "sha512-cpnMsFJ7ZJNKccpQvskKvSs1ofknByHE6FGqbEb17ij7HqvbECQOCOVKHPFnYipHe14cXor/Cd+nVisRcTASoQ==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/interaction-external-bounce": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-bounce/-/interaction-external-bounce-3.7.1.tgz", + "integrity": "sha512-npvU9Qt6WDonjezHqi+hWM44ga2Oh5yXdr8eSoJpvuHZrCP7rIdRSz5XseHouO1bMS9DbXk86sx4qwrhB5w58w==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/interaction-external-bubble": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-bubble/-/interaction-external-bubble-3.7.1.tgz", + "integrity": "sha512-WdbYL46lMfuf2g5kfVB1hhhxRBtEXDvnwz8PJwLKurSThL/27bqsqysyXsMzXtLByXUneGhtJTj4D5I5RYdgjA==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/interaction-external-connect": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-connect/-/interaction-external-connect-3.7.1.tgz", + "integrity": "sha512-hqx0ANIbjLIz/nxmk0LvqANBiNLLmVybbCA7N+xDHtEORvpKjNlKEvMz6Razocl6vRjoHZ/olSwcxIG84dh/cg==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/interaction-external-grab": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-grab/-/interaction-external-grab-3.7.1.tgz", + "integrity": "sha512-JMYpFW+7YvkpK5MYlt4Ec3Gwb5ZxS7RLVL8IRUSd5yJOw25husPTYg+FQywxrt5WhKe+tPsCAYo+uGIbTTHi9w==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/interaction-external-pause": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-pause/-/interaction-external-pause-3.7.1.tgz", + "integrity": "sha512-Kkp+7sCe24hawH0XvS1V6UCCuHfMvpLK7oseqSam9Gt4SyGrFvaqIXxkjXhRhn9MysJyKFPBV4/dtBM1HR9p6A==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/interaction-external-push": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-push/-/interaction-external-push-3.7.1.tgz", + "integrity": "sha512-4VoaR5jvXgQdB7irtq4uSZYr5c+D6TBTVEnLVpBfJhUs6jhw6mgN5g7yp5izIYkK0AlcO431MHn8dvJacvRLDw==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/interaction-external-remove": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-remove/-/interaction-external-remove-3.7.1.tgz", + "integrity": "sha512-FRBW7U7zD5MkO6/b7e8iSMk/UTtRLY2XiIVFZNsKri3Re3yPpvZzzd5tl2YlYGQlg1Xc+K8SJYMQQA3PtgQ/Tg==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/interaction-external-repulse": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-repulse/-/interaction-external-repulse-3.7.1.tgz", + "integrity": "sha512-mwM06dVmg2FEvHMQsPOfRBQWACbjf3qnelODkqI9DSVxQ0B8DESP4BYNXyraFGYv00YiPzRv5Xy/uejHdbsQUA==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/interaction-external-slow": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-slow/-/interaction-external-slow-3.7.1.tgz", + "integrity": "sha512-CfCAs3kUQC3pLOj0dbzn5AolQyBHgjxORLdfnYBhepvFV1BXB+4ytChRfXBzjykBPI6U+rCnw5Fk/vVjAroSFA==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/interaction-external-trail": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-trail/-/interaction-external-trail-3.7.1.tgz", + "integrity": "sha512-M7lNQUWP15m8YIDP/JZcZAXaVJLqdwpBs0Uv9F6dU6jsnNXwwHFVFZ+1icrnlbgl9k/Ehhodbdo5weE7GHhQhQ==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/interaction-particles-attract": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-particles-attract/-/interaction-particles-attract-3.7.1.tgz", + "integrity": "sha512-UABbBORKaiItAT8vR0t4ye2H3VE6/Ah4zcylBlnq0Jd5yDkyP4rnkwhicaY6y4Zlfwyx+0PWdAC4f/ziFAyObg==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/interaction-particles-collisions": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-particles-collisions/-/interaction-particles-collisions-3.7.1.tgz", + "integrity": "sha512-0GY9++Gn2KXViyeifXWkH7a2UO5+uRwyS1rDeTN8eleyiq2j9zQf4xztZEIft8T0hTetq2rkWxQ92j2kev6NVA==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/interaction-particles-links": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-particles-links/-/interaction-particles-links-3.7.1.tgz", + "integrity": "sha512-BxCXAAOBNmEvlyOQzwprryW8YdtMIop2v4kgSCff5MCtDwYWoQIfzaQlWbBAkD9ey6BoF8iMjhBUaY1MnDecTA==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/move-base": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/move-base/-/move-base-3.7.1.tgz", + "integrity": "sha512-LPtMHwJHhzwfRIcSAk814fY9NcRiICwaEbapaJSYyP1DwscSXqOWoyAEWwzV9hMgAcPdsED6nGeg8RCXGm58lw==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/move-parallax": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/move-parallax/-/move-parallax-3.7.1.tgz", + "integrity": "sha512-B40azo6EJyMdI+kmIxpqWDaObPwODTYLDCikzkZ73n5tS6OhFUlkz81Scfo+g1iGTdryKFygUKhVGcG1EFuA5g==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/plugin-absorbers": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/plugin-absorbers/-/plugin-absorbers-3.7.1.tgz", + "integrity": "sha512-3s+fILLV1tdKOq/bXwfoxFVbzkWwXpdWTC2C0QIP6BFwDSQqV5txluiLEf7SCf8C5etQ6dstEnOgVbdzK7+eWA==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/plugin-easing-quad": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/plugin-easing-quad/-/plugin-easing-quad-3.7.1.tgz", + "integrity": "sha512-nSwKCRe6C/noCi3dyZlm1GiQGask0aXdWDuS36b82iwzwQ01cBTXeXR25mLr4fsfMLFfYAZXyBxEMMpw3rkSiw==", + "funding": [ + { + "type": "github", + "url": "/~https://github.com/sponsors/matteobruni" + }, + { + "type": "github", + "url": "/~https://github.com/sponsors/tsparticles" + }, + { + "type": "buymeacoffee", + "url": "https://www.buymeacoffee.com/matteobruni" + } + ], + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/plugin-emitters": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/plugin-emitters/-/plugin-emitters-3.7.1.tgz", + "integrity": "sha512-WV5Uwxp/Ckqv5kZynTj6mj13jYbQCArNLFv8ks+zjdlteoyT5EhQl4rg+TalaySCb1zCd6Fu2Scp35l3JJgbnw==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/plugin-emitters-shape-circle": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/plugin-emitters-shape-circle/-/plugin-emitters-shape-circle-3.7.1.tgz", + "integrity": "sha512-eBwktnGROkiyCvtrSwdPpoRbIjQgV/Odq//0dw8D+qUdnox6dNzzhJjz8L2LAA2kQZBqtdBqV2kcx3w5ZdqoEQ==", + "funding": [ + { + "type": "github", + "url": "/~https://github.com/sponsors/matteobruni" + }, + { + "type": "github", + "url": "/~https://github.com/sponsors/tsparticles" + }, + { + "type": "buymeacoffee", + "url": "https://www.buymeacoffee.com/matteobruni" + } + ], + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1", + "@tsparticles/plugin-emitters": "3.7.1" + } + }, + "node_modules/@tsparticles/plugin-emitters-shape-square": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/plugin-emitters-shape-square/-/plugin-emitters-shape-square-3.7.1.tgz", + "integrity": "sha512-nvGBsRLrkiz6Q38TJRl8Y/eu9i1ChQ9oorQydLBok+iZ6MefuOj39iYsAOkD1w9yRVrFWKHG6CR1mmJUniz/HA==", + "funding": [ + { + "type": "github", + "url": "/~https://github.com/sponsors/matteobruni" + }, + { + "type": "github", + "url": "/~https://github.com/sponsors/tsparticles" + }, + { + "type": "buymeacoffee", + "url": "https://www.buymeacoffee.com/matteobruni" + } + ], + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1", + "@tsparticles/plugin-emitters": "3.7.1" + } + }, + "node_modules/@tsparticles/plugin-hex-color": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/plugin-hex-color/-/plugin-hex-color-3.7.1.tgz", + "integrity": "sha512-7xu3MV8EdNNejjYyEmrq5fCDdYAcqz/9VatLpnwtwR5Q5t2qI0tD4CrcGaFfC/rTAVJacfiJe02UV/hlj03KKA==", + "funding": [ + { + "type": "github", + "url": "/~https://github.com/sponsors/matteobruni" + }, + { + "type": "github", + "url": "/~https://github.com/sponsors/tsparticles" + }, + { + "type": "buymeacoffee", + "url": "https://www.buymeacoffee.com/matteobruni" + } + ], + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/plugin-hsl-color": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/plugin-hsl-color/-/plugin-hsl-color-3.7.1.tgz", + "integrity": "sha512-zzAI1CuoCMBJhgeYZ5Rq42nGbPg35ZzIs11eQegjsWG5Msm5QKSj60qPzERnoUcCc4HCKtIWP7rYMz6h3xpoEg==", + "funding": [ + { + "type": "github", + "url": "/~https://github.com/sponsors/matteobruni" + }, + { + "type": "github", + "url": "/~https://github.com/sponsors/tsparticles" + }, + { + "type": "buymeacoffee", + "url": "https://www.buymeacoffee.com/matteobruni" + } + ], + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/plugin-rgb-color": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/plugin-rgb-color/-/plugin-rgb-color-3.7.1.tgz", + "integrity": "sha512-taEraTpCYR6jpjflqBL95tN0zFU8JrAChXTt8mxVn7gddxoNMHI/LGymEPRCweLukwV6GQyAGOkeGEdWDPtYTA==", + "funding": [ + { + "type": "github", + "url": "/~https://github.com/sponsors/matteobruni" + }, + { + "type": "github", + "url": "/~https://github.com/sponsors/tsparticles" + }, + { + "type": "buymeacoffee", + "url": "https://www.buymeacoffee.com/matteobruni" + } + ], + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/react": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@tsparticles/react/-/react-3.0.0.tgz", + "integrity": "sha512-hjGEtTT1cwv6BcjL+GcVgH++KYs52bIuQGW3PWv7z3tMa8g0bd6RI/vWSLj7p//NZ3uTjEIeilYIUPBh7Jfq/Q==", + "peerDependencies": { + "@tsparticles/engine": "^3.0.2", + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@tsparticles/shape-circle": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/shape-circle/-/shape-circle-3.7.1.tgz", + "integrity": "sha512-kmOWaUuFwuTtcCFYjuyJbdA5qDqWdGsharLalYnIczkLu2c1I8jJo/OmGePKhWn62ocu7mqKMomfElkIcw2AsA==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/shape-emoji": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/shape-emoji/-/shape-emoji-3.7.1.tgz", + "integrity": "sha512-mX18c/xhYVljS/r5Xbowzclw+1YwhtWoQFOOfkmjjZppA+RjgcwSKLvH6E20PaH1yVTjBOfSF+3POKpwsULzTg==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/shape-image": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/shape-image/-/shape-image-3.7.1.tgz", + "integrity": "sha512-eDzfkQhqLY6fb9QH2Vo9TGfdJBFFpYnojhxQxc7IdzIwOFMD3JK4B52RVl9oowR+rNE8dNp6P2L+eMAF4yld0g==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/shape-line": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/shape-line/-/shape-line-3.7.1.tgz", + "integrity": "sha512-lMPYApUpg7avxmYPfHHr4dQepZSNn/g0Q1/g2+lnTi8ZtUBiCZ2WMVy9R3GOzyozbnzigLQ6AJRnOpsUZV7H4g==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/shape-polygon": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/shape-polygon/-/shape-polygon-3.7.1.tgz", + "integrity": "sha512-5FrRfpYC3qnvV2nXBLE4Q0v+SMNWJO8xgzh6MBFwfptvqH4EOrqc/58eS5x0jlf+evwf9LjPgeGkOTcwaHHcYQ==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/shape-square": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/shape-square/-/shape-square-3.7.1.tgz", + "integrity": "sha512-7VCqbRwinjBZ+Ryme27rOtl+jKrET8qDthqZLrAoj3WONBqyt+R9q6SXAJ9WodqEX68IBvcluqbFY5qDZm8iAQ==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/shape-star": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/shape-star/-/shape-star-3.7.1.tgz", + "integrity": "sha512-3G4oipioyWKLEQYT11Sx3k6AObu3dbv/A5LRqGGTQm5IR6UACa+INwykZYI0a+MdJJMb83E0e4Fn3hlZbi0/8w==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/shape-text": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/shape-text/-/shape-text-3.7.1.tgz", + "integrity": "sha512-aU1V9O8uQQBlL0jGFh9Q0b5vQ1Ji6Oo5ptyyj5yJ5uP/ZU00L0Vhk4DNyLXpaU0+H6OBoPpCqnvEsZBB9/HmCQ==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/slim": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/slim/-/slim-3.7.1.tgz", + "integrity": "sha512-OtJEhud2KleX7OxiG2r/VYriHNIwTpFm3sPFy4EOJzAD0EW7KZoKXGpGn5gwGI1NWeB0jso92yNTrTC2ZTW0qw==", + "funding": [ + { + "type": "github", + "url": "/~https://github.com/sponsors/matteobruni" + }, + { + "type": "github", + "url": "/~https://github.com/sponsors/tsparticles" + }, + { + "type": "buymeacoffee", + "url": "https://www.buymeacoffee.com/matteobruni" + } + ], + "license": "MIT", + "dependencies": { + "@tsparticles/basic": "3.7.1", + "@tsparticles/engine": "3.7.1", + "@tsparticles/interaction-external-attract": "3.7.1", + "@tsparticles/interaction-external-bounce": "3.7.1", + "@tsparticles/interaction-external-bubble": "3.7.1", + "@tsparticles/interaction-external-connect": "3.7.1", + "@tsparticles/interaction-external-grab": "3.7.1", + "@tsparticles/interaction-external-pause": "3.7.1", + "@tsparticles/interaction-external-push": "3.7.1", + "@tsparticles/interaction-external-remove": "3.7.1", + "@tsparticles/interaction-external-repulse": "3.7.1", + "@tsparticles/interaction-external-slow": "3.7.1", + "@tsparticles/interaction-particles-attract": "3.7.1", + "@tsparticles/interaction-particles-collisions": "3.7.1", + "@tsparticles/interaction-particles-links": "3.7.1", + "@tsparticles/move-parallax": "3.7.1", + "@tsparticles/plugin-easing-quad": "3.7.1", + "@tsparticles/shape-emoji": "3.7.1", + "@tsparticles/shape-image": "3.7.1", + "@tsparticles/shape-line": "3.7.1", + "@tsparticles/shape-polygon": "3.7.1", + "@tsparticles/shape-square": "3.7.1", + "@tsparticles/shape-star": "3.7.1", + "@tsparticles/updater-life": "3.7.1", + "@tsparticles/updater-rotate": "3.7.1", + "@tsparticles/updater-stroke-color": "3.7.1" + } + }, + "node_modules/@tsparticles/updater-color": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/updater-color/-/updater-color-3.7.1.tgz", + "integrity": "sha512-QimV3yn17dcdJx7PpTwLtw9BhkQ0q8qFF035OdcZpnynBPAO/hg0zvSMpMGoeuDVFH02wWBy4h2/BYCv6wh6Sw==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/updater-destroy": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/updater-destroy/-/updater-destroy-3.7.1.tgz", + "integrity": "sha512-krXNoMDKyeyE/ZjQh3LVjrLYivFefQOQ9i+B7RpMe7x4h+iRgpB6npTCqidGQ82+hZ8G6xfQ9ToduebWwK4JGg==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/updater-life": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/updater-life/-/updater-life-3.7.1.tgz", + "integrity": "sha512-NY5gUrgO5AsARNC0usP9PKahXf7JCxbP/H1vzTfA0SJw4veANfWTldOvhIlcm2CHVP5P1b827p0hWsBHECwz7A==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/updater-opacity": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/updater-opacity/-/updater-opacity-3.7.1.tgz", + "integrity": "sha512-YcyviCooTv7SAKw7sxd84CfJqZ7dYPSdYZzCpedV6TKIObRiwLqXlyLXQGJ3YltghKQSCSolmVy8woWBCDm1qA==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/updater-out-modes": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/updater-out-modes/-/updater-out-modes-3.7.1.tgz", + "integrity": "sha512-Cb5sWquRtUYLSiFpmBjjYKRdpNV52diCo9+qMtK1oVlldDBhUwqO+1TQjdlaA2yl5DURlY9ZfOHXvY+IT7CHCw==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/updater-roll": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/updater-roll/-/updater-roll-3.7.1.tgz", + "integrity": "sha512-gHLRqpTGVGPJBEAIPUiYVembIn5bcaTXXxsUJEM/IN+GIOvj2uZZGZ4r2aFTA6WugqEbJsJdblDSvMfouyz7Ug==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/updater-rotate": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/updater-rotate/-/updater-rotate-3.7.1.tgz", + "integrity": "sha512-toVHwl+h6SvtA8dyxSA2kMH2QdDA71vehuAa+HoRqf1y06h5kxyYiMKZFHCqDJ6lFfRPs47MjrC9dD2bDz14MQ==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/updater-size": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/updater-size/-/updater-size-3.7.1.tgz", + "integrity": "sha512-+Y0H0PnDJVIsJ+zHTyubYu1jtRFmVnY1dAv3VCjScIDw6bcpL/ol+HrtHTGIX0WbMyUfjCyALfAoaXi/Wm8VcQ==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/updater-stroke-color": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/updater-stroke-color/-/updater-stroke-color-3.7.1.tgz", + "integrity": "sha512-VHhQkCNuxjx/Hy7A+g0Yijb24T0+wQ3jNsF/yfrR9dEdZWSBiimZLvV1bilPdAeEtieAJTAZo2VNhcD1snF0iQ==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/updater-tilt": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/updater-tilt/-/updater-tilt-3.7.1.tgz", + "integrity": "sha512-pSOXoXPre1VPKC5nC5GW0L9jw63w1dVdsDdggEau7MP9xO7trko9L/KyayBX12Y4Ief1ca12Incxxr67hw7GGA==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/updater-twinkle": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/updater-twinkle/-/updater-twinkle-3.7.1.tgz", + "integrity": "sha512-maRTqPbeZcxBK6s1ry+ih71qSVaitfP1KTrAKR38v26GMwyO6z+zYV2bu9WTRt21FRFAoxlMLWxNu21GtQoXDA==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/updater-wobble": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/updater-wobble/-/updater-wobble-3.7.1.tgz", + "integrity": "sha512-YIlNg4L0w4egQJhPLpgcvcfv9+X621+cQsrdN9sSmajxhhwtEQvQUvFUzGTcvpjVi+GcBNp0t4sCKEzoP8iaYw==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -6008,6 +6604,41 @@ "license": "0BSD", "optional": true }, + "node_modules/tsparticles": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/tsparticles/-/tsparticles-3.7.1.tgz", + "integrity": "sha512-NNkOYIo01eHpDuaJxDCGgcLEMZKEJTCN/XPVCLg7VxgEWN19rjXpDnDguISxadS8GSFPws7hpGgbeDDAm3MX+Q==", + "funding": [ + { + "type": "github", + "url": "/~https://github.com/sponsors/matteobruni" + }, + { + "type": "github", + "url": "/~https://github.com/sponsors/tsparticles" + }, + { + "type": "buymeacoffee", + "url": "https://www.buymeacoffee.com/matteobruni" + } + ], + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1", + "@tsparticles/interaction-external-trail": "3.7.1", + "@tsparticles/plugin-absorbers": "3.7.1", + "@tsparticles/plugin-emitters": "3.7.1", + "@tsparticles/plugin-emitters-shape-circle": "3.7.1", + "@tsparticles/plugin-emitters-shape-square": "3.7.1", + "@tsparticles/shape-text": "3.7.1", + "@tsparticles/slim": "3.7.1", + "@tsparticles/updater-destroy": "3.7.1", + "@tsparticles/updater-roll": "3.7.1", + "@tsparticles/updater-tilt": "3.7.1", + "@tsparticles/updater-twinkle": "3.7.1", + "@tsparticles/updater-wobble": "3.7.1" + } + }, "node_modules/type-fest": { "version": "4.32.0", "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.32.0.tgz", diff --git a/package.json b/package.json index 503926c..9446a56 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,8 @@ "@astrojs/react": "^4.1.5", "@astrojs/tailwind": "^5.1.4", "@radix-ui/react-slot": "^1.1.1", + "@tsparticles/engine": "^3.7.1", + "@tsparticles/react": "^3.0.0", "@types/react": "^19.0.7", "@types/react-dom": "^19.0.3", "astro": "^5.1.7", @@ -22,6 +24,7 @@ "react-dom": "^19.0.0", "tailwind-merge": "^2.6.0", "tailwindcss": "^3.4.17", - "tailwindcss-animate": "^1.0.7" + "tailwindcss-animate": "^1.0.7", + "tsparticles": "^3.7.1" } } diff --git a/src/components/Particles.tsx b/src/components/Particles.tsx new file mode 100644 index 0000000..e850de7 --- /dev/null +++ b/src/components/Particles.tsx @@ -0,0 +1,104 @@ +import { useEffect, useMemo, useState } from "react"; +import Particles, { initParticlesEngine } from "@tsparticles/react"; +import { + type Container, + type ISourceOptions, + MoveDirection, + OutMode, +} from "@tsparticles/engine"; +// import { loadAll } from "@tsparticles/all"; // if you are going to use `loadAll`, install the "@tsparticles/all" package too. +// import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too. +import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too. +// import { loadBasic } from "@tsparticles/basic"; // if you are going to use `loadBasic`, install the "@tsparticles/basic" package too. + +export const ParticlesComponent = () => { + const [init, setInit] = useState(false); + + // this should be run only once per application lifetime + useEffect(() => { + initParticlesEngine(async (engine) => { + // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets + // this loads the tsparticles package bundle, it's the easiest method for getting everything ready + // starting from v2 you can add only the features you need reducing the bundle size + //await loadAll(engine); + //await loadFull(engine); + await loadSlim(engine); + //await loadBasic(engine); + }).then(() => { + setInit(true); + }); + }, []); + + const particlesLoaded = async (container?: Container): Promise => { + console.log(container); + }; + + const options: ISourceOptions = useMemo( + () => ({ + background: { + color: { + value: "transparent", + }, + }, + fpsLimit: 120, + interactivity: { + events: { + onClick: { + enable: true, + mode: "push", + }, + }, + modes: { + push: { + quantity: 4, + }, + }, + }, + particles: { + color: { + value: "#D4AF37", + }, + move: { + direction: MoveDirection.none, + enable: true, + outModes: { + default: OutMode.out, + }, + random: false, + speed: 0.2, + straight: false, + }, + number: { + density: { + enable: true, + }, + value: 600, + }, + opacity: { + value: 0.4, + }, + shape: { + type: "circle", + }, + size: { + value: { min: 1, max: 5 }, + }, + }, + detectRetina: true, + }), + [] + ); + + if (init) { + return ( + + ); + } + + return null; +} diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index f8f4cbf..bf64a41 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,6 +1,6 @@ --- import Marquee from "../components/ui/marquee"; - +import { ParticlesComponent } from "../components/Particles" const headerContent = ` KVARTERET 30 ÅR @@ -30,6 +30,7 @@ const headerContent = ` +