Drumlin is a single-file HTML template for a specialty coffee roaster, dressed as a fictional roastery under a railway arch in Glasgow that sells single origins by subscription and to cafés. The whole page is one batch in the drum: the header carries a roaster's log with roast time and bean temperature, and it follows the scroll from charge through yellowing and first crack to the drop. Every temperature, time and curve on the page comes from one roast model in the script. Everything is plain HTML, CSS and JavaScript with no framework, no build step and no photographs, and the Funnel Display, Funnel Sans and Geist Mono typefaces are embedded in the file.
One WebGL scene sits behind the whole page: 60,000 particles on desktop, 36,000 on tablets and 16,000 on phones. Whole beans travel together from one form to the next, so a hand-off looks like beans being poured rather than a crossfade. The hero opens on an arc of beans shading from green to dark roast, each turning on its own axis while silverskin drifts off, warm convection rises behind them, a heat shimmer runs through the headline and the cursor parts the beans. Scroll on and they tumble in a turning drum over a row of blue gas flames and turn yellow, crack at random with a spray of chaff, and settle into an enamel mug of coffee with steam rising from it. Under the cards, the contour rings of a drumlin keep drifting.
Below the story, cool enamel cards float over the live scene. Three coffees each log their own roast curve as their row arrives, a dark roastery interlude replays the full log of a house batch with a crosshair that reads any second of it, and the subscription configurator pours beans into the bag's window up to the size you pick, swaps whole beans for coarse or fine grounds and updates the label and the next three roast dates. The wholesale section draws an espresso shot profile beside a sample-box request form, followed by an FAQ that keeps one answer open at a time and a newsletter form with inline messages. The forms validate and confirm in the browser only, so connect them to your own shop or inbox before launch.
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, delivery terms 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
– WebGL scene of up to 60,000 particles that morphs from a roast spectrum to a drum, first crack, a mug and contour rings
– Live roast log in the header, with every temperature and curve drawn from one roast model
– Subscription configurator that pours beans or grounds into the bag's window on a 2D canvas
– SVG chart recorder for each coffee's roast curve, the full batch log and an espresso shot profile
– Enamel cards that switch to a dark version with the system setting, reduced-motion stills and plain sections without WebGL
– Native dialog menu, skip link, header links to each roast stage and labelled forms with inline errors
Ideal For
Specialty coffee roasters selling subscriptions and wholesale.
Coffee shops, tea brands and small food producers with a process worth showing.
Studios pitching a motion-led food and drink site with no photography to license.
