gpu slider
A woman in sunglasses between neon letters

Drag it slowly

The transition follows the pointer: stop half way, go back.

The silhouette of a man with a guitar in front of laser rays

Any picture

Drawn from the file the browser picks for the screen.

A man with words projected in red on his face

The text is HTML

It can be read, found and chosen, on top of the canvas.

A couple in an arcade, looking at the camera

Light and dark

The page around it takes the colour of the slide that is seen.

A woman in a white top, lightning projected on her

Its own motion

A spring, solved exactly on every frame, and none while it rests.

A man kneeling by a boombox in front of neon signs

Keys, wheel and swipe

The arrow keys, the wheel and a finger move it, as the buttons do.

Bark of a tree beside lava that has cooled, still glowing in its cracks

Loaded as it comes

A picture is fetched when it is near, in the width the screen needs.

A woman laughing in blue light, a stripe of warm light over her face

Without the canvas

A crossfade, drawn by the page, and all else the same.

A slider drawn by shaders.

An image and video carousel for the web, drawn on the GPU with WebGPU, or WebGL 2 where there is none. A 4.6 KB core, no dependencies, everything else a plugin.

EffectAll 21

Several at a time

Drag it, swipe it, or turn the wheel. The faster it goes, the more the pictures give way, and their colours come apart. A click lets one grow to the screen.

A woman laughing in blue light, a stripe of warm light over her face
A man kneeling by a boombox in front of neon signs
A woman in a white top, lightning projected on her
Bark of a tree beside lava that has cooled, still glowing in its cracks
A couple in an arcade, looking at the camera
A man with words projected in red on his face
The silhouette of a man with a guitar in front of laser rays
A woman in sunglasses between neon letters

What it does

Every one of these is a page of the docs.

  • Its own motion

    A spring, solved exactly on every frame. Drag, swipe, the wheel, the keys. It snaps, loops, rests anywhere, goes sideways or downwards.

    Options, API and events

  • WebGPU first

    The canvas asks the browser and loads one layer: WebGPU where it is, WebGL 2 where not. Both draw the same picture, and the tests hold them against each other, effect by effect.

    The canvas

  • 22 effects, written once

    Images that give way to the speed, colours that come apart, lenses and waves under the pointer, slides of jelly and of thick glass. An effect is a few lines of GLSL, and is translated for WebGPU when the shader is made.

    Effects

  • 21 transitions

    One slide turns into the next: liquid, burn, glitch, fold. They follow the pointer, so a slow drag stops half way. What is written for gl-transitions runs as it is.

    Transitions

  • Everything is a plugin

    Arrows, dots, keys, autoplay, a ticker, thumbnails, videos that play in view. What is not imported is not in the bundle, and a plugin of your own is a function.

    Plugins

  • A lightbox

    A click lets the image grow out of its slide to the screen, and one canvas draws all of it: the one of the slider, with its effects, which fade on the way. Drag it there, or the arrows; Escape lets it go back into its slide.

    Lightbox

  • React

    <Slider> and <Slide>, 596 bytes on the core. Options are props, React renders the slides, the library moves them, and slides that come and go are seen.

    React

  • No script of your own

    One file of 8.2 KB and attributes in the HTML. The canvas and the lightbox are loaded when a slider asks for them and the page has time.

    Without a script

Effects

They go together: here a dome, parallax, and squares in the wake of the pointer that show their part closer, with colours that come apart. Every slide as wide as its picture, and a click lets one grow to the screen.

A man with words projected in red on his face
A woman in sunglasses between neon letters
A woman in a white top, lightning projected on her
A woman laughing in blue light, a stripe of warm light over her face
Bark of a tree beside lava that has cooled, still glowing in its cracks
The silhouette of a man with a guitar in front of laser rays

In numbers

Measured, not guessed: the sizes by the build, the times by the benchmark of the repo, the scores by Lighthouse, of this page as it is built.

  • 4.6KBThe core, gzipped
    • The core4.6 KB
    • With all its options7.0 KB
    • useSlider, for React0.2 KB
    • canvas(), which chooses0.3 KB
    • The layer of WebGPU9.2 KB
    • The layer of WebGL 27.2 KB
    • The lightbox2.2 KB
    • auto.js, with no script8.2 KB

    Gzipped, in the bundle of who imports it. A plugin is 0.3 to 1.0 KB, an effect 0.2 to 0.9. A visitor loads one of the two layers, and every part has a budget the build holds it to. More

  • 0Dependencies
    "dependencies": {}

    Nothing is installed with it. The layers, the plugins and the effects are files of the library, and a page loads those it names.

  • 33msUntil a second slider is drawn by WebGPU. By WebGL: 50 ms
    • First slider, WebGPU64 ms
    • First slider, WebGL82 ms
    • A second, WebGPU33 ms
    • A second, WebGL50 ms
    • Four more, WebGPU33 ms
    • Four more, WebGL169 ms

    In Chromium 153. WebGPU has one device for every slider of a page, and a shader is made once for all of them. More

  • 20 of 20Sliders of one page on the canvas of WebGPU. WebGL: 12
    WebGPU20 of 20
    WebGL12 of 20

    A browser gives a page a few WebGL contexts; past them the page draws the slides. WebGPU draws all of them with one device.

  • 0Frames drawn while nothing moves

    A frame is drawn while something moves, and none once it rests: the page is idle, and so is the GPU. While 6 sliders move, a frame takes 0.33 ms of script.

  • 43Effects and transitions
    • bend
    • cells
    • coverflow
    • dome
    • fan
    • glass
    • jelly
    • magnify
    • parallax
    • pile
    • pixels
    • reveal
    • shift
    • slab
    • smear
    • split
    • spotlight
    • stretch
    • tilt
    • unweave
    • wave
    • waves
    • blocks
    • burn
    • chroma
    • datamosh
    • displace
    • distance
    • fluted
    • fold
    • glitch
    • kaleido
    • lens
    • liquid
    • mosaic
    • pixelate
    • push
    • ripple
    • signal
    • swirl
    • warp
    • wind
    • zoom

    22 effects and 21 transitions, each a few lines of GLSL. Try them all. More

Lighthouse, on this page

  • Performance: 97 of 100
  • Accessibility: 97 of 100
  • Best practices: 100 of 100
  • SEO: 100 of 100
  • Agentic browsing: 100 of 100

Asked on 2026-09-30, on a phone and on a desktop.

In a page

From the least to load to the least to write. The library is not on npm yet.

import { createSlider } from 'gpuslider';
import { controls, keyboard } from 'gpuslider/plugins';
import 'gpuslider/style.css';

createSlider( element, { loop: true, plugins: [ controls(), keyboard() ] } );
Get started

WebGPU and WebGL, measured

The same sliders, made with each layer, in the same browser with the same GPU. In every cell: Chromium, and under it WebKit.

WebGL 2WebGPU
The first slider of a page is drawn after82 ms84 ms64 ms80 ms
A slider after it50 ms51 ms33 ms33 ms
Four more, made together169 ms100 ms33 ms33 ms
Of 20 sliders on a page, the canvas draws12122020
Script in a frame while 6 sliders move0.15 ms0.17 ms0.33 ms0.27 ms
Frames that came late while 20 sliders moved for 4 s0 of 2410 of 2400 of 2410 of 240
The layer in the bundle7.2 KB9.2 KB

In Chromium 153 · WebKit 26, both without a window, on Apple M5 with 2 device pixels per pixel, 2026-09-29. Sliders with two effects. The first two lines are the middle of 5 runs. WebGPU has one device for all sliders of a page, and a shader is made once for all of them: so the second slider is there in two frames, and a page has as many sliders on the canvas as it likes. While they move there is no difference to see. What it says, and what it does not

Made of it

Pages that are made of the library, and of little else.

  • The page “A wall of glass”

    A wall of glass

    A wall of pictures behind thick glass, without an end in any direction. Every row is a slider, the rows are the slides of a slider that goes down, and the page takes the pointer and moves both. Drag it.

  • The page “A reel”

    A reel

    One picture or film at a time, as large as the screen, that turn into each other. The screen before it is made of the events of loading(): a number that runs, a curtain that goes up.

  • The page “Tape”

    Tape

    Rows that run against each other on a page that scrolls. The scrolling pushes them, and what is pushed gives way. The loading screen is the one of the library.

  • The page “Loom”

    Loom

    Portraits that run by, and come apart into threads where they leave the screen and where they come in. After Unwoven by Clément Grellier.

  • The page “Wave”

    Wave

    A band of pictures that runs across the screen along a wave, larger in the middle. The slides are in a row as ever: the canvas draws them on the wave.

  • The page “Depth”

    Depth

    A gallery whose pictures move slower than their frames, and a panel that changes how much while it runs: the effects read their numbers on every frame.

The examples