{"id":"0418d9b1-b062-49c2-9156-e2a0c866fefe","name":"Classic Tweet Screenshot","slug":"classic-tweet-screenshot","category":"post-screenshots","description":"A light classic tweet card on a transparent canvas — avatar, verified badge, blue-highlighted @mentions, #hashtags and links, an optional attached photo, timestamp with source, and a Likes/Retweets metrics row.","sample_params":{"handle":"mayabuilds","initials":"MC","likes":"1.4k","name":"Maya Chen","post_text":"This tool renders tweet screenshots from a single URL. So clever\n\nWorks with @mentions, #hashtags and links: https://media0.example","retweets":"177","timestamp":"9:11 PM · Jan 18, 2021 · Twitter Web App","verified":"1"},"spec":{"name":"classic-tweet-screenshot","width":1100,"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: transparent;\n  display: flex; align-items: center; justify-content: center;\n}\n.card {\n  width: 860px; background: #ffffff;\n  border: 1px solid #e6ecf0; border-radius: 24px;\n  box-shadow: 0 10px 40px rgba(30, 55, 90, 0.08), 0 2px 8px rgba(30, 55, 90, 0.04);\n  padding: 44px 48px 40px; color: #0f1419;\n}\n.head { display: flex; align-items: center; gap: 18px; }\n.avatar { width: 76px; height: 76px; 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: 28px; 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: 25px; font-weight: 800; 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: #536471; line-height: 1.35; margin-top: 1px;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.body {\n  margin-top: 26px; font-size: 29px; line-height: 1.45; letter-spacing: -0.2px;\n  overflow-wrap: break-word;\n  display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden;\n}\n.b { color: #1d9bf0; }\n.photo { margin-top: 26px; border: 1px solid #e6ecf0; border-radius: 20px; overflow: hidden; }\n.photo img { display: block; width: 100%; max-height: 430px; object-fit: cover; }\n.time { margin-top: 26px; font-size: 20px; color: #536471;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.stats { margin-top: 20px; display: flex; align-items: center; gap: 36px; font-size: 20px; color: #536471; }\n.stats b { color: #0f1419; font-weight: 700; margin-right: 6px; }\n\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cdiv class='card'\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{{range $pi, $para := split .post_text \"\\n\"}}{{if $pi}}\u003cbr\u003e{{end}}{{range $wi, $w := split $para \" \"}}{{if $wi}} {{end}}{{if or (hasPrefix $w \"@\") (hasPrefix $w \"#\") (hasPrefix $w \"http\") (hasPrefix $w \"www.\")}}\u003cspan class='b'\u003e{{$w}}\u003c/span\u003e{{else}}{{$w}}{{end}}{{end}}{{end}}\u003c/div\u003e\n  {{if .photo}}\u003cdiv class='photo'\u003e\u003cimg src='{{.photo}}' alt=''\u003e\u003c/div\u003e{{end}}\n  \u003cdiv class='time'\u003e{{.timestamp}}\u003c/div\u003e\n  {{if or .likes .retweets}}\u003cdiv class='stats'\u003e{{if .likes}}\u003cspan\u003e\u003cb\u003e{{.likes}}\u003c/b\u003eLikes\u003c/span\u003e{{end}}{{if .retweets}}\u003cspan\u003e\u003cb\u003e{{.retweets}}\u003c/b\u003eRetweets\u003c/span\u003e{{end}}\u003c/div\u003e{{end}}\n\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n","params":{"avatar_url":{"type":"image_url","description":"Avatar image URL, fetched server-side."},"handle":{"type":"string","required":true,"maxLen":30,"description":"Handle without the @."},"initials":{"type":"string","maxLen":3,"description":"Avatar initials when no avatar_url is given."},"likes":{"type":"string","maxLen":12,"description":"Likes count, e.g. 1.4k. Empty hides it."},"name":{"type":"string","required":true,"maxLen":50,"description":"Display name."},"photo":{"type":"image_url","description":"Optional attached photo shown below the text."},"post_text":{"type":"string","required":true,"maxLen":600,"description":"Tweet text; newline-separated paragraphs. Words starting with @, #, http or www. render in Twitter blue."},"retweets":{"type":"string","maxLen":12,"description":"Retweets count, e.g. 177. Empty hides it."},"timestamp":{"type":"string","maxLen":60,"description":"Gray meta line, e.g. '9:11 PM · Jan 18, 2021 · Twitter Web App'."},"verified":{"type":"string","maxLen":5,"description":"Any non-empty value shows the blue verified badge."}}}}