Zvid Ad

This example is a 14-second HD promotional ad built entirely with HTML TEXT elements for styled text plus a few SVG elements for vector decoration. It demonstrates a fully programmatic video with no external image or video footage.

The complete JSON in this page is the runnable config for this example.

Author this with scenes

This ad uses one global timeline with conceptual sections ("intro", "flow", "CTA"). For multi-part videos like this, the scenes API lets each section keep its own local timeline and add clean cross-section transitions — usually the better structure for new projects.

Preview

The full config below, rendered by Zvid — no external footage

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

Config Highlights

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

The first element is a persistent background, authored as an SVG element (inline <svg> markup is not accepted inside an HTML element's html field):

{
  "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>"
}

The remaining elements are HTML elements 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-section cards and flow diagram
`8`	Feature tags and CTA cards
`10`	Main text

How It Works

The ad is organized into three timed sections:

Section	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

HTML elements alone — styled text plus embedded inline SVG — are enough to produce a polished programmatic ad.
A persistent full-frame background element is efficient for branded layouts.
Use track intentionally so text stays above decorative layers.
Staggered enter timings make static sections feel more dynamic.
For multi-part videos, consider the scenes API to keep each section on its own local timeline.

Preview​

Config Highlights​

How It Works​

Full Config​

Key Takeaways​

Preview

Config Highlights

How It Works

Full Config

Key Takeaways