{"id":"7a90cb14-91bc-4b2a-9d64-8e6472d03e09","name":"Twitter Post Screenshot","slug":"twitter-post-screenshot","category":"post-screenshots","description":"A pixel-faithful X/Twitter post screenshot on a transparent background — drop it on any backdrop or fork it and add your own gradient behind the card.","sample_params":{"handle":"adareyes","initials":"AR","likes":"2,318","name":"Ada Reyes","post_text":"Shipped our OG images with a single template URL today.\n\nNo more Puppeteer scripts, no more stale caches. Just ?title=... and done.\n\nHonestly should have done this a year ago.","reposts":"412","timestamp":"9:41 AM · Aug 6, 2026"},"spec":{"name":"twitter-post-screenshot","width":1200,"height":800,"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: transparent;\n  display: flex; align-items: center; justify-content: center;\n}\n.card {\n  position: relative; z-index: 1; width: 900px; background: #000000;\n  border: 1px solid #2f3336; border-radius: 20px;\n  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.4);\n  padding: 40px 44px 34px;\n}\n.head { display: flex; align-items: center; gap: 18px; }\n.avatar { width: 80px; height: 80px; border-radius: 50%; flex: none; overflow: hidden;\n  background: linear-gradient(135deg, #1d9bf0, #7856ff);\n  display: flex; align-items: center; justify-content: center;\n  color: #fff; font-size: 30px; 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-row { display: flex; align-items: center; gap: 8px; min-width: 0; }\n.name { font-size: 26px; font-weight: 800; color: #e7e9ea; line-height: 1.25;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.badge { flex: none; width: 24px; height: 24px; }\n.handle { font-size: 21px; color: #71767b; line-height: 1.35; margin-top: 2px;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.xmark { position: absolute; top: 40px; right: 44px; width: 32px; height: 32px; }\n.body {\n  margin-top: 26px; font-size: 29px; line-height: 1.42; color: #e7e9ea;\n  letter-spacing: -0.2px; white-space: pre-wrap; overflow-wrap: break-word;\n  display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden;\n}\n.time { margin-top: 26px; font-size: 20px; color: #71767b;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.stats { margin-top: 22px; padding-top: 20px; border-top: 1px solid #2f3336;\n  display: flex; align-items: center; gap: 36px; }\n.stat { display: flex; align-items: center; gap: 10px; font-size: 20px; color: #71767b; }\n.stat b { color: #e7e9ea; font-weight: 700; }\n.icon { width: 24px; height: 24px; flex: none; }\n\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cdiv class='card'\u003e\n  \u003csvg class='xmark' viewBox='0 0 24 24' fill='#e7e9ea'\u003e\u003cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/\u003e\u003c/svg\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-row'\u003e\n        \u003cspan class='name'\u003e{{.name}}\u003c/span\u003e\n        {{if .verified}}\u003csvg class='badge' viewBox='0 0 22 22' fill='#1d9bf0'\u003e\u003cpath d='M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z'/\u003e\u003c/svg\u003e{{end}}\n      \u003c/div\u003e\n      \u003cdiv class='handle'\u003e@{{.handle}}\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class='body'\u003e{{.post_text}}\u003c/div\u003e\n  \u003cdiv class='time'\u003e{{.timestamp}}\u003c/div\u003e\n  \u003cdiv class='stats'\u003e\n    \u003cspan class='stat'\u003e\u003csvg class='icon' viewBox='0 0 24 24' fill='#71767b'\u003e\u003cpath d='M4.5 3.88l4.432 4.14-1.364 1.46L5.5 7.55V16c0 1.1.896 2 2 2H13v2H7.5c-2.209 0-4-1.79-4-4V7.55L1.432 9.48.068 8.02 4.5 3.88zM16.5 6H11V4h5.5c2.209 0 4 1.79 4 4v8.45l2.068-1.93 1.364 1.46-4.432 4.14-4.432-4.14 1.364-1.46 2.068 1.93V8c0-1.1-.896-2-2-2z'/\u003e\u003c/svg\u003e\u003cb\u003e{{.reposts}}\u003c/b\u003e reposts\u003c/span\u003e\n    \u003cspan class='stat'\u003e\u003csvg class='icon' viewBox='0 0 24 24' fill='#f91880'\u003e\u003cpath d='M12 21.638h-.014C9.403 21.59 1.95 14.856 1.95 8.478c0-3.064 2.525-5.754 5.403-5.754 2.29 0 3.83 1.58 4.646 2.73.814-1.148 2.354-2.73 4.645-2.73 2.88 0 5.404 2.69 5.404 5.755 0 6.376-7.454 13.11-10.037 13.157H12z'/\u003e\u003c/svg\u003e\u003cb\u003e{{.likes}}\u003c/b\u003e likes\u003c/span\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."},"handle":{"type":"string","required":true,"maxLen":30,"description":"Author's @handle without the @ sign, e.g. 'adareyes'."},"initials":{"type":"string","maxLen":3,"description":"Fallback avatar initials used when no avatar_url is given."},"likes":{"type":"string","default":"0","maxLen":20,"description":"Like count, e.g. '2,318' or '18K'."},"name":{"type":"string","required":true,"maxLen":50,"description":"Author's display name shown in bold."},"post_text":{"type":"string","required":true,"maxLen":500,"description":"The post body. Newlines are preserved; long text is clamped to eight lines."},"reposts":{"type":"string","default":"0","maxLen":20,"description":"Repost count, e.g. '412' or '1.2K'."},"timestamp":{"type":"string","maxLen":60,"description":"Timestamp line under the post, e.g. '9:41 AM · Aug 6, 2026'."},"verified":{"type":"string","default":"1","maxLen":5,"description":"Show the blue verified checkmark next to the name; empty string hides it."}}}}