Craft

Small interaction experiments. All of them live somewhere on this site, newest first.

1. No. 082026-09-28

   Shared guestbook sheet

   The hero paper is one sheet every visitor can sign. Older ink fades, and when someone else signs you watch it draw itself in.

   Each drawing is pinned to the nearest piece of content, so it stays beside the photo or under the name however the layout reflows. The server rasterizes it to a PNG (hand-rolled encoder) for a vision-model check; only approved drawings get public read, which is also all Appwrite Realtime will deliver.

   sign it ✎
2. No. 072026-09-28

   Peel-back paper

   The hero is a taped sheet. Peel its corner back and underneath is the real source of the fold math, with a DevTools-style inspector over where each element sits on the paper.

   Fold line is the perpendicular bisector of corner → pointer. Front and flap are clip-path polygons, the flap carries a mirrored copy of the ink, the taped corners are hard constraints, and release snaps open or shut. The code is read from disk and highlighted with shiki on the server. Try the one below.

   hello from underneath

   ⎇ mainpeel.tsx

   peel me

   Same component as the hero, on a smaller sheet.

   peel me

   Same component as the hero, on a smaller sheet.

   try it ↗
3. No. 062026-09-28

   Red-pen nav

   A strip of masking tape for navigation. A pen circle follows whichever section you're reading.

   IntersectionObserver on a line through the middle of the screen, and one shared framer-motion layoutId so the circle glides between items.

   look down ↓
4. No. 052026-09-23

   Scrapbook

   21 photos and 18 stickers. Drag anything, flip photos for captions, poke stickers until they make noise.

   Seeded masonry layout, plain pointer events for dragging, a tiny WebAudio synth for every sound. The bug runs away.

   see it live →
5. No. 042026-09-23

   Mechanical keyboard skills

   Skills as keycaps. Type a letter anywhere and every skill that starts with it gets pressed.

   Global keydown mapped to data-key selectors while the board is on screen; the clack is filtered noise plus a low thock.

   see it live →
6. No. 032026-09-23

   Airmail contact

   The contact form is a letter with a postmark that knows what year it is.

   SVG textPath for the postmark ring, the envelope is pure CSS.

   see it live →
7. No. 022026-09-23

   Light bulb theme switch

   Dark mode is a bulb hanging from the top of the page. Click it.

   Drop-and-swing keyframes, a WebAudio click, next-themes underneath.

   it's hanging up there ↑

8. No. 012026-09-23

   Career in space

   Scroll through my career as a pixel-art space journey that snaps to each stop.

   Canvas renderer driven by scroll progress, eased warps between stops, optional synth hum.

   see it live →