App personalization

Personalized Onboarding

Welcome video that iterates a steps array; swap userName, welcome copy and accents, and toggle the pro-tip line via showTip.

Type: Video
Format: Instagram Reel · 9:16
Orientation: Portrait
Duration: 16.55s
Scenes: 5
Render cost: $0.00414 / render

VariablesData-driven repeatConditional scenes

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

Customize Personalized Onboarding

Personalized Onboarding is a ready-to-render App personalization video design formatted for Instagram Reel · 9:16 with 5 scenes and support for variables, data-driven repeat, conditional scenes. Open it in the editor to replace its copy and media, then render variations through the Zvid API.

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

appNameText

NESTLY

userNameText

Sam

welcomeKickerText

Welcome aboard

welcomeLineText

Let's get you set up in<br>under two minutes.

outroHeadlineText

You're all set,<br>{{userName}}.

ctaTextText

Open the app

showTipToggle

on

tipTextText

Pro tip: turn on reminders to keep your streak going.

accentColor

#6D5DF6

accent2Color

#C6F135

welcomeImageMedia URL

photo-1662850886700-4ec19bd30d11

stepsList · 3

num1

titleBuild your profile

descAdd a photo and pick what matters to you.

num2

titleConnect your world

descLink your calendar so nothing slips through.

num3

titleMeet your first win

descComplete one tiny task and feel the momentum.

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": "apppersonal-onboarding",
  "resolution": "instagram-reel",
  "frameRate": 30,
  "backgroundColor": "#0E0C1F",
  "outputFormat": "mp4",
  "variables": {
    "appName": "NESTLY",
    "userName": "Sam",
    "welcomeKicker": "Welcome aboard",
    "welcomeLine": "Let's get you set up in<br>under two minutes.",
    "outroHeadline": "You're all set,<br>{{userName}}.",
    "ctaText": "Open the app",
    "showTip": true,
    "tipText": "Pro tip: turn on reminders to keep your streak going.",
    "accent": "#6D5DF6",
    "accent2": "#C6F135",
    "welcomeImage": "https://images.unsplash.com/photo-1662850886700-4ec19bd30d11?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3MDgwMTZ8MHwxfHNlYXJjaHwyfHxoYXBweSUyMHNtaWxpbmclMjBwZXJzb24lMjBwb3J0cmFpdHxlbnwwfHx8fDE3ODMyNjg2NDF8MA&ixlib=rb-4.1.0&q=80&w=1080",
    "steps": [
      {
        "num": "1",
        "title": "Build your profile",
        "desc": "Add a photo and pick what matters to you."
      },
      {
        "num": "2",
        "title": "Connect your world",
        "desc": "Link your calendar so nothing slips through."
      },
      {
        "num": "3",
        "title": "Meet your first win",
        "desc": "Complete one tiny task and feel the momentum."
      }
    ],
    "musicUrl": "https://cdn.pixabay.com/audio/2026/02/24/audio_3f375fdf97.mp3"
  },
  "scenes": [
    {
      "id": "welcome",
      "duration": 4,
      "backgroundColor": "#0E0C1F",
      "transition": "smoothup",
      "transitionId": "step",
      "transitionDuration": 0.55,
      "visuals": [
        {
          "type": "IMAGE",
          "src": "{{welcomeImage}}",
          "width": 1080,
          "height": 1920,
          "position": "center-center",
          "resize": "cover",
          "zoom": true,
          "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='obWel' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='#0E0C1F' stop-opacity='0.55'/><stop offset='0.45' stop-color='#0E0C1F' stop-opacity='0.15'/><stop offset='1' stop-color='#0E0C1F' stop-opacity='0.96'/></linearGradient></defs><rect width='1080' height='1920' fill='url(#obWel)'/><rect x='90' y='1250' width='120' height='8' rx='4' fill='#C6F135'/></svg>"
        },
        {
          "type": "TEXT",
          "x": 90,
          "y": 170,
          "anchor": "top-left",
          "track": 2,
          "enterBegin": 0.2,
          "enterEnd": 0.65,
          "enterAnimation": "fade",
          "exitEnd": 4,
          "style": {
            "fontFamily": "Space Grotesk"
          },
          "html": "<div style='display:inline-block; border:1.5px solid rgba(198,241,53,0.6); color:#C6F135; border-radius:999px; padding:12px 30px; font-size:24px; font-weight:800; letter-spacing:5px;'>{{appName}}</div>"
        },
        {
          "type": "TEXT",
          "x": 90,
          "y": 1300,
          "width": 900,
          "anchor": "top-left",
          "track": 3,
          "enterBegin": 0.5,
          "enterEnd": 1.05,
          "enterAnimation": "smoothup",
          "exitEnd": 4,
          "style": {
            "fontFamily": "Sora"
          },
          "html": "<div style='color:{{accent2}}; font-size:30px; font-weight:800; letter-spacing:4px;'>{{welcomeKicker}}, {{userName}}</div><div style='margin-top:18px; color:#FFFFFF; font-size:78px; line-height:1.05; font-weight:800; letter-spacing:-2px;'>{{welcomeLine}}</div>"
        }
      ]
    },
    {
      "id": "step",
      "iterate": "steps",
      "iterateAs": "step",
      "duration": 3.4,
      "backgroundColor": "#0E0C1F",
      "transition": "smoothup",
      "transitionId": "outro",
      "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><linearGradient id='obStep' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='#1A1636'/><stop offset='0.6' stop-color='#12102A'/><stop offset='1' stop-color='#0E0C1F'/></linearGradient></defs><rect width='1080' height='1920' fill='url(#obStep)'/><rect x='96' y='700' width='888' height='520' rx='44' fill='rgba(255,255,255,0.04)' stroke='rgba(109,93,246,0.45)' stroke-width='1.5'/><circle cx='240' cy='560' r='90' fill='#6D5DF6'/></svg>"
        },
        {
          "type": "TEXT",
          "x": 240,
          "y": 494,
          "anchor": "top-center",
          "track": 1,
          "enterBegin": 0.15,
          "enterEnd": 0.6,
          "enterAnimation": "circleopen",
          "exitEnd": 3.4,
          "style": {
            "fontFamily": "Sora"
          },
          "html": "<div style='text-align:center; color:#FFFFFF; font-size:96px; line-height:1; font-weight:800;'>{{step.num}}</div>"
        },
        {
          "type": "TEXT",
          "x": 150,
          "y": 770,
          "width": 780,
          "anchor": "top-left",
          "track": 2,
          "enterBegin": 0.35,
          "enterEnd": 0.85,
          "enterAnimation": "smoothleft",
          "exitEnd": 3.4,
          "style": {
            "fontFamily": "Sora"
          },
          "html": "<div style='color:#C6F135; font-size:30px; font-weight:800; letter-spacing:4px;'>STEP {{step.num}}</div><div style='margin-top:16px; color:#FFFFFF; font-size:76px; line-height:1.02; font-weight:800; letter-spacing:-2px;'>{{step.title}}</div><div style='margin-top:24px; color:#B4AFCC; font-size:36px; line-height:1.4; font-weight:500;'>{{step.desc}}</div>"
        }
      ]
    },
    {
      "id": "outro",
      "duration": 4.4,
      "backgroundColor": "#0E0C1F",
      "visuals": [
        {
          "type": "SVG",
          "width": 1080,
          "height": 1920,
          "track": 0,
          "enterBegin": 0,
          "exitEnd": 4.4,
          "svg": "<svg width='1080' height='1920' viewBox='0 0 1080 1920' xmlns='http://www.w3.org/2000/svg'><defs><radialGradient id='obOut' cx='0.5' cy='0.4' r='0.95'><stop offset='0' stop-color='#231C55'/><stop offset='0.55' stop-color='#141031'/><stop offset='1' stop-color='#0E0C1F'/></radialGradient></defs><rect width='1080' height='1920' fill='url(#obOut)'/><circle cx='540' cy='620' r='150' fill='none' stroke='rgba(198,241,53,0.8)' stroke-width='3'/><path d='M486 620 L524 662 L600 576' fill='none' stroke='#C6F135' stroke-width='12' stroke-linecap='round' stroke-linejoin='round'/></svg>"
        },
        {
          "type": "TEXT",
          "x": 540,
          "y": 880,
          "width": 940,
          "anchor": "top-center",
          "track": 1,
          "enterBegin": 0.3,
          "enterEnd": 0.8,
          "enterAnimation": "smoothup",
          "exitEnd": 4.4,
          "style": {
            "fontFamily": "Sora"
          },
          "html": "<div style='text-align:center; color:#FFFFFF; font-size:88px; line-height:1.03; font-weight:800; letter-spacing:-2px;'>{{outroHeadline}}</div>"
        },
        {
          "type": "TEXT",
          "condition": "{{showTip}}",
          "x": 540,
          "y": 1150,
          "width": 820,
          "anchor": "top-center",
          "track": 2,
          "enterBegin": 0.6,
          "enterEnd": 1.05,
          "enterAnimation": "fade",
          "exitEnd": 4.4,
          "style": {
            "fontFamily": "Space Grotesk"
          },
          "html": "<div style='text-align:center; color:#C6F135; font-size:32px; line-height:1.4; font-weight:600;'>{{tipText}}</div>"
        },
        {
          "type": "TEXT",
          "x": 540,
          "y": 1380,
          "anchor": "top-center",
          "track": 3,
          "enterBegin": 0.9,
          "enterEnd": 1.35,
          "enterAnimation": "circleopen",
          "exitEnd": 4.4,
          "style": {
            "fontFamily": "Sora"
          },
          "html": "<div style='display:inline-block; background:{{accent}}; color:#FFFFFF; border-radius:999px; padding:28px 66px; font-size:40px; font-weight:800;'>{{ctaText}}</div>"
        }
      ]
    }
  ],
  "audios": [
    {
      "src": "{{musicUrl}}",
      "volume": 0.16,
      "track": 0
    }
  ]
}

More App personalization templates

Achievement Unlocked

Achievement Unlocked

App personalization$0.00226

Community Milestone

Community Milestone

App personalization$0.00216

Leaderboard Reveal

Leaderboard Reveal

App personalization$0.00364

Monthly Recap Wrapped

Monthly Recap Wrapped

App personalization$0.00414

Goal Progress Report

Goal Progress Report

App personalization$0.0029

Renewal Reminder

Renewal Reminder

App personalization$0.00313

Retention Nudge

Retention Nudge

App personalization$0.00298

Trial Progress Video

Trial Progress Video

App personalization$0.00473

Year in Review Rewind

Year in Review Rewind

App personalization$0.00447

Achievement Badge

Achievement Badge

App personalization

Ready to ship video at scale?

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

Explore the API ↗