Jayasri Guthula

Coffee Shop Experience

A customizable café concept that turns the wait for an iced latte into a silent ingredient story and a personalized pickup moment.

Try it live Watch demo GitHub
Animated Coffee Shop demo moving from the menu through coffee preparation to pickup

Waiting for coffee can feel like an empty moment between choosing a drink and receiving it. I wanted to explore whether that moment could help a customer connect with the café: its ingredients, its identity, and the care behind a familiar order.

Inside the experience

What someone can actually do

  1. Customize an Iced Latte with size, milk, espresso shots, sweetness, and ice
  2. Place one simulated order and follow an automatic one-minute queue
  3. Watch a silent ingredient story with readable captions and reduced-motion support
  4. See preparation visuals respond to the recipe
  5. Reach a personalized pickup screen automatically
  6. Preview a café name and two brand colors without saving or submitting them

How the idea took shape

The idea began with a familiar coffee brand, then became a brand-neutral concept that an independent café could adapt. A customer customizes an Iced Latte and orders once. A silent story follows the simulated queue from three orders ahead through preparation and pickup, without requiring another tap to advance.

I built the browser prototype with Codex as a coding collaborator, using HTML, CSS, JavaScript modules, and SVG compositing. Elapsed wall-clock time drives the queue and story together; validated recipe choices and the start time in the URL fragment allow a reload to restore a recent demo order.

The media below are captures of the working prototype. The product and farm artwork inside it is AI-generated concept imagery, not supplier photography or footage from a real café. The GIF runs at 2× speed; the silent video shows the full walkthrough in real time.

Only the Iced Latte has a complete ordering flow. There are no real orders, payments, or live café tracking. The origin story is illustrative and the nutrition values are explicitly fictional design samples. A café would need verified sourcing, recipe information, and an actual order-system integration before launch.

“The moment after ordering can be an opportunity to share a café’s story, as long as that story is backed by information the café can verify.”
Mobile café menu with an Iced Latte ordering option
A familiar menu
Coffee harvest story with a basket of cherries and visible queue status
An illustrated ingredient story
Milk pouring into the demo iced latte after ice and espresso
Your cup coming together
Pickup screen personalized for Jayasri with clearly labeled fictional nutrition values
Personalized pickup · fictional sample nutrition
Café branding preview with a custom name and two accent colors
Make it your café
Explore how it was built +

I designed and built the concept, recipe customization, automatic queue, branding preview, and layered preparation animation with Codex as my coding collaborator. The runtime uses no frontend framework, backend, or AI API calls; generated artwork is stored as static assets.

  • JavaScript
  • CSS animation
  • SVG
  • HTML
  • JSON
  • AI-generated artwork

Where it could go next

Adapt the story to a real café, with verified ingredients and order status.

  • Approved café branding and sourcing information
  • Verified ingredients, allergens, and recipe-specific nutrition
  • Integration with real ordering and pickup systems
  • Further accessibility and device testing
More work