3D Lens Accordion

Elevate your visual storytelling with a high-performance WebGL 3D accordion gallery featuring cinematic lens sweeps, organic inward curves, and real-time interaction.

Features

• Smooth 3D WebGL perspective curve rendering

• Dual layout modes: Inward Arc and Lens Sweep

• Seamless video auto-play with instant image fallback

• Fully keyboard accessible with full arrow key navigation

• Smart cursor tracking with depth-based lens focus

• GPU-accelerated performance with automatic memory cleanup

• Built-in static renderer support for fast editor preview

• Responsive 3D layout scaling across screen sizes

• Dynamic HTML text overlays mapped to curved 3D panels

• Customizable panel gap, corner radius, and flex ratios

Customization Options

• Live preview animation toggle

• Show/Hide title, description, and category tags

• Custom typography and font styling

• Panel media swap (Image / Video URL support)

• Panel title, description, button text, and category tag

• Layout style selection (Inward Arc / Lens Sweep)

• Center panel count (3 or 4 middle panels)

• Inward tilt angle and surface curve intensity

• Lens depth offset for focused panel sweeps

• Gap spacing, corner radius, and flex expansion speed

How to Use

• Drop the component onto your Framer canvas

• Add your media items, titles, and descriptions in the property panel

• Choose between Inward Arc or Lens Sweep layout styles

• Adjust side tilt, curve, and lens depth to match your visual theme

• Customize corner radius, gap spacing, and transition speed

• Publish your site for a smooth 3D interactive gallery experience

Use Cases

• Modern portfolio project showcases

• High-end agency work presentations

• Interactive product feature galleries

• Photography and video creative showcases

• E-commerce featured collection sliders

• Visual hero sections for landing pages

• Creative media carousels for dark mode sites

• Dynamic client testimonial displays