3D Custom Gallery is a high-performance, immersive React code component built specifically for Framer. It renders a continuous, physics-driven 3D spiral or cylindrical carousel that allows users to interact via smooth dragging, swiping, or mouse-wheel scrolling.
True 3D Spatial Layout: Cards are distributed across a dynamic 3D depth field utilizing CSS perspective transforms, depth-based opacity fading, and z-index sorting.
Momentum Physics & Inertia: Features built-in damping and velocity friction so that drag and wheel actions glide naturally to a stop.
Dynamic Warp & Skew Reactions: Images subtly skew, scale, and stretch based on the intensity and speed of the user's scroll or drag velocity.
Infinite Vertical Loop: Seamlessly loops items vertically and rotationally, keeping content flowing continuously.
Interactive Hover States: Cards elevate, scale up, and adjust contrast/brightness on mouse-over.
You can customize the component directly from the Framer sidebar properties panel:
Images: Array control to upload or link custom gallery photos.
Total Loop Items: Sets the total density/item count of the loop (ranging from 6 to 60).
Infinite Vertical Loop: Toggle to enable or disable infinite vertical scrolling.
Scroll Sensitivity: Adjusts how responsive the gallery is to mouse wheel inputs.
Radius & Vertical Pitch: Controls the width of the 3D cylinder/spiral and the vertical spacing between cards.
Card Dimensions: Fine-tune custom width and height values for the media cards.
Auto Speed & Friction: Calibrates the continuous auto-rotation speed and swipe momentum physics.
3D Custom Gallery is a high-performance, immersive React code component built specifically for Framer. It renders a continuous, physics-driven 3D spiral or cylindrical carousel that allows users to interact via smooth dragging, swiping, or mouse-wheel scrolling.
True 3D Spatial Layout: Cards are distributed across a dynamic 3D depth field utilizing CSS perspective transforms, depth-based opacity fading, and z-index sorting.
Momentum Physics & Inertia: Features built-in damping and velocity friction so that drag and wheel actions glide naturally to a stop.
Dynamic Warp & Skew Reactions: Images subtly skew, scale, and stretch based on the intensity and speed of the user's scroll or drag velocity.
Infinite Vertical Loop: Seamlessly loops items vertically and rotationally, keeping content flowing continuously.
Interactive Hover States: Cards elevate, scale up, and adjust contrast/brightness on mouse-over.
You can customize the component directly from the Framer sidebar properties panel:
Images: Array control to upload or link custom gallery photos.
Total Loop Items: Sets the total density/item count of the loop (ranging from 6 to 60).
Infinite Vertical Loop: Toggle to enable or disable infinite vertical scrolling.
Scroll Sensitivity: Adjusts how responsive the gallery is to mouse wheel inputs.
Radius & Vertical Pitch: Controls the width of the 3D cylinder/spiral and the vertical spacing between cards.
Card Dimensions: Fine-tune custom width and height values for the media cards.
Auto Speed & Friction: Calibrates the continuous auto-rotation speed and swipe momentum physics.
Forrest Young
