← Recipes
Product ad video from one JSON request
A product shot plays beside a dark brand panel. The campaign line, the headline, the offer and a Shop now button come in one after another, and everything fades out before the loop starts again.
How it is built
- 01
The footage
The product clip fills the frame and eases out from 104% to 100% over the eight seconds, so even a still shot keeps moving.
- 02
The brand panel
A dark rectangle covers the left 760 pixels and fades in to 82% opacity, so the footage still shows through it.
- 03
The words
Three text layers on the panel's centre line. The headline slides up at 0.7 seconds, the campaign line and the offer fade in around it.
- 04
The button
A white pill and its label, last in at 1.4 seconds. Every layer fades out over the final third of a second, so the loop restarts clean.
The request
The exact request behind the video above, and every file it names is public, so it runs as it is. To make your own, change the headline, offer, campaign line, button label, and footage.
import { createClient, outputUrl } from "@rendobar/sdk";
const rb = createClient({ apiKey: process.env.RENDOBAR_API_KEY });
const job = await rb.jobs.run({ type: "compose", params: { output: { format: "mp4", resolution: { width: 1920, height: 1080 }, fps: 30 }, timeline: { tracks: [ { clips: [ { asset: { type: "video", src: "https://cdn.rendobar.com/compose/player/media/mk-44070.mp4", volume: 0 }, transform: { fit: "cover", scale: [ { time: 0, value: 1.04, easing: "linear" }, { time: 8, value: 1 } ] }, start: 0, length: 8 } ] }, { clips: [ { asset: { type: "shape", shape: "rect", color: "#0B0B10" }, transform: { size: { width: 760, height: 1080 }, position: { x: 380, y: 540 } }, start: 0, length: 8, opacity: [ { time: 0, value: 0, easing: "easeOutQuad" }, { time: 0.6, value: 0.82 }, { time: 7.65, value: 0.82, easing: "easeInQuad" }, { time: 8, value: 0 } ] } ] }, { clips: [ { asset: { type: "text", text: "AUTUMN EDIT", style: { font: "Montserrat", size: 34, weight: 600, color: "#E9D5FF", animate: { type: "fade", duration: 0.5 } } }, transform: { position: { x: 380, y: 372 } }, start: 0.5, length: 7.5, opacity: [ { time: 0, value: 1 }, { time: 7.15, value: 1, easing: "easeInQuad" }, { time: 7.5, value: 0 } ] } ] }, { clips: [ { asset: { type: "text", text: "Made to last.", style: { font: "Montserrat", size: 96, weight: 700, color: "#FFFFFF", animate: { type: "slideUp", duration: 0.6 } } }, transform: { position: { x: 380, y: 462 } }, start: 0.7, length: 7.3, opacity: [ { time: 0, value: 1 }, { time: 6.95, value: 1, easing: "easeInQuad" }, { time: 7.3, value: 0 } ] } ] }, { clips: [ { asset: { type: "text", text: "20% off this week only", style: { font: "Inter", size: 40, weight: 400, color: "#E5E7EB", animate: { type: "fade", duration: 0.5 } } }, transform: { position: { x: 380, y: 556 } }, start: 1.1, length: 6.9, opacity: [ { time: 0, value: 1 }, { time: 6.55, value: 1, easing: "easeInQuad" }, { time: 6.9, value: 0 } ] } ] }, { clips: [ { asset: { type: "shape", shape: "rect", color: "#FFFFFF", radius: 0.5 }, transform: { size: { width: 320, height: 84 }, position: { x: 380, y: 676 } }, start: 1.4, length: 6.6, opacity: [ { time: 0, value: 0, easing: "easeOutQuad" }, { time: 0.5, value: 1 }, { time: 6.25, value: 1, easing: "easeInQuad" }, { time: 6.6, value: 0 } ] } ] }, { clips: [ { asset: { type: "text", text: "Shop now", style: { font: "Inter", size: 34, weight: 600, color: "#0F172A", animate: { type: "fade", duration: 0.5 } } }, transform: { position: { x: 380, y: 676 } }, start: 1.5, length: 6.5, opacity: [ { time: 0, value: 1 }, { time: 6.15, value: 1, easing: "easeInQuad" }, { time: 6.5, value: 0 } ] } ] } ] } },});
console.log(outputUrl(job));Install with npm i @rendobar/sdk. jobs.run() submits and waits, so it returns the finished job in one call.
curl https://api.rendobar.com/jobs \ -H "Authorization: Bearer $RENDOBAR_API_KEY" \ -H "Content-Type: application/json" \ -d '{"type":"compose","params":{"output":{"format":"mp4","resolution":{"width":1920,"height":1080},"fps":30},"timeline":{"tracks":[{"clips":[{"asset":{"type":"video","src":"https://cdn.rendobar.com/compose/player/media/mk-44070.mp4","volume":0},"transform":{"fit":"cover","scale":[{"time":0,"value":1.04,"easing":"linear"},{"time":8,"value":1}]},"start":0,"length":8}]},{"clips":[{"asset":{"type":"shape","shape":"rect","color":"#0B0B10"},"transform":{"size":{"width":760,"height":1080},"position":{"x":380,"y":540}},"start":0,"length":8,"opacity":[{"time":0,"value":0,"easing":"easeOutQuad"},{"time":0.6,"value":0.82},{"time":7.65,"value":0.82,"easing":"easeInQuad"},{"time":8,"value":0}]}]},{"clips":[{"asset":{"type":"text","text":"AUTUMN EDIT","style":{"font":"Montserrat","size":34,"weight":600,"color":"#E9D5FF","animate":{"type":"fade","duration":0.5}}},"transform":{"position":{"x":380,"y":372}},"start":0.5,"length":7.5,"opacity":[{"time":0,"value":1},{"time":7.15,"value":1,"easing":"easeInQuad"},{"time":7.5,"value":0}]}]},{"clips":[{"asset":{"type":"text","text":"Made to last.","style":{"font":"Montserrat","size":96,"weight":700,"color":"#FFFFFF","animate":{"type":"slideUp","duration":0.6}}},"transform":{"position":{"x":380,"y":462}},"start":0.7,"length":7.3,"opacity":[{"time":0,"value":1},{"time":6.95,"value":1,"easing":"easeInQuad"},{"time":7.3,"value":0}]}]},{"clips":[{"asset":{"type":"text","text":"20% off this week only","style":{"font":"Inter","size":40,"weight":400,"color":"#E5E7EB","animate":{"type":"fade","duration":0.5}}},"transform":{"position":{"x":380,"y":556}},"start":1.1,"length":6.9,"opacity":[{"time":0,"value":1},{"time":6.55,"value":1,"easing":"easeInQuad"},{"time":6.9,"value":0}]}]},{"clips":[{"asset":{"type":"shape","shape":"rect","color":"#FFFFFF","radius":0.5},"transform":{"size":{"width":320,"height":84},"position":{"x":380,"y":676}},"start":1.4,"length":6.6,"opacity":[{"time":0,"value":0,"easing":"easeOutQuad"},{"time":0.5,"value":1},{"time":6.25,"value":1,"easing":"easeInQuad"},{"time":6.6,"value":0}]}]},{"clips":[{"asset":{"type":"text","text":"Shop now","style":{"font":"Inter","size":34,"weight":600,"color":"#0F172A","animate":{"type":"fade","duration":0.5}}},"transform":{"position":{"x":380,"y":676}},"start":1.5,"length":6.5,"opacity":[{"time":0,"value":1},{"time":6.15,"value":1,"easing":"easeInQuad"},{"time":6.5,"value":0}]}]}]}}}'Returns immediately with a job id. Poll GET /jobs/{id} or register a webhook rather than blocking on the request.
