Playground

Choose an example, edit the JSON, and generate a video link you can share.

No sign-up needed
No credits used
Links last 7 days

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.

Can I create a video preview without signing in?

Yes. Open the Playground, choose an example or paste your JSON, then generate a shareable video preview link. No account, API key, or credits are needed. Links expire after 7 days. Exporting a final MP4 is a separate flow that requires an account and credits.

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.