Design
Demos based on real websites I have made for clients over the years. Three of these started as client work. The rest are archetypes I wanted to build.
Restaurant
Menu, drinks, events and reviews all come out of editable collections rather than being typed into the page. The room stays put on the left while the menu scrolls past it on the right.
Home services
Built to get a booking. Services and plans come from collections, and the quote tool prices a job live as you move the sliders, so nobody has to call for a number. No stock photography anywhere in it.
Dog training
The only one here that is a whole site, four pages of it. The application walks through three steps and collects what a trainer has to know before the first phone call.
Architecture
Almost no interface. A picture grid that flips to a typographic index of the same projects, and a lightbox. Everything else gets out of the way of the photography.
Shop
Filters, colorways and a bag that stays with you. The grid re-flows when you change category and the shipping meter fills as the total climbs. Checkout is a real three step flow with live tax and shipping; it stops at card entry, which is the one part that cannot honestly be faked.
SaaS
A product tour where the app view on the right swaps as the feature list on the left scrolls past it. Pricing flips between monthly and annual with the numbers counting across.
Security
A corridor in three.js behind the whole page, with the copy scrolling over it. The camera only ever travels straight down the axis, so the background never swings across the type. Labels are HTML, pinned to points in the scene every frame.
Analytics
Every demo pushes events to window.dataLayer, the contract Google Tag Manager and GA4 already read. Open the Events panel in the corner of any of them and you can watch them fire as you use the page.
A brochure site can only tell you how many people looked at it. These have a quote that arrives with a dollar figure attached, a bag that reaches a checkout, and a three step application where the step people leave from is the whole story. Point the same events at whichever tool the client already pays for.