---
title: BREW-X
emoji: ☕
colorFrom: gray
colorTo: yellow
sdk: static
pinned: true
license: mit
short_description: Interactive 3D espresso machine built in Three.js
---

# BREW-X — Interactive 3D Espresso Machine

A high-fidelity espresso machine rendered **entirely from procedural geometry** —
no imported meshes, no external HDRs, no baked textures. Built with TypeScript
(strict) + Three.js r187 + Vite, targeting **WebGPU** with an automatic
**WebGL2** fallback.

> This Space hosts the **production build** (`dist/`) of the app. Source maps are
> intentionally excluded.

## What you can do

- **Power up** the machine and watch the heat-up cycle (amber blink → green ready).
- **Pull a shot** — pre-infusion → extraction, with the pressure gauge tracking in
  real time as espresso streams from both spouts and the cup fills.
- **Portafilter** — click to remove; drag to insert and twist it back into place.
  Brewing is refused until it is locked again.
- **Empty cup**, and drive the **steam wand** with the valve slider.
- Switch between **Complete · Transparent · Exploded** views (Cutaway is
  intentionally disabled).
- Fly the camera through **11 eased presets** (Hero, Front, Side, Top, Group,
  Basket, Wand, Gauge, Inside, Circuit, Exploded) or orbit freely.
- Toggle **labels** (off by default) and **internals**, pick a **backdrop**
  (Studio/Light/Dark) and **quality** tier, and **capture a PNG** still.
- Optional **sound** — self-hosted pour, steam and portafilter-lock clips. Sound
  is off by default; enable it with the toggle (browsers require a click before
  audio can play), and your preference is remembered.

## Notes

- Best experienced in a **WebGPU-capable browser** (recent Chrome/Edge). On
  browsers without a WebGPU adapter the app falls back to WebGL2 automatically and
  shows `renderer: WebGL2` in the top-right badge.
- **The cup can overflow.** A shot ends on its own timer, not at a fixed volume,
  so pulling another shot into a partly full cup spills over onto the drip tray.
  Use **Empty cup** to reset it.
- The steam plume is intentionally restrained and reads best against the
  Light/Dark backdrops.
- For source-level detail, rebuild instructions and known approximations, see the
  project's `PROJECT_NOTES.md` in the source distribution.