{
 "cover_html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>TypeScript is #1 on GitHub</title>\n<!--\n  Live Card template: one file is both the still and the motion. Render it with render_live_card at 1080 x 1440,\n  3000 ms, 30 fps, cover_ms 2900. Every move ends by 2.0 s, so the last second (and the still) is the full card.\n  To reuse it, change the words, the --n ranks in @keyframes count, and each row's --a (old slot) and --b (new slot),\n  counted from 0 at the top. The rank column stays still; the rows travel.\n-->\n<style>\n  @property --n { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  :root {\n    --paper: #0f1115; --ink: #f3f1ec; --muted: #9aa0a8; --line: #2a2e36; --bar: #2b3039; --accent: #1971c2;\n    --enter: cubic-bezier(0.23, 1, 0.32, 1); --travel: cubic-bezier(0.77, 0, 0.175, 1);\n    --row: 84px;\n  }\n  * { box-sizing: border-box; margin: 0; }\n  body { width: 1080px; height: 1440px; overflow: hidden; background: var(--paper); color: var(--ink); font-family: Inter, \"Noto Color Emoji\", system-ui, sans-serif; }\n  .card { position: relative; height: 100%; padding: 84px 80px 72px; display: flex; flex-direction: column; }\n  .top { display: flex; justify-content: space-between; align-items: center; font-size: 22px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }\n  .kicker { color: var(--accent); }\n  .chip { color: var(--muted); border: 2px solid var(--line); border-radius: 999px; padding: 8px 18px; letter-spacing: 0.08em; }\n  h1 { margin-top: 44px; font-size: 64px; line-height: 1.04; font-weight: 750; letter-spacing: -0.035em; max-width: 880px; }\n  .sub { margin-top: 22px; font-size: 28px; line-height: 1.4; color: var(--muted); max-width: 840px; }\n  .hero { margin-top: 40px; display: flex; align-items: flex-end; justify-content: space-between; }\n  .num { font-size: 200px; line-height: 0.82; font-weight: 800; letter-spacing: -0.05em; color: var(--accent); font-variant-numeric: tabular-nums; counter-reset: n var(--n); animation: count 0.9s cubic-bezier(0.45, 0, 0.25, 1) 0.85s both; }\n  .num::after { content: \"#\" counter(n); }\n  @keyframes count { from { --n: 3; } to { --n: 1; } }\n  .unit { margin-top: 18px; font-size: 30px; font-weight: 600; }\n  .unit span { display: block; color: var(--muted); font-weight: 500; font-size: 26px; margin-top: 6px; }\n  .cup { font-size: 200px; line-height: 1; margin: 0 10px 20px 0; animation: settle 0.6s var(--enter) 0.05s both; }\n  @keyframes settle { from { transform: translateY(40px) scale(0.9); opacity: 0; } }\n  .list { margin-top: auto; }\n  .head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; font-size: 22px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }\n  .year { display: grid; font-family: \"JetBrains Mono\", monospace; font-size: 26px; font-weight: 700; letter-spacing: 0; color: var(--ink); border: 2px solid var(--line); border-radius: 999px; padding: 4px 18px; }\n  .year span { grid-area: 1 / 1; text-align: right; }\n  .year .old { animation: out 0.3s var(--enter) 0.7s both; }\n  .year .new { animation: show 0.3s var(--enter) 0.85s both; }\n  .rows { position: relative; height: calc(5 * var(--row)); display: grid; grid-template-columns: 96px 1fr; }\n  .ranks { display: grid; grid-auto-rows: var(--row); font-family: \"JetBrains Mono\", monospace; font-size: 40px; font-weight: 700; color: var(--muted); align-items: center; }\n  .slots { position: relative; }\n  .r { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--row) - 14px); display: flex; align-items: center; justify-content: space-between; padding: 0 28px; border-radius: 18px; background: var(--bar); font-size: 36px; font-weight: 650; letter-spacing: -0.01em;\n       transform: translateY(calc(var(--b) * var(--row))); animation: swap 0.9s var(--travel) both, show 0.3s var(--enter) both; animation-delay: 0.85s, calc(0.05s + var(--a) * 0.04s); }\n  .r.ts { background: var(--accent); z-index: 1; }\n  .r small { font-size: 22px; font-weight: 500; color: var(--muted); animation: show 0.35s var(--enter) 1.6s both; }\n  .r.ts small { color: var(--ink); }\n  @keyframes swap { from { transform: translateY(calc(var(--a) * var(--row))); } to { transform: translateY(calc(var(--b) * var(--row))); } }\n  .foot { margin-top: 40px; padding-top: 22px; border-top: 2px solid var(--line); display: flex; justify-content: space-between; gap: 32px; font-size: 19px; line-height: 1.45; color: var(--muted); }\n  .foot strong { color: var(--ink); font-weight: 600; }\n  .made { white-space: nowrap; }\n  .fade { animation: fade 0.5s var(--enter) both; }\n  @keyframes fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }\n  @keyframes show { from { opacity: 0; } }\n  @keyframes out { to { opacity: 0; } }\n</style>\n</head>\n<body>\n<main class=\"card\">\n  <div class=\"top\"><span class=\"kicker\">Programming languages</span><span class=\"chip\">2024 to 2025</span></div>\n  <h1>TypeScript is now the most used language on GitHub</h1>\n  <p class=\"sub\">The top 5 languages on GitHub. TypeScript passed Python and JavaScript in August 2025.</p>\n  <div class=\"hero\">\n    <div>\n      <div class=\"num\" aria-label=\"#1\"></div>\n      <p class=\"unit\">TypeScript, up from #3 in 2024<span>2,636,006 monthly contributors in August 2025</span></p>\n    </div>\n    <div class=\"cup\" aria-hidden=\"true\">🏆</div>\n  </div>\n  <div class=\"list\" role=\"img\" aria-label=\"Top 5 in 2024: Python, JavaScript, TypeScript, Java, C#. Top 5 in 2025: TypeScript, Python, JavaScript, Java, C#.\">\n    <div class=\"head\"><span>Top 5 on GitHub</span><span class=\"year\"><span class=\"old\">2024</span><span class=\"new\">2025</span></span></div>\n    <div class=\"rows\">\n      <div class=\"ranks\"><span>01</span><span>02</span><span>03</span><span>04</span><span>05</span></div>\n      <div class=\"slots\">\n        <div class=\"r\" style=\"--a:0;--b:1\">Python <small>was #1</small></div>\n        <div class=\"r\" style=\"--a:1;--b:2\">JavaScript <small>was #2</small></div>\n        <div class=\"r ts\" style=\"--a:2;--b:0\">TypeScript <small>was #3</small></div>\n        <div class=\"r\" style=\"--a:3;--b:3\">Java <small>no change</small></div>\n        <div class=\"r\" style=\"--a:4;--b:4\">C# <small>no change</small></div>\n      </div>\n    </div>\n  </div>\n  <footer class=\"foot fade\" style=\"animation-delay:1.2s\">\n    <p><strong>Source:</strong> GitHub, Octoverse 2025 (28 Oct 2025) and Octoverse 2024. 2025 ranks count monthly contributors in August 2025; 2024 ranks count activity from Oct 2023 to Sep 2024.</p>\n    <p class=\"made\">Made with Live Card</p>\n  </footer>\n</main>\n</body>\n</html>\n",
 "motion_html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>TypeScript is #1 on GitHub</title>\n<!--\n  Live Card template: one file is both the still and the motion. Render it with render_live_card at 1080 x 1440,\n  3000 ms, 30 fps, cover_ms 2900. Every move ends by 2.0 s, so the last second (and the still) is the full card.\n  To reuse it, change the words, the --n ranks in @keyframes count, and each row's --a (old slot) and --b (new slot),\n  counted from 0 at the top. The rank column stays still; the rows travel.\n-->\n<style>\n  @property --n { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  :root {\n    --paper: #0f1115; --ink: #f3f1ec; --muted: #9aa0a8; --line: #2a2e36; --bar: #2b3039; --accent: #1971c2;\n    --enter: cubic-bezier(0.23, 1, 0.32, 1); --travel: cubic-bezier(0.77, 0, 0.175, 1);\n    --row: 84px;\n  }\n  * { box-sizing: border-box; margin: 0; }\n  body { width: 1080px; height: 1440px; overflow: hidden; background: var(--paper); color: var(--ink); font-family: Inter, \"Noto Color Emoji\", system-ui, sans-serif; }\n  .card { position: relative; height: 100%; padding: 84px 80px 72px; display: flex; flex-direction: column; }\n  .top { display: flex; justify-content: space-between; align-items: center; font-size: 22px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }\n  .kicker { color: var(--accent); }\n  .chip { color: var(--muted); border: 2px solid var(--line); border-radius: 999px; padding: 8px 18px; letter-spacing: 0.08em; }\n  h1 { margin-top: 44px; font-size: 64px; line-height: 1.04; font-weight: 750; letter-spacing: -0.035em; max-width: 880px; }\n  .sub { margin-top: 22px; font-size: 28px; line-height: 1.4; color: var(--muted); max-width: 840px; }\n  .hero { margin-top: 40px; display: flex; align-items: flex-end; justify-content: space-between; }\n  .num { font-size: 200px; line-height: 0.82; font-weight: 800; letter-spacing: -0.05em; color: var(--accent); font-variant-numeric: tabular-nums; counter-reset: n var(--n); animation: count 0.9s cubic-bezier(0.45, 0, 0.25, 1) 0.85s both; }\n  .num::after { content: \"#\" counter(n); }\n  @keyframes count { from { --n: 3; } to { --n: 1; } }\n  .unit { margin-top: 18px; font-size: 30px; font-weight: 600; }\n  .unit span { display: block; color: var(--muted); font-weight: 500; font-size: 26px; margin-top: 6px; }\n  .cup { font-size: 200px; line-height: 1; margin: 0 10px 20px 0; animation: settle 0.6s var(--enter) 0.05s both; }\n  @keyframes settle { from { transform: translateY(40px) scale(0.9); opacity: 0; } }\n  .list { margin-top: auto; }\n  .head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; font-size: 22px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }\n  .year { display: grid; font-family: \"JetBrains Mono\", monospace; font-size: 26px; font-weight: 700; letter-spacing: 0; color: var(--ink); border: 2px solid var(--line); border-radius: 999px; padding: 4px 18px; }\n  .year span { grid-area: 1 / 1; text-align: right; }\n  .year .old { animation: out 0.3s var(--enter) 0.7s both; }\n  .year .new { animation: show 0.3s var(--enter) 0.85s both; }\n  .rows { position: relative; height: calc(5 * var(--row)); display: grid; grid-template-columns: 96px 1fr; }\n  .ranks { display: grid; grid-auto-rows: var(--row); font-family: \"JetBrains Mono\", monospace; font-size: 40px; font-weight: 700; color: var(--muted); align-items: center; }\n  .slots { position: relative; }\n  .r { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--row) - 14px); display: flex; align-items: center; justify-content: space-between; padding: 0 28px; border-radius: 18px; background: var(--bar); font-size: 36px; font-weight: 650; letter-spacing: -0.01em;\n       transform: translateY(calc(var(--b) * var(--row))); animation: swap 0.9s var(--travel) both, show 0.3s var(--enter) both; animation-delay: 0.85s, calc(0.05s + var(--a) * 0.04s); }\n  .r.ts { background: var(--accent); z-index: 1; }\n  .r small { font-size: 22px; font-weight: 500; color: var(--muted); animation: show 0.35s var(--enter) 1.6s both; }\n  .r.ts small { color: var(--ink); }\n  @keyframes swap { from { transform: translateY(calc(var(--a) * var(--row))); } to { transform: translateY(calc(var(--b) * var(--row))); } }\n  .foot { margin-top: 40px; padding-top: 22px; border-top: 2px solid var(--line); display: flex; justify-content: space-between; gap: 32px; font-size: 19px; line-height: 1.45; color: var(--muted); }\n  .foot strong { color: var(--ink); font-weight: 600; }\n  .made { white-space: nowrap; }\n  .fade { animation: fade 0.5s var(--enter) both; }\n  @keyframes fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }\n  @keyframes show { from { opacity: 0; } }\n  @keyframes out { to { opacity: 0; } }\n</style>\n</head>\n<body>\n<main class=\"card\">\n  <div class=\"top\"><span class=\"kicker\">Programming languages</span><span class=\"chip\">2024 to 2025</span></div>\n  <h1>TypeScript is now the most used language on GitHub</h1>\n  <p class=\"sub\">The top 5 languages on GitHub. TypeScript passed Python and JavaScript in August 2025.</p>\n  <div class=\"hero\">\n    <div>\n      <div class=\"num\" aria-label=\"#1\"></div>\n      <p class=\"unit\">TypeScript, up from #3 in 2024<span>2,636,006 monthly contributors in August 2025</span></p>\n    </div>\n    <div class=\"cup\" aria-hidden=\"true\">🏆</div>\n  </div>\n  <div class=\"list\" role=\"img\" aria-label=\"Top 5 in 2024: Python, JavaScript, TypeScript, Java, C#. Top 5 in 2025: TypeScript, Python, JavaScript, Java, C#.\">\n    <div class=\"head\"><span>Top 5 on GitHub</span><span class=\"year\"><span class=\"old\">2024</span><span class=\"new\">2025</span></span></div>\n    <div class=\"rows\">\n      <div class=\"ranks\"><span>01</span><span>02</span><span>03</span><span>04</span><span>05</span></div>\n      <div class=\"slots\">\n        <div class=\"r\" style=\"--a:0;--b:1\">Python <small>was #1</small></div>\n        <div class=\"r\" style=\"--a:1;--b:2\">JavaScript <small>was #2</small></div>\n        <div class=\"r ts\" style=\"--a:2;--b:0\">TypeScript <small>was #3</small></div>\n        <div class=\"r\" style=\"--a:3;--b:3\">Java <small>no change</small></div>\n        <div class=\"r\" style=\"--a:4;--b:4\">C# <small>no change</small></div>\n      </div>\n    </div>\n  </div>\n  <footer class=\"foot fade\" style=\"animation-delay:1.2s\">\n    <p><strong>Source:</strong> GitHub, Octoverse 2025 (28 Oct 2025) and Octoverse 2024. 2025 ranks count monthly contributors in August 2025; 2024 ranks count activity from Oct 2023 to Sep 2024.</p>\n    <p class=\"made\">Made with Live Card</p>\n  </footer>\n</main>\n</body>\n</html>\n",
 "width": 1080,
 "height": 1440,
 "duration_ms": 3000,
 "fps": 30,
 "cover_ms": 2900
}
