Media Spiral Gallery is not just another slider—it’s a premium WebGL component that transforms standard galleries into an immersive, physics-driven environment. Engineered with custom vertex shaders and Three.js, this component bends images and videos into a perfect 3D cylindrical space, giving your site an instant, award-winning feel.

Whether you are building an agency showreel, a creative portfolio, or a high-tech landing page, Media Spiral 3D delivers buttery-smooth performance, interactive physics, and complete visual control right from the Framer sidebar.

✨ Key Highlights

• Mixed Media Mastery: Seamlessly mix images and videos with built-in support for autoplay or performance-optimized "Play on Hover" interactions.

• True 3D Curvature: Powered by custom GLSL shaders, your media physically bends in 3D space to match the curve of the spiral.

• Physics-Driven Interactions: Spin the spiral with smooth drag-and-swipe physics, map rotation to mouse scroll, or set a continuous idle auto-rotate.

• Mobile-First Engineering: Features smart touch-action detection for native vertical page scrolling on mobile devices without canvas interference.

• Zero-Code Customization: Every visual aspect—from camera angle and lighting to curve radius and hover scale—is an intuitive control directly inside Framer.

⚙️ Complete Design Control

• Content & Media: Easily toggle between Image or Video nodes, set videos to Autoplay or Play on Hover, adjust base dimensions, and tweak the global Brightness to match your aesthetic.

• Geometry & Space: Control the exact warp amount, choose between inward or outward-facing media, define the circular path width, and smooth edges with SDF-powered corner radiuses. Dial in the perfect perspective via X/Z tilt, camera zoom, and Y-axis elevation.

• Physics & Motion: Sync native page scrolling directly to the component's rotation, fine-tune the resting speed after a user swipe, define hover scale pop-outs, and set a smooth continuous rotation for inactive states.

💡 Perfect For

• Agency Portfolios: Showcase your case studies and showreels in a cutting-edge, interactive format.

• Creative Exhibitions: Build virtual galleries and immersive visual storytelling experiences.

• Product Showcases: Highlight physical products or software features in a continuous, engaging loop.