Skip to content

feat(video): add dissolve, push, iris, and reveal transitions - #11

Merged
CodeWithDennis merged 1 commit into
mainfrom
feat/video-transition-modes
Jul 27, 2026
Merged

feat(video): add dissolve, push, iris, and reveal transitions#11
CodeWithDennis merged 1 commit into
mainfrom
feat/video-transition-modes

Conversation

@CodeWithDennis

Copy link
Copy Markdown
Owner

Summary

  • Add selectable video transitions beyond wipe: Dissolve, Push, Iris, and Reveal
  • Keep Wipe as the existing layout-aware split-mask animation (vertical / horizontal / diagonal styles still apply)
  • Wire the same transition into Play preview, MediaRecorder export, and saved presets

Key changes

  • compositor.js: new renderVideoFrame(options, transition, progress)
    • Wipe continues to animate splitPosition through the current mask
    • Other modes cache full A/B frames (labels off), composite by progress, then paint labels once on top
    • A/B frames are cached across frames for smoother preview/export
  • video-export.js: recordWipeVideo generalized to recordTransitionVideo (compat alias kept)
  • app.js + app.blade.php: Transition control in the Video export panel; presets store videoTransition
  • README: document the transition video options

Behavior / impact

Transition Behavior
Wipe Layout split animates A→B (including wavy/zigzag diagonals)
Dissolve Opacity crossfade
Push Slides along layout axis (horizontal layout → vertical push; otherwise horizontal)
Iris Circular reveal of B from center
Reveal Expanding rectangle of B from center
  • A → B / B → A still applies to every mode
  • Video export remains limited to split layouts (not Overlap)
  • Default stays Wipe for existing workflows

Test plan

  • Select Export → Video on Vertical / Horizontal / Diagonal
  • Confirm Transition shows Wipe, Dissolve, Push, Iris, Reveal
  • Play preview for each transition (A→B and B→A)
  • Export MP4/WebM for wipe and at least one full-frame mode; verify playback
  • Diagonal + Wipe still respects wavy/zigzag/scallop styles
  • Labels stay fixed on top during dissolve/push/iris/reveal
  • Save preset with a non-wipe transition, reload, confirm it restores
  • Overlap still blocks video with the existing helper message
  • npm run build succeeds; hard-reload NativePHP/browser to pick up assets

Keep layout-aware wipe, and let export/preview pick full-frame
transition modes with shared compositor rendering and presets.
@CodeWithDennis
CodeWithDennis merged commit de90e58 into main Jul 27, 2026
4 checks passed
@CodeWithDennis
CodeWithDennis deleted the feat/video-transition-modes branch July 27, 2026 19:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant