3D / WebGL

Ashfall 3D Cylinder Gallery

by Vanguardia · motionprompts.dev

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.

Type: Web motion
Framework: Three.js
Trigger: scroll

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: webgl-raf
Complexity: 5/5
Pinned: no
Reduced motion: not handled
Libraries: three, lenis

scroll-driven camera descent inside rotating photo cylinder: camera.position.y lerps at 0.1 toward -(scrollFraction*30 - 15) while galleryGroup.rotation.y advances 0.0025 rad/frame plus an unclamped scroll-velocity kick (velocity*0.005) decaying 0.95/frame

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev22,162 chars

# 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 vertic…

The build prompt

More like this

Showreel with Blender 3D and self-made soundtrack

Interactive 3D Raptor 3 Rocket Engine WebGL Model

Leon’s 15-second motion design reel

1906 San Francisco Market Street in Blender

Mobile game reward animation template

Glass and gold mosaic that comes alive

Fresh recipes, every week.