Skip to content

Founding MemberTapBill's welcome, in four steps.

Experiment · OCT 2026
TypeScriptSVGPointer events
TapBill

Thank you for being here

You're one of TapBill's first members, and we're really grateful you're trying it. Ticket No. 0042 is yours: put your name on it and you're in.

Sample ticket No. 0042 · nothing you type or draw is saved

TapBill, the project

What it is

When someone signs up for TapBill early, I want them to feel thought about. They’re trusting something new, and the card is my way of saying thank you. It comes with a promise too: if TapBill ever adds paid tiers, founding members won’t have to pay for them.

This is the welcome flow, lifted out of the app. The real one issues the card and saves your signature; this one keeps nothing.

Inspired by Interface Craft, Josh Puckett’s course on designing software with care.

How it's built

  1. 01The ticket stays in one place on every step and fills in as you type, so the steps read as one object being made.
  2. 02Each stroke on the pad is kept as points and written out as one SVG path, with curves through the midpoints to smooth the pointer's jitter.
  3. 03The ticket fits a drawn signature to its line by measuring the box the ink covers.
  4. 04It tilts toward a mouse and a soft light follows the pointer. Touch and reduced motion leave it still.
  5. 05Its own CSS lives in src/styles/specimens, scoped so TapBill's look never reaches the rest of the site.
Next

More from the lab

All experiments
EXP-10 · three.js · TypeScript · Natural Earth

One place at a time

A globe of dots with a bubble for every place my work took me. Drag it around and pick a place to read about it.

EXP-09 · Canvas 2D · Motion

Into focus

Dots fly in from everywhere, find their own streams, come together and go soft. Then the jh logo lands, sharp.

EXP-07 · three.js · Blender · WebGL

The basement

A 90s basement with a closet of jerseys. Open the closet, flip a jersey, watch the play on the TV.

Home