{"id":"2a3761ac-6a8b-446d-bc11-f8b97b7d0f2a","name":"LinkedIn Post Screenshot","slug":"linkedin-post-screenshot","category":"post-screenshots","description":"A crisp LinkedIn-style post screenshot with avatar, author name, headline, post text and live-looking reaction counts — perfect for sharing social proof in decks, newsletters and landing pages.","sample_params":{"comments":"86 comments","headline":"VP Engineering at Northwind · Building calm infrastructure","initials":"ML","likes":"1,248","name":"Maya Lindqvist","post_text":"We replaced 4,000 lines of hand-rolled image scripts with a single template URL.\n\nEvery blog post, every certificate, every OG card — rendered on demand, cached forever.\n\nThe best infrastructure is the kind you stop thinking about.","timestamp":"2d"},"spec":{"name":"linkedin-post-screenshot","width":1200,"height":900,"scale":2,"html":"\u003c!doctype html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\u003cmeta charset='utf-8'\u003e\n\u003cstyle\u003e\n* { margin: 0; padding: 0; box-sizing: border-box; }\nhtml, body { width: 100vw; height: 100vh; overflow: hidden; }\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n  background: linear-gradient(135deg, #dbe7f3 0%, #eef2f7 45%, #dce9e4 100%);\n  display: flex; align-items: center; justify-content: center;\n}\n.stage { position: relative; z-index: 1; width: 920px; }\n.glow { position: absolute; z-index: 0; width: 700px; height: 700px; border-radius: 50%;\n  background: radial-gradient(circle, rgba(10,102,194,0.18) 0%, rgba(10,102,194,0) 70%);\n  top: -180px; right: -140px; }\n.card {\n  position: relative; background: #ffffff; border-radius: 16px;\n  box-shadow: 0 24px 60px rgba(15, 35, 60, 0.18), 0 2px 8px rgba(15, 35, 60, 0.08);\n  padding: 44px 48px 36px;\n}\n.head { display: flex; align-items: center; gap: 20px; }\n.avatar { width: 84px; height: 84px; border-radius: 50%; flex: none; overflow: hidden;\n  background: linear-gradient(135deg, #0a66c2, #378fe9);\n  display: flex; align-items: center; justify-content: center;\n  color: #fff; font-size: 32px; font-weight: 700; letter-spacing: 1px; }\n.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.who { min-width: 0; }\n.name { font-size: 27px; font-weight: 700; color: #191919; line-height: 1.25;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.headline { font-size: 19px; color: #666666; line-height: 1.35; margin-top: 3px;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.time { font-size: 17px; color: #8a8a8a; margin-top: 3px; display: flex; align-items: center; gap: 6px; }\n.globe { width: 15px; height: 15px; border-radius: 50%; border: 1.6px solid #8a8a8a; position: relative; flex: none; }\n.globe::before { content: ''; position: absolute; inset: 1px 4.2px; border: 1.2px solid #8a8a8a;\n  border-top: none; border-bottom: none; border-radius: 50%; }\n.body {\n  margin-top: 28px; font-size: 24px; line-height: 1.5; color: #1d1d1d;\n  white-space: pre-wrap; overflow-wrap: break-word;\n  display: -webkit-box; -webkit-line-clamp: 10; -webkit-box-orient: vertical; overflow: hidden;\n}\n.social { margin-top: 30px; padding-top: 18px; border-top: 1px solid #e8e8e8;\n  display: flex; align-items: center; justify-content: space-between; }\n.reactions { display: flex; align-items: center; gap: 12px; }\n.pills { display: flex; }\n.pill { width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid #ffffff;\n  display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; }\n.pill + .pill { margin-left: -9px; }\n.p-like { background: #378fe9; z-index: 3; }\n.p-heart { background: #df704d; z-index: 2; }\n.p-idea { background: #f5bb5c; z-index: 1; }\n.count { font-size: 19px; color: #666666; }\n.comments { font-size: 19px; color: #666666; }\n.corner { position: absolute; top: 40px; right: 44px; color: #8a8a8a;\n  font-size: 30px; letter-spacing: 2px; font-weight: 700; line-height: 0.4; }\n\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cdiv class='glow'\u003e\u003c/div\u003e\n\u003cdiv class='stage'\u003e\n  \u003cdiv class='card'\u003e\n    \u003cdiv class='corner'\u003e\u0026#8943;\u003c/div\u003e\n    \u003cdiv class='head'\u003e\n      \u003cdiv class='avatar'\u003e{{if .avatar_url}}\u003cimg src='{{.avatar_url}}' alt=''\u003e{{else}}{{.initials}}{{end}}\u003c/div\u003e\n      \u003cdiv class='who'\u003e\n        \u003cdiv class='name'\u003e{{.name}}\u003c/div\u003e\n        \u003cdiv class='headline'\u003e{{.headline}}\u003c/div\u003e\n        \u003cdiv class='time'\u003e{{.timestamp}} \u0026middot; \u003cspan class='globe'\u003e\u003c/span\u003e\u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class='body'\u003e{{.post_text}}\u003c/div\u003e\n    \u003cdiv class='social'\u003e\n      \u003cdiv class='reactions'\u003e\n        \u003cdiv class='pills'\u003e\n          \u003cspan class='pill p-like'\u003e\u0026#128077;\u003c/span\u003e\n          \u003cspan class='pill p-heart'\u003e\u0026#10084;\u003c/span\u003e\n          \u003cspan class='pill p-idea'\u003e\u0026#128161;\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cspan class='count'\u003e{{.likes}}\u003c/span\u003e\n      \u003c/div\u003e\n      \u003cspan class='comments'\u003e{{.comments}}\u003c/span\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n","params":{"avatar_url":{"type":"image_url","description":"Optional profile photo URL, fetched server-side and shown as a round avatar."},"comments":{"type":"string","maxLen":40,"description":"Comment summary on the right, e.g. '86 comments'."},"headline":{"type":"string","maxLen":120,"description":"Author headline or handle shown under the name."},"initials":{"type":"string","maxLen":3,"description":"Fallback avatar initials used when no avatar_url is given."},"likes":{"type":"string","default":"0","maxLen":20,"description":"Reaction count shown next to the reaction icons, e.g. '1,248'."},"name":{"type":"string","required":true,"maxLen":60,"description":"Author's display name."},"post_text":{"type":"string","required":true,"maxLen":600,"description":"The post body. Newlines are preserved; long text is clamped to ten lines."},"timestamp":{"type":"string","default":"1d","maxLen":20,"description":"Relative post age, e.g. '2d' or '5h'."}}}}