Maison Temper — luxury chocolatier website design

Maison Temper is a fictional chocolatier and pâtisserie in County Durham: chocolate cakes, hand-tempered bonbons and gift boxes, made in small batches. Nobody commissioned it. I set the brief myself: a website for a luxury food maker that feels as considered as the thing it sells, where the first minute on the site does the job a shop window and a tasting would do in person.

Luxury food websites usually lean on one beautiful photograph and a lot of white space. I wanted the opposite: show the craft itself. So the homepage makes one chocolate cake, from the ingredients on the bench to a plated slice, and the visitor controls it with their scroll.

The hero is a film in nine chapters: The Selection, The Yolk, The Melt, The Fold, The Pour, The Rise, The Rest, The Cut and The Plate. Each chapter has one short line of copy, set centred in Bodoni Moda over the film, and a row of dots shows where you are in the bake. Scroll down and the cake is made; scroll back and it unmakes itself; stop and it waits for you.

It is not a video. The film is 256 still frames drawn to a single canvas and tied to the scroll position, so it moves exactly as fast as the visitor does. The words over it are real HTML, so they are readable, selectable and indexed.

A scroll film only works if the camera never moves, otherwise every chapter change jumps. I art-directed nine keyframes in Adobe Firefly, one per chapter, all from the same locked camera position over the same marble bench, copper bowl and window light. Then each keyframe was joined to the next with a Veo 3.1 Fast morph, eight in all, so the cake changes state while the room stays perfectly still.

The frames are cut into two sets. Desktop gets 256 WebP frames at 1280 by 720, about 8.8 MB in total. Phones get their own portrait cut: 192 frames at 450 by 800, 3.4 MB, framed so the chocolatier stays centred in every shot, because on a phone the limit is memory as much as data. The frames wait until the first screen has painted, then stream in a few at a time, in order, and each is decoded before it is drawn, so the film never stutters mid-scroll waiting for an image. Search engines and audit tools are served the first frame as a still and never download the sequence.

Below the film is a proper shop: eight products across cakes, chocolates, pâtisserie and gift boxes, with filters, sorting, badges for signature and seasonal pieces, favourites, and add to bag. The fixed header carries working favourites and bag buttons, and the bag opens as a side panel with quantities, removal and a running total.

Because Maison Temper is not a trading business, the checkout button reads “Checkout unavailable”, and the bag says plainly that orders aren’t taken. Everything up to that point works the way a real bag would, which is the part a client needs to see and feel before deciding what their own shop should do.

Chocolate is mostly bought as a gift, so gift boxes get their own section: three tiers, each with its contents listed plainly and its own add button, from an everyday box of nine bonbons to a box with everything the house makes. Under it, “the Maison Temper standard” sets out six things the kitchen will not change, from tempering by hand to boxing with a card written in ink, in short lines rather than marketing paragraphs.

Behind the section headings, a field of slow gold motes drifts in WebGL, built with the GetLayers Pollen scene and tinted to the site’s champagne gold. It is the kind of detail most visitors never consciously notice, and it is what makes the page feel lit rather than printed.

The story section has its own short film, an egg cracked into a copper bowl, scrubbed by the scroll like the hero. The heading arrives word by word, and the three facts beside it (the tempering temperature, the hours the ganache rests and the steps to every cake) count up as they come into view. Further down, a looping film of a couple sharing a slice by a harbour window at dusk gives the site its one human moment, followed by the house note and a gallery from the kitchen.

Every photograph and every second of film on Maison Temper is SR7’s own, made with Adobe Firefly and Veo and directed to one look: cocoa-black backgrounds, black marble, copper, warm window light and gold leaf. There is no stock anywhere on the site. Products, collections, gift boxes and the kitchen gallery all come from the same world as the hero film, so the site reads as one business rather than a collection of pictures.

The type does the rest. A centred Bodoni Moda headline with a champagne italic accent in #d6b77a, on cocoa at #0a0604, and an MT monogram. It is restrained on purpose, because luxury is mostly what you leave out.

Because Maison Temper is fictional, it is built so it can never be mistaken for a working shop. The footer carries one line saying it is an original SR7 design and not a trading business. There is no street address, no phone number and no opening hours: the atelier is described only as “tastings and collection by appointment, County Durham”. The checkout is switched off and says so, and the enquiry form tells visitors that nothing is sent. The disclosure stays in the footer rather than across the design, so the site can be judged as a finished website.

The site is built with Next.js 16 on the GetLayers “House” scroll engine, with react-spring for the motion and Lenis for smooth scrolling, and exported as plain static files, so it runs on ordinary cPanel hosting with no server to maintain. The heavy frame sequence is split by device, so a phone never downloads the desktop set, and everything, including the fonts, film and frames, is served from the site’s own domain.

Measured with Google PageSpeed Insights on the live site on 1 October 2026: 95 for performance on mobile and 99 on desktop, with 97 for accessibility and 100 for best practices and SEO. On the mobile test, first contentful paint was 0.9 s, total blocking time 40 ms, layout shift 0.005 and largest contentful paint 3.0 s. Two things got it there: the film frames and the media further down the page wait until the first screen has painted, and each heading’s letter-by-letter animation is only built as it comes near the screen, rather than all at once when the page opens.

A chocolatier website that shows the craft instead of describing it: a cake made in nine chapters as you scroll, a working shop and bag, gift boxes set out clearly, a story told with film, and photography that is entirely its own.

There are no sales figures or review scores here, because it is an independent studio project with no customers. What it shows is what a small, premium food business gets when the brand, the photography, the film and the build are treated as one job.