LuminaCut Studio

A browser editing workspace for sequencing media, shaping sound, adding captions, and reviewing a cut.

Explore the editor demo

Actual project screen

Your first visit

Choose Open demo cut, inspect the sample timeline, then switch between editing, color and audio workspaces.

My contributionProduct design, timeline interaction, browser media implementation; AI-assisted development

The visible proofA sample sequence with clip, caption, audio, and review controls.

Implementation

Keep timeline controls predictable.

Built with: Public editor: JavaScript · HTML/CSS · browser media APIs · Cloudflare Pages. V2 source study: React / TypeScript editor state.
Interaction decisions: The source centralizes timeline and selection state. Timecode entry accepts absolute or relative positions, bounds the playhead to sequence duration, and updates the timeline, preview and status together.
Iteration & learning: Keyboard handling distinguishes editing a form from operating the timeline. Invalid timecode keeps focus on the field and exposes a readable status rather than moving the playhead unpredictably.
Scope: A browser editor prototype. Long projects, codec compatibility and export depend on the browser and source media.

Inspect the editor history source ↗

01 / The idea

An editor built around the edit.

Editing involves more than a video preview. A creator needs to move between a sequence, its source material, timing, text, audio, and the decisions still needing attention.

02 / The approach

The choices behind it.

Keep the preview and timeline central. Reveal controls in context, make review issues navigable, and separate editing, color, audio, and delivery workspaces.

Inspect a sequence
Shape the timeline
Refine text and audio
Review the cut

03 / Where it stands

What works today.

Public browser editor prototype with a sample sequence and working editing controls.

A product prototype. Codec support, long projects and export behavior depend on the browser and source media.