Shaders
This one started with a few screenshots from a YouTube video and one message: I love this effect, can we build it? (we could) A low-resolution grid of dots, in layers, moving. I have always loved images where you can see what they are made of. Daniel Rozin’s mirrors, where wooden tiles tilt into your face. Future Knight, a game that is beautiful in its colours, its style, its texture, everything. The picture is still there, and you can feel the material at the same time. Four days of back and forth later there was a lab, and a small web component that does this:
The Lab is where I play: thirty styles in six families, layers you drag to reorder like in Figma, and brushes that push the picture around. A lab should feel like a sketchbook, so nothing in it asks permission. basement.studio’s Shader Lab had better organised controls than mine, but what I loved there was the preview, so every thumbnail in my gallery draws whatever you are playing, live. The component only gets six styles, the ones that still read on a small card, in about 8 KB. Handles and Vox stay home.
- Dots
- Squares
- Plus
- Lines
- Capsules
- Truchet
- Clocks
- Stipple
- Dither
- Engrave
- Redacted
- Vox
- ASCII
- Paragraph
- Overprint
- LCD
- LED
- Noise
- Glitch
- Tiles
- Pins
- Sequins
- Handles
- Voxels
- LEGO
- Tetris
- Mosaic
- Blobs
- Marks
- Clouds
Also in the <fk-shader> component.
My favourite piece of interface in the whole thing is small. While you hold a slider, everything else fades away so you can see the picture you are changing, and only the row under your finger stays. Let go and the panel comes back. On a phone it waits to see which way your finger goes: sideways adjusts, up and down is just a scroll.
Colors
I took a lot out. I didn’t like the little pulse when you tapped, so it went, and everything that springs back got calmer. I designed a loop of shapes and type to open the Lab with, and it didn’t have much onda, so that went too. Then someone testing it said they liked the one with circles, did not want to see my face (fair), and found the panel complicated: most people just want their camera and a button that changes the style. So now that is a bar that never leaves the screen (sorry, my face is still everywhere here).
LCD is my favourite, straight out of Future Knight: segmented digits, ghost segments that never fully switch off, a shadow on the reflector. It also nearly broke everything. On a fine grid its first frame took twelve and a half seconds, because the background drew eighty-five thousand shapes in a single fill. Drawing one cell once and stamping it brought that to 32 milliseconds (about 390 times faster), and it looks exactly the same.
I am not trying to make money with it. It is going to be one piece of the design system I am putting together on the side. Mostly it reminded me why I got into this: make something move, then sit there watching it for much longer than I should.