About InfiniteCarousel3D

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.

The "Why"

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.

🚀 Key Features

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.

🛠 Technical Customization

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.