feat: clean up + new images

apps/web/src/components/sections/hero.tsx

@@ -10,17 +10,14 @@ import { Heading } from '@/components/heading';
 import { Text } from '@/components/text';
 
 // Dynamically import Tower component to avoid SSR issues with Three.js
-const Tower = dynamic(
-  () => import('@/components/tower').then((mod) => mod.Tower),
-  {
-    ssr: false,
-    loading: () => (
-      <div className="w-full h-full flex items-center justify-center">
-        <div className="text-white/30">Loading...</div>
-      </div>
-    ),
-  },
-);
+const Tower = dynamic(() => import('@/webgl/tower').then((mod) => mod.Tower), {
+  ssr: false,
+  loading: () => (
+    <div className="w-full h-full flex items-center justify-center">
+      <div className="text-white/30">Loading...</div>
+    </div>
+  ),
+});
 
 const HeroSection = () => {
   return (
@@ -33,7 +30,7 @@ const HeroSection = () => {
             className="absolute inset-0 pointer-events-none"
             style={{
               background:
-                'radial-gradient(circle at center right, transparent 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0.95) 60%, #000 80%), linear-gradient(175deg, transparent 60%, black 100%), linear-gradient(to bottom, rgba(0, 0, 0, .8) 5%, transparent 30%)',
+                'radial-gradient(circle at center right, transparent 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0.95) 60%, #000 80%), linear-gradient(175deg, transparent 60%, black 97%), linear-gradient(to bottom, rgba(0, 0, 0, .8) 5%, transparent 30%)',
             }}
           />
         </div>

apps/web/src/hooks/useCollageTexture.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
-import { getCanvasTexture } from '@/components/webgl/getCanvasTexture';
+import { getCanvasTexture } from '@/webgl/getCanvasTexture';
 
 interface CollageImage {
   url: string;

apps/web/src/components/webgl/Billboard.tsx → apps/web/src/webgl/Billboard.tsx

@@ -26,7 +26,7 @@ function setupCylinderTextureMapping(texture, dimensions, radius, height) {
   texture.offset.y = (1 - texture.repeat.y) / 2;
 }
 
-function Billboard({ texture, dimensions, radius = 5, ...props }) {
+export function Billboard({ texture, dimensions, radius = 5, ...props }) {
   const ref = useRef(null);
 
   setupCylinderTextureMapping(texture, dimensions, radius, 2);
@@ -46,5 +46,3 @@ function Billboard({ texture, dimensions, radius = 5, ...props }) {
     </mesh>
   );
 }
-
-export default Billboard;

apps/web/src/components/tower.tsx → apps/web/src/webgl/tower.tsx

@@ -4,13 +4,24 @@ import { PerspectiveCamera } from '@react-three/drei';
 import { useFrame, useThree } from '@react-three/fiber';
 import { useEffect, useRef, useState } from 'react';
 import type { Group } from 'three';
-import { Billboard } from '@/components/webgl';
-import images from '@/data/images';
 import { useCollageTexture } from '@/hooks/useCollageTexture';
+import { Billboard } from '@/webgl/Billboard';
 import { View } from '@/webgl/View';
 
 const COUNT = 12;
 const GAP = 3.5;
+const IMAGES = [
+  { url: '/static/components/0.jpeg' },
+  { url: '/static/components/1.jpeg' },
+  { url: '/static/components/2.jpeg' },
+  { url: '/static/components/3.jpeg' },
+  { url: '/static/components/4.jpeg' },
+  { url: '/static/components/0.jpeg' },
+  { url: '/static/components/1.jpeg' },
+  { url: '/static/components/2.jpeg' },
+  { url: '/static/components/3.jpeg' },
+  { url: '/static/components/4.jpeg' },
+];
 
 function Loader() {
   return (
@@ -113,7 +124,7 @@ function SpinnableTower({ texture, dimensions }: any) {
 }
 
 export function Tower() {
-  const { texture, dimensions, isLoading } = useCollageTexture(images);
+  const { texture, dimensions, isLoading } = useCollageTexture(IMAGES);
 
   if (isLoading) return <Loader />;