Product Hunt Launch

Launch-day card with an upvote motif, big product name, tagline, upvote tile and date — swap product, tagline, vote count and accent.

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

Variables

Open in editor

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

Customize Product Hunt Launch

Product Hunt Launch is a ready-to-render SaaS / dev tools image design formatted for Open Graph · 1200×630 and support for variables. 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

WE'RE LIVE ON PRODUCT HUNT

productNameText

zvid studio

taglineText

Turn a JSON file into a finished, on-brand video — no timeline required.

voteCountText

512

voteLabelText

upvotes

ctaLabelText

Upvote us

dateText

Launching today

brandText

zvid

accentColor

#FF6B4A

inkColorColor

#0B0A09

headingColorColor

#FFF6F2

subColorColor

#C9B7AE

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-product-hunt",
  "resolution": "custom",
  "width": 1200,
  "height": 630,
  "outputFormat": "png",
  "backgroundColor": "#0B0A09",
  "variables": {
    "eyebrow": "WE'RE LIVE ON PRODUCT HUNT",
    "productName": "zvid studio",
    "tagline": "Turn a JSON file into a finished, on-brand video — no timeline required.",
    "voteCount": "512",
    "voteLabel": "upvotes",
    "ctaLabel": "Upvote us",
    "date": "Launching today",
    "brand": "zvid",
    "accent": "#FF6B4A",
    "inkColor": "#0B0A09",
    "headingColor": "#FFF6F2",
    "subColor": "#C9B7AE"
  },
  "visuals": [
    {
      "type": "SVG",
      "width": 1200,
      "height": 630,
      "position": "center-center",
      "track": 0,
      "svg": "<svg width='1200' height='630' viewBox='0 0 1200 630' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='bg' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='#1E100A'/><stop offset='0.55' stop-color='#0B0A09'/><stop offset='1' stop-color='#090807'/></linearGradient><radialGradient id='glow' cx='0.82' cy='0.2' r='0.7'><stop offset='0' stop-color='#FF6B4A' stop-opacity='0.28'/><stop offset='1' stop-color='#FF6B4A' stop-opacity='0'/></radialGradient></defs><rect width='1200' height='630' fill='url(#bg)'/><rect width='1200' height='630' fill='url(#glow)'/><rect x='24' y='24' width='1152' height='582' rx='28' fill='none' stroke='#FFFFFF' stroke-opacity='0.07' stroke-width='1.5'/></svg>"
    },
    {
      "type": "SVG",
      "x": 72,
      "y": 104,
      "width": 40,
      "height": 40,
      "anchor": "top-left",
      "track": 4,
      "svg": "<svg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'><circle cx='20' cy='20' r='19' fill='none' stroke='{{accent}}' stroke-width='2'/><path d='M13 23 L20 14 L27 23 Z' fill='{{accent}}'/><line x1='20' y1='23' x2='20' y2='28' stroke='{{accent}}' stroke-width='2.5' stroke-linecap='round'/></svg>"
    },
    {
      "type": "TEXT",
      "x": 128,
      "y": 112,
      "width": 640,
      "anchor": "top-left",
      "track": 4,
      "text": "{{eyebrow}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "22px",
        "fontWeight": "600",
        "letterSpacing": "0.24em",
        "color": "#FF6B4A"
      }
    },
    {
      "type": "TEXT",
      "x": 70,
      "y": 166,
      "width": 720,
      "anchor": "top-left",
      "track": 5,
      "style": {
        "fontFamily": "Syne"
      },
      "html": "<div style='font-size:82px; font-weight:800; line-height:0.98; letter-spacing:-0.02em; color:{{headingColor}};'>{{productName}}</div>"
    },
    {
      "type": "TEXT",
      "x": 74,
      "y": 366,
      "width": 560,
      "anchor": "top-left",
      "track": 5,
      "text": "{{tagline}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "25px",
        "fontWeight": "500",
        "lineHeight": "1.4",
        "color": "#C9B7AE"
      }
    },
    {
      "type": "SVG",
      "x": 72,
      "y": 474,
      "width": 216,
      "height": 64,
      "anchor": "top-left",
      "track": 6,
      "svg": "<svg width='216' height='64' viewBox='0 0 216 64' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='216' height='64' rx='32' fill='{{accent}}'/><path d='M40 38 L50 26 L60 38 Z' fill='{{inkColor}}'/><line x1='50' y1='38' x2='50' y2='44' stroke='{{inkColor}}' stroke-width='3' stroke-linecap='round'/><text x='78' y='40' font-family='Syne, Arial' font-size='23' font-weight='700' fill='{{inkColor}}'>{{ctaLabel}}</text></svg>"
    },
    {
      "type": "SVG",
      "x": 312,
      "y": 482,
      "width": 220,
      "height": 48,
      "anchor": "top-left",
      "track": 6,
      "svg": "<svg width='220' height='48' viewBox='0 0 220 48' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='220' height='48' rx='24' fill='#FFFFFF' fill-opacity='0.05' stroke='#FFFFFF' stroke-opacity='0.12' stroke-width='1'/><circle cx='26' cy='24' r='5' fill='{{accent}}'/><text x='42' y='30' font-family='Space Grotesk, Arial' font-size='18' font-weight='500' fill='#D8CCC5'>{{date}}</text></svg>"
    },
    {
      "type": "SVG",
      "x": 838,
      "y": 150,
      "width": 290,
      "height": 290,
      "anchor": "top-left",
      "track": 5,
      "svg": "<svg width='290' height='290' viewBox='0 0 290 290' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='290' height='290' rx='36' fill='#18110D' stroke='{{accent}}' stroke-opacity='0.5' stroke-width='1.5'/><path d='M108 128 L145 78 L182 128 Z' fill='{{accent}}'/><rect x='131' y='122' width='28' height='26' fill='{{accent}}'/><text x='145' y='214' font-family='Syne, Arial' font-size='66' font-weight='800' fill='{{headingColor}}' text-anchor='middle'>{{voteCount}}</text><text x='145' y='250' font-family='Space Grotesk, Arial' font-size='20' font-weight='500' fill='{{subColor}}' text-anchor='middle' letter-spacing='2'>{{voteLabel}}</text></svg>"
    },
    {
      "type": "SVG",
      "x": 72,
      "y": 556,
      "width": 150,
      "height": 44,
      "anchor": "top-left",
      "track": 6,
      "svg": "<svg width='150' height='44' viewBox='0 0 150 44' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='22' r='7' fill='{{accent}}'/><text x='30' y='29' font-family='Syne, Arial' font-size='20' font-weight='700' fill='#FFF6F2'>{{brand}}</text></svg>"
    }
  ]
}