CSR only Dots component, tune drop shadow

src/components/Dots.tsx

@@ -69,11 +69,14 @@ const Dots: React.FC = () => {
             const nx = x + cos(rad) * length;
             const ny = y + sin(rad) * length;
 
-            let opacity = 0.5;
-            const center_distance = Math.sqrt((x - w / 2) ** 2 + (y - h / 2) ** 2);
+            let opacity = 1;
+            
+            // const center_distance = Math.sqrt((x - w / 2) ** 2 + (y - h / 2) ** 2);
             // if (center_distance < 350)
+            //     opacity = 0;
+
             //     opacity = 
-            stroke(200, 200, 200, (Math.abs(cos(rad)) * 0.8 + 0.2) * p.opacity * 255 * opacity);
+            stroke(200, 200, 200, (Math.abs(cos(rad)) * 0.8 + 0.2) * p.opacity * 255 * 0.5 * opacity);
             circle(nx, ny - offsetY, 1);
         }
     }
@@ -96,22 +99,13 @@ const Dots: React.FC = () => {
 
         window.addEventListener('resize', handleResize);
 
-        // Uncomment to enable scroll-based animation
-        // Tho there is some lag when scrolling, not sure if it's solvable
-        // const handleScroll = () => {
-        //   offsetY = window.scrollY;
-        //   addPoints();
-        // };
-        // window.addEventListener('scroll', handleScroll, { passive: true });
-
         return () => {
             window.removeEventListener('resize', handleResize);
-            // window.removeEventListener('scroll', handleScroll);
             unmount();
         };
     }, []);
 
-    return <div ref={canvasRef} className='fixed left-0 right-0 top-0 bottom-0 pointer-events-none -z-1 animate-bg' />;
+    return <div ref={canvasRef} className='fixed left-0 right-0 top-0 bottom-0 pointer-events-none -z-1 animate-bg delay-500' />;
 };
 
 export default Dots;

src/pages/index.tsx

@@ -8,7 +8,7 @@ import AppWrapper from "@/components/AppWrapper";
 import ItemCard from "@/components/ItemCard";
 import directus, { type Project } from "@/utils/directus";
 import { useBreakpointValue } from "@/utils/helpers";
-import Dots from "@/components/Dots";
+import dynamic from "next/dynamic";
 
 type IndexProps = {
   tagline: string;
@@ -16,6 +16,11 @@ type IndexProps = {
   buttons: { text: string; href: string }[];
 };
 
+const DotsDynamic = dynamic(
+  () => import('@/components/Dots'),
+  { ssr: false }
+)
+
 export async function getStaticProps(): Promise<
   GetStaticPropsResult<IndexProps>
 > {
@@ -63,7 +68,7 @@ const Home: NextPage<IndexProps> = ({
       </Head>
       <AppWrapper hideNavigation={true} className="overflow-x-hidden">
         <div className="flex h-screen w-screen items-center justify-center overflow-hidden">
-          <Dots />
+          <DotsDynamic />
           <div className="flex w-full flex-col items-center justify-start">
             <nav className="animate-fade-in">
               <ul className="flex items-center justify-center gap-4">
@@ -79,8 +84,8 @@ const Home: NextPage<IndexProps> = ({
               </ul>
             </nav>
             <div className="hidden w-screen h-px animate-glow md:block animate-fade-left bg-gradient-to-r from-zinc-300/0 via-zinc-300/50 to-zinc-300/0" />
-            <h1 className="font-hanken select-none py-3.5 px-0.5 z-10 text-transparent duration-1000 bg-white cursor-default text-edge-outline animate-title font-display text-5xl sm:text-6xl md:text-9xl lg:text-10xl whitespace-nowrap bg-clip-text ">
-              XEVION
+            <h1 className="font-hanken uppercase select-none py-3.5 px-0.5 z-10 text-transparent duration-1000 bg-white cursor-default text-edge-outline animate-title font-display text-5xl sm:text-6xl md:text-9xl lg:text-10xl whitespace-nowrap bg-clip-text drop-shadow-extreme">
+              Xevion
             </h1>
             <div className="hidden w-screen h-px animate-glow md:block animate-fade-right bg-gradient-to-r from-zinc-300/0 via-zinc-300/50 to-zinc-300/0" />
       {/* <div className="sm:text-9x cursor-default select-none py-10 font-hanken text-6xl font-black uppercase tracking-widest min-[300px]:text-7xl min-[500px]:text-8xl lg:text-10xl">

tailwind.config.cjs

@@ -31,6 +31,9 @@ module.exports = {
 					},
 				},
 			},
+			dropShadow: {
+				"extreme": "0 0 50px black",
+			},
 			fontFamily: {
         inter: ['"Inter"', "sans-serif"],
         roboto: ['"Roboto"', "sans-serif"],
@@ -44,7 +47,7 @@ module.exports = {
 					"radial-gradient(50% 50% at 50% 50%, var(--tw-gradient-stops))",
 			},
 			animation: {
-				bg: "bg 5s ease-in-out forwards",
+				bg: "fade-in 3s ease-in forwards",
         "fade-in": "fade-in 3s ease-in-out forwards",
 				title: "title 3s ease-out forwards",
 				"fade-left": "fade-left 3s ease-in-out forwards",