Color fade transition intro

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

This intro sequence fades from one color to another and then displays logo and text.

Example MP4

Request Body

{"timeline"=>{"fonts"=>[{"src"=>"https://templates.shotstack.io/basic/asset/font/barlow-extrabold.ttf"}, {"src"=>"https://templates.shotstack.io/basic/asset/font/barlow-extralight.ttf"}, {"src"=>"https://templates.shotstack.io/basic/asset/font/barlow-regular.ttf"}], "soundtrack"=>{"src"=>"https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/music/freepd/fireworks.mp3", "effect"=>"fadeOut"}, "background"=>"#00bdff", "tracks"=>[{"clips"=>[{"asset"=>{"type"=>"html", "html"=>"<p>&nbsp;</p>", "width"=>1920, "height"=>1080, "background"=>"#8ad424"}, "start"=>0.0, "length"=>1, "transition"=>{"out"=>"fade"}}]}, {"clips"=>[{"asset"=>{"type"=>"image", "src"=>"https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/logos/heart-health-white.png"}, "start"=>1.0, "length"=>3.0, "fit"=>"none", "offset"=>{"y"=>0.25}, "transition"=>{"in"=>"fade"}}]}, {"clips"=>[{"asset"=>{"type"=>"html", "html"=>"<p>Main Heading</p>", "css"=>"p { font-family: 'Barlow ExtraBold'; color: #ffffff; font-size: 80px; }", "width"=>1000, "height"=>100}, "start"=>1.4, "length"=>2.6, "transition"=>{"in"=>"slideRight"}, "offset"=>{"y"=>-0.08}}, {"asset"=>{"type"=>"html", "html"=>"<p>Subheading text and more details</p>", "css"=>"p { font-family: 'Barlow'; color: #ffffff; font-size: 60px; }", "width"=>1000, "height"=>150, "position"=>"top"}, "start"=>1.6, "length"=>2.4, "offset"=>{"y"=>-0.2}, "transition"=>{"in"=>"slideRight"}}, {"asset"=>{"type"=>"html", "html"=>"<p><b>Tel:</b> 999-999-9999</p>", "css"=>"p { font-family: 'Barlow ExtraLight'; color: #ffffff; font-size: 40px; } ", "width"=>1000, "height"=>50}, "start"=>1.8, "length"=>2.2, "offset"=>{"y"=>-0.32}, "transition"=>{"in"=>"fade"}}]}]}, "output"=>{"format"=>"gif", "resolution"=>"1080"}}

HEADERS