Who I Work Best With
Homepage audience module. Four selectable situation cards, each with a flat Arrow-drawn UI scene on an .illo-panel (problem at rest, fix on hover or selection) and a radio indicator, one service hue each (Amplemarket's persona row, Oura / Flighty selection); the selected one answers with the first step that fits it and a pre-filled contact link. Auto-advances on a CSS timer until the visitor picks a tab.
Live Preview
Who I work best with
Australian businesses and startups without a design team, in any industry. Pick the one that sounds like you.
Sound familiar?
No design lead
You're shipping product without a designer, and it shows in the details — pages that don't match, clunky flows, a site that looks smaller than the business is.
Where I'd start
An ongoing design retainer
A set block of senior design hours each month for new pages, features and fixes — without hiring.
Run a dev studio or web agency without senior UX in-house? I also work white-label. Talk about a partnership
View Full Version
Structure
1. Situation tabs — .situation-list / .situation-tab
Real tabs (tablist, roving tabindex, arrow/Home/End), each a selectable card: a .svc-accent-* hue, its scene from SituationIllos.tsx on a light .illo-panel, and a .situation-radio that fills with a check when selected. Hover lifts the card. Each scene shows its problem at rest and plays its fix when the card is hovered or selected. A grid on lg, a scroll-snap row below it.
2. Auto-advance — .situation-progress
A 7s CSS bar on the selected tile; its animationend selects the next tab. Paused on hover, focus and off-screen; gone for good once a tab is picked; never rendered under reduced motion — so nothing advances by itself there.
3. Answer — .situation-answer
Two equal cards in the selected situation's hue, no divider: the problem on a soft tint (.situation-answer-problem), then "Where I'd start" on a solid fill (.situation-answer-start, ink text and a dark primary button) with the CTA to /contact?need=…. An arrow chip (.situation-answer-arrow) sits in the gap, pointing down when stacked.