Experiments 11

One Drawing, Eight Shots

A small comedy at Hotel Kubernetes: a guest tries to check out. The desired state disagrees. Eight camera moves, one drawing. Play the scene, explore the shots, or rewrite the script.

SVG viewBox · SMIL · Web Speech · @propertyView source

INT. HOTEL KUBERNETES, OFF-SEASON - THURSDAY, 4:03 P.M.SH. 01 / 08

NARRATORHotel Kubernetes guaranteed three guests. Whether they wished to stay was irrelevant.

Shot 01 / 08 · Wide

NARRATORHotel Kubernetes guaranteed three guests. Whether they wished to stay was irrelevant.

00:00 / 00:38

I. Storyboard

8 shots · 38 seconds · tap a frame to play it

II. The drawing

Every shot is a rectangle on this sheet

Choose a shot to watch its camera move across the drawing. The yellow outline follows the camera; the dashed outline marks where it finishes.

Shot 01 / 08Wide

Tap a shot to zoom in and play its move.

III. The shooting script

Fountain, with camera cues in double brackets

The Guest Who Wouldn't Terminate

INT. HOTEL KUBERNETES, OFF-SEASON - THURSDAY, 4:03 P.M.

[[WIDE 6]]
The lobby. Six pigeonholes, two palms, one concierge. The hotel has declared three guests its desired state.

NARRATOR
Hotel Kubernetes guaranteed three guests. Whether they wished to stay was irrelevant.

[[DOLLY 5]]
Otto walks past the same three doors, checking the same three names.

OTTO
Madame checked out. Her replacement has the same luggage.

[[WHIP 4]]
The concierge looks from the register to the elevator. Another Anna arrives.

M. VALENTIN
Excellent. The reconciliation is working.

[[OVERHEAD 5]]
The desk from above: a key, a departure form, a stamp marked PENDING.

ANNA
I filed my departure in YAML. With the correct indentation.

[[PORTRAIT 4]]
Anna waits. The concierge stamps her departure form PENDING again.

ANNA
(evenly)
I would like to stop existing here.

[[CARD 3]]
PART TWO: DESIRED STATE

[[TABLEAU 5]]
The three stand in the elevator. The cab rises. Anna keeps her key.

M. VALENTIN
Checkout requires a Helm upgrade. The porter is on lunch.

[[PULL 6]]
The whole hotel, every room at once. Nothing has changed. This is considered a success.

NARRATOR
By evening, all three guests were Anna. The dashboard was green.

Change a line, a cue, or a duration, then thread it.

INT. HOTEL KUBERNETES, OFF-SEASON - THURSDAY, 4:03 P.M.

[[WIDE 6]]
The lobby. Six pigeonholes, two palms, one concierge. The hotel has declared three guests its desired state.

NARRATOR
Hotel Kubernetes guaranteed three guests. Whether they wished to stay was irrelevant.

[[DOLLY 5]]
Otto walks past the same three doors, checking the same three names.

OTTO
Madame checked out. Her replacement has the same luggage.

[[WHIP 4]]
The concierge looks from the register to the elevator. Another Anna arrives.

M. VALENTIN
Excellent. The reconciliation is working.

[[OVERHEAD 5]]
The desk from above: a key, a departure form, a stamp marked PENDING.

ANNA
I filed my departure in YAML. With the correct indentation.

[[PORTRAIT 4]]
Anna waits. The concierge stamps her departure form PENDING again.

ANNA
(evenly)
I would like to stop existing here.

[[CARD 3]]
PART TWO: DESIRED STATE

[[TABLEAU 5]]
The three stand in the elevator. The cab rises. Anna keeps her key.

M. VALENTIN
Checkout requires a Helm upgrade. The porter is on lunch.

[[PULL 6]]
The whole hotel, every room at once. Nothing has changed. This is considered a success.

NARRATOR
By evening, all three guests were Anna. The dashboard was green.

Notes on how it works

Notes

The camera: The camera is an SVG viewBox. Every shot is a rectangle on one drawing, framed in Academy ratio by default on phones. The lateral dolly, the whip pan, the three-step snap zoom, the elevator crane and the pull-back are all one attribute changing.
The clock: SMIL, the browser’s own declarative animation timeline, which Chrome nearly removed in 2015. The screenplay compiles into begin and dur attributes. Play, pause and scrub are unpauseAnimations() and setCurrentTime(). No animation library.
The storyboard: Each frame is a <use> of the same drawing with its own viewBox, so the board is live while the scene runs, and the master sheet shows all eight rectangles at once. Both print as vectors.
The voice: The Web Speech API reads each line, rate and pitch lowered until the delivery is flat enough. The music is a Karplus–Strong plucked string rendered once through OfflineAudioContext.
The grade: Fifteen colours registered with @property. Switching a palette transitions every fill in the drawing, the board and the sheet in one move.
The script: A Fountain-style screenplay: scene heading, action, character, parenthetical, dialogue, with camera cues in double brackets. A small parser turns it into a shot list, tested.