whatisgithub

What is 3d-threejs-spiral-gallery?

yildizdikme/3d-threejs-spiral-gallery — explained in plain English

Analysis updated 2026-05-18

16CSSAudience · developerComplexity · 2/5Setup · easy

In one sentence

A ready-made 3D spiral image gallery for landing pages, built with Three.js and GSAP, with scroll and mouse-driven animation.

Mindmap

mindmap
  root((repo))
    What it does
      3D spiral image gallery
      Scroll driven rotation
      Mouse tilt effect
    Tech stack
      Three.js
      GLSL shaders
      GSAP and Lenis
    Use cases
      Agency landing pages
      Portfolio sites
      Learning 3D web animation
    Audience
      Frontend developers
      Creative studios

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Drop this hero section into a portfolio or agency landing page for a premium visual entrance.

USE CASE 2

Customize the spiral's colors, shape, and animation timing through the single CONFIG object.

USE CASE 3

Learn how scroll-driven 3D animation and custom GLSL shaders work together in a real example.

What is it built with?

Three.jsGLSLGSAPLenisViteJavaScript

How does it compare?

yildizdikme/3d-threejs-spiral-galleryanyblades/picoyangdada863/aimy-sikll
Stars161616
LanguageCSSCSSCSS
Setup difficultyeasyeasyeasy
Complexity2/51/52/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 30min

So what is it?

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.

Copy-paste prompts

Prompt 1
Explain how the CONFIG object controls the spiral's shape and colors in this project.
Prompt 2
Show me how to swap the gallery images for my own photos in this repo.
Prompt 3
Walk me through what the GLSL vertex and fragment shaders do in this spiral effect.
Prompt 4
Help me adapt this hero section to fit into a Next.js or React project.

Frequently asked questions

What is 3d-threejs-spiral-gallery?

A ready-made 3D spiral image gallery for landing pages, built with Three.js and GSAP, with scroll and mouse-driven animation.

What language is 3d-threejs-spiral-gallery written in?

Mainly CSS. The stack also includes Three.js, GLSL, GSAP.

How hard is 3d-threejs-spiral-gallery to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is 3d-threejs-spiral-gallery for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.