Cinematic UI 2.0中文

← Gallery · Roll 06 / 06 · LLM gateway

Lattice (Miyazaki cut)

The same product as the Matrix cut, re-directed: a request is a parcel that has to reach the right model through any weather, and the wind carries it.

Watch live ↗Read the treatment

Lattice (Miyazaki cut) — first frame
Director · film
Hayao Miyazaki · Kiki's Delivery Service (1989)
Medium
Six AI-generated gouache-style painted plates, drawn SVG wind, rain and route lines, and DOM; no WebGL
The lead
The parcel req_7f3a91: on the sill, riding the wind, buffeted in the storm, flown to a landmark, absent in the held shot, a ledger line, landing on the Delivered stamp.
The audience's part
Take one of four landmarks down by click or keys 1 to 4: a storm cloud covers it, the route redraws and the parcel is carried to the next.
Grade
#eaf3f8#d2593a
Lattice (Miyazaki cut) — frame 2Lattice (Miyazaki 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

The same product as ../lattice-gateway (the Matrix version), re-directed. Cast film: Hayao Miyazaki, Kiki's Delivery Service (1989). Research is in research/kikis-delivery-service.md (about 22 calls, EN + JA, 0 frames viewed).

Why this film

The product's verb is deliver: get each request to the right model, through any weather. Miyazaki's delivery film turns that into a tension the audience can feel: weight against lift, and weather against the parcel.

The Matrix version's mechanism was "seeing the code". This one's is "the wind carries it". The film's characters, broom, cat and birdcage are costume, and none of them appear.

Mechanisms

  1. Wind drawn in coloured line, never black [S]. Wind lines in the sky, rain and grass are copper, butter and blue-grey strokes, driven by the clock.
  2. Depth staging, cel interlocked with background [S]. The painted plate sits behind; the drawn parcel, wind and route sit in front and share its light.
  3. Fall-or-fly [S]. The parcel bobs and wobbles. Gusts knock it about in the storm, and it is carried home when the wind turns.
  4. One late set piece against a quiet baseline [S]. The town scene is the only interactive spectacle.
  5. Small happenings in the epilogue [W]. The credits are three vignettes, and one caption changes with what the visitor did.
  6. A held shot [I]. "Most days, nothing goes wrong." Only the grass moves.

Medium, grade, world

  • Medium: painted plates plus drawn SVG lines and DOM; no WebGL.
  • Plates: 6 AI-generated original gouache-style plates (Runware runware:400@1, ≈ $0.17 total; the cost lesson is noted in memory).
  • GRADE:
    • starting look from research (unmeasured against the film);
    • the spec palette is measured from our own plates (grade.json) plus the page tokens;
    • three looks: DAY, STORM (cooler, less saturated) and DUSK (warmer, more halation);
    • accent terracotta #d2593a = the parcel and the action that sends it;
    • wind copper #3e9c8c; sky ground #eaf3f8 (not paper).
  • UI map:
    • shop-sign buttons on brackets (not pills);
    • cream cards with copper edges, staggered like stepped lanes;
    • a roofline divider;
    • progress as a parcel on a string;
    • the footer as a harbour strip.

Lead: the parcel req_7f3a91

  1. on the sill, with its tag typed (loader); the camera leaves through the window;
  2. riding the wind over the town;
  3. buffeted and dropping in the storm;
  4. flown along a drawn route to a landmark; re-routed by the visitor;
  5. absent in the held shot;
  6. a line written in the ledger;
  7. landing on the "Delivered" stamp at dusk.

The audience's part

Four providers live in four landmarks: the clock tower, windmill, dome and lighthouse. When the visitor takes one down (by click, or keys 1–4):

  • a storm cloud covers that landmark;
  • the route redraws and the parcel is carried to the next landmark;
  • on phones, the camera pans to it.

Lasting consequence: the ledger row, the trace, the exit 200 OK line and the credits caption all show it.

Scenes and cuts

  • Scenes (lengths in vh): arrival 300 → weather 380 (cut: the storm front crosses as a soft wipe) → town 470 (wipe) → calm 300 (held shot) → ledger 220 → control and pricing (flow) → exit 240 → credits.
  • Type: Young Serif (display), Source Serif 4 (text) and Courier Prime (code and labels). From the kit: odometer and stamp.

Screening

  • Screened: desktop, laptop and mobile, plus the reduced-motion cut on desktop and mobile. The interaction was tested in the browser: the mobile pan works, and the consequences reach the ledger, trace, exit and credits.
  • grade-drift: flagged on about half the frames, at 38–45% coverage against a 45% threshold. A 6-colour palette cannot cover six very different paintings, so the measurement is limited here. Not fixed.
  • Ledger: the dead-hold flag was fixed by shortening the scene.

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