Cam hack splash page design

package.json

@@ -26,7 +26,8 @@
   "type": "module",
   "dependencies": {
     "@sveltejs/adapter-node": "^5.2.14",
-    "@tailwindcss/vite": "^4.1.11"
+    "@tailwindcss/vite": "^4.1.11",
+    "three": "^0.182.0"
   },
   "prettier": {
     "plugins": [

src/app.css

@@ -2,6 +2,8 @@
 
 @theme {
   --font-playpen: Ubuntu Mono, monospace;
+  --font-inter: Inter, sans-serif;
+  --font-space: 'Space Grotesk', sans-serif;
 }
 
 html {
@@ -10,7 +12,14 @@ html {
 }
 
 body {
-  @apply font-playpen flex min-h-screen flex-col text-slate-800;
+  @apply flex min-h-screen flex-col;
+  font-family: 'Inter', sans-serif;
+  background: #0a0f0d;
+  color: #e5e7eb;
+}
+
+h1, h2, h3 {
+  font-family: 'Space Grotesk', sans-serif;
 }
 
 .theme-bg-gradient {

src/lib/components/AnimatedGrid.svelte

@@ -0,0 +1,88 @@
+<script>
+  import { onMount } from 'svelte';
+
+  let gridLines = [];
+
+  onMount(() => {
+    const verticalCount = 20;
+    const horizontalCount = 15;
+
+    for (let i = 0; i < verticalCount; i++) {
+      gridLines.push({
+        type: 'vertical',
+        position: (i / verticalCount) * 100,
+        delay: Math.random() * 5
+      });
+    }
+
+    for (let i = 0; i < horizontalCount; i++) {
+      gridLines.push({
+        type: 'horizontal',
+        position: (i / horizontalCount) * 100,
+        delay: Math.random() * 5
+      });
+    }
+
+    gridLines = gridLines;
+  });
+</script>
+
+<div class="grid-container">
+  <div class="grid-lines">
+    {#each gridLines as line}
+      {#if line.type === 'vertical'}
+        <div 
+          class="grid-line vertical"
+          style="left: {line.position}%; animation-delay: {line.delay}s;"
+        ></div>
+      {:else}
+        <div 
+          class="grid-line horizontal"
+          style="top: {line.position}%; animation-delay: {line.delay}s;"
+        ></div>
+      {/if}
+    {/each}
+  </div>
+</div>
+
+<style>
+  .grid-container {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: -5;
+    overflow: hidden;
+  }
+
+  .grid-lines {
+    position: absolute;
+    inset: 0;
+  }
+
+  .grid-line {
+    position: absolute;
+    background: linear-gradient(to bottom, transparent, rgba(16, 185, 129, 0.1), transparent);
+    animation: pulse-line 8s ease-in-out infinite;
+  }
+
+  .grid-line.vertical {
+    width: 1px;
+    height: 100%;
+    background: linear-gradient(to bottom, transparent, rgba(16, 185, 129, 0.1), transparent);
+  }
+
+  .grid-line.horizontal {
+    width: 100%;
+    height: 1px;
+    background: linear-gradient(to right, transparent, rgba(16, 185, 129, 0.1), transparent);
+  }
+
+  @keyframes pulse-line {
+    0%, 100% {
+      opacity: 0.1;
+    }
+    50% {
+      opacity: 0.3;
+    }
+  }
+</style>

src/lib/components/CursorGlow.svelte

@@ -0,0 +1,76 @@
+<script>
+  import { onMount } from 'svelte';
+
+  let x = 0;
+  let y = 0;
+  let trail = [];
+  let glowVisible = false;
+
+  onMount(() => {
+    const handleMouseMove = (e) => {
+      x = e.clientX;
+      y = e.clientY;
+      glowVisible = true;
+
+      trail = [...trail, { x, y, id: Date.now() }];
+      if (trail.length > 10) {
+        trail = trail.slice(-10);
+      }
+    };
+
+    const handleMouseLeave = () => {
+      glowVisible = false;
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseleave', handleMouseLeave);
+
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseleave', handleMouseLeave);
+    };
+  });
+</script>
+
+{#if glowVisible}
+  <div 
+    class="cursor-glow"
+    style="left: {x}px; top: {y}px;"
+  ></div>
+
+  {#each trail as point, i}
+    <div 
+      class="cursor-trail"
+      style="
+        left: {point.x}px; 
+        top: {point.y}px;
+        opacity: {(i + 1) / trail.length * 0.3};
+        transform: scale({(i + 1) / trail.length});
+      "
+    ></div>
+  {/each}
+{/if}
+
+<style>
+  .cursor-glow {
+    position: fixed;
+    width: 300px;
+    height: 300px;
+    background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, transparent 70%);
+    pointer-events: none;
+    transform: translate(-50%, -50%);
+    z-index: 9999;
+    transition: opacity 0.3s ease;
+  }
+
+  .cursor-trail {
+    position: fixed;
+    width: 200px;
+    height: 200px;
+    background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, transparent 70%);
+    pointer-events: none;
+    transform: translate(-50%, -50%);
+    z-index: 9998;
+    transition: all 0.2s ease-out;
+  }
+</style>