Thread Cover

X/LinkedIn thread cover with a hook, thread-rail motif and 'A Thread' arrow pill — swap the handle, hook, label, count and accent.

Type: Image
Format: Instagram Post · 1:1
Orientation: Square

Variables

Open in editor

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

Customize Thread Cover

Thread Cover is a ready-to-render Content creator / social image design formatted for Instagram Post · 1:1 and support for variables. 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.

handleText

@elenacodes

titlePreText

I rewrote my landing page 9 times.

highlightText

Here's what

titlePostText

finally doubled signups.

threadLabelText

A THREAD

subCountText

9 lessons inside

inkColor

#14181D

offWhiteColor

#F0F4F8

mutedColor

#828C97

accentColor

#38BDF8

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-social-thread-cover",
  "resolution": "instagram-post",
  "outputFormat": "png",
  "backgroundColor": "#14181D",
  "variables": {
    "handle": "@elenacodes",
    "titlePre": "I rewrote my landing page 9 times.",
    "highlight": "Here's what",
    "titlePost": "finally doubled signups.",
    "threadLabel": "A THREAD",
    "subCount": "9 lessons inside",
    "ink": "#14181D",
    "offWhite": "#F0F4F8",
    "muted": "#828C97",
    "accent": "#38BDF8"
  },
  "visuals": [
    {
      "type": "SVG",
      "width": 1080,
      "height": 1080,
      "position": "center-center",
      "track": 0,
      "svg": "<svg width='1080' height='1080' viewBox='0 0 1080 1080' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='bg' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='#182029'/><stop offset='0.55' stop-color='#14181D'/><stop offset='1' stop-color='#0F1216'/></linearGradient><radialGradient id='gl' cx='0.88' cy='0.9' r='0.7'><stop offset='0' stop-color='{{accent}}' stop-opacity='0.2'/><stop offset='1' stop-color='{{accent}}' stop-opacity='0'/></radialGradient></defs><rect width='1080' height='1080' fill='url(#bg)'/><rect width='1080' height='1080' fill='url(#gl)'/><rect x='40' y='40' width='1000' height='1000' rx='30' fill='none' stroke='#FFFFFF' stroke-opacity='0.08' stroke-width='1.5'/></svg>"
    },
    {
      "type": "SVG",
      "x": 80,
      "y": 96,
      "width": 360,
      "height": 56,
      "anchor": "top-left",
      "track": 4,
      "svg": "<svg width='360' height='56' viewBox='0 0 360 56' xmlns='http://www.w3.org/2000/svg'><circle cx='28' cy='28' r='24' fill='{{accent}}' fill-opacity='0.18' stroke='{{accent}}' stroke-opacity='0.55' stroke-width='1.4'/><circle cx='28' cy='23' r='7' fill='{{accent}}'/><path d='M15 42 C15 32, 41 32, 41 42' fill='{{accent}}'/><text x='66' y='37' font-family='IBM Plex Mono, monospace' font-size='24' font-weight='500' fill='{{offWhite}}'>{{handle}}</text></svg>"
    },
    {
      "type": "SVG",
      "x": 92,
      "y": 320,
      "width": 40,
      "height": 470,
      "anchor": "top-left",
      "track": 4,
      "svg": "<svg width='40' height='470' viewBox='0 0 40 470' xmlns='http://www.w3.org/2000/svg'><line x1='20' y1='20' x2='20' y2='450' stroke='{{accent}}' stroke-opacity='0.35' stroke-width='2' stroke-dasharray='2 10'/><circle cx='20' cy='20' r='9' fill='{{accent}}'/><circle cx='20' cy='235' r='6' fill='{{accent}}' fill-opacity='0.6'/><circle cx='20' cy='450' r='6' fill='{{accent}}' fill-opacity='0.6'/></svg>"
    },
    {
      "type": "TEXT",
      "x": 168,
      "y": 306,
      "width": 838,
      "anchor": "top-left",
      "track": 5,
      "style": {
        "fontFamily": "DM Sans"
      },
      "html": "<div style='font-size:78px; font-weight:800; line-height:1.05; letter-spacing:-0.035em; color:{{offWhite}};'>{{titlePre}} <span style='color:{{accent}};'>{{highlight}}</span> {{titlePost}}</div>"
    },
    {
      "type": "SVG",
      "x": 80,
      "y": 902,
      "width": 268,
      "height": 60,
      "anchor": "top-left",
      "track": 7,
      "svg": "<svg width='268' height='60' viewBox='0 0 268 60' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='2' width='268' height='56' rx='28' fill='{{accent}}'/><text x='34' y='38' font-family='IBM Plex Mono, monospace' font-size='21' font-weight='600' letter-spacing='2' fill='{{ink}}'>{{threadLabel}}</text><path d='M212 30 L238 30 M228 20 L238 30 L228 40' stroke='{{ink}}' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>"
    },
    {
      "type": "TEXT",
      "x": 372,
      "y": 918,
      "width": 500,
      "anchor": "top-left",
      "track": 7,
      "text": "{{subCount}}",
      "style": {
        "fontFamily": "IBM Plex Mono",
        "fontSize": "22px",
        "fontWeight": "500",
        "color": "#828C97"
      }
    }
  ]
}