Summary
A new overlay track in the timeline that lets users place images and video clips on top of their screen recording at precise time ranges, positioned and sized freely.
Key Features
- Overlay track — a second track rendered above the section track in the timeline UI, for placing, trimming, splitting, and selecting overlay media items
- Drag-and-drop import — drop image or video files onto the editor canvas to add them. Files are copied into the project folder
- Free-placement on canvas — overlay media is draggable and corner-resizable, drawn between the screen recording and PIP camera in z-order. Overflow beyond canvas is allowed (grayed in editor, clipped in render)
- Per-mode positioning — each overlay segment stores independent position/size for landscape and reel modes, following the
savedLandscape/savedReel pattern
- Overlay splitting — overlays can be split at the playhead, creating two segments referencing the same source file with independent position/size
- Video overlay playback — video overlays play in sync with the timeline, with
sourceStart/sourceEnd to control which part of the source plays
- Smooth transitions — overlays fade in/out at their time boundaries and interpolate position/size between split segments (0.3s)
- FFmpeg render support — overlay media composited as additional inputs with time-bounded, positioned overlay filters between the screen base and PIP camera
- Reference-counted file management — same media file can be used by multiple segments without duplication. Files are staged to
.deleted/ only when all references are removed
- Overlay audio muted — video overlay audio is not included in the output
Why
Users recording screen presentations often need to show supplementary visual content — images, diagrams, or video clips — while narrating. Previously the only visual layers were the screen recording and PIP camera.
New Capabilities
media-overlay-data — data model, normalization, validation, persistencemedia-overlay-timeline — timeline UI rendering, selection, trim, splitmedia-overlay-canvas — editor canvas drag/resize, z-order, per-mode statemedia-overlay-playback — sync image/video display to timeline, fade transitionsmedia-overlay-render — FFmpeg overlay filters, compositingmedia-overlay-files — import, copy, reference counting, cleanup
Related Commits
38af165 — feat: add media overlay track for images and videos on timeline
Fixes included in PR #3
Summary
A new overlay track in the timeline that lets users place images and video clips on top of their screen recording at precise time ranges, positioned and sized freely.
Key Features
savedLandscape/savedReelpatternsourceStart/sourceEndto control which part of the source plays.deleted/only when all references are removedWhy
Users recording screen presentations often need to show supplementary visual content — images, diagrams, or video clips — while narrating. Previously the only visual layers were the screen recording and PIP camera.
New Capabilities
media-overlay-data— data model, normalization, validation, persistencemedia-overlay-timeline— timeline UI rendering, selection, trim, splitmedia-overlay-canvas— editor canvas drag/resize, z-order, per-mode statemedia-overlay-playback— sync image/video display to timeline, fade transitionsmedia-overlay-render— FFmpeg overlay filters, compositingmedia-overlay-files— import, copy, reference counting, cleanupRelated Commits
38af165— feat: add media overlay track for images and videos on timelineFixes included in PR #3