Experience Shotstack for yourself,
with no risk, and generate your first
video in 5 minutes.
Unlimited developer sandbox
Free tier (no watermarks)
No credit card required
Professionally built templates to get you started.
{
"merge": [
{
"find": "STYLE",
"replace": "flat-panel"
},
{
"find": "COLOR",
"replace": "black"
}
],
"timeline": {
"tracks": [
{
"clips": [
{
"asset": {
"type": "title",
"text": "content-left-in",
"style": "subtitle",
"position": "bottomLeft",
"color": "#ffffff",
"size": "small"
},
"start": 0,
"length": 2.5
},
{
"asset": {
"type": "title",
"text": "content-left-out",
"style": "subtitle",
"position": "bottomLeft",
"color": "#ffffff",
"size": "small"
},
"start": 3,
"length": 2.5
},
{
"asset": {
"type": "title",
"text": "content-right-in",
"style": "subtitle",
"position": "bottomLeft",
"color": "#ffffff",
"size": "small"
},
"start": 6,
"length": 2.5
},
{
"asset": {
"type": "title",
"text": "content-right-out",
"style": "subtitle",
"position": "bottomLeft",
"color": "#ffffff",
"size": "small"
},
"start": 9,
"length": 2.5
},
{
"asset": {
"type": "title",
"text": "content-top-in",
"style": "subtitle",
"position": "bottomLeft",
"color": "#ffffff",
"size": "small"
},
"start": 12,
"length": 2.5
},
{
"asset": {
"type": "title",
"text": "content-top-out",
"style": "subtitle",
"position": "bottomLeft",
"color": "#ffffff",
"size": "small"
},
"start": 15,
"length": 2.5
},
{
"asset": {
"type": "title",
"text": "content-bottom-in",
"style": "subtitle",
"position": "bottomLeft",
"color": "#ffffff",
"size": "small"
},
"start": 18,
"length": 2.5
},
{
"asset": {
"type": "title",
"text": "content-bottom-out",
"style": "subtitle",
"position": "bottomLeft",
"color": "#ffffff",
"size": "small"
},
"start": 21,
"length": 2.5
},
{
"asset": {
"type": "title",
"text": "content-top-left-in",
"style": "subtitle",
"position": "bottomLeft",
"color": "#ffffff",
"size": "small"
},
"start": 24,
"length": 2.5
},
{
"asset": {
"type": "title",
"text": "content-top-left-out",
"style": "subtitle",
"position": "bottomLeft",
"color": "#ffffff",
"size": "small"
},
"start": 27,
"length": 2.5
},
{
"asset": {
"type": "title",
"text": "content-top-right-in",
"style": "subtitle",
"position": "bottomLeft",
"color": "#ffffff",
"size": "small"
},
"start": 30,
"length": 2.5
},
{
"asset": {
"type": "title",
"text": "content-top-right-out",
"style": "subtitle",
"position": "bottomLeft",
"color": "#ffffff",
"size": "small"
},
"start": 33,
"length": 2.5
},
{
"asset": {
"type": "title",
"text": "content-bottom-right-in",
"style": "subtitle",
"position": "bottomLeft",
"color": "#ffffff",
"size": "small"
},
"start": 36,
"length": 2.5
},
{
"asset": {
"type": "title",
"text": "content-bottom-right-out",
"style": "subtitle",
"position": "bottomLeft",
"color": "#ffffff",
"size": "small"
},
"start": 39,
"length": 2.5
},
{
"asset": {
"type": "title",
"text": "content-bottom-left-in",
"style": "subtitle",
"position": "bottomLeft",
"color": "#ffffff",
"size": "small"
},
"start": 42,
"length": 2.5
},
{
"asset": {
"type": "title",
"text": "content-bottom-left-out",
"style": "subtitle",
"position": "bottomLeft",
"color": "#ffffff",
"size": "small"
},
"start": 45,
"length": 2.5
},
{
"asset": {
"type": "title",
"text": "transition-left",
"style": "subtitle",
"position": "bottomLeft",
"color": "#ffffff",
"size": "small"
},
"start": 48,
"length": 2.5
},
{
"asset": {
"type": "title",
"text": "transition-right",
"style": "subtitle",
"position": "bottomLeft",
"color": "#ffffff",
"size": "small"
},
"start": 51,
"length": 2.5
},
{
"asset": {
"type": "title",
"text": "transition-up",
"style": "subtitle",
"position": "bottomLeft",
"color": "#ffffff",
"size": "small"
},
"start": 54,
"length": 2.5
},
{
"asset": {
"type": "title",
"text": "transition-down",
"style": "subtitle",
"position": "bottomLeft",
"color": "#ffffff",
"size": "small"
},
"start": 57,
"length": 2.5
},
{
"asset": {
"type": "title",
"text": "outro-in",
"style": "subtitle",
"position": "bottomLeft",
"color": "#ffffff",
"size": "small"
},
"start": 60,
"length": 2.5
},
{
"asset": {
"type": "title",
"text": "outro-out",
"style": "subtitle",
"position": "bottomLeft",
"color": "#ffffff",
"size": "small"
},
"start": 63,
"length": 2.5
}
]
},
{
"clips": [
{
"asset": {
"type": "video",
"src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-left-in.mov"
},
"start": 0,
"length": 2.96
},
{
"asset": {
"type": "video",
"src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-left-out.mov"
},
"start": 3,
"length": 2.96
},
{
"asset": {
"type": "video",
"src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-right-in.mov"
},
"start": 6,
"length": 2.96
},
{
"asset": {
"type": "video",
"src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-right-out.mov"
},
"start": 9,
"length": 2.96
},
{
"asset": {
"type": "video",
"src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-top-in.mov"
},
"start": 12,
"length": 2.96
},
{
"asset": {
"type": "video",
"src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-top-out.mov"
},
"start": 15,
"length": 2.96
},
{
"asset": {
"type": "video",
"src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-bottom-in.mov"
},
"start": 18,
"length": 2.96
},
{
"asset": {
"type": "video",
"src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-bottom-out.mov"
},
"start": 21,
"length": 2.96
},
{
"asset": {
"type": "video",
"src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-top-left-in.mov"
},
"start": 24,
"length": 2.96
},
{
"asset": {
"type": "video",
"src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-top-left-out.mov"
},
"start": 27,
"length": 2.96
},
{
"asset": {
"type": "video",
"src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-top-right-in.mov"
},
"start": 30,
"length": 2.96
},
{
"asset": {
"type": "video",
"src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-top-right-out.mov"
},
"start": 33,
"length": 2.96
},
{
"asset": {
"type": "video",
"src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-bottom-right-in.mov"
},
"start": 36,
"length": 2.96
},
{
"asset": {
"type": "video",
"src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-bottom-right-out.mov"
},
"start": 39,
"length": 2.96
},
{
"asset": {
"type": "video",
"src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-bottom-left-in.mov"
},
"start": 42,
"length": 2.96
},
{
"asset": {
"type": "video",
"src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-bottom-left-out.mov"
},
"start": 45,
"length": 2.96
},
{
"asset": {
"type": "video",
"src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/transition-left.mov"
},
"start": 48,
"length": 2.96
},
{
"asset": {
"type": "video",
"src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/transition-right.mov"
},
"start": 51,
"length": 2.96
},
{
"asset": {
"type": "video",
"src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/transition-up.mov"
},
"start": 54,
"length": 2.96
},
{
"asset": {
"type": "video",
"src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/transition-down.mov"
},
"start": 57,
"length": 2.96
},
{
"asset": {
"type": "video",
"src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/outro-in.mov"
},
"start": 60,
"length": 2.96
},
{
"asset": {
"type": "video",
"src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/outro-out.mov"
},
"start": 63,
"length": 2.96
}
]
},
{
"clips": [
{
"asset": {
"type": "image",
"src": "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate1.jpg"
},
"start": 0,
"length": 66
}
]
}
]
},
"output": {
"format": "mp4",
"resolution": "hd"
}
}Alpha transparency overlay kit using panel graphics. The overlay kit includes animated panels in multiple directions and transition overlay animations.
New to Shotstack? Sign up to use this template and start automatically generating videos.
Test and modify this template directly in Postman by forking our public Collection.
Customise the template and integrate it in to your application or workflow using the programming language of your choice.
Use this template as the starting point for integration with our SDKs. Port the JSON to PHP, Node or Ruby and integrate in to your code base.
Unlimited developer sandbox
Free tier (no watermarks)
No credit card required
