Skip to content

feat: add overlap layouts and video export#9

Merged
CodeWithDennis merged 4 commits into
mainfrom
feat/overlap-and-video-export
Jul 26, 2026
Merged

feat: add overlap layouts and video export#9
CodeWithDennis merged 4 commits into
mainfrom
feat/overlap-and-video-export

Conversation

@CodeWithDennis

@CodeWithDennis CodeWithDennis commented Jul 26, 2026

Copy link
Copy Markdown
Owner

Summary

  • New Overlap layout with Cards, Side, and Stack (keeps screenshot aspect ratio, respects PNG transparency, optional shadow)
  • Video export as a wipe animation at source resolution (Auto/MP4/WebM, duration, FPS, A→B / B→A)
  • In-app Play preview for the wipe before exporting
  • Export formats are single-select: PNG, JPG, or Video

Key changes

  • resources/js/compositor.js: overlap cards without browser chrome, alpha support, optional shadow, zero-offset fix
  • resources/js/app.js: overlap state, MediaRecorder wipe export, MP4/WebM picking, preview loop, single exportFormat
  • resources/views/app.blade.php: Overlap controls and Video export/preview UI

Behavior / impact

  • Overlap hides Split/padding (not applicable); Radius and Swap remain available
  • Video works only with Vertical / Horizontal / Diagonal
  • Video ignores Scale and always uses screenshot source resolution
  • Unsupported containers are disabled in the UI
  • Reactive canvas updates pause during video preview/export to avoid frame races
  • Presets store overlap and video settings

Test plan

  • Overlap → Cards / Side / Stack with two screenshots
  • Offset at 0 produces flush overlap (no forced default offset)
  • Transparent PNG: no white card backing
  • Shadow on/off
  • Play preview then Stop; slider value restored after preview
  • Video export Auto / MP4 / WebM; verify extension and playback
  • A→B and B→A
  • Format single-select: switch PNG/JPG/Video
  • Overlap + Video: export blocked / message shown
  • Save/load preset with overlap + video settings

Expose cards/side/stack compositions with optional shadow, and export a
source-resolution wipe animation as a single selected format.
@CodeWithDennis CodeWithDennis added the enhancement New feature or request label Jul 26, 2026
@CodeWithDennis CodeWithDennis changed the title feat: voeg overlap-layouts en video-export toe feat: add overlap layouts and video export Jul 26, 2026
Prefer MP4 when available via Auto, with explicit MP4/WebM choices
gated by MediaRecorder support.
Play the wipe animation on the preview canvas using duration, FPS, and
direction settings without encoding a file.
Treat zero overlap offset as valid, skip reactive renders during
recording/preview, and stop media tracks only after MediaRecorder ends.
@CodeWithDennis
CodeWithDennis merged commit a4e4bdb into main Jul 26, 2026
4 checks passed
@CodeWithDennis
CodeWithDennis deleted the feat/overlap-and-video-export branch July 26, 2026 11:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant