Feature Launch

Photo-hero card announcing a new feature with headline, value line, NEW badge and a Try-it CTA — swap name, copy, photo and accent.

Type: Image
Format: Open Graph · 1200×630
Orientation: Landscape

Variablesphoto

Open in editor

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

Customize Feature Launch

Feature Launch is a ready-to-render SaaS / dev tools image design formatted for Open Graph · 1200×630 and support for variables, photo. Open it in the editor to replace its copy and media, then render variations through the Zvid API.

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

eyebrowText

NEW FEATURE

headlineAText

Instant

headlineBText

Replays

valueLineText

Scrub, trim and share any render in a single click — no re-export, no waiting.

badgeText

NEW

ctaLabelText

Try it now

brandText

zvid studio

accentColor

#C6F24E

inkColorColor

#0B0B12

headingColorColor

#FFFFFF

subColorColor

#C9C6D6

featureImageMedia URL

pexels-photo-1128207.jpeg

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 ↗

{
  "type": "image",
  "name": "img-saas-feature-launch",
  "resolution": "custom",
  "width": 1200,
  "height": 630,
  "outputFormat": "png",
  "backgroundColor": "#0B0B12",
  "variables": {
    "eyebrow": "NEW FEATURE",
    "headlineA": "Instant",
    "headlineB": "Replays",
    "valueLine": "Scrub, trim and share any render in a single click — no re-export, no waiting.",
    "badge": "NEW",
    "ctaLabel": "Try it now",
    "brand": "zvid studio",
    "accent": "#C6F24E",
    "inkColor": "#0B0B12",
    "headingColor": "#FFFFFF",
    "subColor": "#C9C6D6",
    "featureImage": "https://images.pexels.com/photos/1128207/pexels-photo-1128207.jpeg?auto=compress&cs=tinysrgb&w=1600"
  },
  "visuals": [
    {
      "type": "IMAGE",
      "src": "{{featureImage}}",
      "width": 1200,
      "height": 630,
      "position": "center-center",
      "resize": "cover",
      "track": 0
    },
    {
      "type": "SVG",
      "width": 1200,
      "height": 630,
      "position": "center-center",
      "track": 1,
      "svg": "<svg width='1200' height='630' viewBox='0 0 1200 630' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='sx' x1='0' y1='0' x2='1' y2='0'><stop offset='0' stop-color='#0B0B12' stop-opacity='0.97'/><stop offset='0.56' stop-color='#0B0B12' stop-opacity='0.72'/><stop offset='1' stop-color='#0B0B12' stop-opacity='0.12'/></linearGradient><linearGradient id='sy' x1='0' y1='1' x2='0' y2='0'><stop offset='0' stop-color='#0B0B12' stop-opacity='0.86'/><stop offset='0.44' stop-color='#0B0B12' stop-opacity='0'/></linearGradient></defs><rect width='1200' height='630' fill='url(#sx)'/><rect width='1200' height='630' fill='url(#sy)'/></svg>"
    },
    {
      "type": "SVG",
      "x": 72,
      "y": 150,
      "width": 140,
      "height": 8,
      "anchor": "top-left",
      "track": 4,
      "svg": "<svg width='140' height='8' viewBox='0 0 140 8' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='2' width='132' height='4' rx='2' fill='{{accent}}'/></svg>"
    },
    {
      "type": "TEXT",
      "x": 72,
      "y": 172,
      "width": 560,
      "anchor": "top-left",
      "track": 5,
      "text": "{{eyebrow}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "24px",
        "fontWeight": "600",
        "letterSpacing": "0.3em",
        "color": "#C6F24E"
      }
    },
    {
      "type": "TEXT",
      "x": 68,
      "y": 214,
      "width": 960,
      "anchor": "top-left",
      "track": 5,
      "style": {
        "fontFamily": "Sora"
      },
      "html": "<div style='font-size:90px; font-weight:800; line-height:0.96; letter-spacing:-0.03em; color:{{headingColor}};'>{{headlineA}} <span style='color:{{accent}};'>{{headlineB}}</span></div>"
    },
    {
      "type": "TEXT",
      "x": 74,
      "y": 356,
      "width": 560,
      "anchor": "top-left",
      "track": 5,
      "text": "{{valueLine}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "29px",
        "fontWeight": "500",
        "lineHeight": "1.35",
        "color": "#C9C6D6"
      }
    },
    {
      "type": "SVG",
      "x": 72,
      "y": 476,
      "width": 236,
      "height": 64,
      "anchor": "top-left",
      "track": 6,
      "svg": "<svg width='236' height='64' viewBox='0 0 236 64' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='236' height='64' rx='32' fill='{{accent}}'/><text x='34' y='40' font-family='Sora, Arial' font-size='23' font-weight='700' fill='{{inkColor}}'>{{ctaLabel}}</text><line x1='178' y1='32' x2='206' y2='32' stroke='{{inkColor}}' stroke-width='3' stroke-linecap='round'/><path d='M197 23 L208 32 L197 41' fill='none' stroke='{{inkColor}}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>"
    },
    {
      "type": "SVG",
      "x": 1048,
      "y": 48,
      "width": 104,
      "height": 104,
      "anchor": "top-left",
      "track": 6,
      "svg": "<svg width='104' height='104' viewBox='0 0 104 104' xmlns='http://www.w3.org/2000/svg'><circle cx='52' cy='52' r='50' fill='{{accent}}'/><text x='52' y='63' font-family='Sora, Arial' font-size='27' font-weight='800' fill='{{inkColor}}' text-anchor='middle' letter-spacing='1'>{{badge}}</text></svg>"
    },
    {
      "type": "SVG",
      "x": 1128,
      "y": 558,
      "width": 200,
      "height": 44,
      "anchor": "top-right",
      "track": 6,
      "svg": "<svg width='200' height='44' viewBox='0 0 200 44' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='22' r='7' fill='{{accent}}'/><text x='30' y='29' font-family='Space Grotesk, Arial' font-size='20' font-weight='600' fill='#FFFFFF'>{{brand}}</text></svg>"
    }
  ]
}