{ id: 'Christman', title: 'Marry Christmas', tags: 'Three.JS • 3D ILLUSTRATION ', link: 'https://codesandbox.io/p/github/nodesinfinity/christmas-threejs/main', // Using placeholder until actual image is available image: christmasImg, ref: useRef(null) }, { id: 'ecctrl', title: 'Ecctrl + Fisheye', tags: 'Character Controller • Ecctrl ', link: 'https://codesandbox.io/p/sandbox/nvk9pf', // Using placeholder until actual image is available image: ecctrl, ref: useRef(null) }, { id: 'monitors', title: 'Monitors', tags: 'Effect • Reflections ', link: 'https://codesandbox.io/p/sandbox/bst0cy', // Using placeholder until actual image is available image: monitors, ref: useRef(null) }, { id: 'banana', title: 'Flying Banana', tags: 'Effects Control • Banana ', link: 'https://codesandbox.io/p/sandbox/2ycs3?file=%2Fsrc%2Findex.js', // Using placeholder until actual image is available image: banana, ref: useRef(null) }, { id: 'tshirt', title: 'T-Shirt Configuration', tags: 'T-Shirts • Soft-Shadows ', link: 'https://codesandbox.io/p/sandbox/ioxywi?file=%2Fsrc%2Findex.js', // Using placeholder until actual image is available image: tshirts, ref: useRef(null) }, { id: 'caustics', title: 'Caustics', tags: 'Caustics • Soft-Shadows ', link: 'https://codesandbox.io/p/sandbox/szj6p7', // Using placeholder until actual image is available image: caustics, ref: useRef(null) }, { id: 'ssgi', title: 'SSGI spheres with rapier physics', tags: 'Three.JS • ssgi ', link: 'https://codesandbox.io/p/sandbox/5w35n6', // Using placeholder until actual image is available image: ssgi, ref: useRef(null) }, { id: 'cloud', title: 'Thunder Clouds', tags: 'Thunder • Clouds ', link: 'https://codesandbox.io/p/sandbox/gwthnh?file=%2Fsrc%2FApp.js', // Using placeholder until actual image is available image: cloud, ref: useRef(null) }, { id: 'motion', title: 'Motion Control', tags: 'Motion-path • Clouds ', link: 'https://codesandbox.io/p/sandbox/2y73c6', // Using placeholder until actual image is available image: motion, ref: useRef(null) }, { id: 'room', title: 'Room With Soft Shadows', tags: 'Caustics effects •Soft ', link: 'https://codesandbox.io/p/sandbox/ykfpwf', // Using placeholder until actual image is available image: room, ref: useRef(null) }, { id: 'godray', title: 'Volumetric Light, Godray', tags: 'Godrays • Reflection', link: 'https://codesandbox.io/p/sandbox/yggpw5', // Using placeholder until actual image is available image: godray, ref: useRef(null) }, { id: 'portals', title: 'Enter Portals', tags: 'Portals • Image Scroll ', link: 'https://codesandbox.io/p/sandbox/9m4tpc', // Using placeholder until actual image is available image: portals, ref: useRef(null) }, { id: 'pass', title: 'Pass Through Portals', tags: 'Portals • Image Scroll ', link: 'https://codesandbox.io/p/sandbox/qvk72r', // Using placeholder until actual image is available image: pass, ref: useRef(null) }, { id: 'magicbox', title: 'Magic Box', tags: 'Three.JS • Portals ', link: 'https://codesandbox.io/p/sandbox/drc6qg', // Using placeholder until actual image is available image: magicbox, ref: useRef(null) }, { id: 'cookie', title: 'Video cookies', tags: 'Video • Cookies ', link: 'https://codesandbox.io/p/sandbox/hmbn1l', // Using placeholder until actual image is available image: cookie, ref: useRef(null) }, { id: 'glass', title: 'Glass Glower', tags: 'Three.JS • Lusion ', link: 'https://codesandbox.io/p/sandbox/hmbn1l', // Using placeholder until actual image is available image: glass, ref: useRef(null) }, { id: 'cards', title: 'Cards', tags: 'Cards • Images ', link: 'https://codesandbox.io/p/sandbox/dc5fjy', // Using placeholder until actual image is available image: cards, ref: useRef(null) }, { id: 'ring', title: 'Daimond Ring', tags: 'Daimond • Reflection ', link: 'https://codesandbox.io/p/sandbox/3ywzzx', // Using placeholder until actual image is available image: ring, ref: useRef(null) }, { id: 'gallery', title: 'Image Gallery', tags: 'Images • Reflection ', link: 'https://codesandbox.io/p/sandbox/xy8c8z', // Using placeholder until actual image is available image: gallery, ref: useRef(null) }, { id: 'tiles', title: 'Horizontal Tiles', tags: 'Scroll • Control ', link: 'https://codesandbox.io/p/sandbox/xy8c8z', // Using placeholder until actual image is available image: tiles, ref: useRef(null) }, { id: 'bubbles', title: 'BestServedBold Christmas Baubles', tags: 'Three.JS • Lusion ', link: 'https://codesandbox.io/p/sandbox/zxpv7', // Using placeholder until actual image is available image: bubbles, ref: useRef(null) }, { id: 'graces', title: 'The Three Graces', tags: 'Three.JS • Annotations ', link: 'https://codesandbox.io/p/sandbox/0n9it', // Using placeholder until actual image is available image: graces, ref: useRef(null) }, { id: 'frost', title: 'Frost Glass', tags: 'Glass • Transmission ', link: 'https://codesandbox.io/p/sandbox/imn42', // Using placeholder until actual image is available image: frost, ref: useRef(null) }, { id: 'drone', title: 'GLTFJSX 400kb Drone', tags: 'Three.JS • Drone ', link: 'https://codesandbox.io/p/sandbox/pbwi6i', // Using placeholder until actual image is available image: drone, ref: useRef(null) }, { id: 'starwars', title: 'Starwars', tags: 'Three.JS • Starwars ', link: 'https://codesandbox.io/p/sandbox/fslt99', // Using placeholder until actual image is available image: starwars, ref: useRef(null) }, { id: 'bruno', title: 'Bruno Simons 20k challenge', tags: 'Three.JS • Physics ', link: 'https://codesandbox.io/p/sandbox/2qfxj4', // Using placeholder until actual image is available image: bruno, ref: useRef(null) }, { id: 'refraction', title: 'Scrollcontrols and lens refraction', tags: 'Three.JS • Refraction ', link: 'https://codesandbox.io/p/sandbox/e662p3', // Using placeholder until actual image is available image: refraction, ref: useRef(null) }, { id: 'envmaps', title: 'Building dynamic envmaps', tags: 'Effect • Bloom ', link: 'https://codesandbox.io/p/sandbox/e662p3', // Using placeholder until actual image is available image: envmaps, ref: useRef(null) }, { id: 'prism', title: 'Next.js Prism', tags: 'Effect • Bloom ', link: 'https://codesandbox.io/p/sandbox/j3ycvl', // Using placeholder until actual image is available image: prism, ref: useRef(null) }, { id: 'porshe', title: 'Porshe Envmaps', tags: 'Three.JS • Lusion ', link: 'https://codesandbox.io/p/sandbox/lwo219', // Using placeholder until actual image is available image: porshe, ref: useRef(null) }, { id: 'shoe', title: 'Shoe Configure', tags: 'Three.JS • Lusion ', link: 'https://codesandbox.io/p/sandbox/qxjoj', // Using placeholder until actual image is available image: shoe, ref: useRef(null) }, { id: 'audio', title: 'Audio Analyser', tags: 'Three.JS • Audio Wave ', link: 'https://codesandbox.io/p/sandbox/dvokj', // Using placeholder until actual image is available image: audio, ref: useRef(null) }, { id: 'ground', title: 'Ground reflections and video textures', tags: 'Ground • Reflection ', link: 'https://codesandbox.io/p/sandbox/bfplr', // Using placeholder until actual image is available image: ground, ref: useRef(null) }, { id: 'portal', title: 'ThreeJS Journey Portal', tags: 'Bruno • Simon ', link: 'https://codesandbox.io/p/sandbox/ni6v4', // Using placeholder until actual image is available image: portal, ref: useRef(null) }, { id: 'occlusion', title: 'Mixing HTML and WebGL w/ occlusion', tags: 'HTML • Iframe ', link: 'https://codesandbox.io/p/sandbox/9keg6', // Using placeholder until actual image is available image: occlusion, ref: useRef(null) }, { id: 'spline', title: 'Interactive spline scene + live HTML', tags: 'Spline • 3D ', link: 'https://codesandbox.io/p/sandbox/f79ucc', // Using placeholder until actual image is available image: spline, ref: useRef(null) }, { id: 'diamondrefraction', title: 'Diamond refraction', tags: ' Refraction ', link: 'https://codesandbox.io/p/sandbox/zqrreo', // Using placeholder until actual image is available image: diamondrefraction, ref: useRef(null) }, { id: 'diamondring', title: 'Diamond Ring', tags: 'Three.JS • Lusion ', link: 'https://codesandbox.io/p/sandbox/4gy946', // Using placeholder until actual image is available image: diamondring, ref: useRef(null) }, { id: 'projection', title: 'Envmap ground projection', tags: 'Ground Projected • Env ', link: 'https://codesandbox.io/p/sandbox/q48jgy', // Using placeholder until actual image is available image: projection, ref: useRef(null) }, { id: 'splineglass', title: 'Spline Glass Shape', tags: 'Glass • Shape ', link: 'https://codesandbox.io/p/sandbox/ju368j', // Using placeholder until actual image is available image: splineglass, ref: useRef(null) }, { id: 'bunny', title: 'CSG bunny, useGroups', tags: 'UseGroup • Bunny ', link: 'https://codesandbox.io/p/sandbox/mlgzsc', // Using placeholder until actual image is available image: bunny, ref: useRef(null) }, { id: 'csg', title: 'CSG house', tags: 'CSG • House ', link: 'https://codesandbox.io/p/sandbox/y52tmt', // Using placeholder until actual image is available image: csg, ref: useRef(null) }, { id: 'gltf', title: 'GLTF Animations tied to scroll', tags: 'Scroll • Animation ', link: 'https://codesandbox.io/p/sandbox/hg3ejl', // Using placeholder until actual image is available image: gltf, ref: useRef(null) }, { id: 'clump', title: 'Object Clump', tags: 'Physics • Effects ', link: 'https://codesandbox.io/p/sandbox/ssbdsw', // Using placeholder until actual image is available image: clump, ref: useRef(null) }, { id: 'fields', title: 'HTML Input fields', tags: 'Fields • Input ', link: 'https://codesandbox.io/p/sandbox/024uom', // Using placeholder until actual image is available image: fields, ref: useRef(null) }, { id: 'scrollcontrols', title: 'UseIntersect and scrollcontrols', tags: ' Scroll ', link: 'https://codesandbox.io/p/sandbox/gsm1y', // Using placeholder until actual image is available image: scrollcontrols, ref: useRef(null) }, { id: 'infinity', title: 'Infinity Scroll', tags: 'Infinity • Scroll ', link: 'https://codesandbox.io/p/sandbox/x8gvs', // Using placeholder until actual image is available image: infinity, ref: useRef(null) },{ id: 'minimap', title: 'Scrollcontrols with minimap', tags: 'Three.JS • Lusion ', link: 'https://codesandbox.io/p/sandbox/yjhzv', // Using placeholder until actual image is available image: minimap, ref: useRef(null) },{ id: 'instanced', title: 'Instanced particles + Effects', tags: 'Particles • Effects ', link: 'https://codesandbox.io/p/sandbox/qpfgyp', // Using placeholder until actual image is available image: instanced, ref: useRef(null) },{ id: 'furniture', title: 'Dbismut furniture', tags: 'Three.JS • Furniture ', link: 'https://codesandbox.io/p/sandbox/62o18n', // Using placeholder until actual image is available image: furniture, ref: useRef(null) },{ id: 'portalshapes', title: 'Portal Shapes', tags: 'Three.JS • Lusion ', link: 'https://codesandbox.io/p/sandbox/8j36ok', // Using placeholder until actual image is available image: portalshapes, ref: useRef(null) },{ id: 'aquarium', title: 'Aquarium', tags: 'Aquarium ', link: 'https://codesandbox.io/p/sandbox/n7jf0f', // Using placeholder until actual image is available image: aquarium, ref: useRef(null) },{ id: 'blend', title: 'Portals Blend', tags: 'Portals • Blend ', link: 'https://codesandbox.io/p/sandbox/ik11ln', // Using placeholder until actual image is available image: blend, ref: useRef(null) },{ id: 'inter', title: 'Inter, epoxy resin', tags: 'Inter • 3D ', link: 'https://codesandbox.io/p/sandbox/lxvqek', // Using placeholder until actual image is available image: inter, ref: useRef(null) },{ id: 'stage', title: 'Stage presets, gltfjsx', tags: 'Three.JS • Stage ', link: 'https://codesandbox.io/p/sandbox/if9crg', // Using placeholder until actual image is available image: stage, ref: useRef(null) },{ id: 'react', title: 'React EllipseCurve', tags: 'Three.JS • React ', link: 'https://codesandbox.io/p/sandbox/xzi6ps', // Using placeholder until actual image is available image: react, ref: useRef(null) },{ id: 'decals', title: 'Iridescent decals', tags: 'Three.JS • Decals ', link: 'https://codesandbox.io/p/sandbox/qvb1vk', // Using placeholder until actual image is available image: decals, ref: useRef(null) },{ id: 'baking', title: 'Baking soft shadows', tags: 'Three.JS • Baking ', link: 'https://codesandbox.io/p/sandbox/hxcc1x', // Using placeholder until actual image is available image: baking, ref: useRef(null) },{ id: 'test', title: 'SSR Test', tags: 'SSR • Test ', link: 'https://codesandbox.io/p/sandbox/8pbw1f', // Using placeholder until actual image is available image: test, ref: useRef(null) },{ id: 'operations', title: 'CSG operations + Rapier physics', tags: 'Three.JS • Physics ', link: 'https://codesandbox.io/p/sandbox/mw0dtc', // Using placeholder until actual image is available image: operations, ref: useRef(null) },{ id: 'faucets', title: 'Faucets, select highlight', tags: 'Three.JS • Lusion ', link: 'https://codesandbox.io/p/sandbox/8flefh', // Using placeholder until actual image is available image: faucets, ref: useRef(null) },{ id: 'rapier', title: 'Rapier physics', tags: 'Three.JS • Rapier ', link: 'https://codesandbox.io/p/sandbox/7e9y1b', // Using placeholder until actual image is available image: rapier, ref: useRef(null) },{ id: 'hdr', title: 'Bloom hdr workflow, GLTF', tags: 'Three.JS • HDR ', link: 'https://codesandbox.io/p/sandbox/whnhyr', // Using placeholder until actual image is available image: hdr, ref: useRef(null) },{ id: 'groundlamina', title: 'Ground projected envmaps + lamina', tags: 'Three.JS • Lumina ', link: 'https://codesandbox.io/p/sandbox/0c5hv9', // Using placeholder until actual image is available image: groundlamina, ref: useRef(null) },{ id: 'ballpit', title: 'Basic ballpit', tags: 'Three.JS • Ballpit ', link: 'https://codesandbox.io/p/sandbox/0fqow2', // Using placeholder until actual image is available image: ballpit, ref: useRef(null) },{ id: 'backdrop', title: 'Backdrop and cables', tags: 'Three.JS • Backdrop ', link: 'https://codesandbox.io/p/sandbox/2ij9u', // Using placeholder until actual image is available image: backdrop, ref: useRef(null) }, { id: 'clones', title: 'Clones', tags: 'Three.JS • Clones ', link: 'https://codesandbox.io/p/sandbox/42glz0', // Using placeholder until actual image is available image: clones, ref: useRef(null) }, { id: 'lamina1x', title: 'lamina 1.x', tags: 'Three.JS • Lusion ', link: 'https://codesandbox.io/p/sandbox/ledhe1', // Using placeholder until actual image is available image: lamina1x, ref: useRef(null) }, { id: 'outlines', title: 'React-pp outlines', tags: 'Three.JS • Outlines ', link: 'https://codesandbox.io/p/sandbox/nurp5t', // Using placeholder until actual image is available image: outlines, ref: useRef(null) }, { id: 'gatsby', title: 'Gatsby stars', tags: 'Three.JS • Lusion ', link: 'https://codesandbox.io/p/sandbox/2csbr1', // Using placeholder until actual image is available image: gatsby, ref: useRef(null) }, { id: 'pmndrs', title: 'Pmndrs + Vercel', tags: 'Three.JS • Pmndrs ', link: 'https://codesandbox.io/p/sandbox/go0b4w', // Using placeholder until actual image is available image: pmndrs, ref: useRef(null) }, { id: 'hall', title: 'Sport Hall', tags: 'Three.JS • Sports ', link: 'https://codesandbox.io/p/sandbox/s006f', // Using placeholder until actual image is available image: hall, ref: useRef(null) }, { id: 'train', title: 'Night Train', tags: 'Three.JS • Lusion ', link: 'https://codesandbox.io/p/sandbox/l900i', // Using placeholder until actual image is available image: train, ref: useRef(null) }, { id: 'bouncy', title: 'Bouncy Watch', tags: 'Three.JS • Lusion ', link: 'https://codesandbox.io/p/sandbox/qyz5r', // Using placeholder until actual image is available image: bouncy, ref: useRef(null) }, { id: 'transparent', title: 'Transparent aesop bottles', tags: 'Three.JS • Transparent Bottle ', link: 'https://codesandbox.io/p/sandbox/kv7tv', // Using placeholder until actual image is available image: transparent, ref: useRef(null) }, { id: 'raycast', title: 'Raycast Cycling', tags: 'Three.JS • Raycast ', link: 'https://codesandbox.io/p/sandbox/ls503', // Using placeholder until actual image is available image: raycast, ref: useRef(null) }, { id: 'landingpage', title: 'Landing Page', tags: 'Three.JS • Landing Page ', link: 'https://codesandbox.io/p/sandbox/n60qg', // Using placeholder until actual image is available image: landingpage, ref: useRef(null) }, { id: 'scrollcontrolsgltf', title: 'Scrollcontrols + GLTF', tags: 'Three.JS • Scrollcontrols + GLTF ', link: 'https://codesandbox.io/p/sandbox/4jr4p', // Using placeholder until actual image is available image: scrollcontrolsgltf, ref: useRef(null) }, { id: 'instance', title: 'Merged Instance', tags: 'Three.JS • Instance ', link: 'https://codesandbox.io/p/sandbox/kud9p', // Using placeholder until actual image is available image: instance, ref: useRef(null) }, { id: 'dof', title: 'GPGPU Curl-noise + DOF', tags: 'Three.JS • DOF ', link: 'https://codesandbox.io/p/sandbox/zgsyn', // Using placeholder until actual image is available image: dof, ref: useRef(null) }, { id: 'key', title: 'Hi Key', tags: 'Three.JS • Lusion ', link: 'https://codesandbox.io/p/sandbox/i6t0j', // Using placeholder until actual image is available image: key, ref: useRef(null) }, { id: 'floatingshoes', title: 'Floating Instance Shoes', tags: 'Three.JS • Lusion ', link: 'https://codesandbox.io/p/sandbox/h8o2d', // Using placeholder until actual image is available image: floatingshoes, ref: useRef(null) }, { id: 'simple audio', title: 'Simple Audio Analyser', tags: 'Three.JS • Audio Analyser ', link: 'https://codesandbox.io/p/sandbox/wu51m', // Using placeholder until actual image is available image: simpleaudio, ref: useRef(null) }, { id: 'camerascroll', title: 'Camera Scroll', tags: 'Three.JS • Camera ', link: 'https://codesandbox.io/p/sandbox/tu24h', // Using placeholder until actual image is available image: camerascroll, ref: useRef(null) }, { id: 'springyboxes', title: 'Springy Boxes', tags: 'Three.JS • Boxes ', link: 'https://codesandbox.io/p/sandbox/jz9l97qn89', // Using placeholder until actual image is available image: springyboxes, ref: useRef(null) }, { id: 'floatingdiamond', title: 'Floating Diamond', tags: 'Three.JS • Diamond ', link: 'https://codesandbox.io/p/sandbox/prb9t', // Using placeholder until actual image is available image: floatingdiamond, ref: useRef(null) }, { id: 'gltfanimations', title: 'GLTF Animations', tags: 'Three.JS • GLTF ', link: 'https://codesandbox.io/p/sandbox/pecl6', // Using placeholder until actual image is available image: gltfanimations, ref: useRef(null) },{ id: 'sparks', title: 'Sparks & Effects', tags: 'Three.JS • Lusion ', link: 'https://codesandbox.io/p/sandbox/sbf2i', // Using placeholder until actual image is available image: sparks, ref: useRef(null) },{ id: 'camerashake', title: 'Camera Shake', tags: 'Three.JS • Shake ', link: 'https://codesandbox.io/p/sandbox/t4l0f', // Using placeholder until actual image is available image: camerashake, ref: useRef(null) },{ id: 'ragdoll', title: 'Ragdoll Physics', tags: 'Three.JS • Ragdoll ', link: 'https://codesandbox.io/p/sandbox/wdzv4', // Using placeholder until actual image is available image: ragdoll, ref: useRef(null) },{ id: 'reactspring', title: 'React-Spring Animations', tags: 'Three.JS • Spring ', link: 'https://codesandbox.io/p/sandbox/6hi1y', // Using placeholder until actual image is available image: reactspring, ref: useRef(null) },{ id: 'mount', title: 'Mount transitions', tags: 'Three.JS • Mount ', link: 'https://codesandbox.io/p/sandbox/1sccp', // Using placeholder until actual image is available image: mount, ref: useRef(null) },{ id: 'laptop', title: 'Floating laptop', tags: 'Three.JS • Laptop ', link: 'https://codesandbox.io/p/sandbox/q23sw', // Using placeholder until actual image is available image: laptop, ref: useRef(null) },{ id: 'zustand', title: 'Zustand site', tags: 'Three.JS • Zustand ', link: 'https://codesandbox.io/p/sandbox/gpioq', // Using placeholder until actual image is available image: zustand, ref: useRef(null) },{ id: 'cell', title: 'Cell fracture', tags: 'Three.JS • Cell ', link: 'https://codesandbox.io/p/sandbox/3rjsl', // Using placeholder until actual image is available image: cell, ref: useRef(null) },{ id: 'router', title: 'Router transitions', tags: 'Three.JS • Router ', link: 'https://codesandbox.io/p/sandbox/4j2q2', // Using placeholder until actual image is available image: router, ref: useRef(null) },{ id: 'softshadows', title: 'Soft shadows', tags: 'Three.JS • Shadows ', link: 'https://codesandbox.io/p/sandbox/dh2jc', // Using placeholder until actual image is available image: softshadows, ref: useRef(null) },{ id: 'lulaby', title: 'Lulaby City', tags: 'Three.JS • City ', link: 'https://codesandbox.io/p/sandbox/gkfhr', // Using placeholder until actual image is available image: lulaby, ref: useRef(null) },{ id: 'viking', title: 'Viking Ship', tags: 'Three.JS • Ship ', link: 'https://codesandbox.io/p/sandbox/0buje', // Using placeholder until actual image is available image: viking, ref: useRef(null) },{ id: 'wobbling', title: 'Wobbling Sphere', tags: 'Three.JS • Sphere ', link: 'https://codesandbox.io/p/sandbox/5oufp', // Using placeholder until actual image is available image: wobbling, ref: useRef(null) },{ id: 'moksha', title: 'Moksha', tags: 'Three.JS • Moksha ', link: 'https://codesandbox.io/p/sandbox/f1ixt', // Using placeholder until actual image is available image: moksha, ref: useRef(null) },{ id: 'flexbox', title: 'Flexbox + Yoga', tags: 'Three.JS • WebGL ', link: 'https://codesandbox.io/p/sandbox/7psew', // Using placeholder until actual image is available image: flexbox, ref: useRef(null) },{ id: 'confetti', title: 'Confetti', tags: 'Three.JS • Lusion ', link: 'https://codesandbox.io/p/sandbox/vl221', // Using placeholder until actual image is available image: confetti, ref: useRef(null) },{ id: 'jason', title: 'Jason', tags: 'Three.JS • Jason ', link: 'https://codesandbox.io/p/sandbox/oep9o', // Using placeholder until actual image is available image: jason, ref: useRef(null) },{ id: 'spotlight', title: 'Spotlight', tags: 'Three.JS • Spotlight ', link: 'https://codesandbox.io/p/sandbox/tx1pq', // Using placeholder until actual image is available image: spotlight, ref: useRef(null) },{ id: 'racing', title: 'Racing Game', tags: 'Three.JS • Racing ', link: 'https://codesandbox.io/p/sandbox/lo6kp', // Using placeholder until actual image is available image: racing, ref: useRef(null) },{ id: 'pinball', title: 'Pinball in 70 lines', tags: 'Three.JS • Pinball ', link: 'https://codesandbox.io/p/sandbox/rmfcq', // Using placeholder until actual image is available image: pinball, ref: useRef(null) },{ id: 'space', title: 'Space Game', tags: 'Three.JS • Space ', link: 'https://codesandbox.io/p/sandbox/i2160', // Using placeholder until actual image is available image: space, ref: useRef(null) },{ id: 'minecraft', title: 'Minecraft', tags: 'Three.JS • Minecraft ', link: 'https://codesandbox.io/p/sandbox/vkgi6', // Using placeholder until actual image is available image: minecraft, ref: useRef(null) },{ id: 'arkanoid', title: 'Arkanoid', tags: 'Three.JS • Arkanoid ', link: 'https://codesandbox.io/p/sandbox/2yqpv', // Using placeholder until actual image is available image: arkanoid, ref: useRef(null) },{ id: 'pingpong', title: 'Rapier Ping-Pong', tags: 'Three.JS • Ping-Pong ', link: 'https://codesandbox.io/p/sandbox/ptdgrn', // Using placeholder until actual image is available image: pingpong, ref: useRef(null) },{ id: 'arkanoid60', title: 'Arkanoid under 60 LOC', tags: 'Three.JS • Arkanoid ', link: 'https://codesandbox.io/p/sandbox/xy8c8z', // Using placeholder until actual image is available image: arkanoid60, ref: useRef(null) },{ id: 'shader', title: 'Shader HMR', tags: 'Three.JS • Shader ', link: 'https://codesandbox.io/p/sandbox/ib0jc', // Using placeholder until actual image is available image: shader, ref: useRef(null) },{ id: 'water', title: 'Water Shader', tags: 'Three.JS • Water ', link: 'https://codesandbox.io/p/sandbox/1b40u', // Using placeholder until actual image is available image: water, ref: useRef(null) },{ id: 'staging', title: 'Staging and CameraShake', tags: 'Three.JS • Staging ', link: 'https://codesandbox.io/p/sandbox/0ycwe', // Using placeholder until actual image is available image: staging, ref: useRef(null) }

"use client"

import { useState, useRef, useEffect } from 'react' import Image from 'next/image' import christmasImg from "../../../public/Images/christmas.jpg" import shopping from "../../../public/Images/Shopping.png" import cardfloat from "../../../public/Images/cardfloat.png" import fisheye from "../../../public/Images/fisheye.png" import lusion from "../../../public/Images/lusion.png" import ecctrl from "../../../public/Images/ecctrl.png" import monitors from "../../../public/Images/monitors.png" import banana from "../../../public/Images/banana.png" import tshirts from "../../../public/Images/tshirts.png" import caustics from "../../../public/Images/caustics.png" import ssgi from "../../../public/Images/ssgi.png" import cloud from "../../../public/Images/cloud.png" import motion from "../../../public/Images/motion.png" import room from "../../../public/Images/room.png" import godray from "../../../public/Images/godray.png" import portals from "../../../public/Images/portals.png" import pass from "../../../public/Images/pass.png" import magicbox from "../../../public/Images/magicbox.png" import cookie from "../../../public/Images/cookie.png" import glass from "../../../public/Images/glass.png" import cards from "../../../public/Images/cards.png" import ring from "../../../public/Images/ring.png" import gallery from "../../../public/Images/gallery.png" import tiles from "../../../public/Images/tiles.png" import bubbles from "../../../public/Images/bubbles.png" import graces from "../../../public/Images/graces.png" import frost from "../../../public/Images/frost.png" import drone from "../../../public/Images/drone.png" import starwars from "../../../public/Images/starwars.png" import bruno from "../../../public/Images/bruno.png" import refraction from "../../../public/Images/refraction.png" import envmaps from "../../../public/Images/envmaps.png" import prism from "../../../public/Images/prism.png" import porshe from "../../../public/Images/porshe.png" import shoe from "../../../public/Images/shoe.png" import audio from "../../../public/Images/audio.png" import ground from "../../../public/Images/ground.png" import portal from "../../../public/Images/portal.png" import occlusion from "../../../public/Images/occlusion.png" import spline from "../../../public/Images/spline.png" import diamondrefraction from "../../../public/Images/diamondrefraction.png" import diamondring from "../../../public/Images/diamondring.png" import projection from "../../../public/Images/projection.png" import splineglass from "../../../public/Images/splineglass.png" import bunny from "../../../public/Images/bunny.png" import csg from "../../../public/Images/csg.png" import gltf from "../../../public/Images/gltf.png" import clump from "../../../public/Images/clump.png" import fields from "../../../public/Images/fields.png" import scrollcontrols from "../../../public/Images/scrollcontrols.png" import infinity from "../../../public/Images/infinite.png" import minimap from "../../../public/Images/minimap.png" import instanced from "../../../public/Images/instanced.png" import furniture from "../../../public/Images/furniture.png" import portalshapes from "../../../public/Images/portalshapes.png" import aquarium from "../../../public/Images/aquarium.png" import blend from "../../../public/Images/blend.png" import inter from "../../../public/Images/inter.png" import stage from "../../../public/Images/stage.png" import react from "../../../public/Images/react.png" import decals from "../../../public/Images/decals.png" import baking from "../../../public/Images/baking.png" import test from "../../../public/Images/test.png" import operations from "../../../public/Images/operations.png" import faucets from "../../../public/Images/faucets.png" import rapier from "../../../public/Images/rapier.png" import hdr from "../../../public/Images/hdr.png" import groundlamina from "../../../public/Images/groundlamina.png" import ballpit from "../../../public/Images/ballpit.png" import backdrop from "../../../public/Images/backdrop.png" import clones from "../../../public/Images/clones.png" import lamina1x from "../../../public/Images/lamina1x.png" import outlines from "../../../public/Images/outlines.png" import pmndrs from "../../../public/Images/pmndrs.png" import hall from "../../../public/Images/hall.png" import train from "../../../public/Images/train.png" import bouncy from "../../../public/Images/bouncy.png" import transparent from "../../../public/Images/transparent.png" import raycast from "../../../public/Images/raycast.png" import landingpage from "../../../public/Images/landingpage.png" import scrollcontrolsgltf from "../../../public/Images/scrollcontrolsgltf.png" import instance from "../../../public/Images/instance.png" import dof from "../../../public/Images/dof.png" import key from "../../../public/Images/key.png" import floatingshoes from "../../../public/Images/floatingshoes.png" import simpleaudio from "../../../public/Images/simpleaudio.png" import camerascroll from "../../../public/Images/camerascroll.png" import springyboxes from "../../../public/Images/springyboxes.png" import floatingdiamond from "../../../public/Images/floatingdiamond.png" import gltfanimations from "../../../public/Images/gltfanimations.png" import sparks from "../../../public/Images/sparks.png" import camerashake from "../../../public/Images/camerashake.png" import ragdoll from "../../../public/Images/ragdoll.png" import reactspring from "../../../public/Images/reactspring.png" import gatsby from "../../../public/Images/gatsby.png" import mount from "../../../public/Images/mount.png" import laptop from "../../../public/Images/laptop.png" import zustand from "../../../public/Images/zustand.png" import cell from "../../../public/Images/cell.png" import router from "../../../public/Images/router.png" import softshadows from "../../../public/Images/ragdoll.png" import lulaby from "../../../public/Images/lulaby.png" import viking from "../../../public/Images/viking.png" import wobbling from "../../../public/Images/wobbling.png" import moksha from "../../../public/Images/moksha.png" import flexbox from "../../../public/Images/flexbox.png" import confetti from "../../../public/Images/confetti.png" import jason from "../../../public/Images/jason.png" import spotlight from "../../../public/Images/spotlight.png" import racing from "../../../public/Images/racing.png" import pinball from "../../../public/Images/jason.png" import space from "../../../public/Images/space.png" import minecraft from "../../../public/Images/minecraft.png" import arkanoid from "../../../public/Images/arkanoid.png" import pingpong from "../../../public/Images/pingpong.png" import arkanoid60 from "../../../public/Images/arkanoid60.png" import shader from "../../../public/Images/shader.png" import water from "../../../public/Images/water.png" import staging from "../../../public/Images/staging.png" import grading from "../../../public/Images/grading.png"