{
"timeline": {
"background": "#FFFFFF",
"tracks": [
{
"clips": [
{
"length": "end",
"asset": {
"type": "audio",
"src": "{{ AUDIO_SRC }}",
"volume": 1
},
"start": 0
}
]
},
{
"clips": [
{
"length": "end",
"asset": {
"type": "image",
"src": "{{ IMAGE_5 }}"
},
"start": 3.9461,
"scale": 0.55,
"offset": {
"y": 0.169,
"x": -0.092
},
"transition": {
"in": "fadeFast"
},
"position": "center"
}
]
},
{
"clips": [
{
"length": 1.2,
"asset": {
"type": "image",
"src": "{{ IMAGE_4 }}"
},
"start": 2.9289,
"transition": {
"in": "fadeFast",
"out": "fadeFast"
},
"scale": 0.55,
"offset": {
"y": 0.169,
"x": -0.092
},
"position": "center"
}
]
},
{
"clips": [
{
"length": 1.41,
"asset": {
"type": "image",
"src": "{{ IMAGE_3 }}"
},
"start": 1.93,
"scale": 0.55,
"offset": {
"y": 0.169,
"x": -0.092
},
"transition": {
"in": "fadeFast",
"out": "fadeFast"
}
}
]
},
{
"clips": [
{
"length": 1.51,
"asset": {
"type": "image",
"src": "{{ IMAGE_2 }}"
},
"start": 0.8211,
"scale": 0.55,
"offset": {
"y": 0.169,
"x": -0.092
},
"transition": {
"in": "fadeFast",
"out": "fadeFast"
}
}
]
},
{
"clips": [
{
"length": 1.2,
"asset": {
"type": "image",
"src": "{{ IMAGE_1 }}"
},
"start": 0,
"offset": {
"y": 0.169,
"x": -0.092
},
"scale": 0.55,
"position": "center",
"transition": {
"out": "fadeFast"
}
}
]
},
{
"clips": [
{
"asset": {
"type": "text",
"text": "",
"alignment": {
"horizontal": "center",
"vertical": "center"
},
"font": {
"color": "#000000",
"family": "Montserrat SemiBold",
"size": 24,
"lineHeight": 1
},
"width": 430,
"height": 400,
"background": {
"color": "{{ FONT_COLOR }}"
}
},
"start": 0,
"length": "end",
"offset": {
"x": [
{
"start": 0,
"length": 0.86,
"from": 0.348,
"to": 0.348,
"interpolation": "linear"
},
{
"start": 0.86,
"length": 0.24,
"from": 0.348,
"to": 0.348,
"interpolation": "linear"
},
{
"start": 1.1,
"length": 0.78,
"from": 0.348,
"to": 0.348,
"interpolation": "linear"
},
{
"start": 1.88,
"length": 0.26,
"from": 0.348,
"to": 0.348,
"interpolation": "linear"
},
{
"start": 2.14,
"length": 0.75,
"from": 0.348,
"to": 0.348,
"interpolation": "linear"
},
{
"start": 2.89,
"length": 0.28,
"from": 0.348,
"to": 0.348,
"interpolation": "linear"
},
{
"start": 3.17,
"length": 0.79,
"from": 0.348,
"to": 0.348,
"interpolation": "linear"
},
{
"start": 3.96,
"length": 0.29,
"from": 0.348,
"to": 0.348,
"interpolation": "linear"
},
{
"start": 4.25,
"length": 0.75,
"from": 0.348,
"to": 0.348,
"interpolation": "linear"
}
],
"y": [
{
"start": 0,
"length": 0.86,
"from": 0.367,
"to": 0.362,
"interpolation": "bezier",
"easing": "ease"
},
{
"start": 0.86,
"length": 0.24,
"from": 0.362,
"to": 0.181,
"interpolation": "bezier",
"easing": "ease"
},
{
"start": 1.1,
"length": 0.78,
"from": 0.181,
"to": 0.181,
"interpolation": "bezier",
"easing": "ease"
},
{
"start": 1.88,
"length": 0.26,
"from": 0.181,
"to": -0.005,
"interpolation": "bezier",
"easing": "ease"
},
{
"start": 2.14,
"length": 0.75,
"from": -0.005,
"to": 0,
"interpolation": "bezier",
"easing": "ease"
},
{
"start": 2.89,
"length": 0.28,
"from": 0,
"to": -0.187,
"interpolation": "bezier",
"easing": "ease"
},
{
"start": 3.17,
"length": 0.79,
"from": -0.187,
"to": -0.19,
"interpolation": "bezier",
"easing": "ease"
},
{
"start": 3.96,
"length": 0.29,
"from": -0.19,
"to": -0.37,
"interpolation": "bezier",
"easing": "ease"
},
{
"start": 4.25,
"length": 0.75,
"from": -0.37,
"to": -0.37,
"interpolation": "bezier",
"easing": "ease"
}
]
},
"position": "center",
"opacity": [
{
"start": 0,
"length": 0.86,
"from": 1,
"to": 1,
"interpolation": "linear"
},
{
"start": 0.86,
"length": 0.24,
"from": 1,
"to": 1,
"interpolation": "linear"
},
{
"start": 1.1,
"length": 0.78,
"from": 1,
"to": 1,
"interpolation": "linear"
},
{
"start": 1.88,
"length": 0.26,
"from": 1,
"to": 1,
"interpolation": "linear"
},
{
"start": 2.14,
"length": 0.75,
"from": 1,
"to": 1,
"interpolation": "linear"
},
{
"start": 2.89,
"length": 0.28,
"from": 1,
"to": 1,
"interpolation": "linear"
},
{
"start": 3.17,
"length": 0.79,
"from": 1,
"to": 1,
"interpolation": "linear"
},
{
"start": 3.96,
"length": 0.29,
"from": 1,
"to": 1,
"interpolation": "linear"
},
{
"start": 4.25,
"length": 0.75,
"from": 1,
"to": 1,
"interpolation": "linear"
}
],
"scale": [
{
"start": 0,
"length": 0.86,
"from": 1,
"to": 1,
"interpolation": "linear"
},
{
"start": 0.86,
"length": 0.24,
"from": 1,
"to": 1,
"interpolation": "linear"
},
{
"start": 1.1,
"length": 0.78,
"from": 1,
"to": 1,
"interpolation": "linear"
},
{
"start": 1.88,
"length": 0.26,
"from": 1,
"to": 1,
"interpolation": "linear"
},
{
"start": 2.14,
"length": 0.75,
"from": 1,
"to": 1,
"interpolation": "linear"
},
{
"start": 2.89,
"length": 0.28,
"from": 1,
"to": 1,
"interpolation": "linear"
},
{
"start": 3.17,
"length": 0.79,
"from": 1,
"to": 1,
"interpolation": "linear"
},
{
"start": 3.96,
"length": 0.29,
"from": 1,
"to": 1,
"interpolation": "linear"
},
{
"start": 4.25,
"length": 0.75,
"from": 1,
"to": 1,
"interpolation": "linear"
}
],
"transform": {
"rotate": {
"angle": [
{
"start": 0,
"length": 0.86,
"from": 0,
"to": 0,
"interpolation": "linear"
},
{
"start": 0.86,
"length": 0.24,
"from": 0,
"to": 0,
"interpolation": "linear"
},
{
"start": 1.1,
"length": 0.78,
"from": 0,
"to": 0,
"interpolation": "linear"
},
{
"start": 1.88,
"length": 0.26,
"from": 0,
"to": 0,
"interpolation": "linear"
},
{
"start": 2.14,
"length": 0.75,
"from": 0,
"to": 0,
"interpolation": "linear"
},
{
"start": 2.89,
"length": 0.28,
"from": 0,
"to": 0,
"interpolation": "linear"
},
{
"start": 3.17,
"length": 0.79,
"from": 0,
"to": 0,
"interpolation": "linear"
},
{
"start": 3.96,
"length": 0.29,
"from": 0,
"to": 0,
"interpolation": "linear"
},
{
"start": 4.25,
"length": 0.75,
"from": 0,
"to": 0,
"interpolation": "linear"
}
]
}
}
},
{
"asset": {
"type": "luma",
"src": "https://templates.shotstack.io/promo-template-sale-announcement-image-gallery/6d00907d-820c-4f9c-a834-d4d07b67cc25/source.png"
},
"start": 0,
"length": 5
}
]
},
{
"clips": [
{
"asset": {
"type": "text",
"text": "{{Web}}",
"alignment": {
"horizontal": "left",
"vertical": "center"
},
"font": {
"color": "{{ FONT_COLOR }}",
"family": "Montserrat SemiBold",
"size": "35",
"lineHeight": 1
},
"width": 600,
"height": 72
},
"start": 0,
"length": "end",
"offset": {
"x": -0.117,
"y": -0.426
},
"position": "center",
"transition": {
"in": "slideUp"
}
}
]
},
{
"clips": [
{
"asset": {
"type": "text",
"text": "{{CTA}}",
"alignment": {
"horizontal": "center",
"vertical": "center"
},
"font": {
"color": "{{ BACKGROUND_COLOR }}",
"family": "Montserrat ExtraBold",
"size": "50",
"lineHeight": 1
},
"width": 500,
"height": 100,
"background": {
"color": "{{ FONT_COLOR }}"
}
},
"start": 0,
"length": "end",
"offset": {
"x": -0.162,
"y": -0.353
},
"position": "center",
"transition": {
"in": "slideUp"
}
}
]
},
{
"clips": [
{
"asset": {
"type": "text",
"text": "{{Discount}}",
"alignment": {
"horizontal": "left",
"vertical": "center"
},
"font": {
"color": "{{ FONT_COLOR }}",
"family": "Montserrat SemiBold",
"size": "35",
"lineHeight": 1
},
"width": 500,
"height": 72
},
"start": 0,
"length": "end",
"offset": {
"x": -0.162,
"y": -0.264
},
"position": "center",
"transition": {
"in": "slideUp"
}
}
]
},
{
"clips": [
{
"asset": {
"type": "text",
"text": "{{Tittle}}",
"alignment": {
"horizontal": "left",
"vertical": "top"
},
"font": {
"color": "{{ FONT_COLOR }}",
"family": "Montserrat ExtraBold",
"size": "120",
"lineHeight": 1
},
"width": 650,
"height": 300
},
"start": 0,
"length": "end",
"offset": {
"x": -0.093,
"y": -0.19
},
"position": "center",
"transition": {
"in": "slideUp"
}
}
]
},
{
"clips": [
{
"length": "end",
"asset": {
"type": "image",
"src": "{{ IMAGE_5 }}"
},
"start": 0,
"scale": 0.16,
"offset": {
"x": 0.348,
"y": -0.365
},
"position": "center"
}
]
},
{
"clips": [
{
"length": "end",
"asset": {
"type": "image",
"src": "{{ IMAGE_4 }}"
},
"start": 0,
"scale": 0.16,
"offset": {
"x": 0.348,
"y": -0.186
},
"position": "center"
}
]
},
{
"clips": [
{
"length": "end",
"asset": {
"type": "image",
"src": "{{ IMAGE_3 }}"
},
"start": 0,
"scale": 0.16,
"offset": {
"x": 0.348,
"y": -0.005
},
"position": "center"
}
]
},
{
"clips": [
{
"length": "end",
"asset": {
"type": "image",
"src": "{{ IMAGE_2 }}"
},
"start": 0,
"scale": 0.16,
"offset": {
"x": 0.348,
"y": 0.179
},
"position": "center"
}
]
},
{
"clips": [
{
"length": "end",
"asset": {
"type": "image",
"src": "{{ IMAGE_1 }}"
},
"start": 0,
"offset": {
"y": 0.364,
"x": 0.348
},
"scale": 0.16,
"position": "center"
}
]
},
{
"clips": [
{
"asset": {
"type": "text",
"text": "",
"alignment": {
"horizontal": "center",
"vertical": "center"
},
"font": {
"color": "#000000",
"family": "Montserrat SemiBold",
"size": 24,
"lineHeight": 1
},
"width": 1080,
"height": 1920,
"background": {
"color": "{{ BACKGROUND_COLOR }}",
"opacity": 1
}
},
"start": 0,
"length": 5,
"position": "center"
}
]
}
]
},
"output": {
"format": "mp4",
"fps": 25,
"size": {
"width": 1080,
"height": 1920
}
},
"merge": [
{
"find": "Tittle",
"replace": "SMART CHOICE"
},
{
"find": "Discount",
"replace": "SAVE BIG – UP TO 50% OFF"
},
{
"find": "CTA",
"replace": "ORDER NOW"
},
{
"find": "Web",
"replace": "WWW.HOMETOOLCHEF.COM"
},
{
"find": "IMAGE_1",
"replace": "https://templates.shotstack.io/promo-template-sale-announcement-image-gallery/4614c2b5-cac0-4670-a262-12e00922fa97/source.png"
},
{
"find": "IMAGE_2",
"replace": "https://templates.shotstack.io/promo-template-sale-announcement-image-gallery/98104216-a6db-4238-b909-084956f8cb28/source.png"
},
{
"find": "IMAGE_3",
"replace": "https://templates.shotstack.io/promo-template-sale-announcement-image-gallery/77fc4a5f-0887-4d83-bb51-d6b55f3ebb8a/source.png"
},
{
"find": "IMAGE_4",
"replace": "https://templates.shotstack.io/promo-template-sale-announcement-image-gallery/ccd125de-d1c0-4ea3-b6e7-e02abb3a332a/source.png"
},
{
"find": "IMAGE_5",
"replace": "https://templates.shotstack.io/promo-template-sale-announcement-image-gallery/5ded70c2-13a4-460c-8f0e-4a81618ff00c/source.png"
},
{
"find": "FONT_COLOR",
"replace": "#ffffff"
},
{
"find": "BACKGROUND_COLOR",
"replace": "#474343"
},
{
"find": "AUDIO_SRC",
"replace": "https://templates.shotstack.io/promo-template-sale-announcement-image-gallery/8054862d-e1b6-4e81-b1d7-79d45b3aebea/source.mp3"
}
]
}Elevate your marketing campaigns with the Dynamic Offer Showcase Template, a professionally designed layout perfect for announcing sales, special offers, and limited-time events. This template is crafted to capture your audience's attention instantly and drive conversions effectively. The design features a powerful and clean structure: a large, high-impact hero image area to display your main promotional graphic, complemented by a sleek vertical "filmstrip" gallery on the side. This side gallery is perfect for showcasing different angles, related products, or key highlights of your offer, giving customers a comprehensive view without cluttering the main message. The lower section is a dedicated promotional block with bold, attention-grabbing typography for your headline, a clear space for the offer details (like "Up to 50% Off" or "Weekend Special"), and a prominent "Order Now" call-to-action button designed to convert viewers into customers. This template is fully customizable and user-friendly. Effortlessly swap out the images, edit the text, and adjust the colors to align perfectly with your brand identity. It's the ideal, ready-to-use solution for any business looking to create a high-quality, effective promotional graphic for social media, email newsletters, or website banners.
No account needed until you render.
Render with your AI assistant
Add the Shotstack MCP server to your editor, then paste the prompt
| Output | MP4 |
|---|---|
| Size | 1080 × 1920 (9:16) |
| Length | 5s |
| Frame rate | 25 fps |
| Tracks / clips | 17 / 18 |
| Assets used | 1 audio, 10 image, 1 luma, 6 text |
| Soundtrack | no |
| Merge fields | 12 |
Send a merge array with your values for these fields:
| Field | Default value |
|---|---|
{{ Tittle }} | SMART CHOICE |
{{ Discount }} | SAVE BIG – UP TO 50% OFF |
{{ CTA }} | ORDER NOW |
{{ Web }} | WWW.HOMETOOLCHEF.COM |
{{ IMAGE_1 }} | https://templates.shotstack.io/promo-template-sale-announcement-image-gallery/4614c2b5-cac0-4670-a262-12e00922fa97/source.png |
{{ IMAGE_2 }} | https://templates.shotstack.io/promo-template-sale-announcement-image-gallery/98104216-a6db-4238-b909-084956f8cb28/source.png |
{{ IMAGE_3 }} | https://templates.shotstack.io/promo-template-sale-announcement-image-gallery/77fc4a5f-0887-4d83-bb51-d6b55f3ebb8a/source.png |
{{ IMAGE_4 }} | https://templates.shotstack.io/promo-template-sale-announcement-image-gallery/ccd125de-d1c0-4ea3-b6e7-e02abb3a332a/source.png |
{{ IMAGE_5 }} | https://templates.shotstack.io/promo-template-sale-announcement-image-gallery/5ded70c2-13a4-460c-8f0e-4a81618ff00c/source.png |
{{ FONT_COLOR }} | #ffffff |
{{ BACKGROUND_COLOR }} | #474343 |
{{ AUDIO_SRC }} | https://templates.shotstack.io/promo-template-sale-announcement-image-gallery/8054862d-e1b6-4e81-b1d7-79d45b3aebea/source.mp3 |
Save the JSON above as template.json, then render in the free sandbox:
# Save the JSON above as template.json, then:
curl -X POST https://api.shotstack.io/edit/stage/render \
-H "x-api-key: $SHOTSTACK_API_KEY" \
-H "Content-Type: application/json" \
-d @template.json
# Poll until status is "done", then download response.url
curl https://api.shotstack.io/edit/stage/render/RENDER_ID -H "x-api-key: $SHOTSTACK_API_KEY"import { readFileSync } from 'node:fs';
const headers = { 'x-api-key': process.env.SHOTSTACK_API_KEY, 'Content-Type': 'application/json' };
const edit = JSON.parse(readFileSync('template.json', 'utf8'));
const { response } = await fetch('https://api.shotstack.io/edit/stage/render', {
method: 'POST', headers, body: JSON.stringify(edit)
}).then((r) => r.json());
let render;
do {
await new Promise((r) => setTimeout(r, 3000));
render = (await fetch(`https://api.shotstack.io/edit/stage/render/${response.id}`, { headers }).then((r) => r.json())).response;
} while (!['done', 'failed'].includes(render.status));
console.log(render.status, render.url);import json, os, time, requests
headers = {"x-api-key": os.environ["SHOTSTACK_API_KEY"]}
with open("template.json") as f:
edit = json.load(f)
render_id = requests.post("https://api.shotstack.io/edit/stage/render", json=edit, headers=headers).json()["response"]["id"]
while True:
render = requests.get(f"https://api.shotstack.io/edit/stage/render/{render_id}", headers=headers).json()["response"]
if render["status"] in ("done", "failed"):
break
time.sleep(3)
print(render["status"], render.get("url"))npm install -g @shotstack/cli
export SHOTSTACK_API_KEY=your_sandbox_key
shotstack validate template.json # offline schema check, free
shotstack render template.json --env stage --watchSandbox renders are free and watermarked. Production: the v1 endpoint and key. SDKs
Loop over your product feed and render a promo per SKU — prices and images always current.
Paste into Claude, ChatGPT or Cursor — your AI assistant builds the workflow around your data.
Node.js, one render per CSV row, wired to this template's 12 merge fields. Setup steps in the header.
Guides: Bulk-create from a CSV · Webhooks · Templates endpoint · Render your first video
AI assistants: Markdown () · · · CLI skill: SKILL.md () · MCP server
Use the 12 merge fields listed above. Send a merge array with your own values for each field and the API swaps them in at render time, so one template can produce thousands of unique videos.
Yes. It renders vertical 1080×1920 (9:16), the format those platforms expect. Change output.size or output.aspectRatio in the JSON if you also need a square or landscape cut.
Yes. The template uses 10 images; replace each image asset's src with a public URL of your own file (JPG, PNG or WebP). Keep the timing and effects, or adjust them per clip.
Edit the text on each text asset in the JSON. Fonts come from the timeline fonts list or the asset's font family; add your own font file URL to timeline.fonts to use a brand typeface.
