From Coffee Cup to Willow Chip
A twelve chapter interactive quantum physics essay for enterprise IT decision makers.

Read the essay · See the chapter map · Run it locally

From Coffee Cup to Willow Chip

This is not a slide deck and it is not a sequence of twelve full screen cards. It is a longform, scroll driven essay that teaches 124 years of quantum physics to enterprise IT readers through narrative, editorial photography, precision infographics, and one bespoke interactive moment in every chapter.

The reader begins with a hot coffee cup and a broken classical prediction. The story ends at Google's Willow chip, post quantum cryptography, and the decisions technology leaders need to make before a useful quantum computer exists.

flowchart LR
    C[Coffee cup<br/>classical failure] --> P[Planck<br/>energy quanta]
    P --> E[Einstein<br/>photons]
    E --> Q[Quantum<br/>rules]
    Q --> B[Qubits<br/>and computing]
    B --> W[Willow<br/>error correction]
    W --> R[Enterprise<br/>response]

    classDef history fill:#0f1f3a,stroke:#94a3b8,color:#f8fafc
    classDef quantum fill:#121f34,stroke:#f59e0b,color:#fff7e6
    classDef action fill:#10261f,stroke:#4ade80,color:#effff4
    class C,P,E history
    class Q,B,W quantum
    class R action

Loading

Twelve chapters, one argument

The essay moves from the moment classical physics fails to the moment quantum computing becomes an engineering and security concern.

#	Chapter	What becomes tangible
01	The bug in classical physics	The ultraviolet catastrophe reaches infinity
02	The reluctant fix	A continuous wave breaks into Planck's discrete quanta
03	Einstein makes it real	Frequency crosses the photoelectric threshold
04	Matter joins the party	Electron shell transitions emit measured colors
05	Wave or particle? Yes.	Observation changes a double slit result
06	The cat in the box	A probability cloud collapses through measurement
07	The spooky part	Entangled qubits resolve in a correlated state
08	Computing with nature	Qubit state space outruns physical comparisons
09	Willow	Increasing code distance reduces logical error
10	The obvious question	Workload choice separates GPU and quantum strengths
11	The so what	Industry data gets a cryptographic exposure clock
12	Close	The full 1900 to 2026 argument becomes one timeline

Act I: classical physics breaks

Planck quantizes the wave	The universe refuses either-or

The opening chapters make the historical problem physical. Classical math predicts an impossible infinity. Planck introduces a reluctant constant, Einstein treats light as countable photons, matter inherits a wavelength, and the double slit experiment makes observation part of the outcome.

Act II: the rules become machinery

Measurement collapses probability	Entanglement creates correlation

Probability is not presented as a vague cloud metaphor. Readers measure it, build a trial distribution, reset it, and repeat. Entanglement follows with two qubits that can be measured from either side. The paired result makes the resource behind quantum computing visible before the essay asks readers to scale it.

Act III: engineering and consequence

Below threshold, scaling helps	Encrypted data already has a clock

The final act separates useful engineering from hype. A qubit slider crosses the estimated atom count of the observable universe. Willow demonstrates error correction below threshold. A workload comparator shows the narrow places where quantum wins, and an industry selector turns harvest now, decrypt later into an enterprise migration question.

Every chapter earns an interaction

Signature modules are code split and loaded only when their chapter approaches the viewport. Each module owns its concept, controls, accessible labels, state, and explanation. There is no generic chart component pretending that every idea works the same way.

flowchart TB
    O[IntersectionObserver<br/>chapter enters view] --> L[Dynamic import<br/>signature module]
    L --> M[Mount chapter specific<br/>interactive]
    M --> C[Controls<br/>button, slider, toggle]
    M --> V[Precision SVG<br/>or DOM visual]
    C --> S[Local concept<br/>state]
    S --> V
    S --> I[Plain language<br/>insight]

    classDef runtime fill:#0f1f3a,stroke:#94a3b8,color:#f8fafc
    classDef signature fill:#121f34,stroke:#f59e0b,color:#fff7e6
    classDef output fill:#10261f,stroke:#4ade80,color:#effff4
    class O,L runtime
    class M,C,S signature
    class V,I output

Loading

Examples include:

• quantizing a continuous wave;
• moving light across the photoelectric threshold;
• selecting hydrogen electron transitions and emitted photon colors;
• switching a double slit between observed and unobserved modes;
• collapsing a probability cloud one trial or ten trials at a time;
• measuring either member of an entangled pair;
• dragging from one to three hundred qubits;
• changing Willow surface code distance from 3 to 5 to 7;
• comparing GPU and quantum outcomes by workload;
• selecting industry specific cryptographic exposure;
• revisiting major milestones on the closing timeline.

Content and build pipeline

The prose has one source of truth. The build validates a twelve entry manifest against twelve markdown sections, converts narration to HTML, attaches the approved photo and infographic paths, and emits a typed chapter document for the browser.

flowchart LR
    T[Longform<br/>talk track] --> P[Typed chapter<br/>parser]
    M[chapters.json<br/>manifest] --> P
    P --> J[dist/chapters.json]
    S[Strict TypeScript<br/>runtime] --> B[Bun bundler<br/>code splitting]
    A[Photos, SVGs<br/>& fonts] --> D[dist/]
    J --> D
    B --> D
    H[index.html<br/>+ styles.css] --> D

    classDef source fill:#0f1f3a,stroke:#94a3b8,color:#f8fafc
    classDef build fill:#121f34,stroke:#f59e0b,color:#fff7e6
    class T,M,S,A,H source
    class P,J,B,D build

Loading

Production builds inject /quantum/ as the base path. Asset URLs stay relative so the same code works at the development root and under the GitHub Pages project path.

Reading system

The essay keeps orientation without turning into an application dashboard:

• a thin amber progress bar tracks the full read;
• a twelve dot chapter rail marks the current section on larger screens;
• mobile uses a compact chapter badge and full screen chapter list;
• number keys 1 through 9 jump directly to those chapters;
• 0 opens chapter 10;
• Home and End jump to the first and last chapter;
• arrow keys, PageUp, PageDown, j, and k move by chapter;
• a reading time is calculated from rendered narration;
• pull quotes create editorial rhythm;
• print styles produce a paper essay;
• a service worker caches the complete essay for repeat offline reading.

flowchart TB
    D[Desktop reader] --> R[Chapter rail]
    M[Mobile reader] --> N[Chapter list sheet]
    K[Keyboard reader] --> J[Direct chapter jump]
    R --> C[Current chapter]
    N --> C
    J --> C
    C --> T[Dynamic title<br/>+ progress bar]
    C --> L[Lazy signature<br/>activation]
    W[Service worker] --> O[Offline repeat<br/>reading]

    classDef reader fill:#0f1f3a,stroke:#94a3b8,color:#f8fafc
    classDef nav fill:#121f34,stroke:#f59e0b,color:#fff7e6
    classDef access fill:#10261f,stroke:#4ade80,color:#effff4
    class D,M,K reader
    class R,N,J,C,T,L nav
    class W,O access

Loading

Motion collapses under prefers-reduced-motion. Chapter heroes use semantic heading structure and descriptive alternative text. Interactive controls use buttons, sliders, radio groups, live regions, and keyboard handling where the concept requires them.

Repository map

content/                 narration, manifest, and visual briefs
pix/                     twelve approved photos, twelve SVG infographics, fonts
src/components/          chapter, hero, rail, mobile navigation, progress
src/chapters/            twelve bespoke signature interactions
src/parser.ts            manifest and markdown validation
src/signature-loader.ts  lazy module activation
src/sw.js                offline cache
build.ts                 static generation and browser bundling
server.ts                hot development and production preview server

The browser is the framework: vanilla strict TypeScript, semantic HTML, CSS, Bun, and marked for narration parsing. There is no React, Vue, Svelte, Astro, or animation library.

Run it

bun install
bun run dev       # hot server on http://localhost:3000
bun run check     # strict TypeScript + Prettier verification
bun run build     # static output in dist/
bun run preview   # build and serve dist/

To reproduce the production base path:

BASE_PATH=/quantum/ bun run build

Deployment

Pushes to main run the check and production build, upload dist/ as a GitHub Pages artifact, and deploy it with actions/deploy-pages. The public essay is served at nixfred.com/quantum.

The site is designed to leave readers with one practical conclusion: quantum computing does not replace classical computing, but its cryptographic impact starts before the machines are ready.