GLAZED!

GLAZED! is a concept for a small-batch doughnut shop: six flavours, sold in boxes of six or twelve and collected from the counter. The brief we set ourselves was a shop with the bright, playful energy of the product that still makes building a box quick.

It has a home page, a menu, a page for each flavour, a box builder, the bag and a collection checkout, the story of the dough, questions and a page for installing it as an app. The look is cream, raspberry pink and pistachio green, with a tall condensed display face against a clean grotesque.

The thread running through it is one doughnut, built in 3D. It hovers in the hero, tumbles down to the flavour stage as you scroll, and then falls into the first empty slot of a real 3D box, where the box holds still for a moment so you can watch it land.

Food shops often show the product as a flat grid of photos and leave the fun to the words. GLAZED needed movement with a point: the doughnut you pick is the one that ends up in your box, and the box you build looks like the box you would carry home.

3D on a shop page is easy to get wrong. It has to load without holding up the first view, stay smooth on a mid-range phone, look right from every angle and keep still for anyone who prefers less motion. Underneath, the builder, bag and checkout had to work properly and say plainly that no real order is placed.

There is one doughnut model, built with three.js: a glaze that drips over the edge, toppings that sit only on the glaze, a golden underside with the pale ring where it floated in the oil, and cinnamon sugar all over the Cinnamon Crush. Each flavour’s colours were tuned against its picture, so the 3D doughnut and the pictures match.

As you scroll, the doughnut tumbles from the hero to the flavour stage and on to the box, shedding a few sprinkles behind it. It slows over its slot, turns flat and hangs for a split second, then drops in with a squash and a small bounce; the glaze wobbles, a puff of sprinkles goes up and the box gives a tiny bump. The box holds still for half a screen of scrolling while that plays out, without ever holding the scroll itself, and scrolling back up lifts the doughnut out again.

The box is 3D too: card with a soft sheen, dividers and pale pink paper liners, filled from the front left. Every doughnut you add flies in from its tile, and Surprise me sends in a whole box, one after another. Adding a full box to the bag closes the lid with a soft thud and presses a GLAZED! seal over the edge, then the box slides off to the bag, whose count bumps, while a fresh box rises in its place.

Visitors who prefer reduced motion get the same shop without the movement: the pictures stay still, and the doughnut is already resting in the box when they reach it.

Build. React and Vite, with three.js loaded only on the two pages that use 3D, once the page has appeared, and the doughnuts’ textures drawn away from the page’s main work, so the first view is never held up. Fonts and images are served from the site at the sizes the layout uses, and it installs as an app, with its own offline page.

GLAZED! is a self-initiated concept by WebWork Software. It turns building a box of doughnuts into something you watch happen, from the first scroll to the sealed box.

GLAZED! shows that 3D on a shop page can do a job: the doughnut you pick is the one that lands in your box, and building a box feels like packing one. The 3D waits until the page has appeared, stays smooth on a phone, and the shop underneath works as it should.

It’s built for food, drink and gift businesses that sell in boxes or bundles and want their website to be as much fun as the product. The builder, bag and checkout can be connected to a real shop.