Cinematic 3D Infinite Media Carousel
Elevate your Framer projects with a high-performance, brutalist 3D gallery. Designed for creative studios and visual-first portfolios, this component transforms standard grids into an immersive cylindrical experience.
Standard carousels often feel flat and repetitive. Kern_Infinite3DCarousel uses a unique cylindrical perspective and hardware-accelerated CSS transforms to provide a cinematic depth that feels premium and fluid, without the overhead of heavy 3D libraries.
Infinite Seamless Loop: Intelligent slide duplication ensures a never-ending scroll experience with zero "jumps" or layout shifts.
Cinematic 3D Depth: Complete control over perspective and Y-axis rotation to create a true cylindrical or orbital feel.
Native Video Support: High-performance video handling with smart autoplay guards, muted states, and loop controls.
Interactive Hover States: Choose between Flatten, Scale, or Lift effects to make your media feel reactive and tactile.
Built for Speed: Optimized with useLayoutEffect and hardware-accelerated transforms. Zero junk, zero memory leaks.
Accessibility First: Fully semantic HTML5 (<section>, role="region") and ARIA support for screen readers.
With 30+ property controls, you have total creative freedom:
Content: Support for mixed Image and Video slides with custom Alt text.
3D Physics: Fine-tune Perspective (0-10) and RotateY to match your brand's aesthetic.
Animation: Adjust Speed and Direction (Left/Right) for the perfect flow.
Hover Logic: Toggle Pause on Hover and customize transition durations.
Responsive Overrides: Independent Width, Height, and Gap controls for Desktop, Tablet, and Mobile.
Styling: Gradient masks (Fade Bottom/Edges), Border Radius, and Background colors.
Portfolio Hero Sections: Showcasing your best work in a high-impact way.
Product Galleries: For e-commerce brands looking for a premium edge.
Client Testimonials: A unique way to display reviews or logos.
Studio Showreels: Perfect for mixing static stills with motion video.
Framework: React + Framer Motion
Performance: 60FPS stable (tested with 20+ HD videos)
SEO: 100/100 (Semantic tags & ARIA)
BuiltByKern
