# gpu slider

> A slider for the web that draws its media on a canvas and owns its motion: with WebGPU where the browser has it, with WebGL 2 where not. The core is a few kilobytes; arrows, keys, autoplay, the canvas, every effect, the lightbox and the loading screen are plugins that a page imports when it uses them. No dependencies. Not on npm yet.

## Docs

- [All of the docs in one file](/llms-full.txt): the README, in Markdown
- [Get started](/docs/): the markup, what to import, and the three tiers
- [Without a script](/docs/html/): `auto.js` and attributes in the HTML, buttons anywhere
- [React](/docs/react/): the components `<Slider>` and `<Slide>`, `useSliderContext()` for what is in a slider, and the hook `useSlider` for markup of your own
- [Layout](/docs/layout/): slides per view and gap as CSS, downwards, rows, the focus point
- [Options, API and events](/docs/options/)
- [Plugins](/docs/plugins/): the ones that come with it, and how to write one
- [The canvas](/docs/canvas/): WebGPU and WebGL 2, and what they were measured at
- [Effects and transitions](/docs/effects/): all of them, and how to write one in GLSL
- [Lightbox](/docs/lightbox/)
- [Loading](/docs/loading/): a screen while the media load, and its events
- [Extending](/docs/extending/): plugins, effects, slides placed by a script with `draw()`, the types, and a list for agents
- [Size, and what is not there yet](/docs/size/)

## Examples

- [A wall of glass](/examples/wall/)
- [A reel](/examples/reel/)
- [Tape](/examples/tape/)
- [Loom](/examples/loom/)
- [Wave](/examples/wave/)
- [Depth](/examples/depth/)
- [Journal](/examples/journal/): a slider whose pictures open into stories on other pages, by a view transition between documents
- [Playground](/playground/): every slider the library can be, with controls

## Use

- `import { createSlider } from 'gpuslider'`: the core
- `import { controls, keyboard, wheel, autoplay, marquee, thumbs, videos, autoHeight, stack, progress, loading } from 'gpuslider/plugins'`
- `import { canvas } from 'gpuslider/canvas'`: the canvas, which chooses its layer
- `import { stretch, split, waves, liquid } from 'gpuslider/effects'`: effects and transitions
- `import { gpu } from 'gpuslider/gpu'`, `import { gl } from 'gpuslider/gl'`: a layer by name
- `import { lightbox } from 'gpuslider/lightbox'`
- `import { Slider, Slide, useSliderContext, useSlider } from 'gpuslider/react'`
- `import { createSlider } from 'gpuslider/full'`: the core with all plugins, by options