Elevate your visual storytelling with Scatter Gallery 3D. This advanced Framer component creates an immersive environment where your media floats in a three-dimensional space. By combining mouse-tracking parallax with interactive tilting, it provides a sense of depth and tangibility that standard galleries cannot match.
Each item in the gallery can be individually configured with its own depth, blur level, and "parallax strength" (mass). When clicked, the component performs a cinematic zoom, centering the selected image or video and revealing its metadata. It is the ultimate choice for creative agencies, high-end photographers, and product showcases that want to leave a lasting impression.
Functions (Key Features):
🌌 Depth Control: Manually set the Z-position for each item to create a layered "floating" effect.
🖱️ Dynamic Parallax: Items move at different speeds relative to your cursor based on their assigned mass.
📐 Interactive Tilt: The entire gallery container tilts smoothly as you navigate across the screen.
🎥 Video & Image Support: Seamlessly mix responsive images and auto-playing videos in one scatter field.
🔍 Cinematic Zoom: Click any item to focus and zoom in, automatically dimming and blurring background items.
🎨 Full Typography Control: Customize the font, size, and color for item titles and descriptions.
How to Use:
Copy & Paste: Copy the component from the Layers panel and paste it directly into your Framer project.
Add Items: In the properties panel, go to the Items array and add your images or videos.
Adjust Depth: For each item, tweak the 3D Depth and Parallax Strength to define how it reacts to mouse movement.
Style: Set the Background Color and adjust the global Zoom Amount for the active state.
Refine Tilt: Adjust the Tilt Amount to determine how much the entire canvas rotates during navigation.
Alpheratz
