Lark is a single-file HTML template for a sourdough bakery, dressed as a fictional bakery in Bristol that bakes to order and delivers by cargo bike before half past seven. The page is the 36 hours of one loaf, from the evening the starter is fed to breakfast: a small proofing jar in the header rises with the scroll and names the hour and the stage. Maud, the bakery's starter, is the page's recurring character. Everything is plain HTML, CSS and JavaScript with no framework, no build step and no photographs, and the Bricolage Grotesque variable typeface is embedded in the file.
The loaf is drawn in one WebGL fragment shader: bubbles swell and pop on its surface, flour drifts through a shaft of window light, and the rings of a proofing basket, a razor score and a blistered crust all sit on the dough. When the loader lifts, the dough drops onto the counter with a puff of flour and the word dough in the headline swells as it breathes. Your cursor works as a baker's finger: press the dough and the dent springs back slowly, the poke test bakers use, and when nobody points a demo poke plays by itself. Scroll speed makes it wobble.
A pinned stage then scrubs the same loaf through its schedule: the shaggy mix, four stretch and folds, the shaping, a night in the cold room where the scene cools, the score, the bake and the crackle of a cooling crust, each step lighting up as it passes. Four loaves are cut open live, each with its own crumb, steam rising from the slice and a squeeze on hover. The order section works out from the visitor's clock which bake can still be ordered and draws the line from the noon deadline to the last delivery. The classes section runs the starter in a jar on a time lapse that speeds up or slows down with a kitchen temperature slider, and the visit section marks today's opening hours and whether the shop is open now. The order, class and newsletter forms validate and confirm in the browser only, so connect them to your own system before launch.
The footer rises in basil green while the wordmark's weight swells letter by letter, and dark mode follows the visitor's system setting with a deep plum palette. The download is a ZIP with the page as index.html and RECREATE.md, a build prompt for an AI coding agent. It sets out the concept, palette, type and copy rules, explains how the motion system works and what the accessibility pass covers, and ends with the full page source; that source links its fonts from Google Fonts, where index.html has them built in. Names, prices, addresses, class dates and contact details are placeholders for your own.
Key Features
– Plain HTML, CSS and JavaScript in one file, with no framework, no build step and no image files
– Shader-drawn loaf that breathes, dents under the cursor and springs back, then proofs, bakes and browns
– Pinned 36-hour stage with six held steps, plus a proofing jar and the loaf's hour in the header
– Four sliced loaves rendered live, each with its own crumb, rising steam and a squeeze on hover
– Order cut-off and open-now hours worked out from the visitor's clock, and a starter time lapse set by a temperature slider
– Dark mode from the system setting, reduced-motion support and scrolling that glides on to the next step
– Native dialog menu, skip link, an FAQ accordion and labelled forms with inline errors
Ideal For
Sourdough bakeries, bread shops and small bakeries that take orders a day ahead.
Bakeries and cookery schools that also sell classes.
Studios pitching a warm, playful food site with no photography to license.
