Ashfall 3D Cylinder Gallery
What it does
A Three.js WebGL gallery arranges dozens of curved image planes into a tall rotating cylinder that spins continuously. Lenis smooth-scroll drives the camera vertically through the stack while scroll velocity briefly accelerates the group's Y rotation for an inertial, momentum-based spin.
How it's built
| Category | 3d-webgl |
|---|---|
| Tech | three, lenis |
| Complexity | page |
| Performance cost | heavy |
| Mobile-safe | desktop-first |
| Scroll | hijacks scrolling |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# 3D Circular Image Gallery
## Goal
Build a full-viewport **WebGL image gallery** where ~100 curved image tiles are wrapped around the surface of a tall vertical cylinder that **spins slowly and continuously** on its Y axis. Smooth-scrolling drives the camera **vertically** up and down through the stack, and each burst of scroll velocity briefly **accelerates the cylinder's spin** for an inertial, momentum-based feel. The star effect is the endlessly rotating 3D drum of photos that you travel through as you scroll.
## Tech
Vanilla HTML/CSS/JS with ES module imports, bundled by Vite. No framework.
- `three` (npm) — the entire scene is Three.js WebGL. **No GSAP is used.**
- `lenis` (npm) — smooth scroll, whose scroll position and velocity drive the camera and spin.
Import them as:
```js
import * as THREE from "three";
import Lenis from "lenis";
```
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
Learn the technique
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.