Perspective Fan Gallery is a premium horizontal gallery that completely reimagines the standard expand-on-hover interaction. Engineered with advanced CSS 3D transforms, this component doesn’t just widen an image when you hover—it physically pops the active card forward in 3D space while mathematically fanning out the neighboring cards to create a cinematic, tactile browsing experience.

Whether you are building a high-fashion lookbook, an immersive video showreel, or a striking team roster, this component commands attention. With built-in auto-centering mathematics and beautiful depth-of-field blurring, it ensures the user's focus is always perfectly guided to the active content.

✨ Key Highlights

• 3D Fan Expansion: Unlike flat accordions, hovering a card pushes it forward on the Z-axis while neighboring cards dynamically peek out and rotate in 3D space to make room.

• Auto-Centering Focus: As users explore the gallery, the entire container intelligently shifts on the X-axis to ensure the currently expanded card is always perfectly centered on the screen.

• Cinematic Depth-of-Field: Inactive cards automatically drop into the background using a customizable mix of grayscale, dimming overlays, and heavy blurring, making the active, fully-saturated card pop brilliantly.

• Mixed Media Mastery: Seamlessly integrate static images and high-definition videos with built-in logic for Autoplay or performance-optimized "Play on Hover" interactions.

• Zero-Code Customization: Every single spatial and visual attribute—from the exact millimeter of the 3D pop-out depth to the specific CSS easing curve—is available directly in the Framer properties panel.

⚙️ Complete Design Control

• Content & Media: Easily switch between Image and Video nodes, configure video playback rules, assign placeholder thumbnails, and drop in outbound links that turn cards into clickable navigation elements.

• Geometry & Space: Define the exact pixel widths for every state: Collapsed (base), Expanded (active), and Peek (immediate neighbors). Dial in the gap spacing, the global 3D perspective, the pop-out depth (Z-axis), and the maximum rotation angle for the fanning effect.

• Physics & FX: Take complete control over the interaction speed and easing curves. Fine-tune the active saturation boost, adjust the inactive blur strength, customize the dimming tint color, and craft the perfect 3D drop shadow with adjustable blur, spread, and opacity.

💡 Perfect For

• Video Showreels: Create an interactive, Netflix-style browsing experience for agency reels, short films, or commercial work.

• Photography & Fashion: Showcase high-resolution collections where users can smoothly scrub through an editorial spread.

• Team Rosters: Introduce your founders or core team members in a highly interactive, space-saving format that feels incredibly premium.