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.