DEV Community

Cover image for Configurable Video Transition Duration in Reel Quick
Farhan Munir
Farhan Munir

Posted on

Configurable Video Transition Duration in Reel Quick

Video transitions are one of those details that quietly shape the feel of an edit.

In Reel Quick issue #13, the goal was simple: let users control how long a scene transition lasts instead of forcing a fixed value.

Issue URL: https://github.com/ronin1770/reel-quick/issues/13

The problem

The app already supported transition effects between scenes, but the duration was fixed.

That meant creators could choose what transition to use, but not how long it should run.

For short-form video, that matters a lot:

  • fast transitions create a snappier pace
  • longer transitions feel smoother or more cinematic
  • some edits need no transition at all

The feature

The new behavior adds a configurable transition duration:

  • minimum: 0.0 seconds
  • maximum: 4.0 seconds
  • step: 0.5 seconds

A slider in the frontend lets the user choose the duration, and that value is sent to the backend for FFmpeg video generation.

If the value is 0.0, transitions are disabled entirely.

The FFmpeg math

When two clips are joined with a transition, the transition overlaps the end of the first clip and the start of the second clip.

So the final duration is:

final length = clip 1 + clip 2 - transition duration

Example 1

  • Clip 1 = 7 seconds
  • Clip 2 = 8 seconds
  • Transition duration = 4 seconds

Math:

7 + 8 - 4 = 11 seconds

Final video length: 11 seconds

Example 2

  • Clip 1 = 7 seconds
  • Clip 2 = 8 seconds
  • Transition duration = 0.5 seconds

Math:

7 + 8 - 0.5 = 14.5 seconds

Final video length: 14.5 seconds

Why validation matters

This feature also needs guardrails.

The backend validates that:

  • the duration is between 0 and 4
  • the duration is a multiple of 0.5
  • clips are long enough for the selected transition

That last point is important. A 4 second transition cannot work safely if a clip itself is only 3 seconds long.

Implementation notes

The implementation touches both frontend and backend:

Frontend

  • add a transition duration slider
  • show the selected value beside it
  • send transition_duration in the video creation request
  • show inline validation errors

Backend

  • accept transition_duration in the API
  • validate the range and step
  • preserve the default behavior when no value is supplied
  • pass the value into FFmpeg transition generation

The key idea

The transition does not add extra time to the video.

It overlaps clips.

That is the core reason the final duration becomes:

sum of clips - overlap

For n clips, the total duration becomes:

sum(all clip durations) - sum(all transition overlaps)

Open source note

Small editing controls like this can have a big impact on creative flexibility.

This is exactly the kind of feature that makes open source video tools more useful in real workflows: not flashy, just practical and user-driven.

If you want to follow the discussion or implementation details, see the issue here:

https://github.com/ronin1770/reel-quick/issues/13

Top comments (0)