The Director's Cut
Co-Founder + Design Engineer
- Video
- Notes
- Annotations
- Filmmakers
- Frontend
- Backend
- 1also the only engineer
- 4brand, interface, front end, backend
- 2one note layer over both
- 20+the loop this is built for
Problem
Directors review a cut 10 to 20+ times and hand off hundreds of timecoded notes to each post department every round, rewriting the same unresolved notes version after version. The tools they use, Frame.io among them, are built for technical sign-off, not creative feedback.
Approach
- Identified the problem from inside the industry, then defined the product, scope, and positioning independently.
- Designed and built the full front end in React 19, TypeScript, and Tailwind v4. No handoff, so nothing is lost in translation between design and implementation.
- Architected the backend on Supabase (Postgres, Auth, Storage): schema design with row-level security, email and password auth, cloud sync of notes and metadata, and blob storage for attachments such as voice notes, frame sketches, and reference images. Video takes either path under one note layer: a multi-gigabyte master referenced on disk by fingerprint, or a private 1080p proxy on Cloudflare Stream with signed playback gated by the same membership rules.
Outcome
Deployed to production on Vercel behind a private, password-gated preview, and in use with the director it was built with. Walkthrough on request.
The Ruler
The whole app is tuned for one moment: something is wrong on screen, and the director has to get back to the exact frames before the thought is gone. So the timeline is deliberately oversized and kept separate from the transport scrubber, with the audio waveform behind the note lane and markers in department colors above and below the rule. Zoom runs from the whole cut down to single frames, markers drag to reposition, and dragging empty track paints the in-to-out span the next note will carry.
Leaving a note without leaving the film
A review breaks the moment the tool asks for a decision. Bullseye drops a marker at the playhead without pausing playback, and its range flavor arms at the current frame and grows with the playhead until a second press closes it, so a whole section gets marked without stopping. Notes are pre-addressed by the active channel, which makes a note a keystroke and a sentence rather than a form, and Direction Suggestions cover the notes a director gives every round: too warm, add grain, fade down here.
Notes that are not text
Half of what a director means is in tone or in a reference, and typing flattens both. A note carries voice, a drawing on the frame, an image, or nothing but one of those. The voice note is one unit instead of a stack of widgets: our own transport, the waveform stretched across the row doubling as the scrub bar, and the transcript under a hairline in the same box. Transcription runs a Whisper model on device, so the audio never leaves the machine. Drawings are stored as strokes and overlaid on the live video rather than baked into a still, so an annotation survives scrubbing.
The note that outlives the cut
A cut gets reviewed ten to twenty times, and the same unresolved note gets rewritten every round. Projects hold clips, clips hold versions, and an unresolved note is carried into the next version with a badge pointing back to where it came from, so its history sits on the note instead of in a separate archive. A note marked done stops there.
Where the vision lives
The script, the references, the palette, the score ideas, the treatment: by the time post starts, all of it is scattered across texts and email. Vision Boards is a pannable, zoomable canvas, one shared and one per department, where items are dragged, resized, and overlapped by hand. It is a collage rather than a grid on purpose, because a tidy masonry flattens the way a reference wall is actually read. A note can point at a board item, so a reference gets cited rather than re-attached.
One system, documented inside the app
The tokens are a greyscale base plus functional accent colors, defined once in a Tailwind v4 theme block and mirrored one to one to Figma variables, with a serif display face and a typewriter body carrying the brand layer. The system documents itself at a playground route in the app: every primitive, state, and surface on one page, which is also where a new surface gets checked before it ships.
The part with no interface
Masters run five to twenty gigabytes, so the default is to reference the video rather than copy it: a file handle persists between sessions, a content fingerprint identifies the same cut across two machines, and a watched folder relinks a new version silently once its fingerprint arrives from the cloud. A collaborator who does not have the file takes the other path, a private 1080p proxy uploaded straight to Cloudflare Stream and played through a signed token minted against the same membership rules. Notes are anchored to frames, so the note layer cannot tell which one is playing. Everything small, notes and voice and drawings and boards, syncs through Supabase: Postgres with row-level security keyed to project membership, email and password auth, private storage buckets. Offline, the whole project still travels as one self-contained file.
Available for select product design work.
If the problem in one of these looks like yours, I would like to hear about it.