WavyFlow Carousel

WavyFlow Carousel

Detailed Overview

WavyFlow Carousel is a WebGL-powered infinite media carousel for Framer that transforms images and videos into a fluid, wave-shaped visual experience. Built with Three.js, it combines smooth wave deformations with continuous horizontal movement to create an immersive, dynamic gallery.

Use it as an image-only carousel, a video-only carousel, or a mix of both. Choose the media format that best suits your project and create engaging visual experiences with seamless infinite scrolling.

Users can explore the carousel through interactive dragging with smooth momentum or mouse wheel navigation. Automatic rotation keeps the content flowing continuously, with customizable speed and direction. Fine-tune the wave height, frequency, stretch, slide dimensions, and spacing to match your design.

Designed for performance, WavyFlow Carousel runs animations only while visible in the viewport and manages video playback accordingly. Its flexible sizing and customizable properties make it easy to adapt to different layouts and creative styles.

Key Features

• Infinite horizontal scrolling with seamless looping

• Fluid wave distortion powered by Three.js

• Image-only, video-only, or mixed-media carousel support

• Interactive dragging with smooth momentum

• Mouse wheel navigation

• Adjustable auto-rotation speed and direction

• Customizable wave height, frequency, and stretch

• Configurable slide dimensions and spacing

• Optional pause on hover

• Viewport-based animation and video playback optimization

• Flexible sizing for different website layouts

Best For

• Creative portfolios and photography galleries

• Design studios and agency websites

• Product and brand showcases

• Fashion and lifestyle websites

• Video presentations and editorial layouts

• Interactive hero sections

• Modern landing pages and immersive web experiences