Shader Image Slider

An image slider and carousel with WebGL shader transitions: one picture melts, burns, ripples, glitches or is struck by lightning into the next. Drawn on the GPU with WebGPU, or WebGL 2 where there is none. Use it as a hero, a gallery or a portfolio slideshow: drag or swipe it, use the arrows, dots or keys, or let it autoplay.

Features

• Five shader transitions: Liquid, Burn, Ripple, Glitch, Lightning, and a plain Fade

• Optional picker: buttons that let visitors switch the transition

• Your own images from Framer's picker; empty, it shows four to try it with

• Autoplay that pauses on hover; loop, duration, arrows and dots

• Fill or Fit, corner radius, background, an accessible label for screen readers

• Responsive: fills its frame at any size and breakpoint, with drag and swipe on mobile

• Falls back to a fade in browsers without WebGL 2

• No badge, no watermark, no link on your site

Built on gpu slider, with 24 transitions for your own code: gpuslider.com