{"id":"ca07a89b-b777-461a-ac18-56853c6f40a4","name":"Terminal Commit Card","slug":"terminal-commit-card","category":"git-commit-cards","description":"A terminal-styled git commit card with repo, branch, short SHA and commit message in crisp monospace — perfect for changelogs, release notes and social shares.","sample_params":{"author":"Liam van der Viven","branch":"main","message":"Serve images from API servers only; refund failed renders","repo":"liamvdv/media0","sha":"a664ad6"},"spec":{"name":"terminal-commit-card","width":1200,"height":630,"scale":2,"html":"\u003c!doctype html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\u003cmeta charset='utf-8'\u003e\n\u003clink rel='stylesheet' href='/lib/og.css'\u003e\n\u003cstyle\u003e\n.commit-card {\n  width: 100vw; height: 100vh;\n  display: flex; flex-direction: column; justify-content: space-between;\n  padding: 64px 72px; position: relative; overflow: hidden;\n  background: linear-gradient(140deg, #0a0e1a 0%, #101a2e 55%, #17233c 100%);\n  color: #e2e8f0;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;\n}\n.glow {\n  position: absolute; z-index: 0; width: 980px; height: 980px;\n  top: -520px; right: -340px; border-radius: 50%;\n  background: radial-gradient(circle, rgba(74,222,128,0.16) 0%, rgba(56,189,248,0.09) 45%, transparent 70%);\n}\n.glow--bl {\n  width: 720px; height: 720px; top: auto; right: auto; bottom: -420px; left: -280px;\n  background: radial-gradient(circle, rgba(56,189,248,0.12) 0%, transparent 65%);\n}\n.chrome { position: relative; z-index: 1; display: flex; align-items: center; gap: 28px; }\n.dots { display: flex; gap: 12px; flex-shrink: 0; }\n.dot { width: 20px; height: 20px; border-radius: 50%; }\n.dot--r { background: #ff5f57; } .dot--y { background: #febc2e; } .dot--g { background: #28c840; }\n.repo { font-size: 30px; font-weight: 600; color: #94a3b8; overflow-wrap: break-word; min-width: 0; }\n.branch {\n  margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px;\n  padding: 8px 22px; border-radius: 999px; font-size: 24px; font-weight: 600;\n  color: #4ade80; background: rgba(74,222,128,0.10); border: 2px solid rgba(74,222,128,0.35);\n  white-space: nowrap;\n}\n.branch::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: #4ade80; }\n.mid { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 30px; }\n.prompt { font-size: 27px; color: #38bdf8; letter-spacing: 0.03em; }\n.prompt::before { content: '$ '; color: #64748b; }\n.msg {\n  font-size: 58px; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; color: #f8fafc;\n  overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical; overflow: hidden;\n}\n.footer {\n  position: relative; z-index: 1; display: flex; align-items: flex-end;\n  justify-content: space-between; gap: 32px;\n}\n.author { display: flex; flex-direction: column; gap: 8px; min-width: 0; }\n.author-label { font-size: 22px; letter-spacing: 0.16em; text-transform: uppercase; color: #64748b; }\n.author-name { font-size: 32px; font-weight: 700; color: #e2e8f0; overflow-wrap: break-word; }\n.sha {\n  flex-shrink: 0; display: inline-flex; align-items: center; gap: 14px;\n  padding: 14px 28px; border-radius: 16px; font-size: 30px; font-weight: 700;\n  letter-spacing: 0.06em; color: #a5f3fc;\n  background: rgba(56,189,248,0.08); border: 2px solid rgba(56,189,248,0.30);\n}\n.sha::before { content: 'commit'; font-size: 22px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #38bdf8; opacity: 0.85; }\n\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cdiv class='commit-card'\u003e\n  \u003cdiv class='glow'\u003e\u003c/div\u003e\n  \u003cdiv class='glow glow--bl'\u003e\u003c/div\u003e\n  \u003cdiv class='chrome'\u003e\n    \u003cdiv class='dots'\u003e\u003cspan class='dot dot--r'\u003e\u003c/span\u003e\u003cspan class='dot dot--y'\u003e\u003c/span\u003e\u003cspan class='dot dot--g'\u003e\u003c/span\u003e\u003c/div\u003e\n    \u003cspan class='repo'\u003e{{.repo}}\u003c/span\u003e\n    \u003cspan class='branch'\u003e{{.branch}}\u003c/span\u003e\n  \u003c/div\u003e\n  \u003cdiv class='mid'\u003e\n    \u003cspan class='prompt'\u003egit show {{.sha}}\u003c/span\u003e\n    \u003cdiv class='msg'\u003e{{.message}}\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class='footer'\u003e\n    \u003cdiv class='author'\u003e\n      \u003cspan class='author-label'\u003eCommitted by\u003c/span\u003e\n      \u003cspan class='author-name'\u003e{{.author}}\u003c/span\u003e\n    \u003c/div\u003e\n    \u003cspan class='sha'\u003e{{.sha}}\u003c/span\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n","params":{"author":{"type":"string","required":true,"maxLen":60,"description":"Commit author's display name."},"branch":{"type":"string","default":"main","maxLen":48,"description":"Branch name shown in the pill next to the repo."},"message":{"type":"string","required":true,"maxLen":160,"description":"Commit message headline; clamped to three lines."},"repo":{"type":"string","required":true,"maxLen":100,"description":"Repository name, e.g. owner/repo."},"sha":{"type":"string","required":true,"maxLen":12,"description":"Short commit SHA (7-12 hex characters)."}}}}