Client workUK close-up magician - static Vite build2026
Neil Granger Magic
A close-up magician's booking site in dark burgundy and gold: three service pages a visitor picks between in one glance, his own photographs dealt out like a hand of cards, and one enquiry form that emails him directly, with WhatsApp as the fallback.
Our exact role
Designed and built the site end to end — the identity treatment, the four pages, the motion, and the enquiry flow.
The context
Neil Granger is a close-up magician working weddings, corporate events and private parties across Kent, London and the South East, with a two-year residency at Houdini's behind him and twenty-plus years professional. He sells to two very different buyers — wedding couples and corporate event planners — and runs the whole business off his phone.
Where it started
The proof of the act was real but scattered: photographs from a decade of bookings living in WhatsApp sends, named client work for McDonald's, Barclays, Volvo, CIOB, CIWM and Ubertas Consulting with nowhere to show it, and reviews sitting on a Google profile a prospect had to go looking for.
The constraint
A wedding couple and a corporate booker want opposite things, and neither will read the other's pitch to find their own. The site had to be atmospheric enough to sell a magician and legible enough that a time-poor visitor knows in one glance which page is theirs — and it could not imply availability, because Neil is part time and keeps no public diary.
Decisions made
- 01Made the three services the primary navigation: whole-card links with the occasions spelled out at reading size and a button that names the page you land on, rather than a clever scroll effect over the one decision the site exists to get right.
- 02Held the whole site to one booking path: every 'Book now' goes to a single enquiry form that emails him, with no booking platform to pay for and no account for the visitor to make.
- 03Treated the failure path as part of the design. If the send does not confirm, the visitor is handed a prefilled WhatsApp message instead of a reset form and the assumption it arrived.
- 04Left the date picker out. No availability is claimed anywhere, and 'when' is a free-text field, so 'next summer' is a valid enquiry.
- 05Built the identity around the mark that was already his — the spade set as the A — and let the logo intro perform exactly that, once per session.
- 06Kept social proof to things that can be checked: real client marks, real named Google reviews quoted verbatim, and credentials, with no invented score or star rating.
- 07Chose a plain Vite multi-page build over a framework. Four pages of content and some scroll choreography have nothing worth hydrating.
What we built
- A homepage running the hero, client wall, about, services, reviews, residency, gallery, video, credentials and booking form in one pass.
- Three SEO service pages — weddings, corporate events, private parties — each walking the buyer through the event moment by moment into an FAQ and the form.
- An enquiry form that emails him directly, with a prefilled WhatsApp handoff as the fallback when the send cannot be confirmed.
- A gallery spread of four of his own photographs dealt out like a hand of cards, one suit per room, over a marquee of twelve more.
- A logo intro that turns a card over, blooms it away and cuts the A-bar with a blade of light, in under two seconds, homepage only.
- A 'pick a card' section whose card backs flip to real credentials, plus a residency band with count-up stats.
- Person, Service, BreadcrumbList and FAQPage schema, canonicals, sitemap and robots.
More of the build
Stack
- Vite, multi-page
- Vanilla JavaScript, no framework
- GSAP + ScrollTrigger
- Lenis smooth scroll
- IntersectionObserver + CSS transitions for reveals
- Inline SVG brand mark
- Vercel
Technical result
- Static multi-page build with no framework runtime in the page — each route ships as its own HTML document.
- Nothing that hides content depends on the animation ticker: reveals run on IntersectionObserver with CSS transitions, so a stalled frame cannot strand a section invisible.
- Motion is compositor-only — no animated blur, clip-path or backdrop-filter anywhere in the page.
- Photography is served at three sizes: full-size only for the static hero and portraits, 760px squares for the gallery prints, 560px crops for the twenty-four moving marquee elements.
- Enquiries reach him by email with no database and no booking subscription; a serverless function logs each one alongside the send as a backstop.
- Client logos are recoloured in CSS rather than re-exported, so the source artwork stays the client's own files.
Business result
Live, inspectable build. Measured business outcome pending client approval.