Add animated shader gradient background with blur effects

- Added ShaderGradientBackground component with 3 animated spheres - Enhanced glass effects with backdrop-blur across all text surfaces - Improved readability while maintaining colored borders - Adjusted animation speed and movement parameters for optimal effect
Install React Three Fiber dependencies
2026-01-27 01:43:17 +01:00 · 2026-01-27 01:26:58 +01:00 · 2026-01-27 01:25:02 +01:00 · 2026-01-23 12:49:47 +01:00
10 changed files with 1058 additions and 79 deletions
--- a/DIRECTUS_CHECKLIST.md
+++ b/DIRECTUS_CHECKLIST.md
@@ -167,7 +167,7 @@ consent.hide          | de | Ausblenden

 ## Collection: content_pages

-Diese sind für **längere Inhalte**. Nutze den Rich-Text-Editor in Directus oder Markdown.
+Diese sind für **längere Inhalte**. Nutze den Ric-Text-Editor in Directus oder Markdown.

 ### Home – Hero (langere Beschreibung)
 - **slug**: home-hero
--- a/app/tests/components/ActivityFeed.test.tsx
+++ b/app/tests/components/ActivityFeed.test.tsx
@@ -0,0 +1,150 @@
+import '@testing-library/jest-dom';
+
+/**
+ * Unit tests for ActivityFeed NaN handling
+ * 
+ * This test suite validates that the ActivityFeed component correctly handles
+ * NaN and numeric values in gaming and custom activity data to prevent
+ * "Received NaN for the children attribute" React errors.
+ */
+describe('ActivityFeed NaN Handling', () => {
+  describe('Gaming activity rendering logic', () => {
+    // Helper function to simulate getSafeGamingText behavior
+    const getSafeGamingText = (details: string | number | undefined, state: string | number | undefined, fallback: string): string => {
+      if (typeof details === 'string' && details.trim().length > 0) return details;
+      if (typeof state === 'string' && state.trim().length > 0) return state;
+      if (typeof details === 'number' && !isNaN(details)) return String(details);
+      if (typeof state === 'number' && !isNaN(state)) return String(state);
+      return fallback;
+    };
+
+    it('should safely handle NaN in gaming.details', () => {
+      const result = getSafeGamingText(NaN, 'Playing', 'Playing...');
+      expect(result).toBe('Playing'); // Should fall through NaN to state
+      expect(result).not.toBe(NaN);
+      expect(typeof result).toBe('string');
+    });
+
+    it('should safely handle NaN in both gaming.details and gaming.state', () => {
+      const result = getSafeGamingText(NaN, NaN, 'Playing...');
+      expect(result).toBe('Playing...'); // Should use fallback
+      expect(typeof result).toBe('string');
+    });
+
+    it('should prioritize string details over numeric state', () => {
+      const result = getSafeGamingText('Details text', 42, 'Playing...');
+      expect(result).toBe('Details text'); // String details takes precedence
+      expect(typeof result).toBe('string');
+    });
+
+    it('should prioritize string state over numeric details', () => {
+      const result = getSafeGamingText(42, 'State text', 'Playing...');
+      expect(result).toBe('State text'); // String state takes precedence over numeric details
+      expect(typeof result).toBe('string');
+    });
+
+    it('should convert valid numeric details to string', () => {
+      const result = getSafeGamingText(42, undefined, 'Playing...');
+      expect(result).toBe('42');
+      expect(typeof result).toBe('string');
+    });
+
+    it('should handle empty strings correctly', () => {
+      const result1 = getSafeGamingText('', 'Playing', 'Playing...');
+      expect(result1).toBe('Playing'); // Empty string should fall through to state
+      
+      const result2 = getSafeGamingText('  ', 'Playing', 'Playing...');
+      expect(result2).toBe('Playing'); // Whitespace-only should fall through to state
+    });
+
+    it('should convert gaming.name to string safely', () => {
+      const validName = String('Test Game' || '');
+      expect(validName).toBe('Test Game');
+      expect(typeof validName).toBe('string');
+
+      // In the actual code, we use String(data.gaming.name || '')
+      // If data.gaming.name is NaN, (NaN || '') evaluates to '' because NaN is falsy
+      const nanName = String(NaN || '');
+      expect(nanName).toBe(''); // NaN is falsy, so it falls back to ''
+      expect(typeof nanName).toBe('string');
+    });
+  });
+
+  describe('Custom activities progress handling', () => {
+    it('should only render progress bar when progress is a valid number', () => {
+      const validProgress = 75;
+      const shouldRender = validProgress !== undefined && 
+                           typeof validProgress === 'number' && 
+                           !isNaN(validProgress);
+      expect(shouldRender).toBe(true);
+    });
+
+    it('should not render progress bar when progress is NaN', () => {
+      const invalidProgress = NaN;
+      const shouldRender = invalidProgress !== undefined && 
+                           typeof invalidProgress === 'number' && 
+                           !isNaN(invalidProgress);
+      expect(shouldRender).toBe(false);
+    });
+
+    it('should not render progress bar when progress is undefined', () => {
+      const undefinedProgress = undefined;
+      const shouldRender = undefinedProgress !== undefined && 
+                           typeof undefinedProgress === 'number' && 
+                           !isNaN(undefinedProgress);
+      expect(shouldRender).toBe(false);
+    });
+  });
+
+  describe('Custom activities dynamic field rendering', () => {
+    it('should safely convert valid numeric values to string', () => {
+      const value = 42;
+      const shouldRender = typeof value === 'string' || 
+                          (typeof value === 'number' && !isNaN(value));
+      
+      expect(shouldRender).toBe(true);
+      
+      if (shouldRender) {
+        const stringValue = String(value);
+        expect(stringValue).toBe('42');
+        expect(typeof stringValue).toBe('string');
+      }
+    });
+
+    it('should not render NaN values', () => {
+      const value = NaN;
+      const shouldRender = typeof value === 'string' || 
+                          (typeof value === 'number' && !isNaN(value));
+      
+      expect(shouldRender).toBe(false);
+    });
+
+    it('should render valid string values', () => {
+      const value = 'Test String';
+      const shouldRender = typeof value === 'string' || 
+                          (typeof value === 'number' && !isNaN(value));
+      
+      expect(shouldRender).toBe(true);
+      
+      if (shouldRender) {
+        const stringValue = String(value);
+        expect(stringValue).toBe('Test String');
+        expect(typeof stringValue).toBe('string');
+      }
+    });
+
+    it('should render zero as a valid numeric value', () => {
+      const value = 0;
+      const shouldRender = typeof value === 'string' || 
+                          (typeof value === 'number' && !isNaN(value));
+      
+      expect(shouldRender).toBe(true);
+      
+      if (shouldRender) {
+        const stringValue = String(value);
+        expect(stringValue).toBe('0');
+        expect(typeof stringValue).toBe('string');
+      }
+    });
+  });
+});
--- a/app/components/About.tsx
+++ b/app/components/About.tsx
@@ -11,7 +11,7 @@ import CurrentlyReading from "./CurrentlyReading";
 // Type definitions for CMS data
 interface TechStackItem {
  id: string;
-  name: string;
+  name: string | number | null | undefined;
  url?: string;
  icon_url?: string;
  sort: number;
@@ -30,7 +30,7 @@ interface Hobby {
  id: string;
  key: string;
  icon: string;
-  title: string;
+  title: string | number | null | undefined;
  description?: string;
 }

@@ -172,20 +172,59 @@ const About = () => {

  // Use CMS Hobbies if available, otherwise fallback
  const hobbies = hobbiesFromCMS 
-    ? hobbiesFromCMS.map((hobby: Hobby) => ({
-        icon: iconMap[hobby.icon] || Code,
-        text: hobby.title
-      }))
+    ? hobbiesFromCMS
+        .map((hobby: Hobby) => {
+          // Convert to string, handling NaN/null/undefined
+          const text = hobby.title == null || (typeof hobby.title === 'number' && isNaN(hobby.title))
+            ? ''
+            : String(hobby.title);
+          return {
+            icon: iconMap[hobby.icon] || Code,
+            text
+          };
+        })
+        .filter(h => {
+          const isValid = h.text.trim().length > 0;
+          if (!isValid && process.env.NODE_ENV === 'development') {
+            console.log('[About] Filtered out invalid hobby:', h);
+          }
+          return isValid;
+        })
    : hobbiesFallback;

  // Use CMS Tech Stack if available, otherwise fallback
  const techStack = techStackFromCMS 
-    ? techStackFromCMS.map((cat: TechStackCategory) => ({
-        key: cat.key,
-        category: cat.name,
-        icon: iconMap[cat.icon] || Code,
-        items: cat.items.map((item: TechStackItem) => item.name)
-      }))
+    ? techStackFromCMS.map((cat: TechStackCategory) => {
+        const items = cat.items
+          .map((item: TechStackItem) => {
+            // Convert to string, handling NaN/null/undefined
+            if (item.name == null || (typeof item.name === 'number' && isNaN(item.name))) {
+              if (process.env.NODE_ENV === 'development') {
+                console.log('[About] Invalid item.name in category', cat.key, ':', item);
+              }
+              return '';
+            }
+            return String(item.name);
+          })
+          .filter(name => {
+            const isValid = name.trim().length > 0;
+            if (!isValid && process.env.NODE_ENV === 'development') {
+              console.log('[About] Filtered out empty item name in category', cat.key);
+            }
+            return isValid;
+          });
+
+        if (items.length === 0 && process.env.NODE_ENV === 'development') {
+          console.warn('[About] Category has no valid items after filtering:', cat.key);
+        }
+
+        return {
+          key: cat.key,
+          category: cat.name,
+          icon: iconMap[cat.icon] || Code,
+          items
+        };
+      })
    : techStackFallback;

  return (
@@ -265,14 +304,14 @@ const About = () => {
                      scale: 1.02,
                      transition: { duration: 0.4, ease: "easeOut" },
                    }}
-                    className={`p-5 rounded-xl border-2 transition-[background-color,border-color,box-shadow] duration-500 ease-out ${
+                    className={`p-5 rounded-xl border-2 transition-[background-color,border-color,box-shadow] duration-500 ease-out backdrop-blur-md ${
                      idx === 0
-                        ? "bg-gradient-to-br from-liquid-sky/10 to-liquid-mint/10 border-liquid-sky/30 hover:border-liquid-sky/50 hover:from-liquid-sky/15 hover:to-liquid-mint/15"
+                        ? "bg-gradient-to-br from-liquid-sky/25 to-liquid-mint/25 border-liquid-sky/50 hover:border-liquid-sky/70 hover:from-liquid-sky/35 hover:to-liquid-mint/35"
                        : idx === 1
-                          ? "bg-gradient-to-br from-liquid-peach/10 to-liquid-coral/10 border-liquid-peach/30 hover:border-liquid-peach/50 hover:from-liquid-peach/15 hover:to-liquid-coral/15"
+                          ? "bg-gradient-to-br from-liquid-peach/25 to-liquid-coral/25 border-liquid-peach/50 hover:border-liquid-peach/70 hover:from-liquid-peach/35 hover:to-liquid-coral/35"
                          : idx === 2
-                            ? "bg-gradient-to-br from-liquid-lavender/10 to-liquid-pink/10 border-liquid-lavender/30 hover:border-liquid-lavender/50 hover:from-liquid-lavender/15 hover:to-liquid-pink/15"
-                            : "bg-gradient-to-br from-liquid-teal/10 to-liquid-lime/10 border-liquid-teal/30 hover:border-liquid-teal/50 hover:from-liquid-teal/15 hover:to-liquid-lime/15"
+                            ? "bg-gradient-to-br from-liquid-lavender/25 to-liquid-pink/25 border-liquid-lavender/50 hover:border-liquid-lavender/70 hover:from-liquid-lavender/35 hover:to-liquid-pink/35"
+                            : "bg-gradient-to-br from-liquid-teal/25 to-liquid-lime/25 border-liquid-teal/50 hover:border-liquid-teal/70 hover:from-liquid-teal/35 hover:to-liquid-lime/35"
                    }`}
                  >
                    <div className="flex items-center gap-3 mb-3">
@@ -287,17 +326,17 @@ const About = () => {
                      {stack.items.map((item, itemIdx) => (
                        <span
                          key={`${stack.category}-${item}-${itemIdx}`}
-                          className={`px-3 py-1.5 rounded-lg border-2 text-sm text-stone-700 font-medium transition-all duration-400 ease-out ${
+                          className={`px-3 py-1.5 rounded-lg border-2 text-sm text-stone-800 font-semibold transition-all duration-400 ease-out backdrop-blur-sm ${
                            itemIdx % 4 === 0
-                              ? "bg-liquid-mint/10 border-liquid-mint/30 hover:bg-liquid-mint/20 hover:border-liquid-mint/50"
+                              ? "bg-liquid-mint/25 border-liquid-mint/50 hover:bg-liquid-mint/35 hover:border-liquid-mint/70"
                              : itemIdx % 4 === 1
-                                ? "bg-liquid-lavender/10 border-liquid-lavender/30 hover:bg-liquid-lavender/20 hover:border-liquid-lavender/50"
+                                ? "bg-liquid-lavender/25 border-liquid-lavender/50 hover:bg-liquid-lavender/35 hover:border-liquid-lavender/70"
                                : itemIdx % 4 === 2
-                                  ? "bg-liquid-rose/10 border-liquid-rose/30 hover:bg-liquid-rose/20 hover:border-liquid-rose/50"
-                                  : "bg-liquid-sky/10 border-liquid-sky/30 hover:bg-liquid-sky/20 hover:border-liquid-sky/50"
+                                  ? "bg-liquid-rose/25 border-liquid-rose/50 hover:bg-liquid-rose/35 hover:border-liquid-rose/70"
+                                  : "bg-liquid-sky/25 border-liquid-sky/50 hover:bg-liquid-sky/35 hover:border-liquid-sky/70"
                          }`}
                        >
-                          {item}
+                          {String(item)}
                        </span>
                      ))}
                    </div>
@@ -324,19 +363,19 @@ const About = () => {
                      scale: 1.02,
                      transition: { duration: 0.4, ease: "easeOut" },
                    }}
-                  className={`flex items-center gap-3 p-4 rounded-xl border-2 transition-[background-color,border-color,box-shadow] duration-500 ease-out ${
+                  className={`flex items-center gap-3 p-4 rounded-xl border-2 transition-[background-color,border-color,box-shadow] duration-500 ease-out backdrop-blur-md ${
                      idx === 0
-                        ? "bg-gradient-to-r from-liquid-mint/10 to-liquid-sky/10 border-liquid-mint/30 hover:border-liquid-mint/50 hover:from-liquid-mint/15 hover:to-liquid-sky/15"
+                        ? "bg-gradient-to-r from-liquid-mint/25 to-liquid-sky/25 border-liquid-mint/50 hover:border-liquid-mint/70 hover:from-liquid-mint/35 hover:to-liquid-sky/35"
                        : idx === 1
-                          ? "bg-gradient-to-r from-liquid-coral/10 to-liquid-peach/10 border-liquid-coral/30 hover:border-liquid-coral/50 hover:from-liquid-coral/15 hover:to-liquid-peach/15"
+                          ? "bg-gradient-to-r from-liquid-coral/25 to-liquid-peach/25 border-liquid-coral/50 hover:border-liquid-coral/70 hover:from-liquid-coral/35 hover:to-liquid-peach/35"
                          : idx === 2
-                            ? "bg-gradient-to-r from-liquid-lavender/10 to-liquid-pink/10 border-liquid-lavender/30 hover:border-liquid-lavender/50 hover:from-liquid-lavender/15 hover:to-liquid-pink/15"
-                            : "bg-gradient-to-r from-liquid-lime/10 to-liquid-teal/10 border-liquid-lime/30 hover:border-liquid-lime/50 hover:from-liquid-lime/15 hover:to-liquid-teal/15"
+                            ? "bg-gradient-to-r from-liquid-lavender/25 to-liquid-pink/25 border-liquid-lavender/50 hover:border-liquid-lavender/70 hover:from-liquid-lavender/35 hover:to-liquid-pink/35"
+                            : "bg-gradient-to-r from-liquid-lime/25 to-liquid-teal/25 border-liquid-lime/50 hover:border-liquid-lime/70 hover:from-liquid-lime/35 hover:to-liquid-teal/35"
                    }`}
                  >
-                    <hobby.icon size={20} className="text-stone-600" />
-                    <span className="text-stone-700 font-medium">
-                      {hobby.text}
+                    <hobby.icon size={20} className="text-stone-700" />
+                    <span className="text-stone-800 font-semibold">
+                      {String(hobby.text)}
                    </span>
                  </motion.div>
                ))}
--- a/app/components/ActivityFeed.tsx
+++ b/app/components/ActivityFeed.tsx
@@ -37,8 +37,8 @@ interface StatusData {
    isPlaying: boolean;
    name: string;
    image: string | null;
-    state?: string;
-    details?: string;
+    state?: string | number;
+    details?: string | number;
  } | null;
  coding: {
    isActive: boolean;
@@ -54,6 +54,20 @@ interface StatusData {
  customActivities?: Record<string, CustomActivity>; // Dynamisch!
 }

+/**
+ * Safely converts gaming activity details/state to a string, filtering out NaN values.
+ * Priority: string details > string state > numeric details > numeric state > fallback
+ */
+function getSafeGamingText(details: string | number | undefined, state: string | number | undefined, fallback: string): string {
+  // Check string values first (maintain original precedence)
+  if (typeof details === 'string' && details.trim().length > 0) return details;
+  if (typeof state === 'string' && state.trim().length > 0) return state;
+  // Check numeric values, but filter out NaN
+  if (typeof details === 'number' && !isNaN(details)) return String(details);
+  if (typeof state === 'number' && !isNaN(state)) return String(state);
+  return fallback;
+}
+
 export default function ActivityFeed() {
  const [data, setData] = useState<StatusData | null>(null);
  const [isExpanded, setIsExpanded] = useState(true);
@@ -1803,12 +1817,10 @@ export default function ActivityFeed() {
                          </span>
                        </div>
                        <p className="font-bold text-sm text-white truncate mb-0.5">
-                          {data.gaming.name}
+                          {String(data.gaming.name || "")}
                        </p>
                        <p className="text-xs text-indigo-200/60 truncate">
-                          {data.gaming.details ||
-                            data.gaming.state ||
-                            "Playing..."}
+                          {getSafeGamingText(data.gaming.details, data.gaming.state, "Playing...")}
                        </p>
                      </div>
                    </div>
@@ -1967,7 +1979,7 @@ export default function ActivityFeed() {
                            )}
                            
                            {/* Progress Bar wenn vorhanden */}
-                            {activity.progress !== undefined && typeof activity.progress === 'number' && (
+                            {activity.progress !== undefined && typeof activity.progress === 'number' && !isNaN(activity.progress) && (
                              <div className="mt-1.5">
                                <div className="h-1 bg-white/10 rounded-full overflow-hidden">
                                  <motion.div 
@@ -1990,12 +2002,12 @@ export default function ActivityFeed() {
                                return null;
                              }
                              
-                              // Nur einfache Werte rendern
-                              if (typeof value === 'string' || typeof value === 'number') {
+                              // Nur einfache Werte rendern, aber NaN ausfiltern
+                              if (typeof value === 'string' || (typeof value === 'number' && !isNaN(value))) {
                                return (
                                  <div key={key} className="text-[10px] text-white/50 mt-0.5">
                                    <span className="capitalize">{key.replace(/_/g, ' ')}: </span>
-                                    <span className="font-medium">{value}</span>
+                                    <span className="font-medium">{String(value)}</span>
                                  </div>
                                );
                              }
--- a/app/components/Hero.tsx
+++ b/app/components/Hero.tsx
@@ -133,7 +133,7 @@ const Hero = () => {
              transition={{ duration: 0.6, delay: 0.3, ease: "easeOut" }}
              className="absolute -bottom-8 left-1/2 -translate-x-1/2 z-30"
            >
-              <div className="px-6 py-2.5 rounded-full glass-panel text-stone-800 font-sans font-bold text-sm tracking-wide shadow-lg backdrop-blur-xl border border-white/50">
+              <div className="px-6 py-2.5 rounded-full bg-white/90 backdrop-blur-xl text-stone-900 font-sans font-bold text-sm tracking-wide shadow-lg border-2 border-stone-300">
                dk<span className="text-red-500 font-extrabold">0</span>.dev
              </div>
            </motion.div>
@@ -207,10 +207,10 @@ const Hero = () => {
                ease: [0.25, 0.1, 0.25, 1],
              }}
              whileHover={{ scale: 1.03, y: -3 }}
-              className="flex items-center space-x-2 px-5 py-2.5 rounded-full bg-white/70 border border-white/90 shadow-sm backdrop-blur-sm"
+              className="flex items-center space-x-2 px-5 py-2.5 rounded-full bg-white/85 border-2 border-stone-300 shadow-md backdrop-blur-lg"
            >
-              <feature.icon className="w-4 h-4 text-stone-700" />
-              <span className="text-stone-700 font-medium text-sm">
+              <feature.icon className="w-4 h-4 text-stone-800" />
+              <span className="text-stone-800 font-semibold text-sm">
                {feature.text}
              </span>
            </motion.div>
--- a/app/components/ShaderGradientBackground.tsx
+++ b/app/components/ShaderGradientBackground.tsx
@@ -0,0 +1,163 @@
+"use client";
+
+import React from "react";
+import { ShaderGradientCanvas, ShaderGradient } from "@shadergradient/react";
+
+const ShaderGradientBackground = () => {
+  return (
+    <div
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        zIndex: -1,
+        filter: "blur(150px)",
+        opacity: 0.65,
+        pointerEvents: "none",
+      }}
+    >
+      <ShaderGradientCanvas
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "100%",
+        }}
+      >
+        {/* Sphere 1 - Links oben */}
+        <ShaderGradient
+          animate="on"
+          axesHelper="off"
+          brightness={1.3}
+          cAzimuthAngle={180}
+          cDistance={3.6}
+          cPolarAngle={90}
+          cameraZoom={1}
+          color1="#b01040"
+          color2="#b04a17"
+          color3="#e167c5"
+          destination="onCanvas"
+          embedMode="off"
+          envPreset="city"
+          format="gif"
+          fov={45}
+          frameRate={10}
+          gizmoHelper="hide"
+          grain="on"
+          lightType="3d"
+          pixelDensity={2.9}
+          positionX={-2.5}
+          positionY={1.5}
+          positionZ={0}
+          range="disabled"
+          rangeEnd={40}
+          rangeStart={0}
+          reflection={0.1}
+          rotationX={0}
+          rotationY={15}
+          rotationZ={50}
+          shader="defaults"
+          type="sphere"
+          uAmplitude={6.0}
+          uDensity={0.8}
+          uFrequency={5.5}
+          uSpeed={0.5}
+          uStrength={5.0}
+          uTime={0}
+          wireframe={false}
+        />
+        
+        {/* Sphere 2 - Rechts mitte */}
+        <ShaderGradient
+          animate="on"
+          axesHelper="off"
+          brightness={1.25}
+          cAzimuthAngle={180}
+          cDistance={3.6}
+          cPolarAngle={90}
+          cameraZoom={1}
+          color1="#e167c5"
+          color2="#b01040"
+          color3="#b04a17"
+          destination="onCanvas"
+          embedMode="off"
+          envPreset="city"
+          format="gif"
+          fov={45}
+          frameRate={10}
+          gizmoHelper="hide"
+          grain="on"
+          lightType="3d"
+          pixelDensity={2.9}
+          positionX={2.0}
+          positionY={-0.5}
+          positionZ={-0.5}
+          range="disabled"
+          rangeEnd={40}
+          rangeStart={0}
+          reflection={0.1}
+          rotationX={0}
+          rotationY={25}
+          rotationZ={70}
+          shader="defaults"
+          type="sphere"
+          uAmplitude={5.5}
+          uDensity={0.9}
+          uFrequency={4.8}
+          uSpeed={0.45}
+          uStrength={4.8}
+          uTime={10}
+          wireframe={false}
+        />
+        
+        {/* Sphere 3 - Unten links */}
+        <ShaderGradient
+          animate="on"
+          axesHelper="off"
+          brightness={1.2}
+          cAzimuthAngle={180}
+          cDistance={3.6}
+          cPolarAngle={90}
+          cameraZoom={1}
+          color1="#b04a17"
+          color2="#e167c5"
+          color3="#b01040"
+          destination="onCanvas"
+          embedMode="off"
+          envPreset="city"
+          format="gif"
+          fov={45}
+          frameRate={10}
+          gizmoHelper="hide"
+          grain="on"
+          lightType="3d"
+          pixelDensity={2.9}
+          positionX={-0.5}
+          positionY={-2.0}
+          positionZ={0.3}
+          range="disabled"
+          rangeEnd={40}
+          rangeStart={0}
+          reflection={0.1}
+          rotationX={0}
+          rotationY={20}
+          rotationZ={60}
+          shader="defaults"
+          type="sphere"
+          uAmplitude={5.8}
+          uDensity={0.7}
+          uFrequency={6.0}
+          uSpeed={0.52}
+          uStrength={4.9}
+          uTime={20}
+          wireframe={false}
+        />
+      </ShaderGradientCanvas>
+    </div>
+  );
+};
+
+export default ShaderGradientBackground;
--- a/app/globals.css
+++ b/app/globals.css
@@ -27,7 +27,7 @@
 }

 body {
-    background-color: var(--background);
+    background: linear-gradient(135deg, rgba(250, 248, 243, 0.95) 0%, rgba(250, 248, 243, 0.92) 100%);
    color: var(--foreground);
    font-family: "Inter", sans-serif;
    margin: 0;
@@ -36,6 +36,7 @@ body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
+    position: relative;
 }

 /* Custom Selection */
@@ -51,35 +52,35 @@ html {

 /* Liquid Glass Effects */
 .glass-panel {
-    background: rgba(250, 248, 243, 0.5);
-    backdrop-filter: blur(12px) saturate(120%);
-    -webkit-backdrop-filter: blur(12px) saturate(120%);
-    border: 1px solid rgba(215, 204, 200, 0.5);
-    box-shadow: 0 8px 32px rgba(62, 39, 35, 0.08);
+    background: rgba(250, 248, 243, 0.75);
+    backdrop-filter: blur(20px) saturate(130%);
+    -webkit-backdrop-filter: blur(20px) saturate(130%);
+    border: 1px solid rgba(215, 204, 200, 0.6);
+    box-shadow: 0 8px 32px rgba(62, 39, 35, 0.12);
    will-change: backdrop-filter;
 }

 .glass-card {
-    background: rgba(255, 252, 245, 0.8);
-    backdrop-filter: blur(24px) saturate(180%);
-    -webkit-backdrop-filter: blur(24px) saturate(180%);
-    border: 1px solid rgba(215, 204, 200, 0.6);
+    background: rgba(255, 252, 245, 0.85);
+    backdrop-filter: blur(30px) saturate(200%);
+    -webkit-backdrop-filter: blur(30px) saturate(200%);
+    border: 1px solid rgba(215, 204, 200, 0.7);
    box-shadow:
-        0 4px 6px -1px rgba(62, 39, 35, 0.04),
-        0 2px 4px -1px rgba(62, 39, 35, 0.03),
-        inset 0 0 20px rgba(255, 252, 245, 0.5);
+        0 4px 6px -1px rgba(62, 39, 35, 0.06),
+        0 2px 4px -1px rgba(62, 39, 35, 0.05),
+        inset 0 0 30px rgba(255, 252, 245, 0.6);
    transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: transform, box-shadow;
 }

 .glass-card:hover {
-    background: rgba(255, 252, 245, 0.9);
+    background: rgba(255, 252, 245, 0.95);
    box-shadow:
-        0 20px 25px -5px rgba(62, 39, 35, 0.1),
-        0 10px 10px -5px rgba(62, 39, 35, 0.04),
-        inset 0 0 20px rgba(255, 252, 245, 0.8);
+        0 20px 25px -5px rgba(62, 39, 35, 0.15),
+        0 10px 10px -5px rgba(62, 39, 35, 0.08),
+        inset 0 0 30px rgba(255, 252, 245, 0.9);
    transform: translateY(-4px);
-    border-color: rgba(215, 204, 200, 0.8);
+    border-color: rgba(215, 204, 200, 0.9);
 }

 /* Typography & Headings */
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -5,6 +5,7 @@ import React from "react";
 import ClientProviders from "./components/ClientProviders";
 import { cookies } from "next/headers";
 import { getBaseUrl } from "@/lib/seo";
+import ShaderGradientBackground from "./components/ShaderGradientBackground";

 const inter = Inter({
  variable: "--font-inter",
@@ -33,6 +34,7 @@ export default async function RootLayout({
        <meta charSet="utf-8" />
      </head>
      <body className={`${inter.variable} ${playfair.variable}`} suppressHydrationWarning>
+        <ShaderGradientBackground />
        <ClientProviders>{children}</ClientProviders>
      </body>
    </html>
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,10 @@
      "dependencies": {
        "@next/bundle-analyzer": "^15.1.7",
        "@prisma/client": "^5.22.0",
+        "@react-three/drei": "^10.7.7",
+        "@react-three/fiber": "^9.5.0",
        "@sentry/nextjs": "^10.36.0",
+        "@shadergradient/react": "^2.4.20",
        "@tiptap/extension-color": "^3.15.3",
        "@tiptap/extension-highlight": "^3.15.3",
        "@tiptap/extension-link": "^3.15.3",
@@ -19,6 +22,7 @@
        "@tiptap/html": "^3.15.3",
        "@tiptap/react": "^3.15.3",
        "@tiptap/starter-kit": "^3.15.3",
+        "@types/three": "^0.182.0",
        "@vercel/og": "^0.6.5",
        "clsx": "^2.1.1",
        "dotenv": "^16.6.1",
@@ -38,6 +42,7 @@
        "redis": "^5.8.2",
        "sanitize-html": "^2.17.0",
        "tailwind-merge": "^2.6.0",
+        "three": "^0.182.0",
        "zod": "^4.3.5"
      },
      "devDependencies": {
@@ -1247,7 +1252,6 @@
      "version": "7.28.4",
      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
      "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
-      "dev": true,
      "engines": {
        "node": ">=6.9.0"
      }
@@ -1335,6 +1339,12 @@
        "@jridgewell/sourcemap-codec": "^1.4.10"
      }
    },
+    "node_modules/@dimforge/rapier3d-compat": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@dimforge/rapier3d-compat/-/rapier3d-compat-0.12.0.tgz",
+      "integrity": "sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==",
+      "license": "Apache-2.0"
+    },
    "node_modules/@discoveryjs/json-ext": {
      "version": "0.5.7",
      "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
@@ -3081,6 +3091,24 @@
        "@jridgewell/sourcemap-codec": "^1.4.14"
      }
    },
+    "node_modules/@mediapipe/tasks-vision": {
+      "version": "0.10.17",
+      "resolved": "https://registry.npmjs.org/@mediapipe/tasks-vision/-/tasks-vision-0.10.17.tgz",
+      "integrity": "sha512-CZWV/q6TTe8ta61cZXjfnnHsfWIdFhms03M9T7Cnd5y2mdpylJM0rF1qRq+wsQVRMLz1OYPVEBU9ph2Bx8cxrg==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@monogrid/gainmap-js": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@monogrid/gainmap-js/-/gainmap-js-3.4.0.tgz",
+      "integrity": "sha512-2Z0FATFHaoYJ8b+Y4y4Hgfn3FRFwuU5zRrk+9dFWp4uGAdHGqVEdP7HP+gLA3X469KXHmfupJaUbKo1b/aDKIg==",
+      "license": "MIT",
+      "dependencies": {
+        "promise-worker-transferable": "^1.0.4"
+      },
+      "peerDependencies": {
+        "three": ">= 0.159.0"
+      }
+    },
    "node_modules/@next/bundle-analyzer": {
      "version": "15.1.7",
      "resolved": "https://registry.npmjs.org/@next/bundle-analyzer/-/bundle-analyzer-15.1.7.tgz",
@@ -4243,6 +4271,114 @@
        "@opentelemetry/api": "^1.3.0"
      }
    },
+    "node_modules/@react-three/drei": {
+      "version": "10.7.7",
+      "resolved": "https://registry.npmjs.org/@react-three/drei/-/drei-10.7.7.tgz",
+      "integrity": "sha512-ff+J5iloR0k4tC++QtD/j9u3w5fzfgFAWDtAGQah9pF2B1YgOq/5JxqY0/aVoQG5r3xSZz0cv5tk2YuBob4xEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@mediapipe/tasks-vision": "0.10.17",
+        "@monogrid/gainmap-js": "^3.0.6",
+        "@use-gesture/react": "^10.3.1",
+        "camera-controls": "^3.1.0",
+        "cross-env": "^7.0.3",
+        "detect-gpu": "^5.0.56",
+        "glsl-noise": "^0.0.0",
+        "hls.js": "^1.5.17",
+        "maath": "^0.10.8",
+        "meshline": "^3.3.1",
+        "stats-gl": "^2.2.8",
+        "stats.js": "^0.17.0",
+        "suspend-react": "^0.1.3",
+        "three-mesh-bvh": "^0.8.3",
+        "three-stdlib": "^2.35.6",
+        "troika-three-text": "^0.52.4",
+        "tunnel-rat": "^0.1.2",
+        "use-sync-external-store": "^1.4.0",
+        "utility-types": "^3.11.0",
+        "zustand": "^5.0.1"
+      },
+      "peerDependencies": {
+        "@react-three/fiber": "^9.0.0",
+        "react": "^19",
+        "react-dom": "^19",
+        "three": ">=0.159"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@react-three/fiber": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-9.5.0.tgz",
+      "integrity": "sha512-FiUzfYW4wB1+PpmsE47UM+mCads7j2+giRBltfwH7SNhah95rqJs3ltEs9V3pP8rYdS0QlNne+9Aj8dS/SiaIA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.17.8",
+        "@types/webxr": "*",
+        "base64-js": "^1.5.1",
+        "buffer": "^6.0.3",
+        "its-fine": "^2.0.0",
+        "react-use-measure": "^2.1.7",
+        "scheduler": "^0.27.0",
+        "suspend-react": "^0.1.3",
+        "use-sync-external-store": "^1.4.0",
+        "zustand": "^5.0.3"
+      },
+      "peerDependencies": {
+        "expo": ">=43.0",
+        "expo-asset": ">=8.4",
+        "expo-file-system": ">=11.0",
+        "expo-gl": ">=11.0",
+        "react": ">=19 <19.3",
+        "react-dom": ">=19 <19.3",
+        "react-native": ">=0.78",
+        "three": ">=0.156"
+      },
+      "peerDependenciesMeta": {
+        "expo": {
+          "optional": true
+        },
+        "expo-asset": {
+          "optional": true
+        },
+        "expo-file-system": {
+          "optional": true
+        },
+        "expo-gl": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@react-three/fiber/node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
    "node_modules/@redis/bloom": {
      "version": "5.10.0",
      "resolved": "https://registry.npmjs.org/@redis/bloom/-/bloom-5.10.0.tgz",
@@ -5263,6 +5399,16 @@
        "webpack": ">=4.40.0"
      }
    },
+    "node_modules/@shadergradient/react": {
+      "version": "2.4.20",
+      "resolved": "https://registry.npmjs.org/@shadergradient/react/-/react-2.4.20.tgz",
+      "integrity": "sha512-MVYvYgTHK3d36C2jNKzt4OzWeyNyc/bWI0zKRyv5EgI2hmUee8nD0cmuNX9X1lw1RCcuof6n1Rnj63jWepZHJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.2.0 || ^19.0.0",
+        "react-dom": "^18.2.0 || ^19.0.0"
+      }
+    },
    "node_modules/@shuding/opentype.js": {
      "version": "1.4.0-beta.0",
      "resolved": "https://registry.npmjs.org/@shuding/opentype.js/-/opentype.js-1.4.0-beta.0.tgz",
@@ -6726,6 +6872,12 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/@tweenjs/tween.js": {
+      "version": "23.1.3",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
+      "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
+      "license": "MIT"
+    },
    "node_modules/@types/aria-query": {
      "version": "5.0.4",
      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
@@ -6795,6 +6947,12 @@
        "@types/ms": "*"
      }
    },
+    "node_modules/@types/draco3d": {
+      "version": "1.4.10",
+      "resolved": "https://registry.npmjs.org/@types/draco3d/-/draco3d-1.4.10.tgz",
+      "integrity": "sha512-AX22jp8Y7wwaBgAixaSvkoG4M/+PlAcm3Qs4OW8yT9DM4xUpWKeFhLueTAyZF39pviAdcDdeJoACapiAceqNcw==",
+      "license": "MIT"
+    },
    "node_modules/@types/eslint": {
      "version": "9.6.1",
      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz",
@@ -7020,6 +7178,12 @@
        "@types/node": "*"
      }
    },
+    "node_modules/@types/offscreencanvas": {
+      "version": "2019.7.3",
+      "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.3.tgz",
+      "integrity": "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A==",
+      "license": "MIT"
+    },
    "node_modules/@types/pg": {
      "version": "8.15.6",
      "resolved": "https://registry.npmjs.org/@types/pg/-/pg-8.15.6.tgz",
@@ -7058,6 +7222,15 @@
        "@types/react": "^19.2.0"
      }
    },
+    "node_modules/@types/react-reconciler": {
+      "version": "0.28.9",
+      "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.9.tgz",
+      "integrity": "sha512-HHM3nxyUZ3zAylX8ZEyrDNd2XZOnQ0D5XfunJF5FLQnZbHHYq4UWvW1QfelQNXv1ICNkwYhfxjwfnqivYB6bFg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
    "node_modules/@types/react-responsive-masonry": {
      "version": "2.7.0",
      "resolved": "https://registry.npmjs.org/@types/react-responsive-masonry/-/react-responsive-masonry-2.7.0.tgz",
@@ -7094,6 +7267,12 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/@types/stats.js": {
+      "version": "0.17.4",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.4.tgz",
+      "integrity": "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==",
+      "license": "MIT"
+    },
    "node_modules/@types/tedious": {
      "version": "4.0.14",
      "resolved": "https://registry.npmjs.org/@types/tedious/-/tedious-4.0.14.tgz",
@@ -7103,6 +7282,27 @@
        "@types/node": "*"
      }
    },
+    "node_modules/@types/three": {
+      "version": "0.182.0",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.182.0.tgz",
+      "integrity": "sha512-WByN9V3Sbwbe2OkWuSGyoqQO8Du6yhYaXtXLoA5FkKTUJorZ+yOHBZ35zUUPQXlAKABZmbYp5oAqpA4RBjtJ/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@dimforge/rapier3d-compat": "~0.12.0",
+        "@tweenjs/tween.js": "~23.1.3",
+        "@types/stats.js": "*",
+        "@types/webxr": ">=0.5.17",
+        "@webgpu/types": "*",
+        "fflate": "~0.8.2",
+        "meshoptimizer": "~0.22.0"
+      }
+    },
+    "node_modules/@types/three/node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT"
+    },
    "node_modules/@types/tough-cookie": {
      "version": "4.0.5",
      "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",
@@ -7121,6 +7321,12 @@
      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
      "license": "MIT"
    },
+    "node_modules/@types/webxr": {
+      "version": "0.5.24",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.24.tgz",
+      "integrity": "sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg==",
+      "license": "MIT"
+    },
    "node_modules/@types/whatwg-mimetype": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/@types/whatwg-mimetype/-/whatwg-mimetype-3.0.2.tgz",
@@ -7417,6 +7623,24 @@
      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
      "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g=="
    },
+    "node_modules/@use-gesture/core": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.3.1.tgz",
+      "integrity": "sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw==",
+      "license": "MIT"
+    },
+    "node_modules/@use-gesture/react": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.3.1.tgz",
+      "integrity": "sha512-Yy19y6O2GJq8f7CHf7L0nxL8bf4PZCPaVOCgJrusOeFHY1LvHgYXnmnXg6N5iwAnbgbZCDjo60SiM6IPJi9C5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@use-gesture/core": "10.3.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0"
+      }
+    },
    "node_modules/@vercel/og": {
      "version": "0.6.8",
      "resolved": "https://registry.npmjs.org/@vercel/og/-/og-0.6.8.tgz",
@@ -7592,6 +7816,12 @@
        "@xtuc/long": "4.2.2"
      }
    },
+    "node_modules/@webgpu/types": {
+      "version": "0.1.69",
+      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.69.tgz",
+      "integrity": "sha512-RPmm6kgRbI8e98zSD3RVACvnuktIja5+yLgDAkTmxLr90BEwdTXRQWNLF3ETTTyH/8mKhznZuN5AveXYFEsMGQ==",
+      "license": "BSD-3-Clause"
+    },
    "node_modules/@xtuc/ieee754": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -8248,6 +8478,15 @@
        "baseline-browser-mapping": "dist/cli.js"
      }
    },
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+      "license": "MIT",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
    "node_modules/binary-extensions": {
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -8345,12 +8584,56 @@
        "node-int64": "^0.4.0"
      }
    },
+    "node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
    "node_modules/buffer-from": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
      "license": "MIT"
    },
+    "node_modules/buffer/node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
    "node_modules/call-bind": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
@@ -8440,6 +8723,19 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/camera-controls": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/camera-controls/-/camera-controls-3.1.2.tgz",
+      "integrity": "sha512-xkxfpG2ECZ6Ww5/9+kf4mfg1VEYAoe9aDSY+IwF0UEs7qEzwy0aVRfs2grImIECs/PoBtWFrh7RXsQkwG922JA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=22.0.0",
+        "npm": ">=10.5.1"
+      },
+      "peerDependencies": {
+        "three": ">=0.126.1"
+      }
+    },
    "node_modules/caniuse-lite": {
      "version": "1.0.30001764",
      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001764.tgz",
@@ -8797,7 +9093,6 @@
      "version": "7.0.3",
      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "cross-spawn": "^7.0.1"
@@ -9123,6 +9418,15 @@
        "node": ">=6"
      }
    },
+    "node_modules/detect-gpu": {
+      "version": "5.0.70",
+      "resolved": "https://registry.npmjs.org/detect-gpu/-/detect-gpu-5.0.70.tgz",
+      "integrity": "sha512-bqerEP1Ese6nt3rFkwPnGbsUF9a4q+gMmpTVVOEzoCyeCc+y7/RvJnQZJx1JwhgQI5Ntg0Kgat8Uu7XpBqnz1w==",
+      "license": "MIT",
+      "dependencies": {
+        "webgl-constants": "^1.1.1"
+      }
+    },
    "node_modules/detect-libc": {
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
@@ -9288,6 +9592,12 @@
        "url": "https://dotenvx.com"
      }
    },
+    "node_modules/draco3d": {
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/draco3d/-/draco3d-1.5.7.tgz",
+      "integrity": "sha512-m6WCKt/erDXcw+70IJXnG7M3awwQPAsZvJGX5zY7beBqpELw6RDGkYVU0W43AFxye4pDZ5i2Lbyc/NNGqwjUVQ==",
+      "license": "Apache-2.0"
+    },
    "node_modules/dunder-proto": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -10717,6 +11027,12 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/glsl-noise": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/glsl-noise/-/glsl-noise-0.0.0.tgz",
+      "integrity": "sha512-b/ZCF6amfAUb7dJM/MxRs7AetQEahYzJ8PtgfrmEdtw6uyGOr+ZSGtgjFm6mfsBkxJ4d2W7kg+Nlqzqvn3Bc0w==",
+      "license": "MIT"
+    },
    "node_modules/gopd": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -10978,6 +11294,12 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/hls.js": {
+      "version": "1.6.15",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.15.tgz",
+      "integrity": "sha512-E3a5VwgXimGHwpRGV+WxRTKeSp2DW5DI5MWv34ulL3t5UNmyJWCQ1KmLEHbYzcfThfXG8amBL+fCYPneGHC4VA==",
+      "license": "Apache-2.0"
+    },
    "node_modules/html-encoding-sniffer": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
@@ -11076,6 +11398,26 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
    "node_modules/ignore": {
      "version": "5.3.2",
      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -11086,6 +11428,12 @@
        "node": ">= 4"
      }
    },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
    "node_modules/import-fresh": {
      "version": "3.3.1",
      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -11566,6 +11914,12 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/is-promise": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
+      "license": "MIT"
+    },
    "node_modules/is-reference": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
@@ -11835,6 +12189,18 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/its-fine": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/its-fine/-/its-fine-2.0.0.tgz",
+      "integrity": "sha512-KLViCmWx94zOvpLwSlsx6yOCeMhZYaxrJV87Po5k/FoZzcPSahvK5qJ7fYhS61sZi5ikmh2S3Hz55A2l3U69ng==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react-reconciler": "^0.28.9"
+      },
+      "peerDependencies": {
+        "react": "^19.0.0"
+      }
+    },
    "node_modules/jackspeak": {
      "version": "3.4.3",
      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
@@ -12991,6 +13357,15 @@
        "node": ">= 0.8.0"
      }
    },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
    "node_modules/lilconfig": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
@@ -13128,6 +13503,16 @@
        "lz-string": "bin/bin.js"
      }
    },
+    "node_modules/maath": {
+      "version": "0.10.8",
+      "resolved": "https://registry.npmjs.org/maath/-/maath-0.10.8.tgz",
+      "integrity": "sha512-tRvbDF0Pgqz+9XUa4jjfgAQ8/aPKmQdWXilFu2tMy4GWj4NOsx99HlULO4IeREfbO3a0sA145DZYyvXPkybm0g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/three": ">=0.134.0",
+        "three": ">=0.134.0"
+      }
+    },
    "node_modules/magic-string": {
      "version": "0.30.21",
      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -13365,6 +13750,21 @@
        "node": ">= 8"
      }
    },
+    "node_modules/meshline": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/meshline/-/meshline-3.3.1.tgz",
+      "integrity": "sha512-/TQj+JdZkeSUOl5Mk2J7eLcYTLiQm2IDzmlSvYm7ov15anEcDJ92GHqqazxTSreeNgfnYu24kiEvvv0WlbCdFQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">=0.137"
+      }
+    },
+    "node_modules/meshoptimizer": {
+      "version": "0.22.0",
+      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.22.0.tgz",
+      "integrity": "sha512-IebiK79sqIy+E4EgOr+CAw+Ke8hAspXKzBd0JdgEmPHiAwmvEj2S4h1rfvo+o/BnfEYd/jAOg5IeeIjzlzSnDg==",
+      "license": "MIT"
+    },
    "node_modules/micromark": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz",
@@ -14088,17 +14488,6 @@
        }
      }
    },
-    "node_modules/next-intl/node_modules/@swc/helpers": {
-      "version": "0.5.18",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.18.tgz",
-      "integrity": "sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ==",
-      "license": "Apache-2.0",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "tslib": "^2.8.0"
-      }
-    },
    "node_modules/next/node_modules/postcss": {
      "version": "8.4.31",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -14837,7 +15226,6 @@
      "version": "2.3.2",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
      "hasInstallScript": true,
      "license": "MIT",
      "optional": true,
@@ -15057,6 +15445,12 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/potpack": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",
+      "integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==",
+      "license": "ISC"
+    },
    "node_modules/prelude-ls": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -15124,6 +15518,16 @@
        "node": ">=0.4.0"
      }
    },
+    "node_modules/promise-worker-transferable": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/promise-worker-transferable/-/promise-worker-transferable-1.0.4.tgz",
+      "integrity": "sha512-bN+0ehEnrXfxV2ZQvU2PetO0n4gqBD4ulq3MI1WOPLgr7/Mg9yRQkX5+0v1vagr74ZTsl7XtzlaYDo2EuCeYJw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "is-promise": "^2.1.0",
+        "lie": "^3.0.2"
+      }
+    },
    "node_modules/prompts": {
      "version": "2.4.2",
      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
@@ -15524,6 +15928,21 @@
      "integrity": "sha512-Q+u+nOH87PzjqGFd2PgTcmLpHPZnCmUPREHYoNBc8dwJv6fi51p9U6hqwG8g/T8MN86HrFjrU+uQU6yvETU7cA==",
      "license": "MIT"
    },
+    "node_modules/react-use-measure": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.7.tgz",
+      "integrity": "sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.13",
+        "react-dom": ">=16.13"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/read-cache": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -15666,7 +16085,6 @@
      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -16423,6 +16841,32 @@
        "node": ">=8"
      }
    },
+    "node_modules/stats-gl": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/stats-gl/-/stats-gl-2.4.2.tgz",
+      "integrity": "sha512-g5O9B0hm9CvnM36+v7SFl39T7hmAlv541tU81ME8YeSb3i1CIP5/QdDeSB3A0la0bKNHpxpwxOVRo2wFTYEosQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/three": "*",
+        "three": "^0.170.0"
+      },
+      "peerDependencies": {
+        "@types/three": "*",
+        "three": "*"
+      }
+    },
+    "node_modules/stats-gl/node_modules/three": {
+      "version": "0.170.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.170.0.tgz",
+      "integrity": "sha512-FQK+LEpYc0fBD+J8g6oSEyyNzjp+Q7Ks1C568WWaoMRLW+TkNNWmenWeGgJjV105Gd+p/2ql1ZcjYvNiPZBhuQ==",
+      "license": "MIT"
+    },
+    "node_modules/stats.js": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/stats.js/-/stats.js-0.17.0.tgz",
+      "integrity": "sha512-hNKz8phvYLPEcRkeG1rsGmV5ChMjKDAWU7/OJJdDErPBNChQXxCo3WZurGpnWc6gZhAzEPFad1aVgyOANH1sMw==",
+      "license": "MIT"
+    },
    "node_modules/string-length": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
@@ -16791,6 +17235,15 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/suspend-react": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/suspend-react/-/suspend-react-0.1.3.tgz",
+      "integrity": "sha512-aqldKgX9aZqpoDp3e8/BZ8Dm7x1pJl+qI3ZKxDN0i/IQTWUwBx/ManmlVJ3wowqbno6c2bmiIfs+Um6LbsjJyQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=17.0"
+      }
+    },
    "node_modules/symbol-tree": {
      "version": "3.2.4",
      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -17029,6 +17482,44 @@
        "node": ">=0.8"
      }
    },
+    "node_modules/three": {
+      "version": "0.182.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.182.0.tgz",
+      "integrity": "sha512-GbHabT+Irv+ihI1/f5kIIsZ+Ef9Sl5A1Y7imvS5RQjWgtTPfPnZ43JmlYI7NtCRDK9zir20lQpfg8/9Yd02OvQ==",
+      "license": "MIT"
+    },
+    "node_modules/three-mesh-bvh": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/three-mesh-bvh/-/three-mesh-bvh-0.8.3.tgz",
+      "integrity": "sha512-4G5lBaF+g2auKX3P0yqx+MJC6oVt6sB5k+CchS6Ob0qvH0YIhuUk1eYr7ktsIpY+albCqE80/FVQGV190PmiAg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">= 0.159.0"
+      }
+    },
+    "node_modules/three-stdlib": {
+      "version": "2.36.1",
+      "resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.36.1.tgz",
+      "integrity": "sha512-XyGQrFmNQ5O/IoKm556ftwKsBg11TIb301MB5dWNicziQBEs2g3gtOYIf7pFiLa0zI2gUwhtCjv9fmjnxKZ1Cg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/draco3d": "^1.4.0",
+        "@types/offscreencanvas": "^2019.6.4",
+        "@types/webxr": "^0.5.2",
+        "draco3d": "^1.4.1",
+        "fflate": "^0.6.9",
+        "potpack": "^1.0.1"
+      },
+      "peerDependencies": {
+        "three": ">=0.128.0"
+      }
+    },
+    "node_modules/three-stdlib/node_modules/fflate": {
+      "version": "0.6.10",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz",
+      "integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==",
+      "license": "MIT"
+    },
    "node_modules/tiny-inflate": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
@@ -17149,6 +17640,36 @@
        "url": "https://github.com/sponsors/wooorm"
      }
    },
+    "node_modules/troika-three-text": {
+      "version": "0.52.4",
+      "resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.52.4.tgz",
+      "integrity": "sha512-V50EwcYGruV5rUZ9F4aNsrytGdKcXKALjEtQXIOBfhVoZU9VAqZNIoGQ3TMiooVqFAbR1w15T+f+8gkzoFzawg==",
+      "license": "MIT",
+      "dependencies": {
+        "bidi-js": "^1.0.2",
+        "troika-three-utils": "^0.52.4",
+        "troika-worker-utils": "^0.52.0",
+        "webgl-sdf-generator": "1.1.1"
+      },
+      "peerDependencies": {
+        "three": ">=0.125.0"
+      }
+    },
+    "node_modules/troika-three-utils": {
+      "version": "0.52.4",
+      "resolved": "https://registry.npmjs.org/troika-three-utils/-/troika-three-utils-0.52.4.tgz",
+      "integrity": "sha512-NORAStSVa/BDiG52Mfudk4j1FG4jC4ILutB3foPnfGbOeIs9+G5vZLa0pnmnaftZUGm4UwSoqEpWdqvC7zms3A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">=0.125.0"
+      }
+    },
+    "node_modules/troika-worker-utils": {
+      "version": "0.52.0",
+      "resolved": "https://registry.npmjs.org/troika-worker-utils/-/troika-worker-utils-0.52.0.tgz",
+      "integrity": "sha512-W1CpvTHykaPH5brv5VHLfQo9D1OYuo0cSBEUQFFT/nBUzM8iD6Lq2/tgG/f1OelbAS1WtaTPQzE5uM49egnngw==",
+      "license": "MIT"
+    },
    "node_modules/trough": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz",
@@ -17357,6 +17878,43 @@
        "fsevents": "~2.3.3"
      }
    },
+    "node_modules/tunnel-rat": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/tunnel-rat/-/tunnel-rat-0.1.2.tgz",
+      "integrity": "sha512-lR5VHmkPhzdhrM092lI2nACsLO4QubF0/yoOhzX7c+wIpbN1GjHNzCc91QlpxBi+cnx8vVJ+Ur6vL5cEoQPFpQ==",
+      "license": "MIT",
+      "dependencies": {
+        "zustand": "^4.3.2"
+      }
+    },
+    "node_modules/tunnel-rat/node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/type-check": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -17723,6 +18281,15 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/utility-types": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.11.0.tgz",
+      "integrity": "sha512-6Z7Ma2aVEWisaL6TvBCy7P8rm2LQoPv6dJ7ecIaIixHcwfbJ0x7mWdbcwlIM5IGQxPZSFYeqRCqlOOeKoJYMkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
    "node_modules/uuid": {
      "version": "9.0.1",
      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
@@ -17827,6 +18394,17 @@
        "node": ">=10.13.0"
      }
    },
+    "node_modules/webgl-constants": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/webgl-constants/-/webgl-constants-1.1.1.tgz",
+      "integrity": "sha512-LkBXKjU5r9vAW7Gcu3T5u+5cvSvh5WwINdr0C+9jpzVB41cjQAP5ePArDtk/WHYdVj0GefCgM73BA7FlIiNtdg=="
+    },
+    "node_modules/webgl-sdf-generator": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/webgl-sdf-generator/-/webgl-sdf-generator-1.1.1.tgz",
+      "integrity": "sha512-9Z0JcMTFxeE+b2x1LJTdnaT8rT8aEp7MVxkNwoycNmJWwPdzoXzMh0BjJSh/AEFP+KPYZUli814h8bJZFIZ2jA==",
+      "license": "MIT"
+    },
    "node_modules/webidl-conversions": {
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
@@ -18347,6 +18925,35 @@
        "url": "https://github.com/sponsors/colinhacks"
      }
    },
+    "node_modules/zustand": {
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.10.tgz",
+      "integrity": "sha512-U1AiltS1O9hSy3rul+Ub82ut2fqIAefiSuwECWt6jlMVUGejvf+5omLcRBSzqbRagSM3hQZbtzdeRc6QVScXTg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/zwitch": {
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
--- a/package.json
+++ b/package.json
@@ -54,7 +54,10 @@
  "dependencies": {
    "@next/bundle-analyzer": "^15.1.7",
    "@prisma/client": "^5.22.0",
+    "@react-three/drei": "^10.7.7",
+    "@react-three/fiber": "^9.5.0",
    "@sentry/nextjs": "^10.36.0",
+    "@shadergradient/react": "^2.4.20",
    "@tiptap/extension-color": "^3.15.3",
    "@tiptap/extension-highlight": "^3.15.3",
    "@tiptap/extension-link": "^3.15.3",
@@ -63,6 +66,7 @@
    "@tiptap/html": "^3.15.3",
    "@tiptap/react": "^3.15.3",
    "@tiptap/starter-kit": "^3.15.3",
+    "@types/three": "^0.182.0",
    "@vercel/og": "^0.6.5",
    "clsx": "^2.1.1",
    "dotenv": "^16.6.1",
@@ -82,6 +86,7 @@
    "redis": "^5.8.2",
    "sanitize-html": "^2.17.0",
    "tailwind-merge": "^2.6.0",
+    "three": "^0.182.0",
    "zod": "^4.3.5"
  },
  "devDependencies": {
Author	SHA1	Message	Date
denshooter	4beeca02be	Add animated shader gradient background with blur effects Some checks failed Dev Deployment (Zero Downtime) / deploy-dev (push) Failing after 4m50s Details - Added ShaderGradientBackground component with 3 animated spheres - Enhanced glass effects with backdrop-blur across all text surfaces - Improved readability while maintaining colored borders - Adjusted animation speed and movement parameters for optimal effect	2026-01-27 01:43:17 +01:00
denshooter	13499f7f51	Install React Three Fiber dependencies - Added @react-three/fiber ^9.5.0 - Added @react-three/drei ^10.7.7 - Required dependencies for ShaderGradient component	2026-01-27 01:26:58 +01:00
denshooter	a814a7cab9	Add shader gradient background with halo effect - Installed @shadergradient/react, three, and @types/three - Created ShaderGradientBackground component with custom gradient settings - Integrated background into root layout with blur effect (120px) and reduced opacity (0.5) - Adjusted body background to work harmoniously with shader gradient - Used sphere type with pink/orange gradient colors (#b01040, #b04a17, #e167c5) - Configured animation, grain, and lighting for atmospheric effect	2026-01-27 01:25:02 +01:00
Copilot	9266b22fb4	Fix NaN rendering error in About section from Directus CMS data (#62 ) * Initial plan * Fix NaN error in gaming and custom activities rendering Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * Add unit tests for NaN handling in ActivityFeed Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * Refactor: Extract gaming text logic to helper function Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * Address code review feedback: improve types and tests Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * Fix NaN error in About component (tech stack and hobbies) Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * Update TypeScript interfaces to match actual data types Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * Improve NaN handling with defensive logging and better null checks Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com>	2026-01-23 12:49:47 +01:00