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. 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 ↗