← Recipes
Real estate listing video from JSON
A tour of the house in three photos, under a listing card. The tags come in first, then the card, then the price, the address and the size, one after another.
How it is built
- 01
The photo tour
Three photos on one track, each held for three seconds with a slow push in, joined by half-second crossfades.
- 02
The tags
A white JUST LISTED pill and a dark open house pill, lined up with the edges of the listing card below.
- 03
The listing card
A white card fades in at 0.6 seconds. The price, the address and the beds line slide up in turn, with a hairline between them.
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 price, address, beds line, open house, and first photo.
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: "image", src: "https://cdn.rendobar.com/compose/player/media/re1.png" }, transform: { fit: "cover", scale: [ { time: 0, value: 1, easing: "linear" }, { time: 3, value: 1.06 } ] }, length: 3, start: 0 }, { type: "transition", transition: "crossfade", duration: 0.5 }, { asset: { type: "image", src: "https://cdn.rendobar.com/compose/player/media/re2.png" }, transform: { fit: "cover", scale: [ { time: 0, value: 1, easing: "linear" }, { time: 3, value: 1.06 } ] }, length: 3 }, { type: "transition", transition: "crossfade", duration: 0.5 }, { asset: { type: "image", src: "https://cdn.rendobar.com/compose/player/media/re3.png" }, transform: { fit: "cover", scale: [ { time: 0, value: 1, easing: "linear" }, { time: 3, value: 1.06 } ] }, length: 3 } ] }, { clips: [ { asset: { type: "shape", shape: "rect", color: "#FFFFFF", radius: 0.5 }, transform: { size: { width: 420, height: 96 }, position: { x: 490, y: 150 } }, start: 0.3, length: 7.7, opacity: [ { time: 0, value: 0, easing: "easeOutQuad" }, { time: 0.5, value: 1 }, { time: 7.35, value: 1, easing: "easeInQuad" }, { time: 7.7, value: 0 } ] } ] }, { clips: [ { asset: { type: "text", text: "JUST LISTED", style: { font: "Montserrat", size: 44, weight: 700, color: "#0F172A", animate: { type: "fade", duration: 0.5 } } }, transform: { position: { x: 490, y: 150 } }, start: 0.4, length: 7.6, opacity: [ { time: 0, value: 1 }, { time: 7.25, value: 1, easing: "easeInQuad" }, { time: 7.6, value: 0 } ] } ] }, { clips: [ { asset: { type: "shape", shape: "rect", color: "#0F172A", radius: 0.5 }, transform: { size: { width: 560, height: 96 }, position: { x: 1360, y: 150 } }, start: 0.5, length: 7.5, opacity: [ { time: 0, value: 0, easing: "easeOutQuad" }, { time: 0.5, value: 1 }, { time: 7.15, value: 1, easing: "easeInQuad" }, { time: 7.5, value: 0 } ] } ] }, { clips: [ { asset: { type: "text", text: "Open house · Sat 2 PM", style: { font: "Inter", size: 40, weight: 600, color: "#FFFFFF", animate: { type: "fade", duration: 0.5 } } }, transform: { position: { x: 1360, y: 150 } }, start: 0.6, length: 7.4, opacity: [ { time: 0, value: 1 }, { time: 7.05, value: 1, easing: "easeInQuad" }, { time: 7.4, value: 0 } ] } ] }, { clips: [ { asset: { type: "shape", shape: "rect", color: "#FFFFFF", radius: 0.08, shadow: { color: "#00000040", blur: 30, x: 0, y: 12 } }, transform: { size: { width: 1360, height: 330 }, position: { x: 960, y: 840 } }, start: 0.6, length: 7.4, opacity: [ { time: 0, value: 0, easing: "easeOutQuad" }, { time: 0.5, value: 1 }, { time: 7.05, value: 1, easing: "easeInQuad" }, { time: 7.4, value: 0 } ] } ] }, { clips: [ { asset: { type: "text", text: "$1,250,000", style: { font: "Montserrat", size: 96, weight: 700, color: "#0F172A", animate: { type: "slideUp", duration: 0.5 } } }, transform: { position: { x: 960, y: 762 } }, start: 0.8, length: 7.2, opacity: [ { time: 0, value: 1 }, { time: 6.85, value: 1, easing: "easeInQuad" }, { time: 7.2, value: 0 } ] } ] }, { clips: [ { asset: { type: "text", text: "24 Maple Grove, Austin, TX", style: { font: "Inter", size: 46, weight: 400, color: "#475569", animate: { type: "slideUp", duration: 0.5 } } }, transform: { position: { x: 960, y: 838 } }, start: 1, length: 7, opacity: [ { time: 0, value: 1 }, { time: 6.65, value: 1, easing: "easeInQuad" }, { time: 7, value: 0 } ] } ] }, { clips: [ { asset: { type: "shape", shape: "rect", color: "#E2E8F0" }, transform: { size: { width: 1160, height: 2 }, position: { x: 960, y: 880 } }, start: 1.1, length: 6.9, opacity: [ { time: 0, value: 0, easing: "easeOutQuad" }, { time: 0.5, value: 1 }, { time: 6.55, value: 1, easing: "easeInQuad" }, { time: 6.9, value: 0 } ] } ] }, { clips: [ { asset: { type: "text", text: "4 beds · 3 baths · 2,400 sq ft", style: { font: "Montserrat", size: 50, weight: 600, color: "#0F172A", animate: { type: "slideUp", duration: 0.5 } } }, transform: { position: { x: 960, y: 934 } }, start: 1.2, length: 6.8, opacity: [ { time: 0, value: 1 }, { time: 6.45, value: 1, easing: "easeInQuad" }, { time: 6.8, 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":"image","src":"https://cdn.rendobar.com/compose/player/media/re1.png"},"transform":{"fit":"cover","scale":[{"time":0,"value":1,"easing":"linear"},{"time":3,"value":1.06}]},"length":3,"start":0},{"type":"transition","transition":"crossfade","duration":0.5},{"asset":{"type":"image","src":"https://cdn.rendobar.com/compose/player/media/re2.png"},"transform":{"fit":"cover","scale":[{"time":0,"value":1,"easing":"linear"},{"time":3,"value":1.06}]},"length":3},{"type":"transition","transition":"crossfade","duration":0.5},{"asset":{"type":"image","src":"https://cdn.rendobar.com/compose/player/media/re3.png"},"transform":{"fit":"cover","scale":[{"time":0,"value":1,"easing":"linear"},{"time":3,"value":1.06}]},"length":3}]},{"clips":[{"asset":{"type":"shape","shape":"rect","color":"#FFFFFF","radius":0.5},"transform":{"size":{"width":420,"height":96},"position":{"x":490,"y":150}},"start":0.3,"length":7.7,"opacity":[{"time":0,"value":0,"easing":"easeOutQuad"},{"time":0.5,"value":1},{"time":7.35,"value":1,"easing":"easeInQuad"},{"time":7.7,"value":0}]}]},{"clips":[{"asset":{"type":"text","text":"JUST LISTED","style":{"font":"Montserrat","size":44,"weight":700,"color":"#0F172A","animate":{"type":"fade","duration":0.5}}},"transform":{"position":{"x":490,"y":150}},"start":0.4,"length":7.6,"opacity":[{"time":0,"value":1},{"time":7.25,"value":1,"easing":"easeInQuad"},{"time":7.6,"value":0}]}]},{"clips":[{"asset":{"type":"shape","shape":"rect","color":"#0F172A","radius":0.5},"transform":{"size":{"width":560,"height":96},"position":{"x":1360,"y":150}},"start":0.5,"length":7.5,"opacity":[{"time":0,"value":0,"easing":"easeOutQuad"},{"time":0.5,"value":1},{"time":7.15,"value":1,"easing":"easeInQuad"},{"time":7.5,"value":0}]}]},{"clips":[{"asset":{"type":"text","text":"Open house · Sat 2 PM","style":{"font":"Inter","size":40,"weight":600,"color":"#FFFFFF","animate":{"type":"fade","duration":0.5}}},"transform":{"position":{"x":1360,"y":150}},"start":0.6,"length":7.4,"opacity":[{"time":0,"value":1},{"time":7.05,"value":1,"easing":"easeInQuad"},{"time":7.4,"value":0}]}]},{"clips":[{"asset":{"type":"shape","shape":"rect","color":"#FFFFFF","radius":0.08,"shadow":{"color":"#00000040","blur":30,"x":0,"y":12}},"transform":{"size":{"width":1360,"height":330},"position":{"x":960,"y":840}},"start":0.6,"length":7.4,"opacity":[{"time":0,"value":0,"easing":"easeOutQuad"},{"time":0.5,"value":1},{"time":7.05,"value":1,"easing":"easeInQuad"},{"time":7.4,"value":0}]}]},{"clips":[{"asset":{"type":"text","text":"$1,250,000","style":{"font":"Montserrat","size":96,"weight":700,"color":"#0F172A","animate":{"type":"slideUp","duration":0.5}}},"transform":{"position":{"x":960,"y":762}},"start":0.8,"length":7.2,"opacity":[{"time":0,"value":1},{"time":6.85,"value":1,"easing":"easeInQuad"},{"time":7.2,"value":0}]}]},{"clips":[{"asset":{"type":"text","text":"24 Maple Grove, Austin, TX","style":{"font":"Inter","size":46,"weight":400,"color":"#475569","animate":{"type":"slideUp","duration":0.5}}},"transform":{"position":{"x":960,"y":838}},"start":1,"length":7,"opacity":[{"time":0,"value":1},{"time":6.65,"value":1,"easing":"easeInQuad"},{"time":7,"value":0}]}]},{"clips":[{"asset":{"type":"shape","shape":"rect","color":"#E2E8F0"},"transform":{"size":{"width":1160,"height":2},"position":{"x":960,"y":880}},"start":1.1,"length":6.9,"opacity":[{"time":0,"value":0,"easing":"easeOutQuad"},{"time":0.5,"value":1},{"time":6.55,"value":1,"easing":"easeInQuad"},{"time":6.9,"value":0}]}]},{"clips":[{"asset":{"type":"text","text":"4 beds · 3 baths · 2,400 sq ft","style":{"font":"Montserrat","size":50,"weight":600,"color":"#0F172A","animate":{"type":"slideUp","duration":0.5}}},"transform":{"position":{"x":960,"y":934}},"start":1.2,"length":6.8,"opacity":[{"time":0,"value":1},{"time":6.45,"value":1,"easing":"easeInQuad"},{"time":6.8,"value":0}]}]}]}}}'Returns immediately with a job id. Poll GET /jobs/{id} or register a webhook rather than blocking on the request.
