ShaderShelf

All 29 Paper Shaders and their 122 maker presets, live. Tune any of them, then take it home as plain JavaScript or a file that runs from a double-click. No React needed, no build step.

Shaders: 29
Presets: 122
Build steps: 0

Inside the letters now Loading shaders

What you take home

Paper's own docs only show React. Every shader here exports in five ways, all made from the exact settings on screen.

A file that runs from a double-click

One HTML file with the shader, its settings and the import pinned to Paper Shaders 0.0.81. Images load before the shader starts, which is the step most copied snippets get wrong.

warp-kelp.html (about 2 KB)

Plain JavaScript for your page

A module you paste under any element that has a size. It uses the raw uniform names ShaderMount wants, mapped from the preset for you.

new ShaderMount(el, warpFragmentShader, ...)

React, if that is your stack

The same settings as props for the official React package, so a design tuned here drops into a Next.js site unchanged.

<Warp colors={[...]} speed={20} />

Stills and short clips

A PNG of the frame you are looking at, at any size up to 4096 pixels, and a WebM clip recorded straight from the canvas.

warp-kelp-2560x1440.png

Every export holds still for people who ask their device for less motion, caps the pixel count so phones stay cool, and shows a still gradient if WebGL is switched off. Browsers allow about 16 live WebGL canvases per page, so the shelf keeps a few tiles moving at once and shows a still of the rest.