Made of Light
Majid Ghamkhari

Case study · Interactive 3D · Photonic quantum computing

Computing, made of light.

An interactive 3D story about how a photonic quantum computer turns light into an answer. Real physics drives the visuals: a live interference calculation, sampled detector clicks and a squeezing readout in decibels.

Scroll to follow one photon

Featured case study · Unofficial concept for Xanadu

Made of Light

How does a photonic quantum computer turn light into an answer? This piece follows one pulse through four stages, with one visual metaphor per stage, carried across a vertical film, a diagram, a style guide and the page you're scrolling.

Role
Concept, script, design, motion
Format
Interactive 3D story + campaign kit
Tools
Three.js, WebGL
01 / 04

Squeeze

Squeezed light has its quantum noise pushed below the normal level in one property, at the cost of more noise in another. The round cloud of noise is pressed into an ellipse as you scroll.

Live readout, bottom left: squeezing in decibels

02 / 04

Interfere

Pulses split at beamsplitters and recombine across the chip. Where waves meet, they add or cancel. The brightness of every path here comes from a live interference calculation across six layers of couplers, not a canned loop.

4 waveguide modes · 50:50 couplers · drifting phases

03 / 04

Count

Detectors count the photons that arrive, and the pattern of counts is the result. Amber appears only at detection, so in this system it always means an answer.

Each click is sampled from the chip's output

04 / 04

Connect

Light travels well through optical fiber, so chips can be networked into larger, modular machines. The camera pulls back from one chip to twenty, linked by fiber.

Computing, made of light.

The campaign kit

One story, every format

The interactive edition sets the visual system. Every other asset is cut from the same scenes, colors and glyphs, so the set reads as one launch.

  • Interactive 3D storyWeb · Three.js · scroll-drivenThis pageLive
  • Explainer diagram16:9 still + SVGBelowDone
  • Style guideColor, type, glyphs, motionBelowDone
  • Vertical film9:16 · 30 s · captions onReels, Shorts, LinkedInDone

Vertical film · 9:16 · 30 s

The whole story in thirty seconds

Rendered from the same 3D scenes as this page, re-staged for a tall frame: the chip turned on its side so light flows up the screen, one stage per shot, and captions sized for sound-off viewing on Reels, Shorts and LinkedIn.

  1. 00:00Hook
  2. 00:0401 Squeeze
  3. 00:1002 Interfere
  4. 00:1603 Count
  5. 00:2204 Connect
  6. 00:27End card
How a photonic quantum computer works Squeezed-light sources feed four waveguides. The light passes through a mesh of beamsplitters where it interferes, then reaches detectors that count photons. Optical fiber links the chip to the next chip. CHIP 2041 next chip 01Squeezesqueezed-light sources 02Interferebeamsplitter mesh 03Countphoton detectors 04Connectoptical fiber

The diagram uses the same glyphs as the 3D story, so anyone who has scrolled it can read the diagram without a legend.

Style guide

Six colors. Three glyphs. One rule for amber.

The same tokens drive the 3D scene, the diagram and this page. Click a color to copy its value.

Type

Made of LightBricolage Grotesque · display
Where light meets light, it interferes.IBM Plex Sans · body and captions
SQUEEZING 9.9 dB · COUNTS 2 · 0 · 4 · 1IBM Plex Mono · readouts, labels, timecodes

Glyphs and motion

PulseAn elongated glow, always moving left to right
BeamsplitterA thin diagonal between two paths
DetectorA half-circle, flat side facing the light

Smooth ease-in-out moves only. One idea per shot. Every word stays on screen for at least 1.5 seconds.

Process

From script to campaign kit

  1. 1

    Script and storyboard

    Four stages, one visual metaphor each, every line read aloud and timed.

    Docs · Illustrator
  2. 2

    Style frames

    Lock palette, glow and type before anything moves.

    Three.js · WebGL
  3. 3 · this page

    Interactive edition

    The story as a scroll-driven 3D scene, with live physics behind the visuals.

    Three.js · WebGL
  4. 4

    Vertical film

    The same scenes re-staged for 9:16, with captions for sound-off viewing.

    Three.js · motion graphics

Where generative AI helps

  • Voiceover and script variations, tested for plain language
  • Moodboard and color variations before style frames
  • Code scaffolding for the interactive edition
  • Fast reframes for 9:16

Where it doesn't

  • The physics: every claim is checked by hand
  • Composition, color and the visual system
  • Final timing and design decisions
50%less production time on training modules at SEM Ltd., from an AI-assisted Storyline workflow I co-developed, alongside reusable templates that keep recurring work on brand.

Contact

See the rest of the work.

← All projects LinkedIn ↗