SaaS / dev tools

Feature Launch

Problem tease, UI-mock feature reveal and benefit checklist with CTA toggle.

Type: Video
Format: Instagram Reel · 9:16
Orientation: Portrait
Duration: 14.2s
Scenes: 3
Render cost: $0.00355 / render

VariablesConditional scenes

Free template · opens in the editor, no account required.

Customize Feature Launch

Feature 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. Open it in the editor to replace its copy and media, then render variations through the Zvid API.

11 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.

productNameText

Flowdesk

featureNameText

Smart Snooze

featureTagText

NEW IN 3.2

problemLineText

Notifications don't care that you're in deep work.

solutionLineText

Smart Snooze learns your focus hours and holds everything non-urgent until you surface.

benefit1Text

Auto-detects focus sessions

benefit2Text

Urgent still breaks through

benefit3Text

One-tap catch-up digest

ctaTextText

Try it in Settings → Focus

showCtaToggle

on

musicUrlMedia URL

audio_3f375fdf97.mp3

The exact JSON payload

This is the full render config — POST it to the API, or open it in the editor to tweak.

Open in editor ↗

{
  "name": "saas-feature-launch",
  "resolution": "instagram-reel",
  "frameRate": 30,
  "backgroundColor": "#0A0E1A",
  "outputFormat": "mp4",
  "variables": {
    "productName": "Flowdesk",
    "featureName": "Smart Snooze",
    "featureTag": "NEW IN 3.2",
    "problemLine": "Notifications don't care that you're in deep work.",
    "solutionLine": "Smart Snooze learns your focus hours and holds everything non-urgent until you surface.",
    "benefit1": "Auto-detects focus sessions",
    "benefit2": "Urgent still breaks through",
    "benefit3": "One-tap catch-up digest",
    "ctaText": "Try it in Settings → Focus",
    "showCta": true,
    "musicUrl": "https://cdn.pixabay.com/audio/2026/02/24/audio_3f375fdf97.mp3"
  },
  "scenes": [
    {
      "id": "tease",
      "duration": 3.4,
      "backgroundColor": "#0A0E1A",
      "transition": "smoothup",
      "transitionId": "feature",
      "transitionDuration": 0.5,
      "visuals": [
        {
          "type": "SVG",
          "width": 1080,
          "height": 1920,
          "track": 0,
          "enterBegin": 0,
          "exitEnd": 3.4,
          "svg": "<svg width='1080' height='1920' viewBox='0 0 1080 1920' xmlns='http://www.w3.org/2000/svg'><defs><radialGradient id='sflGlow' cx='0.5' cy='0.35' r='0.9'><stop offset='0' stop-color='#131C36'/><stop offset='1' stop-color='#0A0E1A'/></radialGradient></defs><rect width='1080' height='1920' fill='url(#sflGlow)'/><path d='M470 640 C470 600 500 570 540 570 C580 570 610 600 610 640 L610 760 L470 760 Z' fill='none' stroke='#6E8BFF' stroke-width='8'/><path d='M430 760 H650' stroke='#6E8BFF' stroke-width='8' stroke-linecap='round'/><circle cx='540' cy='830' r='16' fill='#6E8BFF'/><path d='M660 560 L700 520 M690 640 L750 630' stroke='rgba(110,139,255,0.5)' stroke-width='5' stroke-linecap='round'/></svg>"
        },
        {
          "type": "TEXT",
          "x": 540,
          "y": 980,
          "width": 920,
          "anchor": "top-center",
          "track": 2,
          "enterBegin": 0.25,
          "enterEnd": 0.7,
          "enterAnimation": "smoothup",
          "exitEnd": 3.4,
          "style": {
            "fontFamily": "Sora"
          },
          "html": "<div style='text-align:center; color:#FFFFFF; font-size:64px; line-height:1.12; font-weight:800;'>{{problemLine}}</div><div style='margin-top:22px; text-align:center; color:#8E9BC4; font-size:29px; font-weight:600;'>Until today.</div>"
        },
        {
          "type": "TEXT",
          "x": 540,
          "y": 170,
          "anchor": "top-center",
          "track": 1,
          "enterBegin": 0.1,
          "enterEnd": 0.5,
          "enterAnimation": "smoothdown",
          "exitEnd": 3.4,
          "style": {
            "fontFamily": "Sora"
          },
          "html": "<div style='display:inline-block; background:rgba(110,139,255,0.14); border:1.5px solid rgba(110,139,255,0.6); color:#6E8BFF; border-radius:999px; padding:14px 38px; font-size:26px; font-weight:800; letter-spacing:4px;'>{{productName}} · {{featureTag}}</div>"
        }
      ]
    },
    {
      "id": "feature",
      "duration": 6,
      "backgroundColor": "#0A0E1A",
      "transition": "smoothup",
      "transitionId": "benefits",
      "transitionDuration": 0.5,
      "visuals": [
        {
          "type": "SVG",
          "width": 1080,
          "height": 1920,
          "track": 0,
          "enterBegin": 0,
          "exitEnd": 6,
          "svg": "<svg width='1080' height='1920' viewBox='0 0 1080 1920' xmlns='http://www.w3.org/2000/svg'><defs><radialGradient id='sffGlow' cx='0.5' cy='0.32' r='0.9'><stop offset='0' stop-color='#141E3C'/><stop offset='1' stop-color='#0A0E1A'/></radialGradient><linearGradient id='sffBar' x1='0' y1='0' x2='1' y2='0'><stop offset='0' stop-color='#6E8BFF'/><stop offset='1' stop-color='#9BE8D8'/></linearGradient></defs><rect width='1080' height='1920' fill='url(#sffGlow)'/><rect x='110' y='420' width='860' height='560' rx='28' fill='#0F1526' stroke='rgba(110,139,255,0.4)' stroke-width='1.5'/><rect x='110' y='420' width='860' height='64' rx='28' fill='rgba(110,139,255,0.1)'/><circle cx='158' cy='452' r='9' fill='#FF6E6E'/><circle cx='190' cy='452' r='9' fill='#FFD76E'/><circle cx='222' cy='452' r='9' fill='#6EE7A0'/><rect x='160' y='540' width='560' height='30' rx='15' fill='rgba(255,255,255,0.14)'/><rect x='160' y='600' width='420' height='30' rx='15' fill='rgba(255,255,255,0.09)'/><rect x='160' y='690' width='760' height='96' rx='22' fill='rgba(110,139,255,0.14)' stroke='rgba(110,139,255,0.5)' stroke-width='1.5'/><circle cx='216' cy='738' r='24' fill='url(#sffBar)'/><rect x='264' y='722' width='380' height='32' rx='16' fill='rgba(255,255,255,0.2)'/><rect x='160' y='830' width='500' height='30' rx='15' fill='rgba(255,255,255,0.09)'/><rect x='160' y='890' width='340' height='30' rx='15' fill='rgba(255,255,255,0.06)'/></svg>"
        },
        {
          "type": "TEXT",
          "x": 80,
          "y": 1120,
          "width": 920,
          "anchor": "top-left",
          "track": 1,
          "enterBegin": 0.4,
          "enterEnd": 0.9,
          "enterAnimation": "smoothup",
          "exitEnd": 6,
          "style": {
            "fontFamily": "Sora"
          },
          "html": "<div style='color:#9BE8D8; font-size:26px; font-weight:800; letter-spacing:5px;'>INTRODUCING</div><div style='margin-top:14px; color:#FFFFFF; font-size:100px; line-height:1; font-weight:800; letter-spacing:-3px;'>{{featureName}}</div><div style='margin-top:26px; color:#AEB8DC; font-size:32px; line-height:1.5; font-weight:500;'>{{solutionLine}}</div>"
        }
      ]
    },
    {
      "id": "benefits",
      "duration": 5.8,
      "backgroundColor": "#0A0E1A",
      "visuals": [
        {
          "type": "SVG",
          "width": 1080,
          "height": 1920,
          "track": 0,
          "enterBegin": 0,
          "exitEnd": 5.8,
          "svg": "<svg width='1080' height='1920' viewBox='0 0 1080 1920' xmlns='http://www.w3.org/2000/svg'><defs><radialGradient id='sfbGlow' cx='0.5' cy='0.4' r='0.9'><stop offset='0' stop-color='#131C36'/><stop offset='1' stop-color='#0A0E1A'/></radialGradient></defs><rect width='1080' height='1920' fill='url(#sfbGlow)'/></svg>"
        },
        {
          "type": "TEXT",
          "x": 540,
          "y": 340,
          "width": 900,
          "anchor": "top-center",
          "track": 1,
          "enterBegin": 0.15,
          "enterEnd": 0.55,
          "enterAnimation": "smoothdown",
          "exitEnd": 5.8,
          "style": {
            "fontFamily": "Sora"
          },
          "html": "<div style='text-align:center; color:#FFFFFF; font-size:56px; font-weight:800;'>Why you'll love it</div>"
        },
        {
          "type": "TEXT",
          "x": 120,
          "y": 560,
          "width": 840,
          "anchor": "top-left",
          "track": 2,
          "enterBegin": 0.5,
          "enterEnd": 0.95,
          "enterAnimation": "smoothleft",
          "exitEnd": 5.8,
          "style": {
            "fontFamily": "Sora"
          },
          "html": "<div style='background:rgba(110,139,255,0.1); border:1.5px solid rgba(110,139,255,0.4); border-radius:24px; padding:30px 36px; color:#FFFFFF; font-size:36px; font-weight:700;'>✓&nbsp; {{benefit1}}</div>"
        },
        {
          "type": "TEXT",
          "x": 120,
          "y": 760,
          "width": 840,
          "anchor": "top-left",
          "track": 3,
          "enterBegin": 0.9,
          "enterEnd": 1.35,
          "enterAnimation": "smoothleft",
          "exitEnd": 5.8,
          "style": {
            "fontFamily": "Sora"
          },
          "html": "<div style='background:rgba(110,139,255,0.1); border:1.5px solid rgba(110,139,255,0.4); border-radius:24px; padding:30px 36px; color:#FFFFFF; font-size:36px; font-weight:700;'>✓&nbsp; {{benefit2}}</div>"
        },
        {
          "type": "TEXT",
          "x": 120,
          "y": 960,
          "width": 840,
          "anchor": "top-left",
          "track": 4,
          "enterBegin": 1.3,
          "enterEnd": 1.75,
          "enterAnimation": "smoothleft",
          "exitEnd": 5.8,
          "style": {
            "fontFamily": "Sora"
          },
          "html": "<div style='background:rgba(155,232,216,0.1); border:1.5px solid rgba(155,232,216,0.45); border-radius:24px; padding:30px 36px; color:#FFFFFF; font-size:36px; font-weight:700;'>✓&nbsp; {{benefit3}}</div>"
        },
        {
          "type": "TEXT",
          "condition": "{{showCta}}",
          "x": 540,
          "y": 1330,
          "anchor": "top-center",
          "track": 5,
          "enterBegin": 1.9,
          "enterEnd": 2.3,
          "enterAnimation": "circleopen",
          "exitEnd": 5.8,
          "style": {
            "fontFamily": "Sora"
          },
          "html": "<div style='display:inline-block; background:#6E8BFF; color:#0A0E1A; border-radius:999px; padding:26px 62px; font-size:34px; font-weight:800;'>{{ctaText}}</div><div style='margin-top:18px; text-align:center; color:#5E6A93; font-size:24px; font-weight:700; letter-spacing:4px;'>{{productName}} {{featureTag}}</div>"
        }
      ]
    }
  ],
  "audios": [
    {
      "src": "{{musicUrl}}",
      "volume": 0.17,
      "track": 0
    }
  ]
}

More SaaS / dev tools templates

Changelog Video

Changelog Video

SaaS / dev tools$0.00385

Feature Launch

Feature Launch

SaaS / dev tools$0.00392

Changelog Video

Changelog Video

SaaS / dev tools$0.00365

API Explainer

API Explainer

SaaS / dev tools$0.0036

User Onboarding

User Onboarding

SaaS / dev tools$0.00385

Usage Recap (Wrapped)

Usage Recap (Wrapped)

SaaS / dev tools$0.00389

Product Demo Short

Product Demo Short

SaaS / dev tools$0.00387

Manual vs Automated

Manual vs Automated

SaaS / dev tools$0.0036

Integration Announcement

Integration Announcement

SaaS / dev tools$0.00228

Customer Milestone

Customer Milestone

SaaS / dev tools$0.00245

Ready to ship video at scale?

Start free — your first render is only a JSON payload away.

Explore the API ↗