Cinematic UI 2.0中文

← Gallery · Roll 05 / 06 · LLM gateway

Lattice (Matrix cut)

A developer's request is lost in traffic they can't see; providers fail, time stops, the request re-routes mid-flight, and the developer finally reads the traffic.

Watch live ↗Read the treatment

Lattice (Matrix cut) — first frame
Director · film
The Wachowskis · The Matrix (1999)
Medium
A 2D canvas of glyph streams made of the product's own traffic, plus DOM type and CSS 3D bullet time; no WebGL, no photos
The lead
Request req_7f3a91: typed, a tagged stream, a 503 wall, frozen and re-routed, a highlighted log row, a trace, 200 OK.
The audience's part
In bullet time, pull providers by click or keys 1 to 4; the request swerves to the next one and the consequence persists.
Grade
#050b08#3cff7a
Lattice (Matrix cut) — frame 2Lattice (Matrix cut) — frame 3

Screening

The live production, running below. Scroll inside it.

The treatment (treatment.md)

Written by the agent during production, unedited.

Open the full treatment

Demo site for a fictional LLM gateway, in English. The cast film is The Matrix (1999), which the user named. Research for this treatment is in research/the-matrix.md.

Logline

A developer's request is lost in traffic they can't see. Providers fail, time stops, the request re-routes mid-flight, and the developer finally reads the traffic.

Audience arc

  • Arrive believing: "Multi-provider LLM calls are fragile and opaque."
  • Leave believing: "One line of config gives me fallback, cost and visibility."

Casting

  • The Wachowskis, The Matrix: kept. The film's dramatic problem matches the product's: learning to see a system you were living inside, then bending its rules.
  • Michael Mann, Collateral: set aside. Its sodium night city suits "operations at 3 a.m.", but it has no mechanism for seeing the system itself.
  • Kubrick, 2001 (HAL): set aside. It is about distrust of the machine, which is the wrong emotion for infrastructure people adopt.

Mechanisms (sequence: opening titles, lobby/bullet time, the hallway "seeing the code")

  1. The opening dives through a screen glyph into the world. The loader is a terminal. The camera flies through the ink of a "0" into the traffic (an SVG mask scaling up on its thickest stroke).
  2. The world is rendered as falling streams of its own data. The rain is the product's own traffic: model names, ms, request ids. It contains no katakana, so it is the mechanism and not the costume. Each stream has a bright head and a decaying trail.
  3. Bullet time: the world freezes while the camera keeps moving. Scroll orbits a frozen request (CSS 3D yaw ±30°). The rings of its wake are perpendicular discs that open into circles as the camera moves.
  4. Seeing the code. The rain decodes into a readable log, scrubbed by scroll.
  5. Two worlds, two bases [P, Pope and Paterson]. Inside, the base is green (sets, dye, filters). The real world is "a bit bluer and dark as hell". The control-plane document, pricing and exit sit on a cold, dark blue ground. Out there, green appears only on monitors, where the code is read.
  6. Leaving the world. The cut from green to cold is a CRT collapse: the picture and the rain squeeze to a line.

Medium, grade, world

  • Medium: designed / heightened. It is a 2D canvas of glyph streams plus DOM type, CSS 3D for bullet time, no WebGL and no photos.
  • Why not 3D: the film's world is a text display, and the one camera move it needs (an orbit) is CSS perspective.
  • GRADE (unmeasured, 3 [P] sources):
    • ground #050b08, ink #cfe8d4, accent #3cff7a = "a live request" only, under 8% of the frame;
    • cold world #090d12 / #c4ccd3;
    • banned: cheery blue, warm yellow, orange;
    • grade.js GREEN/COLD looks taken from the research note's starting values, with grain 0.06.
  • ART / UI map:
    • square terminal buttons, with the live button as a block caret;
    • hairline dividers, no rounded cards;
    • code blocks as monitors;
    • progress mark as a single falling stream;
    • footer as "--- end of trace ---" credits;
    • no pills, no glass.
  • POSTER: a single-element title card. The first frame is the headline over the rain and nothing else, and no key art is reproduced. The poster grammar is [I] because the research found no designer statement.

Lead: request req_7f3a91

  1. typed in a terminal (loader);
  2. one bright stream among the traffic, tagged;
  3. hits a 503 wall ("→ 503 · retrying");
  4. frozen mid-flight, orbited, re-routed by the visitor;
  5. one highlighted row in the decoded log;
  6. a trace in the control plane;
  7. 200 OK in the exit terminal.

The audience's part

In bullet time, the visitor pulls providers (by click, or keys 1–4). The request swerves onto the next branch and the readout shows the fallback, the added ms and 0 failures. One provider always stays up.

Lasting consequence: the pulled provider's lanes in the rain go dark. The log row, the trace and the exit terminal's 200 OK line all show the fallback route and latency.

Shot list (lengths in vh)

# Scene Beat Shot / move Cut out
0 loader terminal types a curl, request leaves static, then dive through "0" fly-through
1 arrival 210 the promise wide over the rain, slow drift up rain continues
2 problem 220 streams pile into error walls wide, rain scrubbed to walls hard freeze
3 bullet 340 (hold) time stops, visitor re-routes orbit −30° → +28° rain resumes
4 seeing 250 the rain becomes a log decode by scroll, odometer CRT collapse
5 control (flow) the rules, cold world document —
6 pricing (flow) one statement, not three cards — —
7 exit 230 (hold) change one line, 200 OK terminal types by scroll —
8 credits (flow) end of trace — —
  • Type cast: extreme-condensed Archivo (wdth 62, 800) for display and Fragment Mono for everything else. From the kit: odometer. Custom: typed terminal, glyph decode, and the zero fly-through.
  • Triggers: entry (loader), autoplay (the rain runs on the clock), scroll, click and keys (providers).

Screening

  • Screened: desktop, laptop and mobile, plus the reduced-motion cut on desktop and mobile.
  • Fixed after the first screening: hero type clipped at 1440×900; header over copy; problem copy cut on laptop; lead tag over headline on mobile.
  • Remaining flags: dead-hold on problem and seeing. The developments there are small (glyph walls, the decode) and were judged by eye. flat-frame on credits.

Every production on this site is a fictional brand. The output is real: made by agents using the skill.