Preview image. Unlock full-res
Interactive web component showcase: infinite grid of images wrapping around a 3D curved dome, scrollable and mobile-friendly, built with GSAP.
Summary
A live interactive web component demo: thumbnail images (architecture, flowers, abstract) arranged in a responsive grid layout on light background with white spacing, representing an infinite image carousel effect mapped to a 3D curved dome surface.
Visual description
Light neutral background (off-white/light gray) with scattered thumbnail images of varied content: brutalist architecture, vivid red flowers on blue sky, orange brick patterns, nature and landscape photos. Images are positioned at different depths and sizes, suggesting depth layers. The layout demonstrates responsive grid placement. A text overlay or companion video reveals motion: images flow and wrap around an invisible curved surface, with the closest image snapping to a focal center point as users scroll, drag, or swipe. The effect is smooth and performant on mobile without WebGL acceleration.
Key takeaway
Proving that sophisticated 3D interaction (curved geometry, depth-based scaling) is achievable at scale without WebGL overhead, using pure GSAP animation on standard DOM elements. The "snap-to-center" interaction pattern is satisfying and provides a clear focal point even in infinite scroll.
Reuse notes
Excellent for portfolio sites, image galleries, creative agencies, and visual storytelling projects. The dome-wrapping effect creates a sense of infinite possibility while the snap-to-center provides UX clarity. Works particularly well on mobile where GPU-heavy solutions falter. Can be adapted for product grids (e-commerce), team galleries, or masonry-style photo collections. Requires thoughtful image sizing and focal point selection for optimal effect.
