About

ittybitty is a small, curated library of visual effects for production interfaces. The shaders are the flair; the rest is kept quiet, fast and exact.

What you get

Each effect is two plain JavaScript files: a shared runtime.js of about 2 KB and the effect module, which holds its GLSL shader, defaults and a single factory function. There is no package to install and no framework to adopt. Copy the files, call the function with a canvas, and the code is yours. Or, without touching code, useCopy embed on any shader page: one block that works pasted into Webflow, Framer, Squarespace or any page.

What every effect does for you

• Sizes its drawing buffer to the canvas, with the device pixel ratio capped per effect.
• Stops rendering when the canvas is out of view or the tab is hidden.
• Shows a still frame when the system asks for reduced motion, until you call resume().
• Allocates nothing per frame and releases its GPU program on destroy().
• Survives WebGL context loss and restores itself.
• Dithers its output, so soft gradients do not band.

How sizes are measured

Payload figures are computed during the site build from the exact files you copy: runtime.js and the effect module are minified with esbuild, then compressed with Brotli at quality 11 and gzip at level 9. They are the bytes a CDN would send for the effect code, and nothing else.

How reach is estimated

Each card says how heavy an effect is and roughly what share of devices run it smoothly. The weight comes from its GPU time on a reference machine (an Apple M1 Max drawing 1280×800 at twice the pixel density). The share is an estimate, not a measurement of real devices: visitors’ devices are modelled as a spread around half that machine’s speed, and smooth means a frame within 12 ms. Devices that fall short still get the effect, at a lower resolution. Add ?stats to any shader page to see its live frame rate, pixel ratio and render state on your own hardware.

Performance contract

• No new runtime dependency without a measured reason.
• No effect without offscreen pausing, reduced-motion behaviour and clean teardown.
• The catalogue plays posters and short, lazily loaded loops; a card runs its real shader only while you turn its knob, and one at a time.
• One shader implementation per effect. Framework wrappers wrap it, never rewrite it.
• No performance claim without a method anyone can reproduce.

Credits

The look of several effects was inspired by the many lovely backgrounds shared in the community, React Bits among them. Every shader here is written from scratch. The Rainbow effect began life on the hero of cyze.dev.