diff --git a/src/pages/index.js b/src/pages/index.js
index beea1ee..829004a 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -20,6 +20,7 @@ import {
     Phone,
 } from "lucide-react";
 import { useTranslation } from "react-i18next";
+import * as particleConfig from "./index.particles.json";
 
 export const query = graphql`
     query GetMetaAndProjects($language: String) {
@@ -46,6 +47,19 @@ export const query = graphql`
     }
 `;
 
+const loadTsParticles = async () => {
+    import("tsparticles").then(({ tsParticles }) => {
+        tsParticles.load("particle-container", particleConfig).then(() => {
+            anime({
+                targets: ["#particle-container > canvas"],
+                opacity: [0, 1],
+                duration: 10000,
+                easing: "easeInOutCirc",
+            });
+        });
+    });
+};
+
 const IndexPage = (props) => {
     const { t } = useTranslation();
 
@@ -77,6 +91,10 @@ const IndexPage = (props) => {
             duration: 250,
             easing: "easeInOutCirc",
         });
+
+        // eslint-disable-next-line no-undef
+        if (typeof window !== "undefined")
+            window.setTimeout(loadTsParticles, 1000);
     }, []);
 
     let meta = props.data.site.siteMetadata;
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
index 1c437bb..7ba587e 100644
--- a/src/pages/index.module.scss
+++ b/src/pages/index.module.scss
@@ -20,6 +20,10 @@
         padding: 0;
         top: 0;
         left: 0;
+
+        > canvas {
+            opacity: 0;
+        }
     }
 
     .spacer {