Bakery Website Template

Upload the folder to any static host and open index.html. Keep the six HTML files beside assets/ so relative links keep working. There is no build step, framework or package to install.

Serve the files over HTTP or HTTPS to see the page transition. While editing, use any local static server (for example python3 -m http.server in the folder) and open http://localhost:8000/index.html. Opening a file straight from disk works too, but links then load pages normally without the fold.

GSAP and ScrollTrigger load from a CDN; MapLibre loads from a CDN on the visit page only when the map nears the screen, and three.js loads from a CDN on the sourdough page only when the Loaf Bench nears the screen. Images, fonts, styles and scripts are bundled locally.

1. Identity. Replace "Tourage", "Bakehouse, Leith", the address, the hours table and the fictional-bakery line in the header and footer of each page. They are repeated in all six files so each page stands alone.
2. Photographs. Swap the files in assets/img/ keeping their names and proportions, then rewrite the alt text and captions to describe what your photographs show (see Images).
3. Menu and prices. Edit the rows on bake.html and the order lines on visit.html and index.html (see Menu filter and Orders).
4. Hours and cut-off. Edit the SHOP block near the top of assets/script.js (open days, opening and closing times, the order cut-off and the time zone).
5. Colour and type. Edit the seven colour tokens at the top of assets/style.css (see Palette). To change typefaces, replace the two @font-face rules at the top of the stylesheet, the two font preloads in each page's <head> and the --font-display / --font-body tokens.
6. Forms. Connect the order, class booking and wholesale forms to your own service before taking real orders (see Forms).

Everything visual lives in assets/style.css; everything interactive lives in assets/script.js, organised as one function per feature that does nothing when its markup is missing. assets/page-router.js is the small page router under the transition (links, fetching, history, scroll and focus); you should not need to edit it. Delete a section from any page and the rest keeps working.

The header sits inside each page's data-page wrapper, so it folds with the page. On phones and narrow tablets the four links move into a Menu sheet that unfolds in three panels, a third of the screen each, with butter layers along the fold lines: the first pages, the rest of the pages, then the opening time and order cut-off with the order button. Edit those two times in the menu-docket list on every page. Without JavaScript the Menu button is hidden and the footer page list reaches every page.

Every same-origin link to a sibling .html page runs the fold while the next page is fetched:

1. Leave (about 0.45s). The top third of the page swings down over the middle and the bottom third swings up over it, each flap sagging slightly as it passes upright, with a band of butter layers along each folded edge. What is left is a band of dough across a floured worktop.
2. Hold. The folded band waits for as long as the next page and its main photograph need (at least 0.05s; links prefetch on hover, focus and touch, so this is usually nothing). Nothing on screen names the destination.
3. Enter (about 0.35s). The new page unfolds from the band: the flap folded last opens first, as a letter does.

Back runs it mirrored: the bottom third folds first. Scroll positions are restored, and the arriving page's heading receives focus and is announced to screen readers. A second link chosen mid-fold retargets the same fold; one chosen during the unfold hurries it.

How it is built, for editing:

• The rig is one fixed layer added to the end of the page by assets/script.js: opaque worktop plates for the three bands, two front faces that hold a copy of the page's top and bottom thirds, two dough faces for the flap backs and two butter-edge strips. Each face carries its own perspective and backface culling; nothing uses preserve-3d, blur or filters, so it stays smooth on large screens.
• The copy of the page is made when the visitor hovers, focuses or presses a link, never in the click itself; Back makes it in the first frame of the fold.
• The transition is the leave, hold, enter and reset functions passed to PageRouter.create at the end of assets/script.js. Two numbers set the speed: PACE (0.6; raise it to 1 for a slower, showier fold) scales every duration, and UNFOLD (0.9) scales the arrival on top of that. The individual timings live in foldFlap, playFold, playUnfold and unfoldFlap. Phones run every duration at 85%.
• The worktop, dough and butter-edge artwork is worktop.webp, dough-back.webp and butter-edge.webp (with smaller phone versions). Swap them for a sheet of pasta, card or cloth to suit another business.
• Pages are fetched, not reloaded, so scripts inside a fetched page do not run. Put new behaviour in assets/script.js as another init function called from initPage. Every page loads assets/page-router.js before assets/script.js; keep that order on a new page. Any sibling HTML file with a data-page wrapper joins the transition.
• Add data-native-navigation to a link or container to opt out. Downloads, new-tab clicks, external links and same-page anchors already behave normally.

Swapping the fold for a plain crossfade

To keep soft navigation but replace the fold with a short fade, replace the leave, hold, enter and reset entries in the PageRouter.create({ ... }) call with:

In your downloadThe working code for this step, in script.js.

and remove the bench element and its listeners above it. For ordinary page loads with a browser crossfade instead, delete the assets/page-router.js script tag from every page and add @view-transition { navigation: auto; } to the stylesheet: the script then runs each page on its own.

Hour ruler (home). Each stage is an article with data-stage, data-hour (where it starts on the 0 to 72 ruler) and data-temp. The ruler, stage words and leader lines are generated from them, so add, remove or retime stages in the markup. Drag the marker, press a stage word, or use the arrow keys on the marker (a slider with a spoken value). Without JavaScript the stages show as a list with their photographs.

Order docket (home). Steppers on the three most-ordered items; the "Finish the order" link carries the quantities to the visit page (visit.html?croissant=2&loaf=1#order), where the order form reads them. The "Ordering now for" line is computed from the cut-off.

Menu filter (bake). Each row carries data-days="wed thu fri sat sun" and data-allergens="gluten dairy egg". Day buttons collapse rows not baked that day, allergen buttons strike rows that contain one, and an empty list names the next day it is baked. Rows with data-photo open that photograph beside the row on hover or keyboard focus; on touch screens a small inline photograph shows instead.

Lamination Bench (kitchen). Drag the top edge of the dough down and the bottom edge up to fold it in thirds (or press the edge buttons), then drag the corner to give it a quarter turn and roll it out. Three turns take the layers from 1 to 27; the cross-section beside it redraws on every fold. Keyboard: focus the bench, then Arrow Down folds the top, Arrow Up the bottom, R turns and Enter starts again. Reduced motion jumps each step to its end state. Without JavaScript a four-step text sequence (1, 3, 9, 27) shows instead.

Loaf Bench (sourdough). Three stages on one card.

• Fold is a small three.js scene: a glazed stoneware bowl on the bench with a round of dough in it, lit from the window side and seen over the baker's shoulder. Drag any side of the dough towards the middle (or press one of the four round arrow buttons). That side stretches up into a sheet held by its far edge: thick and round at the hinge, thinner and narrower towards your fingers and pinched where it is held, bowed under its own weight with its side edges curling in, while the rest of the mass is dragged after it. Carry it past the top and it goes over with the held edge leading, the sheet draping down behind it onto whatever is beneath: it lands with a squash and a wobble, then the stack slumps to the height the dough can hold, its corners pillow and the step where the layer ends softens into a rolled lip. Let go early and it springs back. Folds stay folded: each one leaves a layer with a rolled edge on its side and a seam where its end lies, and four make a squarer, taller parcel. At the end of a set the parcel is lifted, turned seam side down and relaxes over the half-hour rest into a smoother, taller round. Across four sets the dough goes from slack, flat and lumpy (stretches far, sags, wobbles slowly) to strong, tall and smooth (stretches less, springs back quicker), and the skin goes from wet and glossy to satin while the strength bar fills.
• Score: after four sets the camera rises over the bowl and the proofed loaf appears. Draw up to six cuts on it with the mouse or a finger, or press "One curve" or "A cross".
• Bake: "Bake it" crossfades to the baked loaf and opens every cut along the line that was drawn, wider on one side where the ear lifts.

Keyboard: focus the bowl and use the arrow keys to fold, Enter to start again; the arrow buttons, the cut buttons and "Bake it" are ordinary buttons. On touch screens a sideways drag folds and an up or down drag scrolls the page, so use the arrow buttons for the far and near sides.

What GSAP and three.js each do: GSAP plays the fold from a button or key, the rest between sets, the camera move and the bake; three.js draws the scene. The dough is one closed mesh moved on the CPU (so shadows need nothing special). A fold bends every point beyond a hinge line round a spine that stands up and then rolls over, offsetting each point by its depth so the underside comes up on top, and finally drapes it on a height map of the dough beneath, so layers stack instead of passing through each other. After every fold, and after the turn, the dough is re-read from above into a top and an underside height map (with the skin coordinates of whatever is uppermost) and rebuilt as a clean shell, so the next fold always starts from a tidy surface however many came before. The landing wobble and the drag follow are time based, so they run at the same speed at 60 Hz and 120 Hz. The scene draws only while something moves (a drag, a fold, a wobble, a rest) and stops when the bench is idle or off screen. three.js (r180, about 180 KB gzipped) is fetched from jsDelivr the first time the bench comes near the screen; no other page loads it. If WebGL is missing or the download fails, the fold stage becomes a photograph of the bowl whose dough tightens with each press, and scoring and baking work as usual. With reduced motion every fold, rest and camera move jumps to its end.

The dough's material is three's physical material with a few additions in LOAF_DOUGH_* (the GLSL strings above makeDoughScene): the skin's colour is the average of the two dough photographs (mixed by strength), so a laid layer is the same dough as the mass beneath it, with only fine, low-contrast detail from the photographs on top and their brightness read as a bump map; light wraps a little past the shadow line in a warm tint, as it does through real dough, and a thin stretched side glows when lit from behind; where the skin is pulled far out of its photograph that detail fades out, so stretched dough looks smooth and taut rather than streaked; and creases, seams and the edge where the dough meets the bowl are darkened from a live height map. Clear coat and sheen move from wet to satin as strength rises (setStrength). The bowl (LOAF_BOWL_COLOR) is cream glaze inside, oatmeal glaze outside dipped to a wavering line, raw clay at the lip and foot, with iron speckle; the room it reflects is built in code in makeDoughScene (a warm wall and one bright window), so no environment image is downloaded.

To change it: LOAF_SETS, LOAF_RADIUS (the loaf's radius in the score photograph, out of a 1000-unit box) and LOAF_MAX_CUTS sit above makeDoughScene in assets/script.js. How the dough behaves is LOAF_FOLD, where every entry is a pair for slack and for strong dough: hinge (where a side bends, as a share of its reach), stretch (how long a side gets at the top of the pull), lay (how long it stays once laid), sag and droop (how much the pulled side bows under its own weight, in radians, and how far its corners hang), follow (how closely the dough chases a drag), bounce, wobble and settle (the landing squash, its wobbles per second and how fast they die), and stand (the tallest stack the dough holds before it slumps). LOAF_LIFT is the share of a fold spent stretching up before the side goes over; LOAF_REACH, inside makeDoughScene, is the highest the held edge goes, which keeps a strong side pulled from the far edge inside the bowl's outline. The round's size and lumpiness per strength are in roundShape; the bowl's outline is the profile list. The bench surface and the two dough skins are the data-tex-bench, data-tex-slack and data-tex-taut paths on the data-loaf-gl element in sourdough.html. The two preset cuts are the PRESETS point lists in initLoaf; times and temperatures are plain text in the page and in paint(). Replacing the proofed and baked photographs: keep the loaf round, centred and the same size in both, or the cuts will not line up. To remove the bench, delete the #loaf section; the script skips it when it is missing and three.js is then never requested.

Proofing photograph (kitchen). The proof photograph enlarges slightly as it scrolls past; remove data-proof to keep it still.

Class dates (classes). Each date is a button with data-date and data-left (places left of eight); the dots are drawn from it and a full date is disabled. Choosing a date fills the booking summary; places and the total follow it.

Status line and order (visit). The status line reads the SHOP block in the bakery's own time zone. Order lines carry data-price and data-days, so lines not baked on the chosen morning grey out. Collection mornings skip closed days and roll forward after the cut-off.

Map (visit). MapLibre on OpenFreeMap tiles (OpenStreetMap data, no key needed), repainted in the template's colours, with a pin on Henderson Street and the walk from the Foot of the Walk tram stop. To move it, edit BAKERY, TRAM and WALK ([longitude, latitude] pairs) above initMap in assets/script.js. The map is a labelled region with a link to OpenStreetMap until it loads.

The collection order, class booking and wholesale forms are unwired front ends. The order form collects the collection morning, quantities, a name for the bag and a phone number; the booking form collects a date, places, name, email and dietary needs; the wholesale form collects a business, email, delivery day and a note. Nothing is sent or saved: each shows a confirmation that says so. Point them at Formspree, Netlify Forms, your booking system or your CRM and update the "Demo form" notes before taking real orders.

Seven tokens at the top of assets/style.css, each with an RGB triple for translucent rules:

Measured contrast pairs are recorded in the comment above the tokens. Keep glaze to sold-out marks and one order button per screen, and never use it as a ground.

• Every page is complete without JavaScript: links load pages normally, the ruler stages and both benches' steps show as lists (the 3D bowl needs JavaScript and WebGL), filters are hidden and the full menu shows, the footer page list replaces the phone menu.
• Reduced motion swaps pages instantly with no fold, shows the display lines in place, opens the phone menu without folding and jumps both benches to each step's end.
• Native buttons with visible focus everywhere; the ruler is a slider with a spoken value; filters and dates use aria-pressed; totals and the bench announce changes politely.
• The phone menu is a dialog: focus moves into it, Tab stays inside, Escape closes it and focus returns to the Menu button.
• After a page change the new heading receives focus; its ring shows for keyboard navigation only.

• GSAP 3.15.0 with ScrollTrigger (works with 3.12+), loaded from jsDelivr.
• three.js 0.180.0, loaded on demand from jsDelivr on the sourdough page for the Loaf Bench. It is an ES module fetched with import(), so the page needs no import map.
• MapLibre GL JS 4.7.1, loaded on demand from unpkg on the visit page, with the OpenFreeMap positron style. Keep the OpenStreetMap attribution on the map.
• assets/page-router.js, the bundled page router.

All 31 files in assets/img/ are WebP images made for this template. Every photograph is AI-generated: an illustration of a fictional bakery, its kitchen and its customers, not a photograph of a real business, real premises or real people. No photographer is credited because none took them. Replace them with your own photographs before publishing, and do not present the generated people as your staff or customers. The kitchen windows show Edinburgh tenements and the Castle; there is no text or branding in any image.

To replace an image, keep its filename and proportions, or update every path plus its width, height, alt text and caption. The take-home callouts on classes.html are positioned in percentages over that photograph; move them if your photograph differs. The phone hero uses hero-phone.webp, a 4:5 crop on the cut faces.

Fonts

Both families are self-hosted in assets/fonts/ as the latin woff2 files Google Fonts serves, declared at the top of assets/style.css: Gloock (display, item names, wordmark) and Hanken Grotesk (everything else; one variable file covers 400 to 600, with tabular figures). Both are preloaded in each page's <head>. Licence: SIL Open Font License 1.1, with copyright lines and the full text in assets/fonts/OFL.txt; keep that file with the fonts.