3D Radial Gallery
Overview
3D Radial Gallery is an interactive WebGL experience that arranges 21 image cards in a perfect circle within three-dimensional space — each one facing inward, hovering above a canvas-rendered title. The gallery rotates fluidly through drag, scroll, and touch, all governed by a velocity-based physics model where momentum decays naturally with friction. When no interaction occurs, it auto-rotates in the direction of the last scroll gesture. Hovering a card lifts it out of the ring with a GSAP-driven scale tween, while the intro sequence staggers every card and title into view with a spring-style ease that gives the ring a satisfying sense of weight on load.
Tech Stack
- React 19
- Vite
- GSAP
- Three.js
- Tailwind CSS
Highlights
- Circular 3D card arrangement using parametric angle distribution across a fixed-radius ring
- Velocity-based rotation with per-frame friction decay (0.92) for natural momentum coasting
- Three.js raycasting for per-card hover detection with GSAP-driven 1.15× scale response
- Staggered spring intro animation using back.out(2.0) easing across 21 cards and titles
- Unified input handling across mouse drag, scroll wheel, and touch events
- Auto-rotation that inherits direction from the last scroll event
- Responsive camera with three breakpoints adjusting position and field of view on resize
Formats
Github RepositoryGet Access to this Resource
Get instant access to your custom-built website, complete with stunning design and seamless functionality. Start showcasing your brand today!