Fix types and add animated background

components.json

@@ -1,21 +1,21 @@
 {
-    "$schema": "https://ui.shadcn.com/schema.json",
-    "style": "new-york",
-    "rsc": false,
-    "tsx": true,
-    "tailwind": {
-      "config": "",
-      "css": "~/app/globals.css",
-      "baseColor": "neutral",
-      "cssVariables": true,
-      "prefix": ""
-    },
-    "aliases": {
-      "components": "~/components",
-      "utils": "~/lib/utils",
-      "ui": "~/ui",
-      "lib": "~/lib",
-      "hooks": "~/hooks"
-    },
-    "iconLibrary": "lucide"
-}
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "~/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "~/components",
+    "utils": "~/lib/utils",
+    "ui": "~/ui",
+    "lib": "~/lib",
+    "hooks": "~/hooks"
+  }
+}

package.json

@@ -34,6 +34,7 @@
     "@vercel/speed-insights": "^1.3.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "culori": "^4.0.2",
     "lucide-react": "^0.544.0",
     "next": "15.5.9",
     "postcss": "^8.5.6",
@@ -49,13 +50,13 @@
     "@testing-library/react": "^16.3.1",
     "@testing-library/user-event": "^14.6.1",
     "@types/node": "24.5.2",
-    "@types/react": "^19.1.13",
+    "@types/react": "^19.2.8",
     "@vitejs/plugin-react": "^5.1.2",
-    "@vitest/coverage-v8": "^4.0.16",
-    "@vitest/ui": "^4.0.16",
+    "@vitest/coverage-v8": "^4.0.17",
+    "@vitest/ui": "^4.0.17",
     "husky": "^9.1.7",
     "jsdom": "^27.4.0",
     "typescript": "5.9.2",
-    "vitest": "^4.0.16"
+    "vitest": "^4.0.17"
   }
 }

src/app/layout.tsx

@@ -1,6 +1,7 @@
 import { Analytics } from '@vercel/analytics/react';
 import { SpeedInsights } from '@vercel/speed-insights/next';
 import type { Metadata } from 'next';
+import Script from 'next/script';
 import './globals.css';
 
 type RootLayoutProps = {
@@ -24,6 +25,16 @@ const RootLayout: React.FC<RootLayoutProps> = ({ children }) => (
       {children}
       <SpeedInsights />
       <Analytics />
+      <Script
+        id='three-js'
+        src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js'
+        strategy='beforeInteractive'
+      />
+      <Script
+        id='vanta-net'
+        src='https://cdn.jsdelivr.net/npm/vanta/dist/vanta.net.min.js'
+        strategy='beforeInteractive'
+      />
     </body>
   </html>
 );

src/routes/Home.tsx

@@ -1,9 +1,15 @@
 import { UnderConstruction } from '~/components';
+import { VantaNet } from '~/ui';
 
 export const Home = () => {
   return (
-    <div className='flex flex-col items-center justify-center h-screen'>
+    <VantaNet
+      backgroundColor='var(--primary)'
+      className='flex flex-col items-center justify-center h-screen'
+      maxDistance={20.0}
+      spacing={15.0}
+    >
       <UnderConstruction />
-    </div>
+    </VantaNet>
   );
 };

src/types/Vanta.ts

@@ -0,0 +1,29 @@
+export interface VantaEffect {
+  destroy?: () => void;
+}
+
+interface VantaNetConfig {
+  el: HTMLElement;
+  gyroControls: boolean;
+  maxDistance: number;
+  minHeight: number;
+  minWidth: number;
+  mouseControls: boolean;
+  scale: number;
+  scaleMobile: number;
+  showDots: boolean;
+  spacing: number;
+  touchControls: boolean;
+  backgroundColor?: number | string;
+  color?: number | string;
+}
+
+interface VantaLibrary {
+  NET: (config: VantaNetConfig) => VantaEffect;
+}
+
+declare global {
+  interface Window {
+    VANTA?: VantaLibrary;
+  }
+}

src/types/index.ts

@@ -0,0 +1 @@
+export * from './Vanta';

src/ui/VantaNet.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import { formatHex, parse } from 'culori';
+import { useEffect, useRef } from 'react';
+import type { VantaEffect } from '~/types';
+
+type VantaNetProps = {
+  children?: React.ReactNode;
+  className?: string;
+  containerClassName?: string;
+  backgroundColor?: number | string;
+  color?: number | string;
+  mouseControls?: boolean;
+  touchControls?: boolean;
+  gyroControls?: boolean;
+  minHeight?: number;
+  minWidth?: number;
+  scale?: number;
+  scaleMobile?: number;
+  showDots?: boolean;
+  maxDistance?: number;
+  spacing?: number;
+};
+
+export const VantaNet = ({
+  children,
+  className,
+  containerClassName,
+  backgroundColor = 'var(--primary)',
+  color = '#FFFFFF',
+  mouseControls = true,
+  touchControls = true,
+  gyroControls = false,
+  minHeight = 200.0,
+  minWidth = 200.0,
+  scale = 1.0,
+  scaleMobile = 1.0,
+  showDots = false,
+  maxDistance = 25.0,
+  spacing = 18.0,
+}: VantaNetProps) => {
+  const vantaRef = useRef<HTMLDivElement>(null);
+  const vantaInstance = useRef<VantaEffect | null>(null);
+
+  useEffect(() => {
+    if (!vantaRef.current || vantaInstance.current) {
+      return;
+    }
+
+    const initVanta = () => {
+      const VANTA = window?.VANTA;
+
+      if (!vantaRef.current || !VANTA?.NET) {
+        return;
+      }
+
+      try {
+        const resolveColor = (colorValue: number | string): number | string => {
+          if (typeof colorValue === 'number') {
+            return colorValue;
+          }
+
+          if (colorValue.includes('var(')) {
+            const computedColor = getComputedStyle(vantaRef.current)
+              .getPropertyValue(colorValue.replace(/var\((--[\w-]+)\)/, '$1'))
+              .trim();
+
+            return computedColor ? formatHex(parse(computedColor)) : colorValue;
+          }
+          return formatHex(parse(colorValue));
+        };
+        const bgColor = resolveColor(backgroundColor);
+
+        vantaInstance.current = VANTA.NET({
+          el: vantaRef.current,
+          gyroControls,
+          maxDistance,
+          minHeight,
+          minWidth,
+          mouseControls,
+          scale,
+          scaleMobile,
+          showDots,
+          spacing,
+          touchControls,
+          ...(bgColor && { backgroundColor: bgColor }),
+          ...(color && { color }),
+        });
+      } catch (error) {
+        console.error('Error initializing Vanta.NET:', error);
+      }
+    };
+
+    if (typeof window !== 'undefined' && window.VANTA) {
+      initVanta();
+    } else {
+      const checkInterval = setInterval(() => {
+        if (window.VANTA && vantaRef.current) {
+          clearInterval(checkInterval);
+          initVanta();
+        }
+      }, 50);
+
+      return () => {
+        clearInterval(checkInterval);
+        if (vantaInstance.current) {
+          vantaInstance.current.destroy?.();
+          vantaInstance.current = null;
+        }
+      };
+    }
+
+    return () => {
+      if (vantaInstance.current) {
+        vantaInstance.current.destroy?.();
+        vantaInstance.current = null;
+      }
+    };
+  }, [
+    mouseControls,
+    touchControls,
+    gyroControls,
+    minHeight,
+    minWidth,
+    scale,
+    scaleMobile,
+    showDots,
+    backgroundColor,
+    color,
+    spacing,
+    maxDistance,
+  ]);
+
+  return (
+    <div className={`relative h-full w-full ${containerClassName ?? ''}`}>
+      <div className='absolute inset-0 z-0 h-full w-full' ref={vantaRef} />
+      <div className={`relative z-10 ${className ?? ''}`}>{children}</div>
+    </div>
+  );
+};

src/ui/index.ts

@@ -1,2 +1,3 @@
 export * from './Button';
 export * from './Card';
+export * from './VantaNet';