23 · Shader Shelf: a free browse, tune and export tool for all 29 Paper Shaders

Shader Shelf is a free tool for web builders, with no client behind it. It shows all 29 Paper Shaders and their 122 maker presets live, lets you tune any of them, and exports the result as an HTML file, plain JavaScript, React props, a PNG or a short WebM clip. What makes people stop is the headline: "SHADER SHELF" is cut out of the page, and live shaders swap inside the letters every seven seconds.

Inspiration

The raw material is Paper Shaders 0.0.81 (shaders.paper.design). Paper's docs only show React, so the tool's real addition is a vanilla path: raw uniform names, images loaded before mounting, and a fallback gradient. The kit part paper.js and its paper-data.json already held that mapping, so the site could cover every shader instead of a hand-picked few.

The page is also a worked example of three other Brain Melt lab findings: GSAP Flip for a card that grows into a full view, GSAP ScrambleText for the "now showing" label, and the rule from the toolkit that bars over moving content stay solid, never blurred. Added on top: ranges and help text for every control taken from Paper's own type files, OKLCH colour work, a compare view with a wipe, and links that restore tuned settings.

Visual direction

Palette: background #0d0d0f, panels #121215 and #16161a, text #f5f5f6, dim text #a1a1aa, and one accent, lime #e9ff5a. The shaders supply all the other colour, so the interface stays dark and quiet. Fonts: Geist for text, Geist Mono for labels, values and code.

Layout: a thin solid top bar, then the hero. The h1 is white text on the page colour with mix-blend-mode: multiply over two stacked shader layers, so the shader shows only through the letters. A script fits the font size to the container width, and on phones the two words stack. Below that, a sticky filter bar (five groups, a shaders or all-122-presets switch, search) and a tile grid, then a "What you take home" row of four cards, then a footer with credits.

Motion: letters rise in with a staggered expo.out, the hero layers crossfade over 0.9 seconds, tiles reflow with Flip when you filter, and a tile grows into the editor stage with a Flip. Signature moments: the cut-out headline, the live-on-hover tile wall, and the tile-to-editor transition.

Theme, kit and licenses

Theme: Useful tool, closest to Showpiece with one change. Showpiece makes the effect the product, and here the product is the shader library itself. The change is that the wow is concentrated in one place, the headline, while the rest of the page is a calm working surface. A tool people use for a long time cannot afford effects on every screen.

Kit parts: paper.js with paper-data.json (all 29 shaders) and fps-chip.js (shown with ?fps). The page adds GSAP 3.15 with Flip and ScrambleText only.

Licenses:

References

Why these choices

A shader tool lives or dies on speed of trying things. So tiles show a still (rendered once per preset through a hidden mount with a readable drawing buffer) and only go live on hover or focus, at most six at once, two near screen centre on phones. Browsers allow about 16 WebGL contexts per page, so the page releases contexts explicitly with WEBGL_lose_context.

Every uniform gets a control, with ranges from Paper's own type files, so nothing is guessed. Randomize rotates hue in OKLCH so lightness stays and results stay readable. Pasted palettes are matched to colour slots by lightness, which keeps the contrast the preset was built around. Exports record speed, frame and image, hold still under reduced motion, cap the pixel count, and fall back to a gradient. Clips are driven frame by frame, so a slow device still records true speed.

The trade-offs: no blur or glass anywhere, because the page is full of moving canvases. The hero depends on jsDelivr, and if Paper fails to load the page says so plainly instead of showing a broken shelf.

Who this kind of site is for

Users: front-end builders, agencies and Codex or Claude builds that need a shader background and a plain-JavaScript snippet fast, plus designers who want to pick a look and hand off a file.

The output suits sites that want a living background behind a hero: studios, tech-forward local businesses, galleries, event pages, portfolios. It is the wrong source for task-heavy pages where a moving background costs readability, or for sites that must work offline, since every export imports Paper from jsDelivr.

It also works as a menu on a client call: open the editor, paste the client's brand colours into "Bring your palette", and send the HTML file the same day.

How to make it

Stack and key techniques

The prompt

Build "Shader Shelf", a free single-file tool for web builders (no client): browse, tune and export all 29 Paper Shaders and their 122 maker presets. One HTML file, no build step. Use the Brain Melt kit: paper.js with paper-data.json (Paper Shaders 0.0.81, Apache-2.0) and fps-chip.js. Add GSAP 3.15 with Flip and ScrambleText only.

Look: background #0d0d0f, text #f5f5f6, one accent #e9ff5a, Geist and Geist Mono. Dark and quiet; the shaders supply all colour. No glass or blur, every bar solid.

Signature moments:
1. Hero: the headline "SHADER SHELF" is cut out of the page (white text on page colour, mix-blend-mode multiply, over two stacked shader layers). Fit the font size to the width with a script; stack the words under 700px. Every 7 seconds crossfade to the next shader, update a "now showing" label with ScrambleText, and offer Pause, Next and "Open this one".
2. Tile wall: a filter bar (five kind chips, shaders or all-presets switch, search). Tiles show a still rendered once per preset through a hidden mount with a readable drawing buffer. Go live on hover or focus, max 6 at once (2 near screen centre on touch). Release contexts with WEBGL_lose_context. Filtering reflows tiles with GSAP Flip.
3. Editor: a tile grows into the editor stage with Flip. Every uniform has a control, with ranges and help text taken from Paper's own type files. Colour editors, enum buttons, switches, speed slider, presets, Randomize (OKLCH hue rotation keeping lightness), palette paste matched by lightness, Reset, backdrop switch.
4. Images: four built-in images drawn in canvas, plus drop-your-own. Liquid Metal and Gem Smoke run the image through Paper's processing step first.
5. Exports: HTML file, JS module, React props, PNG up to 4096, frame-driven WebM clip. Every export credits Paper Shaders and holds still under reduced motion.
6. Compare: side by side or a draggable, keyboard-operable wipe. The URL hash restores editor and compare state, including tuned settings.

Rules: honour prefers-reduced-motion; no overflow at 1440 or 390 wide; keep focus inside open dialogs, Escape closes; show a plain message if Paper fails to load.

Verify: run a headless script that exercises filters, search, the editor, every export, compare and hash reopening with zero console errors. Screenshot desktop and mobile. Fix and repeat. Say plainly what you could not test (real downloads, clipboard, Safari, Firefox, real-device fps).

Build notes

Stepping down: what you would likely lose

This is an informed estimate, not a measurement. No public benchmark compares these exact models on one-shot frontend work, and the evidence here is tier-based extrapolation. The question is how much the tested kit parts carry for a smaller model.

Feature Sonnet 5.5 with this kit Sonnet 5.5 from a blank page
Shader mounting for all 29 shaders Likely fine. The raw uniform mapping and image-loading order are done in paper.js. Likely attempts it with bugs: a shader that throws because a texture was not fully loaded, or wrong uniform names, found only by testing each shader.
Cut-out hero with crossfading live shaders Likely fine on the CSS idea. Probable slip: font fitting that breaks on phones or after per-letter spans change kerning. Likely attempts it with bugs, or settles for a plain gradient behind normal text.
Tile wall with context limits Likely attempts it with a leak: contexts not released, so tiles go blank after many hovers. Likely simplifies it away: all tiles live at once, which fails after about 16.
Editor with a control for every uniform Likely mostly done, but with ranges guessed instead of read from Paper's type files, so some sliders feel wrong. Likely a small set of hand-picked controls for a few shaders.
OKLCH randomize and palette matching Likely attempts it; the gamut clamp may drift hue or clip colours. Likely simplifies to plain HSL shifts.
Exports (HTML, JS, React, PNG, clip) Likely fine for the text formats. Frame-driven clip recording is the weak spot, as it was for the builder. Likely export that runs on screen but not from a double-click, because of image loading order.
Flip from tile into editor Likely fine on a simple version, with occasional jumps on close if the tile was filtered out. Likely a plain fade.
Compare wipe and hash restore Likely does fine on wipe; hash restore of tuned settings may drop some state. Likely side-by-side only.

Rough judgment call: Sonnet 5.5 with this kit probably keeps 70 to 85 percent of the impact and almost all of the function, because the hardest part, Paper in plain JavaScript, is already solved. Sonnet 5.5 from a blank page probably keeps 35 to 55 percent, with the biggest losses in shader coverage and context management. Opus 5.5 built this one, so I cannot say how close it comes to Fable 5.1. A screenshot loop and a script that opens every shader would close most of the gap for both.

← Previous reportNext report →