← Blog · · 5 min read
Same product, two directors: Lattice as The Matrix and as Kiki
One fictional LLM gateway directed twice with Cinematic UI: a Matrix cut and a Kiki's Delivery Service cut. Same product, same lead, no shared look.
Two websites below sell the same thing and share almost nothing you can see. Lattice is a fictional LLM gateway, an invented product made for this test, with invented figures and no real customers. It was directed twice with Cinematic UI: once as a Wachowskis picture, once as a Miyazaki picture. This post compares the two directions, using only what the treatments and the production log record.
You can open both live: the Matrix cut and the Kiki cut.
The product
Lattice routes requests to language-model providers and falls back when one fails. The dramatic problem is the same in both versions. A developer’s request is lost in traffic they cannot see. Providers fail, the request is re-routed mid-flight, and the developer finally reads the traffic. Both cuts are English, one page, a long scroll film with five pinned scenes and three flow documents. Both follow the same lead, a request tagged req_7f3a91, through seven states to a 200 OK, and in both the visitor gets a part: take a provider down with a click or keys 1 to 4, and the request swerves onto the next one.
Everything else was decided separately.
Cut one: The Matrix (1999)
The Wachowskis’ film is about learning to see a system you were living inside and then bending its rules, which matches what the product promises. The treatment extracts these mechanisms:
- The opening dives through a screen glyph into the world. The loader is a terminal, and the camera flies through the ink of a zero into the traffic.
- The world is rendered as falling streams of its own data. The rain is the product’s traffic: model names, milliseconds, request ids. It contains no katakana, so it is the mechanism and not the costume.
- Bullet time. The world freezes while the camera keeps moving. Scroll orbits a frozen request in CSS 3D, yaw plus or minus 30 degrees.
- Seeing the code. The rain decodes into a readable log, scrubbed by scroll.
- Two worlds, two bases. Inside is green; the control plane, pricing and exit sit on a cold dark blue ground. The cut between them is a CRT collapse.
The medium is a 2D canvas of glyph streams plus DOM type, with no WebGL and no photographs. The grade runs from a green ground #050b08 with a live-request accent #3cff7a to a cold ground #090d12. The type is Archivo at an extra-condensed width with Fragment Mono. The ending is a monitor in a cold room printing 200 OK with the route the visitor caused.


Cut two: Kiki’s Delivery Service (1989)
The product’s verb is deliver: get each request to the right model through any weather. Miyazaki’s delivery film makes that a tension an audience can feel, weight against lift and weather against the parcel. The Matrix cut’s mechanism was seeing the code. This one’s is the wind carrying it. Characters, broom, cat and birdcage are costume, and none of them appear.
- Wind drawn in coloured line, never black. Copper, butter and blue-grey strokes in the sky, rain and grass, driven by the clock.
- Depth staging. A painted plate sits behind; the drawn parcel, wind and route sit in front and share its light.
- Fall or fly. Gusts knock the parcel about in the storm, and it is carried home when the wind turns.
- One late set piece against a quiet baseline. The town scene is the only interactive spectacle.
- A held shot. “Most days, nothing goes wrong.” Only the grass moves.
The medium is painted plates plus drawn SVG lines and DOM, again with no WebGL. The plates are six AI-generated gouache-style originals. The ground is a pale sky #eaf3f8 rather than paper, the accent is terracotta #d2593a for the parcel and the action that sends it, and the wind is #3e9c8c. The type is Young Serif, Source Serif 4 and Courier Prime. The four providers live in four landmarks: a clock tower, windmill, dome and lighthouse. Close one and a storm cloud covers it, the route redraws and the parcel is carried to the next. The film ends with the parcel landing on a Delivered stamp at dusk.


What stayed the same, and what did not
| Matrix cut | Kiki cut | |
|---|---|---|
| Director and film | The Wachowskis, The Matrix | Hayao Miyazaki, Kiki’s Delivery Service |
| Medium | Glyph-stream canvas, DOM type, CSS 3D | Painted plates, drawn SVG, DOM |
| Ground and accent | #050b08 and #3cff7a, then cold #090d12 |
#eaf3f8 and #d2593a |
| The lead | A request, as a bright stream | A parcel, carried on wind |
| The turn | Time stops (bullet time) | The wind turns (the town scene) |
| Progress mark | One falling stream | A parcel on a string |
| Footer | “end of trace” credits | Vignettes and a harbour strip |
The filmography check that Cinematic UI runs before casting is what forces this divergence.
Honest notes
Both treatments record their own loose ends. The Matrix cut was screened on desktop, laptop and mobile plus the reduced-motion cut, and two scenes kept a dead-hold flag that was judged by eye. The Kiki cut’s research was about 22 calls in English and Japanese, with no frames viewed, so its mechanisms are tagged secondary, wiki or inference. Its grade-drift flag fired on about half the frames, because a six-colour palette cannot cover six very different paintings, and it was left unfixed.
That is the point of the method. The skill gives you a direction and a record of how sure it is.