LABS
Six benches
Each one is a working tool rather than a gallery — every bench here has a way of getting what you made out of it.
Shader studio
32 effects · 5 passesThirty-two multi-pass WebGL2 effects. Compose in the aspect you will ship, tune pass by pass, and leave with a PNG, a clip, a standalone file or a link.
Transitions
12 stylesTwelve page transitions painted on a canvas. Two real routes so you can feel the cover and the reveal rather than watch a loop.
Effects
6 componentsScramble text, spotlight cards, marquee, grain, magnetic hover, count-up — none of them driving per-frame work through React state.
Image to ink
4 conversionsDrop a photograph in and get ASCII, ordered dither, a halftone screen or mosaic out, on the same Bayer matrix as the transitions.
Texture forge
6 texturesSix seamless tiles from periodic noise. The preview repeats them, because a single tile always looks fine — the seam only exists at the join.
Mesh gradient
3D · WebGL2A displaced surface with a camera you can orbit. Real geometry, real matrices and a depth buffer — and no three.js.
Card field
Stripe-classThree inputs behaving as one control. Live grouping per brand, Luhn validation, and a caret that stays where you put it when you edit the middle.
Diagrams
Plain SVGServer-rendered technical diagrams. Orthogonal routing, dashed boundaries, marching flow, and a text description that carries the graph.
Why your gradient looks muddy
An essay on the four pieces of arithmetic underneath every bench here — sRGB blending, banding, the ground, and why an average cannot glow. Every claim has a control you can drag.
Read it →Docs · Components · Home