RotatingGallery

The CircularGallery is a high-performance React component designed for Framer that utilizes WebGL (via the OGL library) to render an infinite, scrolling loop of images with advanced distortion effects.

• WebGL Rendering: Unlike standard CSS sliders, this component uses a WebGL canvas, allowing for complex vertex shaders that bend the images around a curve (configurable via the "Bend Amount" prop) without performance loss.

• Physics-Based Interaction: It features a custom inertia system, providing smooth deceleration after dragging or scrolling.

• Smart Layout Engine: Users can fully control the card dimensions (Width, Height), spacing (Gap), and border radius directly from the Framer sidebar. The component automatically calculates the cylindrical geometry based on these values.

• Lightbox Support: Includes a built-in "click-to-expand" feature. The component intelligently distinguishes between a "drag" action and a "click" action, opening a high-resolution, full-screen overlay when an image is selected.

• Responsive Typography: Integrated with Framer's native Font controls, allowing for precise styling of the title text overlaying each image.