← All builds

Daybreak Coffee House

Demo build

A coffee shop site with a film that plays as you scroll, a nine-card menu, and a back office the owner runs without ever seeing WordPress.

Visit the site ↗ Get a quote

What it does now

PageSpeedmobile
97
PageSpeeddesktop
100
Largest paintmobile, slow 4G
2.2 s
Page weighton first load
266 KB
Requestson first load
18
Google's own report on a Moto G Power over slow 4G: 97, with 100 for accessibility and best practices, first paint 1.2 s and nothing shifting. SEO reads 69 because this is a demo shop and I keep it out of Google on purpose. A real client site is indexed and scores 100 there.

The brief

Most small shops get a site they cannot touch. A price changes, the site does not, and six months later it is wrong about the hours and nobody trusts it. This one was built the other way round: the site is the easy part, and the back office is the point.

What I built

  • A scroll film on the home page: 179 real frames, drawn on a canvas as you scroll, nothing downloading until you do
  • A menu that is built from records, not typed into a page: nine drink and pastry cards plus a Take Home shelf for beans, gift cards and merch
  • A back office in plain language: change a price, mark something sold out, add an event, change the hours in one place
  • Every photo field states the size it wants, and crops a phone photo to that size in the browser
  • An ordinary WordPress install with a Shop Owner login that cannot reach plugins, themes or settings, so nothing can be broken by accident
  • 97 on a phone and 100 on a desktop, with the film still in the hero

What a customer walks into

  1. The end of the Daybreak scroll film, a latte finished on the counter
    The film is the hero. Scroll and it keeps playing, frame by frame, until the latte is poured.
    • 179 frames drawn on a canvas, with scroll position driving which frame shows. No video element, no buffering.
    • Nothing downloads until you scroll, touch or press a key, so anyone who bounces pays for one poster image.
    • Frames arrive coarse to fine, so a fast scroll always finds something close while the rest land.
    • Reduced motion or Save-Data gets one still of the finished latte and a normal page height.
  2. The Daybreak favorites section, with the three menu categories and a photo that changes
    Three categories, one photo frame. Hover or tap a category and the photo behind it changes.
    • The photos are clipped into a shape that changes per category, drawn as SVG rather than three stacked images.
    • It reads the same three items the Menu page reads, so the owner starring an item here changes both.
    • On a phone the first tap swaps the photo and the second follows the link, so nobody leaves by accident.
    • The photos do not start downloading until the page has loaded and the section is close.
  3. The Daybreak menu page, nine photo cards in three categories The Daybreak menu page on a phone
    Nine cards, all the same size, every one with its own photo, dietary tags and price.
    • Every card is a record in the back office, not markup in a page. The page source is 3 KB of instructions.
    • The drink and pastry photos were generated for this shop, framed square so the grid never breaks.
    • Sticky category pills track the section you are reading and scroll with you.
    • A Take Home shelf sits under the menu for beans, gift cards and merch, with several prices on one card.
  4. The Daybreak bean-to-cup section, three cards that open on hover
    Farm, roaster, bar. Three steps that lift and open as you move across them.
    • A card grows and reveals its detail on hover, and on a phone the same detail opens on tap.
    • The photos were generated to match the shop: same aprons, same counter, same light.
    • One of them was reshot because the portafilter was floating in mid-air. Generated images need checking, not trusting.
  5. The Daybreak reviews section, three drifting rows of review capsules with faces
    Thirty reviews drifting past, each with a face, the stars written out, and the full review on tap.
    • The faces are generated people. Nobody real is used as a fake reviewer, and the page says the shop is fictional.
    • Each capsule's stars are one CSS shape, not five SVG icons, which took the section from 84 KB to 21 KB.
    • The rows pause when you hover or tab into them, so a review can actually be read.
    • Saved as a reusable skill, so the next site gets the same section in a few minutes.

What the owner walks into

  1. The Daybreak owner dashboard inside WordPress: the usual admin sidebar on the left, and on the right a greeting, an open-or-closed badge and eight big buttons
    This is WordPress. The sidebar is proof of it. Everything to the right of it was built for one coffee shop.
    • That is my administrator view, so you can see what it is underneath: an ordinary WordPress install, no page builder.
    • The owner's own login shows only the six items at the top. Plugins, themes, settings and users are not on her screen, and typing the address sends her back here.
    • The badge reads her real opening hours: open now and when it closes, or closed and when it opens again.
    • Change hours, edit the menu, add an item, mark something sold out, add an event, view the site.
    • Coming up, recently changed, and a stats card that says plainly it is sample data on a demo.
    • The help card carries my name and email, so whoever inherits this site knows who built it.
  2. The Daybreak menu items screen inside WordPress, one row per item with photo, price, an available switch and reorder arrows
    Every item on the site, in one list, in the same window. A price is two taps. Sold out is one.
    • Sold out keeps the item on the menu, greys the photo and adds a tag, so regulars still see it exists.
    • Arrows reorder a section. There is nothing to drag and nothing to break.
    • The form beside each item shows the card exactly as the site will draw it, while she types.
    • Photo fields say what they want in plain words: best at 1200 by 1200, smallest that works 800 by 800.
    • A phone photo gets cropped to that square in the browser, and a photo that is too small is refused with its real numbers.
    • Every item keeps one undo: put it back the way it was.

Want one that performs like this?

You tell me what the site has to do. I build it, you watch it get built, and you get the numbers on this page for your own business.

Get a quote

Usually a reply the same day.

How it was built, and what broke

Why the back office is the build

A coffee shop does not need a website that wins awards. It needs one that is right on Tuesday when the cold brew runs out, and right in December when the hours change for the holidays.

That only happens if changing it takes seconds and cannot go wrong. So the site reads everything from records the owner controls: the menu cards, the Take Home shelf, the three favorites on the home page, the events, and every place the hours appear. Change the hours once and the home page, the Visit page, the menu overlay and the opening hours Google reads all change together.

How the film works

The hero is 179 frames drawn on a canvas, with your scroll position picking the frame. Nothing downloads until you scroll, so the first thing the browser loads is one poster image. Frames then arrive coarse to fine, which is why a fast scroll never lands on an empty screen.

A phone gets a 4:5 set of frames instead of 16:9, sized so the picture never has bars beside it, and reduced motion gets a single still of the finished latte.

What is real and what is not

Daybreak is not a real shop. The name, the address, the reviews and the people are invented, and the site says so. The photographs were generated for this build, then checked one by one: the espresso shot was thrown away and redone because the portafilter was floating in mid-air.

What is real is the code, the speed and the back office. Every number on this page is Google’s, measured on the live demo, and the dashboard screens are the ones an owner actually signs into.