a love letter that plays like a film

Why I built it

Most of my work is websites with a job to do. This is the other corner of the craft: something one person sends to one other person, opened on a phone, probably in bed, and kept. I built it to show pacing and atmosphere — the parts of a site you feel before you read a word.

It is shaped like a short film because that is the language I already speak. A leader counts down, a title card lands, three acts run, the credits roll. The film grammar does the emotional work that a stock photograph usually fails at.

Everything is drawn, nothing is shot

There is not a single photograph or video file in the whole piece. The warm grade is layered gradients, the grain is one SVG turbulence jittering on a three-step loop, the light leak is a blend mode, and the bokeh drifting through the frame is about sixty particles on one canvas that pauses itself the moment the tab is hidden.

That is the point, not a shortcut: it opens instantly on a phone on bad signal, and there is no hero image arriving late to ruin the first three seconds.

The frame never breaks

Every page sits inside a 2.39:1 letterbox with a running timecode, a REC light and the reel slug in the corners — so moving between the four pages feels like cutting between scenes rather than clicking around a website. A sprocketed film edge down the left fills as you scroll.

Four pages, one reel

The title card holds the leader and the play button. The film runs three acts, each with its own slate line, and ends on a live countdown to the next date — it reads the date from the content file and rolls forward a year each time it passes. The reasons are a deck you swipe, drag or arrow through. The end credits close it out and give the other person somewhere to write back.

Words you can change

None of the writing is welded into the design. Every line lives in one content.json, and a loader overlays it at load with the printed words still in the HTML as the fallback, so the film reads correctly even if that file never arrives.

There is an editor at /demo-letter/edit/: a field for every line, add-a-reason, and a live preview you can flip between all four pages while you type. In the demo Publish hands you the JSON; on a real build the same call writes the file and the film updates for whoever opens it next.

On a phone, one-handed

Checked down to 360px — the title breaks between words and never mid-word, the deck takes a swipe, the letterbox bars scale with the viewport. Under prefers-reduced-motion the leader is skipped, the grain stops moving, the dust never starts, and every scene is simply there.