Social media x postcard

--- name: social-x-post-card zhname : "X (Twitter) Post Card" enname : "X / Twitter Post Card" emoji: "𝕏" description: "Realistic X Tweet Card + Interactive Data (likes/reposts/views), compatible with video overlays or image card sharing" category: card scenario: marketing aspecthint : "1280×720 or 1080×1080" featured: 44 tags: ["twitter", "x", "social", "card", "overlay"] exampleid : sample-social-x-post-card examplename : "X Post Card · AlchainHust Quote" exampleformat : markdown exampletagline : "X dark mode + engagement data" exampledesc : "A quote tweet + 12.3K likes / 1.2K reposts + blue checkmark" examplesourceurl : "https://hyperframes.heygen.com/catalog" examplesourcelabel : "hyperframes · x-post" od: mode: prototype surface: web platform: desktop scenario: marketing upstream: "https://github.com/nexu-io/html-anything" preview: type: html entry: index.html reload: debounce-100 designsystem : requires: false exampleprompt : "Use the 'X (Twitter) Post Card' template to turn my content into a 'realistic X tweet card + interactive data (likes/reposts/views), optimized for video overlays or image card sharing." Maintain the template’s visual signature, use real content and data, and avoid lorem ipsum and placeholder images." --- 【Template: X (Twitter) Post Card】 【Intent】Render a tweet (or a user’s quote) as a highly realistic X post card for use in video overlays, Twitter image posts, and knowledge sharing. Inspired by hyperframes x-post. 【Canvas】1280×720 or 1080×1080, dark background#0f1419 or light background#ffffff (depending on the X theme); card centered, with soft shadows. 【Card Structure】 - Border: 16px rounded corners, 1px border#2f3336 (dark) /#eff3f4 (light), 16px padding. - Top row: Profile picture (48×48 circle, placeholder using CSS gradient) + username + handle@username + verified blue checkmark + time (mono, 12px, gray). - Main text: 17:22px, weight 400; links in X blue#1d9bf0 ; hashtags same color; mentions same color; 0.6em spacing between paragraphs. - Optional: Quote card (embedded card, gray background, 12px rounded corners). - Optional: 1 image (CSS gradient + description placeholder; external links to images are not allowed), aspect ratio 16:9, 12px rounded corners. - Interaction row: 4 icons + numbers (Reply / Retweet / Quote / Like); icons use inline SVG (X’s official style), gray, change color on hover. - Single-line SVG X logo in the top-right corner. - View count row: 👁️ + number (small text). 【Fonts】 - Western text:Chirp (X’s font) → fallbackInter orSegoe UI . - Chinese text:Noto Sans SC /PingFang SC . - Numbers: Same as main font; do not use a monospaced font. 【Design Details】 - Light color scheme: bg#fff , text#0f1419 , secondary#536471 , border#eff3f4 , accent#1d9bf0 . - Dark color scheme (recommended, for video overlays): bg#000 , text#e7e9ea , secondary#71767b , border#2f3336 , accent#1d9bf0 . - Number formatting: 1.2K / 4.5M (do not use raw numbers like 1234). - Content must come from user input; do not fabricate tweets. - If user input is data → automatically summarize it into a single “quote” tweet (≤ 280 characters). - Single HTML file; inline SVG icons; no external imagesURL . - Optional: Add a subtle radial highlight to the back of the cardradial-gradient(...) to improve the readability of video overlays.