Experiments 11

One Drawing, Eight Shots

Checkout Pending: Anna wants to leave Hotel Kubernetes. Valentin guarantees one guest. Otto keeps preparing her replacement room. Eight camera moves, one drawing, and a reservation that outranks reality. 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

NARRATORAnna had checked out three times. Hotel Kubernetes recorded three successful recoveries.

Shot 01 / 08 · Wide

NARRATORAnna had checked out three times. Hotel Kubernetes recorded three successful recoveries.

00:00 / 00:47

I. Storyboard

8 shots · 47 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

Checkout Pending

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

[[WIDE 8]]
Anna, in mustard, stands at reception for the third time. Valentin, in black, regards this as excellent customer retention. Otto, in mint, awaits instructions. The reservation still calls for one guest.

NARRATOR
Anna had checked out three times. Hotel Kubernetes recorded three successful recoveries.

[[DOLLY 6]]
Otto walks the corridor past rooms 101 to 105. Every cancelled room must be prepared again. He is particularly proud of saving the breakfast.

OTTO
Room 104 is ready again. I rescued your croissant.

[[WHIP 6]]
From Valentin at reception to the empty lift, ready to return Anna to her room. To him, an empty hotel is a service failure.

M. VALENTIN
We guarantee one guest, madame. You are the one.

[[OVERHEAD 6]]
A room key, a checkout receipt, a fountain pen and a pastry box. Hands reach across the desk. The receipt and the still-valid key contradict each other.

ANNA
Checkout accepted. Then why does my key still work?

[[PORTRAIT 6]]
Anna holds perfectly still. The camera snaps closer as she identifies the problem: they keep removing the room, but the reservation keeps requesting a replacement.

ANNA
(with surgical patience)
Don't delete the room. Set the reservation to zero.

[[CARD 3]]
PART TWO: DESIRED STATE

[[TABLEAU 5]]
Anna, Valentin and Otto stand shoulder to shoulder in the lift. They ascend to Reservations. Valentin has come to supervise; Otto has come because nobody told him to stop helping.

OTTO
Reservations is upstairs. They only accept pull requests.

[[PULL 7]]
The camera pulls back from the lift to the whole hotel. The rooms remain immaculate, the linen folded, the pastries boxed. The system is working exactly as specified.

NARRATOR
Her checkout was approved. The next release was in November.

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

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

[[WIDE 8]]
Anna, in mustard, stands at reception for the third time. Valentin, in black, regards this as excellent customer retention. Otto, in mint, awaits instructions. The reservation still calls for one guest.

NARRATOR
Anna had checked out three times. Hotel Kubernetes recorded three successful recoveries.

[[DOLLY 6]]
Otto walks the corridor past rooms 101 to 105. Every cancelled room must be prepared again. He is particularly proud of saving the breakfast.

OTTO
Room 104 is ready again. I rescued your croissant.

[[WHIP 6]]
From Valentin at reception to the empty lift, ready to return Anna to her room. To him, an empty hotel is a service failure.

M. VALENTIN
We guarantee one guest, madame. You are the one.

[[OVERHEAD 6]]
A room key, a checkout receipt, a fountain pen and a pastry box. Hands reach across the desk. The receipt and the still-valid key contradict each other.

ANNA
Checkout accepted. Then why does my key still work?

[[PORTRAIT 6]]
Anna holds perfectly still. The camera snaps closer as she identifies the problem: they keep removing the room, but the reservation keeps requesting a replacement.

ANNA
(with surgical patience)
Don't delete the room. Set the reservation to zero.

[[CARD 3]]
PART TWO: DESIRED STATE

[[TABLEAU 5]]
Anna, Valentin and Otto stand shoulder to shoulder in the lift. They ascend to Reservations. Valentin has come to supervise; Otto has come because nobody told him to stop helping.

OTTO
Reservations is upstairs. They only accept pull requests.

[[PULL 7]]
The camera pulls back from the lift to the whole hotel. The rooms remain immaculate, the linen folded, the pastries boxed. The system is working exactly as specified.

NARRATOR
Her checkout was approved. The next release was in November.

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.