About 3D Fisheye Gallery
Transform your portfolio with an infinite 3D fisheye media wall featuring lens-curved WebGL shaders, smooth motion damping, and cinematic depth for images and videos.
Features
Infinite 3D grid layout with customizable fisheye lens distortion
Seamless handling of mixed high-performance images and video assets
Smooth automatic motion cycle with interactive drag and scroll support
Intelligent GPU asset caching and memory cleanup for flawless frame rates
Adaptive device pixel ratio and responsive resize handling
Reduced motion accessibility support respecting device preferences
Fully self-contained Vanilla Three.js integration with static renderer fallback
Clean layered visual architecture optimized for modern web performance
Supports responsive image sources and fallback poster frames for videos
Built-in keyboard navigation support with arrow keys and home reset
Customization Options
Tile Height & Tile Ratio (Aspect ratio scaling)
Gap spacing and corner radius
Autoplay toggle, motion cycle duration, and starting loop point
Interactive drag/scroll and keyboard navigation controls
Fisheye lens distortion strength percentage
Resolution pixel ratio scaling and maximum live video limits
Comprehensive media array control supporting images, videos, and posters
How to Use
Drop the component onto your Framer canvas
Add your high-resolution images or muted video files to the Media array
Adjust the fisheye lens distortion percentage to fit your design style
Tune the motion cycle duration and autoplay behavior in the property controls
Enable interactive drag or scroll controls for user exploration
Publish your site for a high-performance 3D WebGL showcase
Use Cases
Modern design agency portfolios
High-fashion photography showcases
Creative developer project grids
Immersive landing page hero sections
Video reel galleries
Interactive WebGL experiments
Dark mode creative portfolios
Dynamic moodboard displays
Product media showcases
