Video Generation Clips & Transitions

Videos in JsonCut are built using clips - discrete segments that play sequentially. Each clip contains layers and can have smooth transitions to the next clip, creating professional-looking videos with seamless scene changes.

Understanding Clips

Clips are the building blocks of your video. Think of them as scenes or segments that each have their own duration and visual content.

{
  "type": "video",
  "config": {
    "width": 1280,
    "height": 720,
    "clips": [
      {
        "duration": 3,
        "layers": [
          {
            "type": "fill-color",
            "color": "#667eea"
          },
          {
            "type": "title",
            "text": "Scene 1",
            "textColor": "#ffffff",
            "position": "center"
          }
        ]
      },
      {
        "duration": 4,
        "layers": [
          {
            "type": "fill-color", 
            "color": "#764ba2"
          },
          {
            "type": "title",
            "text": "Scene 2",
            "textColor": "#ffffff",
            "position": "center"
          }
        ]
      }
    ]
  }
}

Clip Properties

Property	Type	Required	Description
`duration`	number	❌	Clip duration in seconds (uses default if omitted)
`layers`	array	✅	Visual and audio layers for this clip
`transition`	object	❌	Transition effect to the next clip

Default Duration

You can set a default duration for all clips and override it individually:

{
  "type": "video",
  "config": {
    "defaults": {
      "duration": 4
    },
    "clips": [
      {
        // Uses default 4 seconds
        "layers": [...]
      },
      {
        "duration": 2,
        // Override to 2 seconds
        "layers": [...]
      }
    ]
  }
}

Available Transitions

JsonCut supports a comprehensive collection of transition effects. Here's a showcase of different transition categories:

{
  "type": "video",
  "config": {
    "defaults": {
      "duration": 3,
      "transition": { "duration": 1 }
    },
    "clips": [
      {
        "layers": [{ "type": "title-background", "text": "Fade" }],
        "transition": { "name": "fade" }
      },
      {
        "layers": [{ "type": "title-background", "text": "Wipe Left" }],
        "transition": { "name": "wipeLeft" }
      },
      {
        "layers": [{ "type": "title-background", "text": "Circle Open" }],
        "transition": { "name": "circleopen" }
      },
      {
        "layers": [{ "type": "title-background", "text": "3D Cube" }],
        "transition": { "name": "cube" }
      },
      {
        "layers": [{ "type": "title-background", "text": "Glitch" }],
        "transition": { "name": "GlitchDisplace" }
      },
      {
        "layers": [{ "type": "title-background", "text": "Water Drop" }],
        "transition": { "name": "WaterDrop" }
      },
      {
        "layers": [{ "type": "title-background", "text": "Morph" }],
        "transition": { "name": "morph" }
      },
      {
        "layers": [{ "type": "title-background", "text": "End" }],
        "transition": { "duration": 0 }
      }
    ]
  }
}

Complete Transition Reference

Transition Name	Category	Description
fade	Basic	Fade through black
fadecolor	Basic	Fade through color
fadegrayscale	Basic	Fade through grayscale
wipeLeft	Wipe	Wipe from left to right
wipeRight	Wipe	Wipe from right to left
wipeUp	Wipe	Wipe from bottom to top
wipeDown	Wipe	Wipe from top to bottom
directionalwipe	Wipe	Advanced directional wipe
directionalwarp	Wipe	Warping directional effect
Directional	Wipe	Simple directional push
circle	Geometric	Circular transition
circleopen	Geometric	Circle opening effect
CircleCrop	Geometric	Circle crop transition
hexagonalize	Geometric	Hexagonal pattern
kaleidoscope	Geometric	Kaleidoscope effect
pinwheel	Geometric	Pinwheel rotation
GridFlip	Geometric	Grid flip pattern
randomsquares	Geometric	Random squares
Mosaic	Geometric	Mosaic pattern
BowTieHorizontal	Geometric	Horizontal bow tie
BowTieVertical	Geometric	Vertical bow tie
cube	3D	3D cube rotation
SimpleZoom	Zoom	Simple zoom effect
CrossZoom	Zoom	Cross zoom transition
DreamyZoom	Zoom	Dreamy zoom effect
ZoomInCircles	Zoom	Zoom with circles
rotate_scale_fade	Motion	Rotate, scale and fade
Bounce	Motion	Bouncing effect
GlitchDisplace	Digital	Glitch displacement
GlitchMemories	Digital	Glitch memories effect
crosshatch	Digital	Crosshatch pattern
windowblinds	Digital	Window blinds effect
windowslice	Digital	Window slice transition
pixelize	Digital	Pixelization effect
displacement	Distortion	Displacement mapping
crosswarp	Distortion	Cross warping
Swirl	Distortion	Swirling effect
LinearBlur	Blur	Linear blur transition
WaterDrop	Organic	Water drop effect
ripple	Organic	Ripple effect
luminance_melt	Organic	Luminance melting
wind	Organic	Wind effect
undulatingBurnOut	Organic	Undulating burn out
burn	Organic	Burn transition
Dreamy	Creative	Dreamy effect
ColourDistance	Creative	Color distance
colorphase	Creative	Color phase shift
multiply_blend	Creative	Multiply blend
CrazyParametricFun	Creative	Parametric fun effect
polar_function	Creative	Polar function
perlin	Creative	Perlin noise
angular	Creative	Angular transition
squeeze	Creative	Squeeze effect
swap	Creative	Swap transition
morph	Creative	Morphing effect
ButterflyWaveScrawler	Special	Butterfly wave scrawler
DoomScreenTransition	Special	Doom screen effect
InvertedPageCurl	Special	Inverted page curl
PolkaDotsCurtain	Special	Polka dots curtain
Radial	Special	Radial transition
StereoViewer	Special	Stereo viewer effect
cannabisleaf	Special	Cannabis leaf shape
doorway	Special	Doorway effect
flyeye	Special	Fly eye effect
heart	Special	Heart shape
luma	Special	Luma transition
squareswire	Special	Squares wire frame

Transition Properties

Property	Type	Required	Description
`name`	string	✅	Transition effect name
`duration`	number	✅	Transition duration in seconds

Default Transitions

Set default transitions for all clips:

{
  "type": "video",
  "config": {
    "defaults": {
      "transition": {
        "name": "fade",
        "duration": 1
      }
    },
    "clips": [
      {
        "duration": 3,
        "layers": [...]
        // Uses default fade transition
      },
      {
        "duration": 2,
        "layers": [...],
        "transition": {
          "name": "wipeLeft",
          "duration": 0.5
        }
        // Overrides default
      }
    ]
  }
}

Audio During Transitions

Audio automatically fades during transitions. The duration of the audio fade matches the transition duration.

Timing Best Practices

Transition Duration Guidelines

Transition Type	Recommended Duration	Use Case
Quick cuts	0.2 - 0.5s	Fast-paced content
Standard	0.8 - 1.5s	General purpose
Dramatic	2 - 3s	Cinematic effects
Text transitions	0.5 - 1s	Title sequences

Clip Duration Guidelines

Content Type	Recommended Duration	Notes
Title cards	2 - 4s	Allow reading time
Product shots	3 - 5s	Showcase details
Text content	4 - 6s	Reading comprehension
Action scenes	1 - 3s	Maintain engagement

Next Steps

Audio & Sound - Add background music and audio effects
Examples - See complete video examples with transitions
Layer Types - Explore all available layer types

Understanding Clips​

Clip Properties​

Default Duration​

Available Transitions​

Complete Transition Reference​

Transition Properties​

Default Transitions​

Audio During Transitions​

Timing Best Practices​

Transition Duration Guidelines​

Clip Duration Guidelines​

Next Steps​