Craft
Interaction studies
Small interaction studies to play with. Some are pieces of this site pulled apart; others I built just because they were fun to make.
01
Type that leans toward you
Geist is a variable font, so weight is a number, not a file. The letters near the pointer gain weight with a gaussian falloff and ease back when it moves on. Each letter is pinned to its resting width, which is why the line never reflows. Mouse only; the same field runs on the homepage headline.
Move through this line and the letters lean toward you.
02
The desk
Prints on a table. Drag one and it slides with momentum, stays where it lands, and comes to the top of the pile. Tap one to open it. Nothing snaps back; the desk keeps the mess you made until you leave.
03
Film recipes
I shoot Fujifilm with custom recipes, so the photographs here can wear a few of them. These are CSS filters standing in for the real simulations: close enough to change the mood, cheap enough to switch instantly. The same picker sits on the photos page and remembers your choice.
Recipe
04
The K, on a hinge
The mark is two strokes, and the lower one is a door hinged where they meet. On load it swings open from folded shut, hover opens it seven degrees further, and a click makes it nod. In the header it holds half shut while the next page loads, and on an article it fills with ink as you read, tab icon included. One rotation on one path, on the only curve on the site allowed to overshoot.
05
The house curve
Everything on this site settles on one curve: cubic-bezier(0.23, 1, 0.32, 1), fast out of the gate and a long calm landing. Drag the handles to bend it and play the three moves the site makes most (a slide, a fade, a photo settling) with your curve instead of mine. The overshoot preset is the logo's curve, the only other one allowed.
cubic-bezier(0.23, 1, 0.32, 1)
Slide
Fade
Settle
06
A print, developing
A photograph appearing the way a print comes up in the developer tray: on white paper, the dense shadows first and the highlights last, warm until it clears. Move across it and the liquid moves with you. One fragment shader in raw WebGL2, no library; it draws only while something is changing and only while it is on screen. It is the one shader on the site, and it stays on this page.