Playground

Take a real film apart. Edit the JSON, then preview your own version.

JSON schema

pg-title-sequence.json

{
  "meta": {
    "version": "2.0.0",
    "title": "Design in motion",
    "description": "Original editable Playground example. Rendered with the RenderingVideo schema engine.",
    "width": 960,
    "height": 540,
    "fps": 30,
    "background": "#E7BDB4"
  },
  "assets": {
    "fonts": [
      {
        "id": "jakarta",
        "src": "/samples/jakarta.woff2",
        "family": "Jakarta",
        "weight": "200 800"
      }
    ]
  },
  "tracks": [
    {
      "id": "composition",
      "clips": [
        {
          "type": "rect",
          "start": 0,
          "duration": 6,
          "transform": {
            "x": 0,
            "y": 0,
            "width": 960,
            "height": 540
          },
          "style": {
            "fill": "#E7BDB4"
          }
        },
        {
          "type": "text",
          "text": "STUDIO JOURNAL",
          "start": 0,
          "duration": 6,
          "transform": {
            "x": 0,
            "y": -195
          },
          "style": {
            "fontFamily": "Jakarta",
            "fontSize": 15,
            "fontWeight": 700,
            "fill": "#4C302C"
          }
        },
        {
          "type": "line",
          "points": [
            [
              -405,
              -150
            ],
            [
              405,
              -150
            ]
          ],
          "start": 0,
          "duration": 6,
          "style": {
            "stroke": "#936C64",
            "strokeWidth": 1
          }
        },
        {
          "type": "text",
          "text": "DESIGN",
          "start": 0.2,
          "duration": 3.4,
          "transform": {
            "x": -70,
            "y": -53
          },
          "style": {
            "fontFamily": "Jakarta",
            "fontSize": 106,
            "fontWeight": 700,
            "fill": "#392C29"
          },
          "animations": [
            {
              "type": "slideIn",
              "direction": "right",
              "distance": 65,
              "duration": 0.55,
              "easing": "easeOutCubic"
            },
            {
              "type": "fadeIn",
              "duration": 0.4
            }
          ]
        },
        {
          "type": "text",
          "text": "IN MOTION",
          "start": 0.55,
          "duration": 3.05,
          "transform": {
            "x": 26,
            "y": 60
          },
          "style": {
            "fontFamily": "Jakarta",
            "fontSize": 81,
            "fontWeight": 700,
            "fill": "#392C29"
          },
          "animations": [
            {
              "type": "slideIn",
              "direction": "left",
              "distance": 65,
              "duration": 0.55,
              "easing": "easeOutCubic"
            },
            {
              "type": "fadeIn",
              "duration": 0.4
            }
          ]
        },
        {
          "type": "rect",
          "start": 1.1,
          "duration": 2.5,
          "transform": {
            "x": 0,
            "y": 147,
            "width": 140,
            "height": 7
          },
          "style": {
            "fill": "#B54732"
          },
          "keyframes": [
            {
              "property": "scale",
              "frames": [
                {
                  "time": 0,
                  "value": [
                    0.02857142857142857,
                    1
                  ],
                  "easing": "easeInOutCubic"
                },
                {
                  "time": 0.7,
                  "value": [
                    1.0,
                    1
                  ],
                  "easing": "easeInOutCubic"
                },
                {
                  "time": 2.5,
                  "value": [
                    1.9285714285714286,
                    1
                  ],
                  "easing": "easeInOutCubic"
                }
              ]
            }
          ]
        },
        {
          "type": "rect",
          "start": 3.6,
          "duration": 2.4,
          "transform": {
            "x": 0,
            "y": 0,
            "width": 960,
            "height": 540
          },
          "style": {
            "fill": "#392C29"
          },
          "transition": {
            "type": "wipe",
            "direction": "up",
            "duration": 0.45
          }
        },
        {
          "type": "text",
          "text": "Ideas take shape.",
          "start": 3.9,
          "duration": 2.1,
          "transform": {
            "x": 0,
            "y": -18
          },
          "style": {
            "fontFamily": "Jakarta",
            "fontSize": 60,
            "fontWeight": 700,
            "fill": "#F7EDE8"
          },
          "animations": [
            {
              "type": "slideIn",
              "direction": "up",
              "distance": 35,
              "duration": 0.55,
              "easing": "easeOutCubic"
            },
            {
              "type": "fadeIn",
              "duration": 0.4
            }
          ]
        },
        {
          "type": "text",
          "text": "A TITLE SEQUENCE",
          "start": 4.25,
          "duration": 1.75,
          "transform": {
            "x": 0,
            "y": 74
          },
          "style": {
            "fontFamily": "Jakarta",
            "fontSize": 16,
            "fontWeight": 700,
            "fill": "#E7BDB4"
          },
          "animations": [
            {
              "type": "slideIn",
              "direction": "up",
              "distance": 15,
              "duration": 0.55,
              "easing": "easeOutCubic"
            },
            {
              "type": "fadeIn",
              "duration": 0.4
            }
          ]
        }
      ]
    }
  ]
}

{
  "meta": {
    "version": "2.0.0",
    "title": "Design in motion",
    "description": "Original editable Playground example. Rendered with the RenderingVideo schema engine.",
    "width": 960,
    "height": 540,
    "fps": 30,
    "background": "#E7BDB4"
  },
  "assets": {
    "fonts": [
      {
        "id": "jakarta",
        "src": "/samples/jakarta.woff2",
        "family": "Jakarta",
        "weight": "200 800"
      }
    ]
  },
  "tracks": [
    {
      "id": "composition",
      "clips": [
        {
          "type": "rect",
          "start": 0,
          "duration": 6,
          "transform": {
            "x": 0,
            "y": 0,
            "width": 960,
            "height": 540
          },
          "style": {
            "fill": "#E7BDB4"
          }
        },
        {
          "type": "text",
          "text": "STUDIO JOURNAL",
          "start": 0,
          "duration": 6,
          "transform": {
            "x": 0,
            "y": -195
          },
          "style": {
            "fontFamily": "Jakarta",
            "fontSize": 15,
            "fontWeight": 700,
            "fill": "#4C302C"
          }
        },
        {
          "type": "line",
          "points": [
            [
              -405,
              -150
            ],
            [
              405,
              -150
            ]
          ],
          "start": 0,
          "duration": 6,
          "style": {
            "stroke": "#936C64",
            "strokeWidth": 1
          }
        },
        {
          "type": "text",
          "text": "DESIGN",
          "start": 0.2,
          "duration": 3.4,
          "transform": {
            "x": -70,
            "y": -53
          },
          "style": {
            "fontFamily": "Jakarta",
            "fontSize": 106,
            "fontWeight": 700,
            "fill": "#392C29"
          },
          "animations": [
            {
              "type": "slideIn",
              "direction": "right",
              "distance": 65,
              "duration": 0.55,
              "easing": "easeOutCubic"
            },
            {
              "type": "fadeIn",
              "duration": 0.4
            }
          ]
        },
        {
          "type": "text",
          "text": "IN MOTION",
          "start": 0.55,
          "duration": 3.05,
          "transform": {
            "x": 26,
            "y": 60
          },
          "style": {
            "fontFamily": "Jakarta",
            "fontSize": 81,
            "fontWeight": 700,
            "fill": "#392C29"
          },
          "animations": [
            {
              "type": "slideIn",
              "direction": "left",
              "distance": 65,
              "duration": 0.55,
              "easing": "easeOutCubic"
            },
            {
              "type": "fadeIn",
              "duration": 0.4
            }
          ]
        },
        {
          "type": "rect",
          "start": 1.1,
          "duration": 2.5,
          "transform": {
            "x": 0,
            "y": 147,
            "width": 140,
            "height": 7
          },
          "style": {
            "fill": "#B54732"
          },
          "keyframes": [
            {
              "property": "scale",
              "frames": [
                {
                  "time": 0,
                  "value": [
                    0.02857142857142857,
                    1
                  ],
                  "easing": "easeInOutCubic"
                },
                {
                  "time": 0.7,
                  "value": [
                    1.0,
                    1
                  ],
                  "easing": "easeInOutCubic"
                },
                {
                  "time": 2.5,
                  "value": [
                    1.9285714285714286,
                    1
                  ],
                  "easing": "easeInOutCubic"
                }
              ]
            }
          ]
        },
        {
          "type": "rect",
          "start": 3.6,
          "duration": 2.4,
          "transform": {
            "x": 0,
            "y": 0,
            "width": 960,
            "height": 540
          },
          "style": {
            "fill": "#392C29"
          },
          "transition": {
            "type": "wipe",
            "direction": "up",
            "duration": 0.45
          }
        },
        {
          "type": "text",
          "text": "Ideas take shape.",
          "start": 3.9,
          "duration": 2.1,
          "transform": {
            "x": 0,
            "y": -18
          },
          "style": {
            "fontFamily": "Jakarta",
            "fontSize": 60,
            "fontWeight": 700,
            "fill": "#F7EDE8"
          },
          "animations": [
            {
              "type": "slideIn",
              "direction": "up",
              "distance": 35,
              "duration": 0.55,
              "easing": "easeOutCubic"
            },
            {
              "type": "fadeIn",
              "duration": 0.4
            }
          ]
        },
        {
          "type": "text",
          "text": "A TITLE SEQUENCE",
          "start": 4.25,
          "duration": 1.75,
          "transform": {
            "x": 0,
            "y": 74
          },
          "style": {
            "fontFamily": "Jakarta",
            "fontSize": 16,
            "fontWeight": 700,
            "fill": "#E7BDB4"
          },
          "animations": [
            {
              "type": "slideIn",
              "direction": "up",
              "distance": 15,
              "duration": 0.55,
              "easing": "easeOutCubic"
            },
            {
              "type": "fadeIn",
              "duration": 0.4
            }
          ]
        }
      ]
    }
  ]
}

Schema checks passed258 lines

Preview

Staggered type and a scene transition. Edit the headline, font size or timing. Original rendered sample. Generate a preview to see your edits.

Current composition

Resolution: 960 × 540
Duration: 6 s
Frame rate: 30 FPS

Text5Visuals4

Preview without signing in or spending credits.Generate with⌘ / CtrlEnter

Start with one small change

Choose what to edit, understand the key fields, then try it in an example.

text / style

Find a text clip, replace its copy and adjust fontSize. Change one thing first and see how it affects the frame.

Field excerpt

"text": "YOUR NEXT IDEA",
"style": {
  "fontSize": 81,
  "fill": "#392C29"
}

Before you keep creating

How previews, saved JSON and final videos differ.

Why hasn’t the picture changed after editing?

Reference film shows the original example. After editing JSON, select Generate preview and view My preview. The schema is checked before generation.

Are my JSON edits saved?

Switching examples keeps each draft on the current page. Reloading or closing the page clears them. Use Download JSON to save locally, or copy the code.

How do I get a finished MP4?

This page creates temporary previews that expire after 7 days. Use the Agent or API to create and render a video task for a final file. Final rendering consumes credits.

Connect your applicationSend your tested JSON to the video API to generate videos in batches.Draft with the AgentDescribe your idea and let the Agent help compose scenes and motion.