Skip to content

component

Ripple Image Slider

By Munzir Kareem

Details

Summary

Ripple Image Slider is a premium WebGL-powered image slider and carousel for Framer that transforms your image gallery into an immersive, fluid experience.

Description

Ripple Image Slider is a premium WebGL-powered image slider and carousel for Framer that transforms your image gallery into an immersive, fluid experience. Unlike ordinary carousels or basic image sliders, Ripple brings your slides to life with a real-time water ripple and liquify effect that reacts to your cursor — making every interaction feel alive. Slide transitions use a radial ripple wave shader that expands outward from the center of the image gallery, blending between slides with a customizable wave frequency, power, and crossfade curve. Whether you trigger transitions by click, scroll wheel, or swipe gesture, the animation feels cinematic and polished — on both desktop and mobile. Perfect for: Portfolios, agency websites, product showcases, landing pages, and any project that needs a standout hero image slider or fullscreen carousel that stops visitors from scrolling past. Key Features: Real-time WebGL liquid slider and fluid cursor distortion Heightfield water physics — true ripple simulation, not a CSS trick Cinematic radial wave transitions between gallery slides Click, scroll wheel, and swipe gesture support Per-slide CORS image fallback with smooth crossfade Character-by-character animated text reveal on each slide Fully customizable fonts, colors, counters, and hint overlays Works as a fullscreen hero slider or embedded image carousel SSR-safe with static renderer support Clean WebGL resource cleanup on unmount — no GPU memory leaks

Introduction

WebGL slider with ripple effect

Rank history

Daily rank per list, from the first snapshot — lower is better.

120014001600167628/148/228/309/79/15
  • All · #6611