Flat panel kit

POST https://api.shotstack.io/{{ENV}}/render

Alpha transparency overlay kit using flat panel graphics. The overlay kit includes animated panels in multiple directions and transition overlay animations.

Example MP4

Request Body

{"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"}}

HEADERS