WebGLCarousel

3D curved WebGL gallery with wave fx.

A WebGL-powered 3D curved carousel for images and videos with wave animation, drop-in entrance effects, and smooth drag scroll. Built with OGL for hardware-accelerated 60fps performance. Adjustable bend creates a cylindrical gallery view. Built for fashion galleries, product showcases, creative agencies, and any media-rich presentation that needs a premium visual experience. Features WebGL hardware-accelerated rendering at 60fps 3D curved cylindrical layout with adjustable bend amount Wave vertex displacement animation across all items Drop-in entrance animation with bounce easing Staggered timing — items cascade in sequentially Snap-to-item after scroll stops Supports both images and videos in the same carousel Infinite seamless scroll loop in both directions Grayscale mode toggle for all media Adjustable border radius with smooth SDF-based rendering Mouse drag, touch drag and wheel scroll support Grab cursor visual feedback during interaction Responsive — desktop 100%, tablet 80%, mobile 60% scaling Device pixel ratio support for high-DPI displays Up to 20 media items supported No dependencies beyond OGL Visual Effects Bend — positive values curve downward, negative values curve upward, zero creates flat layout (−10 to 10) Wave — dynamic vertex displacement creates a flowing organic motion across all items simultaneously Drop-in — items fall into position with bounce easing on component mount with configurable stagger between items Grayscale — full WebGL fragment shader grayscale conversion across all images and videos Property Controls Gallery Items Up to 20 items · image or video per item Image upload · video upload (MP4, WebM, MOV) Layout Items Per Screen — visible items at once (1–10, supports decimals) Drop Animation Enable/disable · duration (100–3000ms) · delay (0–2000ms) · stagger (0–500ms) Visual Styling Bend Amount — curve direction and intensity (−10 to 10) Grayscale — toggle on or off Border Radius — item corner rounding (0–0.5) Scroll Behavior Scroll Speed — drag and wheel sensitivity (0.1–10) Scroll Easing — smoothness factor (0.01–1) Technical Details OGL WebGL library for 3D scene and shader management Custom vertex shader — drop-in animation, wave displacement, 3D transforms Custom fragment shader — aspect ratio correction, SDF rounded corners, grayscale HTML5 video elements with continuous texture refresh in render loop Infinite scroll via content duplication and seamless position repositioning Bounce easing function for drop animation progress tracking ResizeObserver recalculates layout on container resize Device pixel ratio capped at 2x for performance Retry logic for failed video playback Default Settings 10 sample media items · 3.5 items per screen Bend amount 3 · Border radius 0.05 Drop-in enabled · 2500ms duration · 300ms delay · 100ms stagger Scroll speed 3 · Scroll easing 0.05 Grayscale off Use Cases Fashion galleries · Product showcases · Portfolio presentations · Creative agency sites · E-commerce displays · Interactive storytelling · Media-rich landing pages · Brand campaign visuals SEO Keywords framer webgl carousel · framer 3d carousel · framer curved gallery · framer webgl gallery · framer 3d gallery · framer wave carousel · framer image video carousel · framer infinite carousel · framer premium carousel · framer ogl component · framer curved carousel · framer creative carousel · framer media gallery · framer code component · framer webgl component

3D curved WebGL gallery with wave fx.