yildizdikme/3d-threejs-spiral-gallery

This repo is a cinematic 3D spiral image gallery hero section built with Three.js, GLSL shaders, Lenis, and GSAP, all in vanilla JavaScript with no framework. The centerpiece is a vertical spiral made of curved image tiles arranged in 3D space, constructed from raw geometry (BufferGeometry) rather than using any pre-built 3D primitive. Custom GLSL vertex and fragment shaders handle the visual look: GLSL (OpenGL Shading Language) is code that runs directly on the GPU to control how each pixel and vertex appears, here adding a depth fade effect and edge vignette, the subtle darkening toward the edges of the frame. As you scroll the page, the scroll velocity also drives extra spin on the spiral, so fast scrolling makes it rotate faster, while slow scrolling keeps it gentle. On desktop, moving the mouse creates a soft tilt of the spiral on the X and Z axes. Below the 3D hero, text sections fade up into view as you scroll past them using GSAP's ScrollTrigger plugin. Lenis handles smooth-scroll behavior so the scrolling feels fluid and consistent across browsers. The overall design is described as a premium dark-editorial landing page: dark background, film grain texture overlay, editorial typography, targeted at creative studios, agencies, and portfolio sites. Every visual parameter is exposed through a single CONFIG object at the top of the code, making it straightforward to customize colors, spiral shape, and animation behavior. The build tool is Vite 5. To run it locally: clone the repo, run npm install, then npm run dev.