Case study · Concept build · cupcake.tlwebdesign.net
Praise Cupcakes: a bakery site that performs.
A small-batch bakery concept built to show what a hand-made website can do: cupcakes drawn in code, a WebGL LED dome, live-synthesized applause, a film assembled in the browser, and every page in English and Spanish.
- 23pages, English + Spanish
- 0frameworks or libraries
- ~175 KBof hand-written code
- 100Lighthouse accessibility
- 0audio files: all sound is synthesized
Live, not a video
Go ahead. Touch it.
This is the real site running inside the window. Pick a moment, then move your mouse, click and scroll. Switch to Phone to see how it adapts.
Motion inventory
Ten kinds of motion, one calm switch.
- Headline revealWords rise in one at a time
- Sprinkle rainScatters away from the cursor
- Click burstsConfetti where you click
- Spinning badgeA small-batch seal that turns
- Self-assembling cupcakeLayers build as you scroll
- Re-piping frostingEvery change pipes it again
- Odometer counterDigits roll into place
- Tilting gift cardFollows your pointer in 3D
- Live countdownSeasonal drop timer
- ApplauseSynthesized live, no audio files
Every animation pauses off-screen, and a Calm mode (plus the system "reduce motion" setting) stops all of it.
Under the hood
Hand-built, end to end.
- 01
Procedural renderer
Liner, cake, four frosting styles and five toppers drawn in Canvas 2D on seven sections of the site.
- 02
WebGL shader dome
An LED sphere on the graphics card, with a flat fallback for devices that can't run it.
- 03
Web Audio
Applause, a film score and stings synthesized in the browser, with zero sound files.
- 04
A film built live
Cuts, zooms, titles and a transcript assembled in the browser from the photos.
- 05
Static build system
One Python script builds every page, swaps in Spanish text and writes the sitemap and search data.
- 06
One config file
Seasonal drops, gallery, reviews, allergens, the counter and form addresses all live in one place.
- 07
Safe-code pattern
One script runs on every page, and a missing element never breaks the page.
- 08
Search-ready
hreflang, canonical links, Open Graph and structured data for the bakery, menu and FAQ.
Built for everyone
Delight that doesn't exclude.
- Text size control and Calm mode, which also follow the system reduce-motion setting
- Skip link, focus trapping in the menu, labelled controls and live regions for screen readers
- 44-pixel touch targets and checked color contrast
- Lighthouse accessibility score of 100, with repeated runs fixing layout shift, contrast and heading order
- Tested on phones at 390 pixels wide
- Honesty rules: nothing invented about allergens, reviews or sales
Photography
Four images, every size.
AI-generated 4K photography, each with a lightweight mobile version.