The 3D Media Spiral Gallery is a premium, high-performance WebGL component designed to transform standard static galleries into an immersive, physics-driven 3D environment. Engineered with Custom Vertex Shaders and Three.js, this component physically bends your images and videos into a perfect 3D cylindrical space, giving your Framer site an instant, "Awwwards-level" aesthetic without writing a single line of code.
- Mixed Media Mastery: Seamlessly mix images and videos with built-in support for Autoplay or performance-optimized "Play on Hover" interactions. This allows you to highlight specific content without taxing the user's CPU.
- True 3D Curvature: Unlike simple CSS transforms, this uses custom GLSL shaders to physically warp your media in 3D space to match the exact curve of the spiral, ensuring zero distortion on edges.
- Physics-Driven Interactions: Spin the spiral with smooth drag-and-swipe physics, map rotation to native mouse scroll, or set a continuous idle auto-rotate for a living, breathing interface.
- Mobile-First Engineering: Features smart touch-action detection that allows for native vertical page scrolling on mobile devices without interfering with the 3D canvas interaction.
- SDF Corner Radius: Smooth out media edges with built-in shader-powered rounding (Signed Distance Fields), maintaining crisp edges at any resolution.
- Scroll Sync Technology: Connect the native page scroll position to the component’s rotation for a synchronized, narrative-driven user experience.
- Performance Optimized: Built to run at a consistent 60fps even when rendering multiple high-resolution video textures simultaneously.
- Agency Portfolios: Showcase case studies in a cutting-edge format that captures attention immediately.
- Creative Showreels: The "Play on Hover" feature is perfect for highlighting cinematic video work in a dense, interactive layout.
- Product Showcases: Highlight various software features or hardware angles in a continuous, engaging loop.
Creative Apes
