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 passes

Thirty-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 styles

Twelve 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 components

Scramble text, spotlight cards, marquee, grain, magnetic hover, count-up — none of them driving per-frame work through React state.

Image to ink

4 conversions

Drop 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 textures

Six 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 · WebGL2

A displaced surface with a camera you can orbit. Real geometry, real matrices and a depth buffer — and no three.js.

Card field

Stripe-class

Three 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 SVG

Server-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