Experiments 10

One Drawing, Eight Shots

An eight-shot scene built on a single flat SVG drawing, animated with SMIL viewBox transitions and synthesized speech. Play the scene, inspect the shot rectangles, or edit the screenplay.

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

An SVG viewBox over a single drawing. Every shot, dolly, whip pan, snap zoom, crane and pull-back, animates that one attribute.

The clock

Browser-native SMIL timelines compiled from the screenplay into begin and dur attributes. Play, pause, and scrub call unpauseAnimations() and setCurrentTime().

The storyboard

Each frame is a <use> element referencing the main drawing with its own viewBox, while the master sheet overlays all eight framing rectangles.

The voice

Dialogue is read via the Web Speech API with lowered rate and pitch. Music is synthesized with a Karplus–Strong plucked-string model in OfflineAudioContext.

The grade

Fifteen CSS custom properties registered with @property transition the palette across the scene, storyboard, and master sheet.

The script

A Fountain-style parser reads scene headings, dialogue, and double-bracketed camera cues into a timed shot list.