A rebuild of a premium holiday-lighting company's site. Customers preview lights on a photo of their own house, then book and pay by card or with Afterpay instalments through Square.
Project media coming soon
Screenshots and demo videos for this case study will appear here.
Lumiere started as a visually ambitious static site with broken navigation, CDN dependencies and a simulator built around a missing image. I rebuilt it as a component-based Next.js 14 application. Its centrepiece simulator now works on the customer's own photo, and server-side booking supports card payments and Afterpay instalments through Square, with email notifications through Resend.
The signature feature needed to look convincing on real, arbitrary house photos. Automatic edge detection placed the lights unreliably, and an AI re-render cost seconds and quota for every change. The booking flow also needed real payments without exposing secrets in a static site.
I moved the site from a static build to a hybrid Next.js app with API routes for bookings and contact. The simulator renders an LED glow along a roofline the user traces and edits on their own photo, with colour presets, brightness, Web Audio feedback and reduced-motion support. The geometry behind it is pure, unit-tested functions. Square's Web Payments SDK tokenises the card in the browser, and the server creates the payment or the Afterpay invoice.
The result is a fast, self-contained marketing site whose flagship interaction works on any customer's home and leads directly into a paid booking.
Home, about, services, contact and simulator routes, with self-hosted fonts, next/image, metadata and a custom 404.
A photo upload and roofline editor with a canvas glow layer using the screen blend mode, a colour wheel, presets and an SVG demo house for first-time visitors.
Object-fit cover transforms, conversion between normalised and canvas coordinates, point simplification and nearest-segment insertion, all tested without a DOM.
Inquiry, card-payment and Afterpay-invoice flows, each with server-side validation and email notifications.
Automatic edge detection rarely found a clean roofline on real photos, and an AI image edit took 5–15 seconds and API quota for every colour change. Instead, the user taps points along their roof and can drag, insert or remove them. Points are stored in normalised image space, so the lights stay aligned however the photo is cropped or resized, and the glow re-renders instantly as settings change.
Card details are tokenised in the browser by Square's SDK, and the API route creates the payment with an idempotency key. The order amount is checked against an allowed range on the server, so a tampered request can't change it. Afterpay goes through a customer, then an order, then a published invoice, so Square emails the instalment plan to the customer.
The CDN Tailwind build, icon scripts, GSAP and Google Fonts were replaced with compiled CSS, lucide-react, an IntersectionObserver reveal and self-hosted fonts. The site no longer depends on third-party runtime scripts that could fail or slow the first paint.