Zvid Ad

A 14-second HD promotional ad built without any video or image files. Every visual is composed from SVG graphics and TEXT elements with timed fade, smoothleft, and smoothright enter/exit animations — demonstrating how to create a fully programmatic, brand-consistent video from pure data.

What You'll Learn

✅ How to build a complete video using only SVG and TEXT elements (no external media)
✅ How to orchestrate multi-stage scene flows using enterBegin / exitBegin / enterEnd / exitEnd
✅ How to use track to layer elements on the Z-axis
✅ How to apply enter and exit animations simultaneously (enterAnimation + exitAnimation)
✅ How to compose complex layouts using inline SVG with gradients and shapes

Preview

Property	Value
Resolution	`hd` (1280 × 720)
Duration	14 seconds
Frame rate	30 fps
Visual types	SVG, TEXT
Elements	13
Audio	None
Backgrounds	SVG gradient layers
Scenes	3 (Intro, Flow, CTA)

Full 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>"
    }
  ]
}

How It Works

Three-Scene Structure

The ad is composed of three distinct narrative scenes, all sharing the same persistent background. Scenes transition by fading old elements out and fading new elements in — no video cuts needed.

Scene 1 — Intro     : 0s ────────────── 4.8s
Scene 2 — Flow      :                 4.6s ──────────────────── 10.8s
Scene 3 — CTA       :                                         10.6s ──────────── 14s

There is deliberate overlap between scenes (~0.2s) so that incoming elements begin fading in while outgoing elements are still fading out, creating a smooth dissolution effect between slides.

Scene 1: Brand Intro (0s – 4.8s)

The intro scene establishes the brand identity with three staggered text elements that fade in one after another, creating a cascading reveal:

Element	Enters	Exits	Content
Decorative SVG rings	`0s`	`4.8s`	Orbit circle decoration (top-right)
Headline text	`0.5s`	`4.8s`	"Your data. Your brand. Instant videos."
Sub-headline text	`0.9s`	`4.8s`	Campaign description
Supporting body text	`1.3s`	`4.7s`	Scale message

The staggered enterBegin times (0.5s → 0.9s → 1.3s) give each element time to land before the next appears, making the intro feel intentional rather than cluttered.

Scene 2: Data Flow (4.6s – 10.8s)

The flow scene explains the product concept visually — structured data goes in, polished videos come out. It introduces three elements using different animations to create a sense of direction:

[Catalog Card] ──slideleft──> [DATA→JSON→VIDEO Arrow] ──fade──> [Output Card]
    smoothleft                        fade                          smoothright

Element	Animation	Enters	Purpose
Section headline	`fade`	`4.6s`	"Turn structured content into…"
Catalog data card	`smoothleft`	`5s`	Slides in from left — represents input data
Flow arrow diagram	`fade`	`5.3s`	Appears in the center — the pipeline
Output video card	`smoothright`	`5.2s`	Slides in from right — represents the output
Feature tags bar	`fade`	`5.7s`	"Offers · Brand styling · Localization · Bulk output"

Using smoothleft for the input card and smoothright for the output card creates a natural left-to-right reading flow that visually communicates the data pipeline concept.

Scene 3: Call to Action (10.6s – 14s)

The final scene fades in a CTA with staggered timing, echoing the rhythm of Scene 1:

Element	Enters	Content
CTA headline	`10.6s`	"Launch more campaigns. Keep every video on-brand."
Supporting text	`10.9s`	Company description
Feature cards row	`11.2s`	"Faster production · Consistent output · Built for scale"

The CTA elements have no exitBegin / exitEnd — they remain visible until the video ends at 14s.

Background SVG Layer

The first SVG element in the visuals array is a full-canvas persistent background that uses SVG gradients to create a dark purple atmosphere:

{
  "type": "SVG",
  "width": 1280,
  "height": 720,
  "svg": "..."
}

Key characteristics:

Has no enterBegin, exitEnd, or animation — it is always visible for the full duration.
Uses a linearGradient for the base background and two radialGradient glows for depth.
No x, y, or positioning — it defaults to the top-left origin and fills the frame.

This technique is an efficient way to create a branded static background without an external image file.

Z-Axis Layering with `track`

The track property controls which elements render on top when elements overlap. Higher track numbers render above lower ones:

Track	Elements
`1`	Decorative SVG (behind everything)
`3`	Catalog data card
`4`	Output video card
`5`	Flow arrow (center — above the cards)
`8`	Feature tags bar and CTA cards (above visuals)
`10`	All text elements (always on top)

Text is always placed at track: 10 to ensure it renders above all graphic elements.

Enter & Exit Animations

Every element (except the background) uses both an enterAnimation and an exitAnimation. This allows each element to have a smooth on-ramp and off-ramp:

{
  "enterBegin": 5,
  "enterEnd": 5.6,
  "enterAnimation": "smoothleft",
  "exitBegin": 10.1,
  "exitEnd": 10.7,
  "exitAnimation": "fade"
}

Property	Controls
`enterBegin`	When the animation starts
`enterEnd`	When the element is fully visible (animation complete)
`exitBegin`	When the exit animation starts
`exitEnd`	When the element has fully disappeared
`enterAnimation`	The motion used to bring the element in (`smoothleft`, `fade`, `smoothright`)
`exitAnimation`	The motion used to take the element out (always `fade` here)

See the Animations reference for all available enter and exit animation types.

Key Takeaways

You don't need video or image files to create a polished, professional video — SVG and TEXT alone are sufficient.
Use a persistent, no-timing background SVG element to establish a branded atmosphere without any external assets.
Stagger enterBegin times by 0.3–0.5 seconds between related text elements to create a natural cascading reveal effect.
Use smoothleft and smoothright on opposing elements to visually communicate direction and flow in diagrams.
track is essential when layering multiple overlapping elements — keep text at the highest track number so it's always readable.
Elements with no exitBegin / exitEnd persist to the end of the video — useful for CTA slides.

What You'll Learn​

Preview​

Full Config​

How It Works​

Three-Scene Structure​

Scene 1: Brand Intro (0s – 4.8s)​

Scene 2: Data Flow (4.6s – 10.8s)​

Scene 3: Call to Action (10.6s – 14s)​

Background SVG Layer​

Z-Axis Layering with track​

Enter & Exit Animations​

Key Takeaways​