Product Hunt Launch
Bold coral launch-day promo with video hook; swap product, tagline, three feature points, handle, and toggle the launch offer badge.
- Type
- Video
- Format
- Instagram Reel · 9:16
- Orientation
- Portrait
- Duration
- 12.5s
- Scenes
- 3
- Render cost
- $0.00313 / render
VariablesConditional scenesvideo
Open in editor
Free template · opens in the editor, no account required.
Customize Product Hunt Launch
Product Hunt Launch is a ready-to-render SaaS / dev tools video design formatted for Instagram Reel · 9:16 with 3 scenes and support for variables, conditional scenes, video. Open it in the editor to replace its copy and media, then render variations through the Zvid API.
15 variables: Every value below is a variable you can override — send them in the variables field of the render request (or edit them in the editor) to generate on-brand versions at scale.
kickerTextWE'RE LIVE ON PRODUCT HUNT
productNameTextTempo
taglineTextThe calendar that plans your day for you.
dateTextTODAY ONLY
point1TextAI blocks your deep-work hours automatically
point2TextSyncs every calendar into one clean view
point3TextReschedules itself when meetings move
showOfferToggleon
offerTextTextUpvoters get 3 months of Pro free
ctaTextTextHunt us today
handleTextproducthunt.com/tempo
accentColor#FF6B35
heroVideoMedia URLteamImageMedia URLmusicUrlMedia URLThe exact JSON payload
This is the full render config — POST it to the API, or open it in the editor to tweak.
{
"name": "saas-product-hunt-launch",
"resolution": "instagram-reel",
"frameRate": 30,
"backgroundColor": "#1A0E08",
"outputFormat": "mp4",
"variables": {
"kicker": "WE'RE LIVE ON PRODUCT HUNT",
"productName": "Tempo",
"tagline": "The calendar that plans your day for you.",
"date": "TODAY ONLY",
"point1": "AI blocks your deep-work hours automatically",
"point2": "Syncs every calendar into one clean view",
"point3": "Reschedules itself when meetings move",
"showOffer": true,
"offerText": "Upvoters get 3 months of Pro free",
"ctaText": "Hunt us today",
"handle": "producthunt.com/tempo",
"accent": "#FF6B35",
"heroVideo": "https://videos.pexels.com/video-files/7252825/7252825-hd_1080_1920_25fps.mp4",
"teamImage": "https://images.pexels.com/photos/4623328/pexels-photo-4623328.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"musicUrl": "https://cdn.pixabay.com/audio/2026/02/24/audio_3f375fdf97.mp3"
},
"scenes": [
{
"id": "hook",
"duration": 4,
"backgroundColor": "#1A0E08",
"transition": "smoothup",
"transitionId": "features",
"transitionDuration": 0.55,
"visuals": [
{
"type": "VIDEO",
"src": "{{heroVideo}}",
"width": 1080,
"height": 1920,
"position": "center-center",
"resize": "cover",
"volume": 0,
"track": 0,
"enterBegin": 0,
"exitEnd": 4
},
{
"type": "SVG",
"width": 1080,
"height": 1920,
"track": 1,
"enterBegin": 0,
"exitEnd": 4,
"svg": "<svg width='1080' height='1920' viewBox='0 0 1080 1920' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='phShade' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='#1A0E08' stop-opacity='0.85'/><stop offset='0.4' stop-color='#1A0E08' stop-opacity='0.32'/><stop offset='1' stop-color='#1A0E08' stop-opacity='0.96'/></linearGradient></defs><rect width='1080' height='1920' fill='url(#phShade)'/></svg>"
},
{
"type": "TEXT",
"x": 540,
"y": 220,
"anchor": "top-center",
"track": 2,
"enterBegin": 0.2,
"enterEnd": 0.65,
"enterAnimation": "smoothdown",
"exitEnd": 4,
"style": {
"fontFamily": "Space Grotesk"
},
"html": "<div style='display:inline-block; background:{{accent}}; color:#1A0E08; border-radius:999px; padding:16px 36px; font-size:26px; font-weight:800; letter-spacing:3px;'>{{kicker}}</div>"
},
{
"type": "TEXT",
"x": 90,
"y": 1280,
"width": 920,
"anchor": "top-left",
"track": 3,
"enterBegin": 0.5,
"enterEnd": 1.05,
"enterAnimation": "smoothup",
"exitEnd": 4,
"style": {
"fontFamily": "Sora"
},
"html": "<div style='color:#FFFFFF; font-size:128px; line-height:0.98; font-weight:800; letter-spacing:-4px;'>{{productName}}</div><div style='margin-top:20px; color:#F1D9C8; font-size:44px; line-height:1.2; font-weight:600;'>{{tagline}}</div><div style='margin-top:30px; width:130px; height:7px; border-radius:4px; background:{{accent}};'></div>"
}
]
},
{
"id": "features",
"duration": 5,
"backgroundColor": "#1A0E08",
"transition": "smoothleft",
"transitionId": "cta",
"transitionDuration": 0.55,
"visuals": [
{
"type": "IMAGE",
"src": "{{teamImage}}",
"width": 1080,
"height": 1920,
"position": "center-center",
"resize": "cover",
"zoom": true,
"opacity": 0.28,
"track": 0,
"enterBegin": 0,
"exitEnd": 5
},
{
"type": "SVG",
"width": 1080,
"height": 1920,
"track": 1,
"enterBegin": 0,
"exitEnd": 5,
"svg": "<svg width='1080' height='1920' viewBox='0 0 1080 1920' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='phFeat' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='#1A0E08' stop-opacity='0.9'/><stop offset='0.5' stop-color='#1A0E08' stop-opacity='0.78'/><stop offset='1' stop-color='#1A0E08' stop-opacity='0.94'/></linearGradient></defs><rect width='1080' height='1920' fill='url(#phFeat)'/><rect x='90' y='560' width='900' height='170' rx='28' fill='rgba(255,107,53,0.06)' stroke='rgba(255,107,53,0.3)' stroke-width='1.5'/><rect x='90' y='770' width='900' height='170' rx='28' fill='rgba(255,107,53,0.06)' stroke='rgba(255,107,53,0.3)' stroke-width='1.5'/><rect x='90' y='980' width='900' height='170' rx='28' fill='rgba(255,107,53,0.06)' stroke='rgba(255,107,53,0.3)' stroke-width='1.5'/></svg>"
},
{
"type": "TEXT",
"x": 540,
"y": 360,
"anchor": "top-center",
"track": 2,
"enterBegin": 0.2,
"enterEnd": 0.6,
"enterAnimation": "fade",
"exitEnd": 5,
"style": {
"fontFamily": "Space Grotesk"
},
"html": "<div style='text-align:center; color:{{accent}}; font-size:28px; font-weight:800; letter-spacing:6px;'>WHY YOU'LL LOVE IT</div>"
},
{
"type": "TEXT",
"x": 130,
"y": 600,
"width": 800,
"anchor": "top-left",
"track": 3,
"enterBegin": 0.4,
"enterEnd": 0.85,
"enterAnimation": "smoothleft",
"exitEnd": 5,
"style": {
"fontFamily": "Sora"
},
"html": "<div style='color:#FFFFFF; font-size:38px; line-height:1.25; font-weight:600;'><span style='color:{{accent}}; font-weight:800;'>01 </span>{{point1}}</div>"
},
{
"type": "TEXT",
"x": 130,
"y": 810,
"width": 800,
"anchor": "top-left",
"track": 4,
"enterBegin": 0.6,
"enterEnd": 1.05,
"enterAnimation": "smoothleft",
"exitEnd": 5,
"style": {
"fontFamily": "Sora"
},
"html": "<div style='color:#FFFFFF; font-size:38px; line-height:1.25; font-weight:600;'><span style='color:{{accent}}; font-weight:800;'>02 </span>{{point2}}</div>"
},
{
"type": "TEXT",
"x": 130,
"y": 1020,
"width": 800,
"anchor": "top-left",
"track": 5,
"enterBegin": 0.8,
"enterEnd": 1.25,
"enterAnimation": "smoothleft",
"exitEnd": 5,
"style": {
"fontFamily": "Sora"
},
"html": "<div style='color:#FFFFFF; font-size:38px; line-height:1.25; font-weight:600;'><span style='color:{{accent}}; font-weight:800;'>03 </span>{{point3}}</div>"
},
{
"type": "TEXT",
"condition": "{{showOffer}}",
"x": 540,
"y": 1280,
"width": 900,
"anchor": "top-center",
"track": 6,
"enterBegin": 1.1,
"enterEnd": 1.55,
"enterAnimation": "smoothup",
"exitEnd": 5,
"style": {
"fontFamily": "Space Grotesk"
},
"html": "<div style='display:inline-block; background:rgba(255,107,53,0.16); border:1.5px solid rgba(255,107,53,0.6); color:#FFC9A8; border-radius:20px; padding:20px 40px; font-size:34px; font-weight:700;'>🎁 {{offerText}}</div>"
}
]
},
{
"id": "cta",
"duration": 4.6,
"backgroundColor": "#1A0E08",
"visuals": [
{
"type": "SVG",
"width": 1080,
"height": 1920,
"track": 0,
"enterBegin": 0,
"exitEnd": 4.6,
"svg": "<svg width='1080' height='1920' viewBox='0 0 1080 1920' xmlns='http://www.w3.org/2000/svg'><defs><radialGradient id='phCta' cx='0.5' cy='0.4' r='0.9'><stop offset='0' stop-color='#3A1E0E'/><stop offset='1' stop-color='#1A0E08'/></radialGradient></defs><rect width='1080' height='1920' fill='url(#phCta)'/><rect x='48' y='48' width='984' height='1824' rx='36' fill='none' stroke='rgba(255,107,53,0.35)' stroke-width='1.5'/><path d='M540 500 L575 590 L672 596 L598 658 L622 752 L540 700 L458 752 L482 658 L408 596 L505 590 Z' fill='#FF6B35'/></svg>"
},
{
"type": "TEXT",
"x": 540,
"y": 820,
"anchor": "top-center",
"track": 1,
"enterBegin": 0.2,
"enterEnd": 0.65,
"enterAnimation": "fade",
"exitEnd": 4.6,
"style": {
"fontFamily": "Space Grotesk"
},
"html": "<div style='display:inline-block; background:rgba(255,107,53,0.18); color:{{accent}}; border-radius:999px; padding:12px 32px; font-size:26px; font-weight:800; letter-spacing:4px;'>{{date}}</div>"
},
{
"type": "TEXT",
"x": 540,
"y": 960,
"width": 920,
"anchor": "top-center",
"track": 2,
"enterBegin": 0.45,
"enterEnd": 0.9,
"enterAnimation": "smoothup",
"exitEnd": 4.6,
"style": {
"fontFamily": "Sora"
},
"html": "<div style='text-align:center; color:#FFFFFF; font-size:72px; line-height:1.08; font-weight:800; letter-spacing:-1px;'>Give {{productName}}<br>your upvote.</div>"
},
{
"type": "TEXT",
"x": 540,
"y": 1280,
"anchor": "top-center",
"track": 3,
"enterBegin": 0.85,
"enterEnd": 1.3,
"enterAnimation": "smoothup",
"exitEnd": 4.6,
"style": {
"fontFamily": "Space Grotesk"
},
"html": "<div style='display:inline-block; background:{{accent}}; color:#1A0E08; border-radius:999px; padding:26px 64px; font-size:40px; font-weight:800;'>{{ctaText}}</div>"
},
{
"type": "TEXT",
"x": 540,
"y": 1450,
"anchor": "top-center",
"track": 4,
"enterBegin": 1.2,
"enterEnd": 1.6,
"enterAnimation": "fade",
"exitEnd": 4.6,
"style": {
"fontFamily": "Space Grotesk"
},
"html": "<div style='text-align:center; color:#B08868; font-size:27px; font-weight:600; letter-spacing:2px;'>{{handle}}</div>"
}
]
}
],
"audios": [
{
"src": "{{musicUrl}}",
"volume": 0.18,
"track": 0
}
]
}More SaaS / dev tools templates
View all ↗
Ready to ship video at scale?
Start free — your first render is only a JSON payload away.