Zvid Ad

This example is a 14-second HD promotional ad built with SVG and TEXT elements only. It demonstrates a fully programmatic video with no external image or video scenes.

The complete JSON in this page is the runnable config for this example and has been checked against the current public render schema.

Preview

Property	Value
Resolution	`hd` (`1280 x 720`)
Duration	`14` seconds
Frame rate	`30` fps
Visual types	`SVG`, `TEXT`
Elements	`13`
Audio	none
Scenes	intro, flow, CTA

Config Highlights

{
  "name": "zvid-ad",
  "resolution": "hd",
  "duration": 14,
  "frameRate": 30,
  "backgroundColor": "#0b0614"
}

The first element is a persistent SVG background:

{
  "type": "SVG",
  "width": 1280,
  "height": 720,
  "svg": "<svg width='1280' height='720' viewBox='0 0 1280 720' xmlns='http://www.w3.org/2000/svg'>...</svg>"
}

Text elements use safe HTML strings with inline styles:

{
  "type": "TEXT",
  "x": 640,
  "y": 238,
  "width": 980,
  "anchor": "center-center",
  "track": 10,
  "enterBegin": 0.5,
  "enterEnd": 1.2,
  "enterAnimation": "fade",
  "exitBegin": 4.2,
  "exitEnd": 4.8,
  "exitAnimation": "fade",
  "html": "<div style='text-align:center; color:#ffffff; font-family:Poppins; font-size:58px; font-weight:700; line-height:1.08;'>Your data. Your brand.<br><span style='color:#fadd46;'>Instant videos.</span></div>"
}

Track values layer the scene:

Track	Purpose
`1`	Decorative background details
`3` to `5`	Mid-scene SVG cards and flow diagram
`8`	Feature tags and CTA cards
`10`	Main text

How It Works

The ad is organized into three timed sections:

Scene	Time range	Content
Intro	`0` to `4.8`	Headline and supporting copy fade in and out.
Flow	`4.6` to `10.8`	Data, JSON, and video cards show the product concept.
CTA	`10.6` to `14`	Final call-to-action text and feature cards remain visible.

The example uses staggered enterBegin values to create rhythm without video footage. Most elements also have exitBegin and exitEnd values so each section clears cleanly before the next one settles.

Full Config

The full JSON below is the runnable example config.

Show full JSON config

{
  "name": "zvid-ad",
  "resolution": "hd",
  "duration": 14,
  "frameRate": 30,
  "backgroundColor": "#0b0614",
  "visuals": [
    {
      "type": "SVG",
      "width": 1280,
      "height": 720,
      "svg": "<svg width='1280' height='720' viewBox='0 0 1280 720' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='bg' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='#0b0614'/><stop offset='1' stop-color='#1a1031'/></linearGradient><radialGradient id='glow1' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(1040 120) rotate(90) scale(260)'><stop stop-color='#a955f7' stop-opacity='0.30'/><stop offset='1' stop-color='#a955f7' stop-opacity='0'/></radialGradient><radialGradient id='glow2' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(210 600) rotate(90) scale(300)'><stop stop-color='#fadd46' stop-opacity='0.18'/><stop offset='1' stop-color='#fadd46' stop-opacity='0'/></radialGradient></defs><rect width='1280' height='720' fill='url(#bg)'/><rect x='36' y='36' width='1208' height='648' rx='36' fill='rgba(255,255,255,0.03)' stroke='rgba(255,255,255,0.08)'/><circle cx='1040' cy='120' r='260' fill='url(#glow1)'/><circle cx='210' cy='600' r='300' fill='url(#glow2)'/></svg>"
    },
    {
      "type": "SVG",
      "x": 1020,
      "y": 120,
      "width": 240,
      "height": 240,
      "anchor": "center-center",
      "opacity": 0.65,
      "track": 1,
      "enterBegin": 0,
      "enterEnd": 1,
      "enterAnimation": "fade",
      "exitBegin": 4.2,
      "exitEnd": 4.8,
      "exitAnimation": "fade",
      "svg": "<svg width='240' height='240' viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'><circle cx='120' cy='120' r='88' fill='none' stroke='rgba(169,85,247,0.28)' stroke-width='2'/><circle cx='120' cy='120' r='58' fill='none' stroke='rgba(250,221,70,0.22)' stroke-width='2'/><circle cx='120' cy='120' r='6' fill='#fadd46'/><circle cx='32' cy='120' r='4' fill='#ffffff' opacity='0.8'/><circle cx='208' cy='120' r='4' fill='#ffffff' opacity='0.5'/><circle cx='120' cy='32' r='4' fill='#ffffff' opacity='0.6'/><circle cx='120' cy='208' r='4' fill='#ffffff' opacity='0.4'/></svg>"
    },
    {
      "type": "TEXT",
      "x": 640,
      "y": 238,
      "width": 980,
      "anchor": "center-center",
      "track": 10,
      "enterBegin": 0.5,
      "enterEnd": 1.2,
      "enterAnimation": "fade",
      "exitBegin": 4.2,
      "exitEnd": 4.8,
      "exitAnimation": "fade",
      "html": "<div style='text-align:center; color:#ffffff; font-family:Poppins; font-size:58px; font-weight:700; line-height:1.08; letter-spacing:-1px;'>Your data. Your brand.<br><span style='color:#fadd46;'>Instant videos.</span></div>"
    },
    {
      "type": "TEXT",
      "x": 640,
      "y": 352,
      "width": 980,
      "anchor": "center-center",
      "track": 10,
      "enterBegin": 0.9,
      "enterEnd": 1.6,
      "enterAnimation": "fade",
      "exitBegin": 4.1,
      "exitEnd": 4.8,
      "exitAnimation": "fade",
      "html": "<div style='text-align:center; color:#cfc3ea; font-size:24px; font-weight:500; line-height:1.5;'>Create product promos, offers, and announcements<br><span style='color:#fadd46; font-weight:700;'>automatically</span> for every campaign and every channel.</div>"
    },
    {
      "type": "TEXT",
      "x": 640,
      "y": 462,
      "width": 900,
      "anchor": "center-center",
      "track": 10,
      "enterBegin": 1.3,
      "enterEnd": 2,
      "enterAnimation": "fade",
      "exitBegin": 4,
      "exitEnd": 4.7,
      "exitAnimation": "fade",
      "html": "<div style='text-align:center; color:#9f8bcf; font-size:18px; line-height:1.5;'>From one creative system to thousands of polished brand-safe videos.</div>"
    },
    {
      "type": "TEXT",
      "x": 640,
      "y": 112,
      "width": 1080,
      "anchor": "center-center",
      "track": 10,
      "enterBegin": 4.6,
      "enterEnd": 5.2,
      "enterAnimation": "fade",
      "exitBegin": 10.2,
      "exitEnd": 10.8,
      "exitAnimation": "fade",
      "html": "<div style='text-align:center; color:#ffffff; font-family:Poppins; font-size:40px; font-weight:700; line-height:1.2;'>Turn structured content into<br><span style='color:#fadd46;'>high-performing video creative</span></div>"
    },
    {
      "type": "SVG",
      "x": 305,
      "y": 390,
      "width": 370,
      "height": 300,
      "anchor": "center-center",
      "track": 3,
      "enterBegin": 5,
      "enterEnd": 5.6,
      "enterAnimation": "smoothleft",
      "exitBegin": 10.1,
      "exitEnd": 10.7,
      "exitAnimation": "fade",
      "svg": "<svg width='370' height='300' viewBox='0 0 370 300' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='cardL' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='rgba(255,255,255,0.10)'/><stop offset='1' stop-color='rgba(255,255,255,0.04)'/></linearGradient></defs><rect x='0.5' y='0.5' width='369' height='299' rx='28' fill='url(#cardL)' stroke='rgba(255,255,255,0.14)'/><rect x='24' y='26' width='112' height='30' rx='15' fill='rgba(250,221,70,0.12)' stroke='rgba(250,221,70,0.35)'/><text x='80' y='46' text-anchor='middle' fill='#fadd46' font-size='14' font-family='Inter' font-weight='700'>Catalog Data</text><rect x='24' y='78' width='322' height='38' rx='14' fill='rgba(255,255,255,0.06)' stroke='rgba(255,255,255,0.04)'/><rect x='24' y='128' width='322' height='38' rx='14' fill='rgba(255,255,255,0.06)' stroke='rgba(255,255,255,0.04)'/><rect x='24' y='178' width='322' height='38' rx='14' fill='rgba(255,255,255,0.06)' stroke='rgba(255,255,255,0.04)'/><rect x='24' y='228' width='220' height='38' rx='14' fill='rgba(255,255,255,0.06)' stroke='rgba(255,255,255,0.04)'/></svg>"
    },
    {
      "type": "SVG",
      "x": 640,
      "y": 392,
      "width": 220,
      "height": 180,
      "anchor": "center-center",
      "track": 5,
      "enterBegin": 5.3,
      "enterEnd": 5.9,
      "enterAnimation": "fade",
      "exitBegin": 10,
      "exitEnd": 10.6,
      "exitAnimation": "fade",
      "svg": "<svg width='220' height='180' viewBox='0 0 220 180' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='flow' x1='0' y1='0' x2='1' y2='0'><stop offset='0' stop-color='#a955f7'/><stop offset='1' stop-color='#fadd46'/></linearGradient></defs><path d='M20 90 H200' stroke='url(#flow)' stroke-width='6' stroke-linecap='round' opacity='0.85'/><circle cx='54' cy='90' r='15' fill='rgba(169,85,247,0.18)' stroke='rgba(169,85,247,0.5)'/><circle cx='110' cy='90' r='15' fill='rgba(255,255,255,0.08)' stroke='rgba(255,255,255,0.28)'/><circle cx='166' cy='90' r='15' fill='rgba(250,221,70,0.16)' stroke='rgba(250,221,70,0.5)'/><rect x='32' y='36' width='44' height='20' rx='10' fill='rgba(169,85,247,0.18)'/><text x='54' y='50' text-anchor='middle' fill='#ffffff' font-size='11' font-family='Inter' font-weight='700'>DATA</text><rect x='88' y='122' width='44' height='20' rx='10' fill='rgba(255,255,255,0.10)'/><text x='110' y='136' text-anchor='middle' fill='#ffffff' font-size='11' font-family='Inter' font-weight='700'>JSON</text><rect x='144' y='36' width='44' height='20' rx='10' fill='rgba(250,221,70,0.18)'/><text x='166' y='50' text-anchor='middle' fill='#ffffff' font-size='11' font-family='Inter' font-weight='700'>VIDEO</text></svg>"
    },
    {
      "type": "SVG",
      "x": 972,
      "y": 390,
      "width": 410,
      "height": 316,
      "anchor": "center-center",
      "track": 4,
      "enterBegin": 5.2,
      "enterEnd": 5.8,
      "enterAnimation": "smoothright",
      "exitBegin": 10.1,
      "exitEnd": 10.7,
      "exitAnimation": "fade",
      "svg": "<svg width='410' height='316' viewBox='0 0 410 316' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='cardR' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='rgba(255,255,255,0.10)'/><stop offset='1' stop-color='rgba(255,255,255,0.04)'/></linearGradient><linearGradient id='screen' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='#2a184b'/><stop offset='1' stop-color='#120a23'/></linearGradient></defs><rect x='0.5' y='0.5' width='409' height='315' rx='28' fill='url(#cardR)' stroke='rgba(255,255,255,0.14)'/><rect x='24' y='24' width='362' height='206' rx='20' fill='url(#screen)' stroke='rgba(255,255,255,0.10)'/><rect x='42' y='42' width='146' height='128' rx='16' fill='rgba(255,255,255,0.08)'/><circle cx='115' cy='106' r='24' fill='rgba(255,255,255,0.16)'/><path d='M107 94 L129 106 L107 118 Z' fill='rgba(255,255,255,0.75)'/><rect x='206' y='48' width='146' height='18' rx='9' fill='rgba(255,255,255,0.10)'/><rect x='206' y='80' width='120' height='14' rx='7' fill='rgba(250,221,70,0.22)'/><rect x='206' y='110' width='108' height='14' rx='7' fill='rgba(169,85,247,0.24)'/><rect x='206' y='140' width='132' height='14' rx='7' fill='rgba(255,255,255,0.10)'/><rect x='42' y='250' width='114' height='36' rx='18' fill='rgba(169,85,247,0.16)' stroke='rgba(169,85,247,0.35)'/><rect x='170' y='250' width='102' height='36' rx='18' fill='rgba(250,221,70,0.14)' stroke='rgba(250,221,70,0.35)'/><rect x='286' y='250' width='82' height='36' rx='18' fill='rgba(255,255,255,0.08)' stroke='rgba(255,255,255,0.16)'/><text x='99' y='273' text-anchor='middle' fill='#ffffff' font-size='14' font-family='Inter' font-weight='700'>On-brand</text><text x='221' y='273' text-anchor='middle' fill='#ffffff' font-size='14' font-family='Inter' font-weight='700'>Fast edits</text><text x='327' y='273' text-anchor='middle' fill='#ffffff' font-size='14' font-family='Inter' font-weight='700'>Scale</text></svg>"
    },
    {
      "type": "TEXT",
      "x": 640,
      "y": 604,
      "width": 860,
      "anchor": "center-center",
      "track": 8,
      "enterBegin": 5.7,
      "enterEnd": 6.3,
      "enterAnimation": "fade",
      "exitBegin": 10,
      "exitEnd": 10.6,
      "exitAnimation": "fade",
      "html": "<div style='background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.10); border-radius:27px; padding:14px 18px; text-align:center; white-space:nowrap;'><span style='display:inline-block; width:190px; text-align:center; color:#ffffff; font-size:16px; font-weight:600;'><span style='display:inline-block; width:10px; height:10px; border-radius:999px; background:#fadd46; margin-right:8px; vertical-align:middle;'></span><span style='vertical-align:middle;'>Offers</span></span><span style='display:inline-block; width:190px; text-align:center; color:#ffffff; font-size:16px; font-weight:600;'><span style='display:inline-block; width:10px; height:10px; border-radius:999px; background:#a955f7; margin-right:8px; vertical-align:middle;'></span><span style='vertical-align:middle;'>Brand styling</span></span><span style='display:inline-block; width:190px; text-align:center; color:#ffffff; font-size:16px; font-weight:600;'><span style='display:inline-block; width:10px; height:10px; border-radius:999px; background:#fadd46; margin-right:8px; vertical-align:middle;'></span><span style='vertical-align:middle;'>Localization</span></span><span style='display:inline-block; width:190px; text-align:center; color:#ffffff; font-size:16px; font-weight:600;'><span style='display:inline-block; width:10px; height:10px; border-radius:999px; background:#a955f7; margin-right:8px; vertical-align:middle;'></span><span style='vertical-align:middle;'>Bulk output</span></span></div>"
    },
    {
      "type": "TEXT",
      "x": 640,
      "y": 228,
      "width": 1000,
      "anchor": "center-center",
      "track": 10,
      "enterBegin": 10.6,
      "enterEnd": 11.2,
      "enterAnimation": "fade",
      "html": "<div style='text-align:center; color:#ffffff; font-family:Poppins; font-size:50px; font-weight:700; line-height:1.12; letter-spacing:-1px;'>Launch more campaigns.<br><span style='color:#fadd46;'>Keep every video on-brand.</span></div>"
    },
    {
      "type": "TEXT",
      "x": 640,
      "y": 350,
      "width": 980,
      "anchor": "center-center",
      "track": 10,
      "enterBegin": 10.9,
      "enterEnd": 11.5,
      "enterAnimation": "fade",
      "html": "<div style='text-align:center; color:#d1c5ec; font-size:24px; line-height:1.55;'>Zvid helps SaaS teams, marketplaces, and modern brands turn structured content into compelling video at scale.</div>"
    },
    {
      "type": "TEXT",
      "x": 640,
      "y": 520,
      "anchor": "center-center",
      "track": 8,
      "enterBegin": 11.2,
      "enterEnd": 11.8,
      "enterAnimation": "fade",
      "html": "<div style='display:flex; align-items:center; justify-content:center; width:100%; height:100%;'><div style='background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10); border-radius:30px; padding:22px 16px; text-align:center; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:nowrap;'><div style='width:286px; padding:16px 14px 14px; border-radius:24px; background:rgba(169,85,247,0.14); border:1px solid rgba(169,85,247,0.34); text-align:center; flex:0 0 auto;'><div style='font-size:18px; font-weight:700; color:#ffffff; margin-bottom:8px;'>Faster production</div></div><div style='width:286px; padding:16px 14px 14px; border-radius:24px; background:rgba(250,221,70,0.12); border:1px solid rgba(250,221,70,0.34); text-align:center; flex:0 0 auto;'><div style='font-size:18px; font-weight:700; color:#ffffff; margin-bottom:8px;'>Consistent output</div></div><div style='width:286px; padding:16px 14px 14px; border-radius:24px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); text-align:center; flex:0 0 auto;'><div style='font-size:18px; font-weight:700; color:#ffffff; margin-bottom:8px;'>Built for scale</div></div></div></div>"
    }
  ]
}

Key Takeaways

SVG and TEXT are enough to produce a polished programmatic ad.
A persistent SVG background is efficient for branded layouts.
Use track intentionally so text stays above decorative layers.
Staggered enter timings make static scenes feel more dynamic.

Preview​

Config Highlights​

How It Works​

Full Config​

Key Takeaways​

Preview

Config Highlights

How It Works

Full Config

Key Takeaways