Three sites, three different trades, three different design languages. Each one is running below, not photographed. Click one to open it full size and use it.
Barbershop · Phoenix
Night-time trade, so the page is dark and the prices are the loudest thing on it. No booking system: this shop wants the phone to ring, so the whole layout funnels to one number.
Auto repair · Mesa
A workshop, so nothing on the page is rounded. Hard rules, one safety orange, and the proof up front: years, warranty, bays, cars a year. Trust is the sale here, not looks.
Roastery & cafe · Gilbert
The opposite decision at every turn: soft corners, deep whitespace, one green, and a menu set with dotted leaders like a printed card. People come here to read, so the page lets them.
Six working pieces with no business wrapped around them. This is the vocabulary the three sites above are built from. Most of it wants a pointer, so use one if you have one.
Get out the way
Move the pointer across itEvery character measures its own distance to the pointer and steps aside, harder the closer you get. Nothing is scripted: move slowly and it drifts, move fast and it scatters.
Per character transforms, written every frameThe stroke is tied to scroll position rather than to a timer, so it draws forward as you go down and unwinds if you scroll back. The marker reads its position and its angle from the same path.
Drawable stroke plus a motion path, both scrubbedFour outlines, one element. The points are matched up and interpolated rather than cross-faded, so it reads as a single object changing its mind instead of two images swapping.
Path interpolation on a looping timelineLeft alone the grid pulses outward from its middle, one line of code deciding the delay for every dot by its position. Bring a pointer near and each dot answers that instead.
Grid aware stagger, then per dot distanceThree blocks, three springs. Drag each one away and release it. The numbers underneath are the only difference between them, and the difference is obvious the moment you let go.
Real spring solvers, not eased curvesCounting to a figure holds attention for the second and a half it takes, which is long enough to read the label underneath it. Printing the same number instantly does not. The figure is the real starter price, because a demo that invents statistics is not a demo worth showing.
A value tweened, written out each frameEvery site above started as a phone call about what the business actually needs. Yours can too.