Collaboration
Gutenslider × gpu slider
gpu slider is an image and video carousel drawn on the GPU: WebGPU where the browser has it, WebGL 2 where it doesn’t, and a plain HTML slider underneath that works everywhere. Gutenslider and gpu slider work together on shader effects for sliders. gpu slider is not part of Gutenslider yet: what you see here runs on gpuslider.com.
Live demos
Drawn on the GPU
Drag, swipe or scroll inside a demo. Each one loads from gpuslider.com when you click it.
Panes
Four pictures in view that turn into the next four by a canvas transition: liquid, burn, glyphs, weave, lightning and more. Open on gpuslider.com
Echo
A reel of photos that leave frames of themselves behind as they move: the faster, the farther apart. Open on gpuslider.com
Wave
Bands of pictures that run against each other, in five stages, each wilder than the last. Click a picture and it opens. Open on gpuslider.com
More on gpuslider.com: all examples, the playground and the docs. gpu slider is open source (MIT) on GitHub and npm.
Shader effects in WordPress today
You don’t have to wait to use effects like these on your site. Gutenslider Pro has 20 WebGL transitions, from liquid and ripple to glitch and fluted glass, plus 3D and shaped effects, right in the block editor. See them in the examples.
- Gutenslider: the slider block for the block editor. Images, videos and any blocks on top, free on wordpress.org.
- gpu slider: a carousel drawn on the GPU for any site or app, with a core under 5 KB, in plain HTML, React or Vue.
- Together: shader effects that run fast, respect reduced motion, and fall back to a plain slider where the GPU can’t help.
Free · GPL v2 or later · No account
Build your first slider.
Gutenslider is free. Install it from the plugin directory; Pro adds more effects when you need them.