Article Summary

Editorial long-read distilled to 3 takeaways; swap the article title, byline and points array to summarize any piece.

Type
Video
Format
1080×1920
Orientation
Portrait
Duration
14.75s
Scenes
5
Render cost
$0.00369 / render
VariablesData-driven repeat
Open in editor

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

Customize Article Summary

Article Summary is a ready-to-render News / media video design formatted for 1080×1920 with 5 scenes and support for variables, data-driven repeat. Open it in the editor to replace its copy and media, then render variations through the Zvid API.

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

publicationText
THE LONGREAD
readTimeText
8 MIN READ · SUMMARIZED
articleTitleText
Why four-day weeks keep beating the five-day office
bylineText
Adapted from an essay by J. Okafor
coverImageMedia URL
closingLineText
The full piece is worth your coffee.
handleText
@thelongread
accentColorColor
#D64545
pointsList · 3
no01
pointOutput held steady
bodyAcross 61 companies, productivity stayed flat or rose even as hours dropped by 20%.
no02
pointBurnout fell sharply
bodyReported exhaustion dropped 71% and sick days nearly halved within six months.
no03
pointAlmost nobody went back
body92% of firms kept the four-day week after the trial officially ended.
musicUrlMedia URL

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": "news-article-summary",
  "resolution": "instagram-reel",
  "frameRate": 30,
  "backgroundColor": "#F3EEE4",
  "outputFormat": "mp4",
  "scenes": [
    {
      "id": "cover",
      "duration": 3.4,
      "backgroundColor": "#F3EEE4",
      "transition": "smoothleft",
      "transitionId": "point",
      "transitionDuration": 0.5,
      "visuals": [
        {
          "type": "IMAGE",
          "src": "{{coverImage}}",
          "width": 900,
          "height": 900,
          "x": 540,
          "y": 620,
          "anchor": "center-center",
          "track": 1,
          "enterEnd": 0.55,
          "exitEnd": 3.4,
          "enterAnimation": "smoothdown",
          "radius": {
            "tl": 32,
            "tr": 32,
            "bl": 32,
            "br": 32
          },
          "zoom": true
        },
        {
          "type": "SVG",
          "svg": "<svg width='1080' height='1920' viewBox='0 0 1080 1920' xmlns='http://www.w3.org/2000/svg'><rect width='1080' height='1920' fill='#F3EEE4'/><path d='M90 1180 H990' stroke='rgba(30,26,22,0.18)' stroke-width='2'/><rect x='90' y='1220' width='120' height='10' rx='5' fill='#D64545'/></svg>",
          "width": 1080,
          "height": 1920,
          "exitEnd": 3.4
        },
        {
          "type": "TEXT",
          "html": "<div style='color:#D64545; font-size:28px; font-weight:800; letter-spacing:6px;'>{{publication}}</div><div style='margin-top:8px; color:#7A7266; font-size:24px; font-weight:600; letter-spacing:3px;'>{{readTime}}</div>",
          "x": 90,
          "y": 1080,
          "anchor": "top-left",
          "track": 2,
          "enterBegin": 0.15,
          "enterEnd": 0.55,
          "exitEnd": 3.4,
          "enterAnimation": "fade",
          "style": {
            "fontFamily": "Inter"
          }
        },
        {
          "type": "TEXT",
          "html": "<div style='color:#1E1A16; font-size:72px; line-height:1.08; font-weight:700;'>{{articleTitle}}</div><div style='margin-top:24px; color:#8A8072; font-size:28px; font-style:italic; font-family:Playfair Display, serif;'>{{byline}}</div>",
          "width": 900,
          "x": 90,
          "y": 1280,
          "anchor": "top-left",
          "track": 3,
          "enterBegin": 0.4,
          "enterEnd": 0.9,
          "exitEnd": 3.4,
          "enterAnimation": "smoothup",
          "style": {
            "fontFamily": "Playfair Display"
          }
        }
      ]
    },
    {
      "id": "point",
      "duration": 3.4,
      "backgroundColor": "#F3EEE4",
      "transition": "smoothleft",
      "transitionId": "close",
      "transitionDuration": 0.45,
      "visuals": [
        {
          "type": "SVG",
          "svg": "<svg width='1080' height='1920' viewBox='0 0 1080 1920' xmlns='http://www.w3.org/2000/svg'><rect width='1080' height='1920' fill='#F3EEE4'/><rect x='80' y='560' width='920' height='800' rx='36' fill='#FBF8F1' stroke='rgba(30,26,22,0.12)' stroke-width='1.5'/><rect x='80' y='560' width='920' height='12' rx='6' fill='#D64545'/><circle cx='210' cy='740' r='66' fill='none' stroke='#D64545' stroke-width='4'/><path d='M160 1120 H920' stroke='rgba(30,26,22,0.1)' stroke-width='1.5'/></svg>",
          "width": 1080,
          "height": 1920,
          "anchor": "top-left",
          "exitEnd": 3.4
        },
        {
          "type": "TEXT",
          "html": "<div style='color:#D64545; font-size:72px; font-weight:700; line-height:1;'>{{p.no}}</div>",
          "x": 209,
          "y": 728,
          "anchor": "center-center",
          "track": 2,
          "enterBegin": 0.1,
          "enterEnd": 0.5,
          "exitEnd": 3.4,
          "enterAnimation": "circleopen",
          "style": {
            "fontFamily": "Playfair Display"
          }
        },
        {
          "type": "TEXT",
          "html": "<div style='color:#1E1A16; font-size:60px; line-height:1.05; font-weight:700;'>{{p.point}}</div>",
          "width": 640,
          "x": 320,
          "y": 660,
          "anchor": "top-left",
          "track": 3,
          "enterBegin": 0.3,
          "enterEnd": 0.75,
          "exitEnd": 3.4,
          "enterAnimation": "smoothright",
          "style": {
            "fontFamily": "Playfair Display"
          }
        },
        {
          "type": "TEXT",
          "html": "<div style='color:#4E463B; font-size:38px; line-height:1.45; font-weight:500;'>{{p.body}}</div>",
          "width": 820,
          "x": 130,
          "y": 1160,
          "anchor": "top-left",
          "track": 4,
          "enterBegin": 0.6,
          "enterEnd": 1.05,
          "exitEnd": 3.4,
          "enterAnimation": "fade",
          "style": {
            "fontFamily": "Inter"
          }
        },
        {
          "type": "TEXT",
          "html": "<div style='color:#9A9080; font-size:24px; font-weight:700; letter-spacing:4px;'>{{publication}} · KEY POINTS</div>",
          "x": 540,
          "y": 1780,
          "anchor": "center-center",
          "track": 1,
          "exitEnd": 3.4,
          "style": {
            "fontFamily": "Inter"
          }
        }
      ],
      "iterate": "points",
      "iterateAs": "p"
    },
    {
      "id": "close",
      "duration": 3,
      "backgroundColor": "#1E1A16",
      "visuals": [
        {
          "type": "SVG",
          "svg": "<svg width='1080' height='1920' viewBox='0 0 1080 1920' xmlns='http://www.w3.org/2000/svg'><rect width='1080' height='1920' fill='#1E1A16'/><path d='M420 660 H660 M420 720 H620 M420 780 H660 M420 840 H600' stroke='rgba(243,238,228,0.3)' stroke-width='8' stroke-linecap='round'/><rect x='388' y='600' width='300' height='320' rx='16' fill='none' stroke='#D64545' stroke-width='4'/></svg>",
          "width": 1080,
          "height": 1920,
          "exitEnd": 3
        },
        {
          "type": "TEXT",
          "html": "<div style='text-align:center; color:#F3EEE4; font-size:64px; line-height:1.15; font-weight:700;'>{{closingLine}}</div>",
          "width": 900,
          "x": 540,
          "y": 1020,
          "anchor": "top-center",
          "track": 1,
          "enterBegin": 0.25,
          "enterEnd": 0.7,
          "exitEnd": 3,
          "enterAnimation": "smoothup",
          "style": {
            "fontFamily": "Playfair Display"
          }
        },
        {
          "type": "TEXT",
          "html": "<div style='display:inline-block; background:{{accentColor}}; color:#F3EEE4; border-radius:999px; padding:20px 52px; font-size:32px; font-weight:800;'>{{handle}}</div>",
          "x": 540,
          "y": 1280,
          "anchor": "top-center",
          "track": 2,
          "enterBegin": 0.7,
          "enterEnd": 1.1,
          "exitEnd": 3,
          "enterAnimation": "circleopen",
          "style": {
            "fontFamily": "Inter"
          }
        }
      ]
    }
  ],
  "audios": [
    {
      "src": "{{musicUrl}}",
      "volume": 0.14
    }
  ],
  "variables": {
    "publication": "THE LONGREAD",
    "readTime": "8 MIN READ · SUMMARIZED",
    "articleTitle": "Why four-day weeks keep beating the five-day office",
    "byline": "Adapted from an essay by J. Okafor",
    "coverImage": "https://images.pexels.com/photos/10004971/pexels-photo-10004971.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
    "closingLine": "The full piece is worth your coffee.",
    "handle": "@thelongread",
    "accentColor": "#D64545",
    "points": [
      {
        "no": "01",
        "point": "Output held steady",
        "body": "Across 61 companies, productivity stayed flat or rose even as hours dropped by 20%."
      },
      {
        "no": "02",
        "point": "Burnout fell sharply",
        "body": "Reported exhaustion dropped 71% and sick days nearly halved within six months."
      },
      {
        "no": "03",
        "point": "Almost nobody went back",
        "body": "92% of firms kept the four-day week after the trial officially ended."
      }
    ],
    "musicUrl": "https://cdn.pixabay.com/audio/2025/04/21/audio_ed6f0ed574.mp3"
  }
}

More News / media templates

View all ↗

Ready to ship video at scale?

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