Playground

Simple things I built and found too interesting, or too silly, to throw away. Some shipped, some never left the sketchbook.

01Drive-in cards

Drive-in cards

SVG path morph driven by scroll: items arrive as vans, park as cards. Hover a parked card to wake it. Scroll inside the frame.

Open ↗Source ↗

02Golden spiral

Golden spiral

500 dots placed with the golden angle, the same packing a sunflower uses. A pulse ripples outward forever. No libraries, just SVG.

Open ↗Source ↗

03CSS-only effects

CSS-only effects

A jelly button hover and a spinning highlight ring carved out of a conic gradient with mask-composite. Obviously pure CSS, no JavaScript at all.

Open ↗Source ↗

04Sakura badge

Sakura badge

A little badge with cherry-blossom petals falling inside it. Petal positions are randomized client-side to avoid hydration mismatches.

Open ↗Source ↗

05Time picker

Time picker

Built for a client project after every free time picker I looked into misbehaved somewhere — controlled values, mobile scrolling, popover clipping. Writing one was faster: staged selection, a “now” shortcut, per-slot disabling.

Open ↗Source ↗

06Entity-chip composer

Entity-chip composer

Type @ and pick a destination: it becomes a chip the caret can’t split. Built on raw DOM Ranges and Selection, no editor library. The palette anchors to the caret and the panel below shows how the message serializes.

Open ↗Source ↗

07Transit drag

Transit drag

A day of activities with a train in the middle. Drag the train (or use the arrows) and every later time recalculates: transfers, departure, the whole afternoon.

Open ↗Source ↗