← Recipes
Product sale video with a discount badge
The product on its brand colour. The name comes in, the old price is struck through, the new price lands beside it, and a discount badge pops in by the heel.
How it is built
- 01
The product shot
The photo fills the frame, settles from 108% to 100% in the first 1.2 seconds, then keeps drifting slowly.
- 02
The name
The sale line fades in and the product name slides up under it.
- 03
The prices
The old price in a soft tint with a thin bar across it, and the new price large beside it.
- 04
The button
A white pill with the label in the brand colour.
- 05
The badge
A yellow circle and the discount, both scaling up from almost nothing with a small overshoot, the text turned 12 degrees.
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 product name, old price, new price, discount, and product 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/sneaker3.png" }, transform: { fit: "cover", scale: [ { time: 0, value: 1.08, easing: "easeOutQuint" }, { time: 1.2, value: 1 }, { time: 8, value: 0.97 } ] }, start: 0, length: 8 } ] }, { clips: [ { asset: { type: "text", text: "SUMMER SALE", style: { font: "Montserrat", size: 40, weight: 700, color: "#FFF1EE", animate: { type: "fade", duration: 0.5 } } }, transform: { position: { x: 520, y: 330 } }, start: 0.3, length: 7.7, opacity: [ { time: 0, value: 1 }, { time: 7.35, value: 1, easing: "easeInQuad" }, { time: 7.7, value: 0 } ] } ] }, { clips: [ { asset: { type: "text", text: "Air Runner 2", style: { font: "Montserrat", size: 112, weight: 800, color: "#FFFFFF", animate: { type: "slideUp", duration: 0.6 } } }, transform: { position: { x: 520, y: 430 } }, start: 0.45, length: 7.55, opacity: [ { time: 0, value: 1 }, { time: 7.2, value: 1, easing: "easeInQuad" }, { time: 7.55, value: 0 } ] } ] }, { clips: [ { asset: { type: "text", text: "$140", style: { font: "Inter", size: 60, weight: 500, color: "#FFD9D2", animate: { type: "fade", duration: 0.5 } } }, transform: { position: { x: 360, y: 560 } }, 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: "shape", shape: "rect", color: "#FFF1EE" }, transform: { size: { width: 150, height: 6 }, position: { x: 360, y: 562 } }, start: 1, length: 7, opacity: [ { time: 0, value: 0, easing: "easeOutQuad" }, { time: 0.3, value: 1 }, { time: 6.65, value: 1, easing: "easeInQuad" }, { time: 7, value: 0 } ] } ] }, { clips: [ { asset: { type: "text", text: "$98", style: { font: "Montserrat", size: 128, weight: 800, color: "#FFFFFF", animate: { type: "slideUp", duration: 0.6 } } }, transform: { position: { x: 600, y: 552 } }, start: 0.9, length: 7.1, opacity: [ { time: 0, value: 1 }, { time: 6.75, value: 1, easing: "easeInQuad" }, { time: 7.1, value: 0 } ] } ] }, { clips: [ { asset: { type: "shape", shape: "rect", color: "#FFFFFF", radius: 0.5, shadow: { color: "#0000002E", blur: 20, x: 0, y: 8 } }, transform: { size: { width: 340, height: 88 }, position: { x: 520, y: 700 } }, start: 1.3, length: 6.7, opacity: [ { time: 0, value: 0, easing: "easeOutQuad" }, { time: 0.5, value: 1 }, { time: 6.35, value: 1, easing: "easeInQuad" }, { time: 6.7, value: 0 } ] } ] }, { clips: [ { asset: { type: "text", text: "Shop now", style: { font: "Montserrat", size: 38, weight: 700, color: "#E8503D", animate: { type: "fade", duration: 0.5 } } }, transform: { position: { x: 520, y: 700 } }, start: 1.4, length: 6.6, opacity: [ { time: 0, value: 1 }, { time: 6.25, value: 1, easing: "easeInQuad" }, { time: 6.6, value: 0 } ] } ] }, { clips: [ { asset: { type: "shape", shape: "circle", color: "#FDE047" }, transform: { size: { width: 230 }, position: { x: 1265, y: 290 }, scale: [ { time: 0, value: 0.01, easing: "easeOutBack" }, { time: 0.5, value: 1 } ] }, 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: "text", text: "-30%", style: { font: "Anton", size: 72, weight: 400, color: "#111827" } }, transform: { position: { x: 1265, y: 290 }, rotate: -12, scale: [ { time: 0, value: 0.01, easing: "easeOutBack" }, { time: 0.5, value: 1 } ] }, start: 1.15, length: 6.85, opacity: [ { time: 0, value: 1 }, { time: 6.5, value: 1, easing: "easeInQuad" }, { time: 6.85, 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/sneaker3.png"},"transform":{"fit":"cover","scale":[{"time":0,"value":1.08,"easing":"easeOutQuint"},{"time":1.2,"value":1},{"time":8,"value":0.97}]},"start":0,"length":8}]},{"clips":[{"asset":{"type":"text","text":"SUMMER SALE","style":{"font":"Montserrat","size":40,"weight":700,"color":"#FFF1EE","animate":{"type":"fade","duration":0.5}}},"transform":{"position":{"x":520,"y":330}},"start":0.3,"length":7.7,"opacity":[{"time":0,"value":1},{"time":7.35,"value":1,"easing":"easeInQuad"},{"time":7.7,"value":0}]}]},{"clips":[{"asset":{"type":"text","text":"Air Runner 2","style":{"font":"Montserrat","size":112,"weight":800,"color":"#FFFFFF","animate":{"type":"slideUp","duration":0.6}}},"transform":{"position":{"x":520,"y":430}},"start":0.45,"length":7.55,"opacity":[{"time":0,"value":1},{"time":7.2,"value":1,"easing":"easeInQuad"},{"time":7.55,"value":0}]}]},{"clips":[{"asset":{"type":"text","text":"$140","style":{"font":"Inter","size":60,"weight":500,"color":"#FFD9D2","animate":{"type":"fade","duration":0.5}}},"transform":{"position":{"x":360,"y":560}},"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":"shape","shape":"rect","color":"#FFF1EE"},"transform":{"size":{"width":150,"height":6},"position":{"x":360,"y":562}},"start":1,"length":7,"opacity":[{"time":0,"value":0,"easing":"easeOutQuad"},{"time":0.3,"value":1},{"time":6.65,"value":1,"easing":"easeInQuad"},{"time":7,"value":0}]}]},{"clips":[{"asset":{"type":"text","text":"$98","style":{"font":"Montserrat","size":128,"weight":800,"color":"#FFFFFF","animate":{"type":"slideUp","duration":0.6}}},"transform":{"position":{"x":600,"y":552}},"start":0.9,"length":7.1,"opacity":[{"time":0,"value":1},{"time":6.75,"value":1,"easing":"easeInQuad"},{"time":7.1,"value":0}]}]},{"clips":[{"asset":{"type":"shape","shape":"rect","color":"#FFFFFF","radius":0.5,"shadow":{"color":"#0000002E","blur":20,"x":0,"y":8}},"transform":{"size":{"width":340,"height":88},"position":{"x":520,"y":700}},"start":1.3,"length":6.7,"opacity":[{"time":0,"value":0,"easing":"easeOutQuad"},{"time":0.5,"value":1},{"time":6.35,"value":1,"easing":"easeInQuad"},{"time":6.7,"value":0}]}]},{"clips":[{"asset":{"type":"text","text":"Shop now","style":{"font":"Montserrat","size":38,"weight":700,"color":"#E8503D","animate":{"type":"fade","duration":0.5}}},"transform":{"position":{"x":520,"y":700}},"start":1.4,"length":6.6,"opacity":[{"time":0,"value":1},{"time":6.25,"value":1,"easing":"easeInQuad"},{"time":6.6,"value":0}]}]},{"clips":[{"asset":{"type":"shape","shape":"circle","color":"#FDE047"},"transform":{"size":{"width":230},"position":{"x":1265,"y":290},"scale":[{"time":0,"value":0.01,"easing":"easeOutBack"},{"time":0.5,"value":1}]},"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":"text","text":"-30%","style":{"font":"Anton","size":72,"weight":400,"color":"#111827"}},"transform":{"position":{"x":1265,"y":290},"rotate":-12,"scale":[{"time":0,"value":0.01,"easing":"easeOutBack"},{"time":0.5,"value":1}]},"start":1.15,"length":6.85,"opacity":[{"time":0,"value":1},{"time":6.5,"value":1,"easing":"easeInQuad"},{"time":6.85,"value":0}]}]}]}}}'Returns immediately with a job id. Poll GET /jobs/{id} or register a webhook rather than blocking on the request.
