A Journey on the Powell-Hyde Cable Car

A 97-second procedural risograph film of a ride on San Francisco's Powell–Hyde cable car, from Union Square over Nob Hill and Russian Hill down to the bay, seen through one window of a Powell car. Every pixel is drawn in Canvas 2D and every sound but one is synthesised, in a single index.html with no libraries, fonts, images or network calls.

Watch: open site/ (deployed on Vercel), or open films/hyde-street/index.html in a browser and press Play, with Sound on.

Hyde Street

The camera is bolted to the car. When it climbs Powell (up to 17%) or plunges down Hyde (21%, the steepest grade in the system), the street stays parallel to the sill and the whole city tilts; the leather strap hangs plumb and swings at every start and stop.

The sound is the ride: a grinding roar modelled on a field recording of a Powell car, wheels knocking over rail joints, the grip, the brakes, the gripman's bell, gulls (a public-domain National Park Service recording) and a foghorn. Design notes, measurements and known weaknesses are in films/hyde-street/FILM.md; audio credits in AUDIO-SOURCES.md.

The kit it was made with

This repo is built on riso-windowseat, the release of Window Seat together with the Claude Code skills, craft docs and render harness its films grew. Hyde Street was made with that kit; the original films are kept below.

The kit's films

All are 1080 × 1080, 30 fps. MP4s are on the v1.0 release. To watch the source instead, open any index.html in a browser and press play.

Window Seat

A night train journey seen through one fixed window with a glass of water on the sill. Every pixel and every sound except the piano is procedural.

The score, "A Light Left in the Window", is an original piano piece in 6/8 whose phrasing follows the picture's timeline. The glass of water leans with every acceleration and is the last thing to settle.

Roost

A murmuration over a marsh in one fixed view. Each starling is a 2–3 px ink dot, so the flock is the halftone: where the sheet turns edge-on, the birds pile into dark printed ribbons. A falcon stoops through it and the flock pours into the reeds at nightfall. The string score is timed from the picture.

How they're made

I directed each film; Claude Code (Anthropic's coding agent) wrote the code, using the skills, rules and docs in this repo. A work is designed in its FILM.md, its hardest frame is proved first, and then it is inspected as frame strips, 1:1 crops and loudness sheets rendered by tools/. Every frame is a pure function of time (seek(t)), so any moment can be inspected exactly and the MP4 cannot drop frames. Each FILM.md records the design decisions and measurements, and lists the film's remaining weaknesses.

Make your own

git clone https://github.com/akdeb/sf-cable-car-ride
cd sf-cable-car-ride/tools
npm install && npm run setup && npm test

Then open Claude Code in the repo root and ask, for example:

• "Make a 40 second riso film of a lighthouse keeper's night."
• "Make a riso poster of a heron on a pier at dusk."
• "Score this film" or "The rain at 66 s is too loud."
• "Extend Window Seat with a snowy mountain pass after the lake."

CLAUDE.md gives the session the contract and commands. The riso-film, riso-still and riso-score skills in .claude/skills/ carry the workflow and gates. Each skill's examples.md points to the routines in the shipped films that are worth reusing. A hook warns when an edit breaks determinism.

What's inside

License

MIT, see LICENSE. The piano recordings embedded in Window Seat are Salamander Grand Piano V3 by Alexander Holm under CC BY 3.0; see AUDIO-SOURCES.md. The string recordings embedded in Roost are VSCO 2 Community Edition by Versilian Studios under CC0 1.0; see AUDIO-SOURCES.md.