Loading…
Live page · scroll inside
Freeautomotive/repair garage · dark · landing page · gsap · lenis · html
Halfshaft
An independent garage's site in workshop black, off-white, safety orange and mint: an angular uppercase headline beside a ruled workshop spec, a symptom estimator where five symptoms and four conditions re-rank the three likely causes (rows sliding by rank, likelihood bars, typical prices and hours) while an urgency gauge's needle sweeps with an overshoot and the advice changes, a 24-point check set as four numbered columns, and fixed-price jobs.
What's inside
- 01Technical wordmark barTurns translucent after 80 px.
- 02Technical headline with workshop factsH1 lines rise from masks; spec rows rise in turn.
- 03Symptom estimator with urgency gaugeChanging the symptom or a condition re-ranks the causes (rows slide to their new order by transform), their bars scale to the new likelihoods, prices roll, and the gauge needle sweeps with a slight overshoot to the new urgency while the advice line swaps.
- 0424-point check in four columnsColumns rise in turn.
- 05Fixed-price jobsRows rise in turn.
- 06Address footerNone.
Utility pages in the same file: 404 · Style guide · Password · Changelog
How to use it
From prompt to a live page.
- 01Walk the page
The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.
- 02Pick a palette
Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.
- 03Pick your stack
Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.
- 04Copy the prompt
It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.
- 05Make it yours, then iterate
Swap copy and images first, keeping the structure. Then refine section by section rather than re-running the whole prompt.
