Warchief.dev

Warcut Studio · Engine Building Roadmap

Spec v0.1.2 · MP4/H.264 export live · Local-first

Warcut Studio is a browser-first video editor mockup: import MP4/H.264 (browser-supported), assemble a timeline, and preview lower thirds (HTML/CSS overlays). MP4 export is now working via ffmpeg.wasm (same-origin). Full timeline render/mux (multi-clip + overlays) is still in progress.

Done In progress / partly live Planned / not started
One row = one build slice Viewport-safe: no page overflow
Phase 0 Warchief Shell + Media Intake
Branded frame, bins, and reliable file import (local URLs + metadata).
In Progress v0A
›
  • 0.A — App Frame + Viewport RulesUI
    Viewport-confined layout (no page overflow) with scrollable panels and consistent chrome.
    Done · promo UI frame
  • 0.B — Import MP4 + Audio + ImagesI/O
    Import video/audio/images → object URLs; probe duration/dimensions; bin list with select/remove/add-to-timeline.
    Done · import + probe + bin
  • 0.C — Codec Support ReportQA
    Codec support panel with canPlayType hints and “preview OK” probing for imported clips.
    Done · canPlayType + probe modal
  • 0.D — Modal System (Help/Codec/Export)UX
    Reusable modal framework powering Help, Codec Report, and Export dialogs.
    Done · promo dialogs
Phase 1 Timeline Model + Editing Basics
Clips on tracks, snapping, trim, split, and selection.
In Progress v0A
›
  • 1.A — Tracks + Clip BlocksCore
    V1/GFX/A1 tracks with draggable clip blocks, selection, playhead + ruler, snap/ripple toggles.
    Done · tracks + blocks (v1)
  • 1.B — Trim + Ripple (v1)Edit
    Drag clip edges to trim; optional ripple shifts downstream clips (v1 behavior).
    In progress · trim handles + ripple toggle
  • 1.C — Split + Delete + Undo StackUX
    Split at playhead; delete selected clips; undo/redo stack (+ common keyboard shortcuts).
    In progress · split/delete + undo/redo
  • 1.D — Timeline Zoom + Ruler SyncUI
    Zoom (px/s) slider and ruler that stays aligned with lane scroll and playhead.
    Done · ruler fix update
  • 1.E — Keyboard Shortcuts (v1)UX
    Space = play/pause, arrows = step, Ctrl/Cmd+Z/Y = undo/redo (where supported).
    Done · basic shortcuts
Phase 2 Preview Playback + Sync
Scrub, play/pause, accurate time mapping across clip boundaries.
In Progress v0A
›
  • 2.A — Clip Switching (Playlist)Preview
    Preview switches active clip based on playhead; seeks/scrubs; supports browser-decoded MP4/H.264.
    Done · timeline-driven preview
  • 2.B — WebAudio Playback (v1)Audio
    Audio master routing (Clip audio vs WebAudio A1), master mute control, and basic WebAudio playback for audio tracks.
    In progress · WebAudio routing + master mute
  • 2.C — Proxy Mode (Optional)Perf
    Optional transcode to lightweight preview (requires ffmpeg.wasm or server).
    Planned
  • 2.D — Audio Controls (Master + Per-Clip)Audio
    Master mute button plus per-clip mute toggle and “audio master” routing.
    Done · preview audio controls
Phase 3 Lower Thirds + Graphics
Preset lower thirds, keyframes-lite, and safe-area guides.
In Progress v0A
›
  • 3.A — Lower Third Track + Overlay RendererGFX
    Lower Third track renders HTML/CSS overlays with editable text; per-item timing on timeline.
    Done · HTML/CSS overlay lane
  • 3.B — Safe Areas + Position ControlsUX
    Safe-area guides toggle and position/scale controls from Inspector.
    Done · safe guides + position
  • 3.C — Motion Presets (Fade/Slide)Anim
    Simple motion presets for lower thirds (fade / slide) with preview toggle.
    Done · fade/slide presets (v1)
  • 3.D — Overlay Core Schema v1 (Phase A)GFX
    Unified overlay schema + deterministic ordering (z-index normalization), plus enable/solo visibility rules for preview.
    Done · Phase A stages 1–3
  • 3.E — Deterministic .warcut Serialization + Reload Helpers (Phase A)Data
    Byte-stable project export (sorted arrays + stable keys) and in-session reload to verify overlays survive save/load.
    Done · Phase A stage 4
  • 3.F — Raster Preview Parity Toggle (Phase B / Stage 1)QA
    Optional preview mode that renders overlays via renderOverlayFrame() onto a canvas layer so preview pixels match export exactly (HTML overlay stays for editing).
    Planned · Stack B.1.S1 (raster preview parity)
Phase 4 Export Pipeline
Real encoding and muxing (hardest piece in-browser).
In Progress v0B
›
  • 4.0 — Project JSON ExportOutput
    Export timeline + overlay data as a .warcut JSON project for later render/encode pipelines.
    Done · “Download Project JSON”
  • 4.A — Frame Export (PNG)Output
    Frame export + overlay rasterization harness (Phase B). Includes single-frame PNG at playhead + sample probe strip, plus a unified renderOverlayFrame() API (1080p baseline), deterministic ordering, caching, and schedule-aware PNG frame generation.
    Done: single-frame export + probe · Remaining Phase B stacks: B.1.S1 (raster-preview parity), B.2.S1 (taint/asset guard), B.5.S1 (sequence export UI), B.5.S2 (FFmpeg ingest adapter).
  • 4.F — Overlay PNG Sequence Export (Phase B / Stage 5)Output
    User-facing export that generates named PNG frames for a selected time range (or full duration) using the Phase B rasterizer, with batching/ZIP and cancel.
    Planned · Stack B.5.S1 (UI + naming + batching)
  • 4.G — FFmpeg Ingest Adapter (Overlay Frames → Burn-In)WASM
    Write generated PNG frames into FFmpeg FS and stitch to an overlay stream (or burn-in) to prep true timeline render later.
    Planned · Stack B.5.S2 (FFmpeg adapter smoke-test)
  • 4.D — WebM Export (Experimental, ffmpeg.wasm)WASM
    Optional local transcode to WebM via ffmpeg.wasm (good for quick demos; heavy + requires http/https).
    In progress · known issue: some builds export blank WebM (needs fix or retirement)
  • 4.B — MP4 Export (H.264, ffmpeg.wasm)WASM
    H.264 MP4 exporter is live via ffmpeg.wasm (same-origin). Current preset targets wide compatibility: libx264, yuv420p, +faststart, 30fps default, and auto-downscale to max width 1280 for sanity.
    Done · MP4/H.264 export working (Cloudflare-friendly)
  • 4.E — Same-Origin FFmpeg Bundle + Chunked WASM LoaderInfra
    Host worker/core/wasm under your own domain (no cross-origin Worker issues) and load the large WASM blob in chunks to stay under strict single-file host limits (e.g., 25MB).
    Done · /ffmpeg assets + chunk loader verified
  • 4.C — “Realistic Mode” (Server Render)Pro
    Optional server-side render service for Premiere-like export reliability.
    Planned

Reality Check

Browsers can usually preview MP4/H.264 (“H64”) via <video>. We now also have a working MP4/H.264 export path via ffmpeg.wasm, but full Premiere-like editing and MP4 export requires heavy tooling (typically ffmpeg.wasm) or a server render backend. This roadmap keeps the mockup honest while still aiming for the full UX.

...Next Up

• 4.A single-frame PNG export (with overlays) is now done; next: 4.F PNG-sequence export UI + 4.G FFmpeg ingest adapter (Phase B completion).
• Upgrade MP4 export from “single-clip re-encode” to true timeline render (multi-clip + trims + overlays).
• Audio: WebAudio mixdown → WAV, then mux into MP4; verify A/V sync + drift over longer exports.
• Export settings UI: resolution (remove 1280 cap), fps, bitrate/CRF presets, and audio codec selection.
• Decide WebM path: fix blank-output builds or retire WebM in favor of MP4-only for now.
• UX hardening: progress %, cancel, memory guardrails, and clearer “export will be slow” messaging.

Warchief.dev · Warcut Studio Roadmap · Single-file HTML spec