Back to projects
Open standalone ×
05 / PROJECTConcept / demo project

FrameFlow

Browser-based video review workflow for frame-accurate feedback, version comparison and approvals.

Try interactive demo Try interactive demo Read the case
THE PROBLEMWHY IT EXISTS

Feedback that loses the frame.

Teams reviewing video end up scattering feedback across chats, docs and timestamps that nobody can trust. Notes lose their frame, versions pile up, and 'which cut did we approve?' becomes an archaeology question.

THE SOLUTION03 PILLARS
01

Frame-accurate comments

Notes pin to a timecode and a region of the frame, with rectangle, circle, arrow, freehand and pin annotations.

02

Version comparison

Two cuts play in sync; a curated 'what changed' list jumps both panes to the moments that differ.

03

Approval workflow

draft → review → changes requested → approved, with an immutable decision history.

IN PRACTICESCREENSHOTS
FrameFlow review workspace: a comment pinned to the exact frame, with annotation tools above the video player.
A note pinned to the exact frame
Version comparison view playing two cuts of the same timeline side by side, in sync.
Before/after, synced
Projects overview listing every review project with its version count and approval status.
From projects to approvals
LIVE DEMOINTERACTIVE

Try it in your browser.

Runs entirely in your browser — changes are stored locally (IndexedDB). Open standalone ↗
UNDER THE HOODTECH

How it is built.

  • React 18 + TypeScript (strict)
  • Vite
  • IndexedDB via Dexie
  • Zustand
  • react-router deep links (stable IDs)
  • custom video transport with frame-step and timecode readout
  • normalized-coordinate annotations
  • drift-corrected sync compare
  • 180+ unit tests (vitest + fake-indexeddb)
  • Playwright golden-path E2E
HONEST LIMITSWHAT IT IS NOT

Where the demo stops.

The demo is fully client-side: comments, versions and statuses live in this browser's IndexedDB, so a shared link to a locally-created comment cannot open on another device. Public review links and real-time collaboration would need server-side storage — the UI and domain model are built so that swap is a persistence-layer change.

Open FrameFlow Open standalone in a new tab ↗