Size, and what is not there yet
What each part costs in the bundle of who imports it. And what the library does not do, said as plainly as what it does.
Size
Gzipped, in the bundle of who imports it, from npm run size. A KB is 1024 bytes, as in the budgets that the build holds every part to:
| Part | Size |
|---|---|
| Core | 4.6 KB |
| A plugin | 0.3 to 1 KB |
gpuslider/full: the core with all its options | 7.0 KB |
<Slider> and <Slide> for React, or the hook alone | 0.6 KB, 0.1 KB |
canvas(), which chooses the layer | 0.3 KB |
hit(), which says what slide is seen at a point | 1.0 KB |
| Canvas layer of WebGPU | 9.2 KB |
| Canvas layer of WebGL 2 | 7.2 KB |
| An effect | 0.2 to 0.9 KB |
| A transition | 0.2 to 0.7 KB |
| Lightbox | 2.2 KB |
style.css, lightbox.css | 0.7 KB, 0.8 KB |
loading.css | 0.4 KB |
A visitor loads one of the two layers. dist/ has the same for pages without a bundler, as modules that share what they have in common, with the shaders made small. npm run test:dist runs the tests with them.
Not yet
- Published on npm, so no CDN has it yet:
…/gpuslider/dist/in the examples is wherever you putdist/. - A file for
<script>withouttype="module". - A ticker has no slide it is at: no
change, no dots. - Effects that lay out are cut at the edge of the slider.
- Effects that cross the borders of slides (a ripple that follows the pointer over the whole slider): needs a second pass.
- Slide content is HTML and is not distorted with the image.
- Cross-origin media needs CORS headers and
crossoriginon the element; without them the page draws that slide. - Pointer effects are not switched off by
prefers-reduced-motion; moves and speed effects are. - Tried on real phones: not yet. The tests run desktop engines.
- WebGPU in Firefox is not tested: the Firefox of the tests has no GPU to give. There
canvas()takes WebGL. - Videos on WebGPU are copied into a texture on every frame, as on WebGL. WebGPU can draw them without a copy, which is not used yet.