{
 "cover_html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>336 billion transistors on one chip</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 count in @keyframes count, and the chart points. The chart is log scale:\n  x = 4 + (year - 1962) / 64 * 904 and y = 30 + 410 * (1 - f), where f = (log10(count) - 3) / 9.\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: #f59f00;\n    --enter: cubic-bezier(0.23, 1, 0.32, 1); --travel: cubic-bezier(0.77, 0, 0.175, 1);\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: 860px; }\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; }\n  .num b { font-weight: 800; counter-reset: n var(--n); animation: count 1.6s cubic-bezier(0.45, 0, 0.25, 1) 0.2s both; }\n  .num b::after { content: counter(n); }\n  .num small { font-size: 72px; letter-spacing: -0.03em; margin-left: 18px; }\n  @keyframes count { from { --n: 0; } to { --n: 336; } }\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  .chipart { width: 190px; height: 190px; margin: 0 4px 14px 0; animation: settle 0.6s var(--enter) 0.05s both; }\n  .pin { fill: var(--muted); } .body { fill: var(--bar); stroke: var(--accent); stroke-width: 4; } .die { fill: var(--accent); } .cut { stroke: var(--paper); stroke-width: 3; }\n  @keyframes settle { from { transform: translateY(30px) scale(0.9); opacity: 0; } }\n  .chart { margin-top: auto; }\n  .chart svg { display: block; overflow: visible; }\n  .grid line { stroke: var(--line); stroke-width: 2; }\n  .grid line.base { stroke: var(--ink); stroke-width: 3; }\n  text { font-family: Inter, \"Noto Color Emoji\", system-ui, sans-serif; }\n  .grid text, .yr { fill: var(--muted); font-size: 18px; font-family: \"JetBrains Mono\", monospace; }\n  .trend { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linejoin: round; stroke-dasharray: 1; animation: draw 1.4s cubic-bezier(0.45, 0, 0.25, 1) 0.3s both; }\n  @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }\n  .dot { fill: var(--ink); stroke: var(--paper); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: pop 0.4s var(--enter) both; animation-delay: calc(0.3s + var(--i) * 0.13s); }\n  .dot.now { fill: var(--accent); }\n  @keyframes pop { from { transform: scale(0); } }\n  .lab { animation: show 0.4s var(--enter) both; animation-delay: calc(0.45s + var(--i) * 0.13s); }\n  .lab { paint-order: stroke; stroke: var(--paper); stroke-width: 8px; stroke-linejoin: round; }\n  .lab .nm { fill: var(--muted); font-size: 18px; }\n  .lab .v { fill: var(--ink); font-size: 21px; font-weight: 700; }\n  .lab .now { fill: var(--accent); }\n  .lab .lead { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 3 4; }\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</style>\n</head>\n<body>\n<main class=\"card\">\n  <div class=\"top\"><span class=\"kicker\">Computer chips</span><span class=\"chip\">1971 to 2026</span></div>\n  <h1>Chips went from 2,300 transistors to 336 billion</h1>\n  <p class=\"sub\">Transistors on one chip, on a log scale: each gridline is 1,000 times the one below it.</p>\n  <div class=\"hero\">\n    <div>\n      <div class=\"num\" aria-label=\"336 billion\"><b></b><small>billion</small></div>\n      <p class=\"unit\">transistors in NVIDIA Rubin, 2026<span>about 146 million times the Intel 4004</span></p>\n    </div>\n    <svg class=\"chipart\" viewBox=\"0 0 200 200\" aria-hidden=\"true\">\n      <g id=\"pins\" class=\"pin\"><rect x=\"45\" y=\"6\" width=\"10\" height=\"30\" rx=\"3\"/><rect x=\"70\" y=\"6\" width=\"10\" height=\"30\" rx=\"3\"/><rect x=\"95\" y=\"6\" width=\"10\" height=\"30\" rx=\"3\"/><rect x=\"120\" y=\"6\" width=\"10\" height=\"30\" rx=\"3\"/><rect x=\"145\" y=\"6\" width=\"10\" height=\"30\" rx=\"3\"/></g>\n      <use href=\"#pins\" transform=\"rotate(90 100 100)\"/><use href=\"#pins\" transform=\"rotate(180 100 100)\"/><use href=\"#pins\" transform=\"rotate(270 100 100)\"/>\n      <rect class=\"body\" x=\"30\" y=\"30\" width=\"140\" height=\"140\" rx=\"18\"/>\n      <rect class=\"die\" x=\"62\" y=\"62\" width=\"76\" height=\"76\" rx=\"8\"/>\n      <path class=\"cut\" d=\"M81 62v76M100 62v76M119 62v76M62 81h76M62 100h76M62 119h76\"/>\n    </svg>\n  </div>\n  <div class=\"chart\" role=\"img\" aria-label=\"Log-scale chart of transistors per chip: Intel 4004 2,300 in 1971 up to NVIDIA Rubin 336 billion in 2026\">\n    <svg width=\"920\" height=\"480\" viewBox=\"0 0 920 480\">\n      <g class=\"grid\">\n        <line x1=\"0\" y1=\"30\" x2=\"920\" y2=\"30\"/><line x1=\"0\" y1=\"167\" x2=\"920\" y2=\"167\"/><line x1=\"0\" y1=\"303\" x2=\"920\" y2=\"303\"/><line class=\"base\" x1=\"0\" y1=\"440\" x2=\"920\" y2=\"440\"/>\n        <text x=\"0\" y=\"22\">1 trillion</text><text x=\"0\" y=\"159\">1 billion</text><text x=\"0\" y=\"295\">1 million</text><text x=\"0\" y=\"432\">1 thousand</text>\n      </g>\n      <g class=\"yr\"><text x=\"258\" y=\"472\" text-anchor=\"middle\">1980</text><text x=\"400\" y=\"472\" text-anchor=\"middle\">1990</text><text x=\"541\" y=\"472\" text-anchor=\"middle\">2000</text><text x=\"682\" y=\"472\" text-anchor=\"middle\">2010</text><text x=\"823\" y=\"472\" text-anchor=\"middle\">2020</text></g>\n      <path class=\"trend\" pathLength=\"1\" d=\"M131 424 L230 373 L329 329 L442 281 L541 229 L682 164 L823 112 L852 80 L880 61 L908 52\"/>\n      <g class=\"leads lab\" style=\"--i:8\"><line class=\"lead\" x1=\"748\" y1=\"44\" x2=\"894\" y2=\"52\"/><line class=\"lead\" x1=\"748\" y1=\"70\" x2=\"868\" y2=\"62\"/><line class=\"lead\" x1=\"748\" y1=\"96\" x2=\"840\" y2=\"82\"/><line class=\"lead\" x1=\"748\" y1=\"122\" x2=\"811\" y2=\"113\"/></g>\n      <circle class=\"dot\" cx=\"131\" cy=\"424\" r=\"8\" style=\"--i:0\"/>\n      <circle class=\"dot\" cx=\"230\" cy=\"373\" r=\"8\" style=\"--i:1\"/>\n      <circle class=\"dot\" cx=\"329\" cy=\"329\" r=\"8\" style=\"--i:2\"/>\n      <circle class=\"dot\" cx=\"442\" cy=\"281\" r=\"8\" style=\"--i:3\"/>\n      <circle class=\"dot\" cx=\"541\" cy=\"229\" r=\"8\" style=\"--i:4\"/>\n      <circle class=\"dot\" cx=\"682\" cy=\"164\" r=\"8\" style=\"--i:5\"/>\n      <circle class=\"dot\" cx=\"823\" cy=\"112\" r=\"8\" style=\"--i:6\"/>\n      <circle class=\"dot\" cx=\"852\" cy=\"80\" r=\"8\" style=\"--i:7\"/>\n      <circle class=\"dot\" cx=\"880\" cy=\"61\" r=\"8\" style=\"--i:8\"/>\n      <circle class=\"dot now\" cx=\"908\" cy=\"52\" r=\"12\" style=\"--i:9\"/>\n      <text class=\"lab\" x=\"0\" y=\"378\" style=\"--i:0\"><tspan class=\"nm\">Intel 4004, 1971</tspan><tspan class=\"v\" x=\"0\" dy=\"25\">2,300</tspan></text>\n      <text class=\"lab\" x=\"246\" y=\"397\" style=\"--i:1\"><tspan class=\"nm\">Intel 8086, 1978</tspan><tspan class=\"v\" x=\"246\" dy=\"25\">29,000</tspan></text>\n      <text class=\"lab\" x=\"345\" y=\"353\" style=\"--i:2\"><tspan class=\"nm\">Intel386, 1985</tspan><tspan class=\"v\" x=\"345\" dy=\"25\">275,000</tspan></text>\n      <text class=\"lab\" x=\"458\" y=\"305\" style=\"--i:3\"><tspan class=\"nm\">Pentium, 1993</tspan><tspan class=\"v\" x=\"458\" dy=\"25\">3.1 million</tspan></text>\n      <text class=\"lab\" x=\"557\" y=\"253\" style=\"--i:4\"><tspan class=\"nm\">Pentium 4, 2000</tspan><tspan class=\"v\" x=\"557\" dy=\"25\">42 million</tspan></text>\n      <text class=\"lab\" x=\"698\" y=\"188\" style=\"--i:5\"><tspan class=\"nm\">2nd gen Intel Core, 2010</tspan><tspan class=\"v\" x=\"698\" dy=\"25\">1.16 billion</tspan></text>\n      <g class=\"lab\" text-anchor=\"end\" style=\"--i:8\">\n        <text x=\"740\" y=\"50\" class=\"v now\">NVIDIA Rubin, 2026: 336 billion</text>\n        <text x=\"740\" y=\"76\"><tspan class=\"nm\">NVIDIA B200, 2024: </tspan><tspan class=\"v\">208 billion</tspan></text>\n        <text x=\"740\" y=\"102\"><tspan class=\"nm\">NVIDIA H100, 2022: </tspan><tspan class=\"v\">80 billion</tspan></text>\n        <text x=\"740\" y=\"128\"><tspan class=\"nm\">Apple M1, 2020: </tspan><tspan class=\"v\">16 billion</tspan></text>\n      </g>\n    </svg>\n  </div>\n  <footer class=\"foot fade\" style=\"animation-delay:1.2s\">\n    <p><strong>Source:</strong> Intel chips timeline poster (2012) for 1971 to 2010; Apple and NVIDIA vendor pages for 2020 to 2026. Years are launch or announcement years. B200 and Rubin count 2 dies in one package.</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>336 billion transistors on one chip</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 count in @keyframes count, and the chart points. The chart is log scale:\n  x = 4 + (year - 1962) / 64 * 904 and y = 30 + 410 * (1 - f), where f = (log10(count) - 3) / 9.\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: #f59f00;\n    --enter: cubic-bezier(0.23, 1, 0.32, 1); --travel: cubic-bezier(0.77, 0, 0.175, 1);\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: 860px; }\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; }\n  .num b { font-weight: 800; counter-reset: n var(--n); animation: count 1.6s cubic-bezier(0.45, 0, 0.25, 1) 0.2s both; }\n  .num b::after { content: counter(n); }\n  .num small { font-size: 72px; letter-spacing: -0.03em; margin-left: 18px; }\n  @keyframes count { from { --n: 0; } to { --n: 336; } }\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  .chipart { width: 190px; height: 190px; margin: 0 4px 14px 0; animation: settle 0.6s var(--enter) 0.05s both; }\n  .pin { fill: var(--muted); } .body { fill: var(--bar); stroke: var(--accent); stroke-width: 4; } .die { fill: var(--accent); } .cut { stroke: var(--paper); stroke-width: 3; }\n  @keyframes settle { from { transform: translateY(30px) scale(0.9); opacity: 0; } }\n  .chart { margin-top: auto; }\n  .chart svg { display: block; overflow: visible; }\n  .grid line { stroke: var(--line); stroke-width: 2; }\n  .grid line.base { stroke: var(--ink); stroke-width: 3; }\n  text { font-family: Inter, \"Noto Color Emoji\", system-ui, sans-serif; }\n  .grid text, .yr { fill: var(--muted); font-size: 18px; font-family: \"JetBrains Mono\", monospace; }\n  .trend { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linejoin: round; stroke-dasharray: 1; animation: draw 1.4s cubic-bezier(0.45, 0, 0.25, 1) 0.3s both; }\n  @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }\n  .dot { fill: var(--ink); stroke: var(--paper); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: pop 0.4s var(--enter) both; animation-delay: calc(0.3s + var(--i) * 0.13s); }\n  .dot.now { fill: var(--accent); }\n  @keyframes pop { from { transform: scale(0); } }\n  .lab { animation: show 0.4s var(--enter) both; animation-delay: calc(0.45s + var(--i) * 0.13s); }\n  .lab { paint-order: stroke; stroke: var(--paper); stroke-width: 8px; stroke-linejoin: round; }\n  .lab .nm { fill: var(--muted); font-size: 18px; }\n  .lab .v { fill: var(--ink); font-size: 21px; font-weight: 700; }\n  .lab .now { fill: var(--accent); }\n  .lab .lead { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 3 4; }\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</style>\n</head>\n<body>\n<main class=\"card\">\n  <div class=\"top\"><span class=\"kicker\">Computer chips</span><span class=\"chip\">1971 to 2026</span></div>\n  <h1>Chips went from 2,300 transistors to 336 billion</h1>\n  <p class=\"sub\">Transistors on one chip, on a log scale: each gridline is 1,000 times the one below it.</p>\n  <div class=\"hero\">\n    <div>\n      <div class=\"num\" aria-label=\"336 billion\"><b></b><small>billion</small></div>\n      <p class=\"unit\">transistors in NVIDIA Rubin, 2026<span>about 146 million times the Intel 4004</span></p>\n    </div>\n    <svg class=\"chipart\" viewBox=\"0 0 200 200\" aria-hidden=\"true\">\n      <g id=\"pins\" class=\"pin\"><rect x=\"45\" y=\"6\" width=\"10\" height=\"30\" rx=\"3\"/><rect x=\"70\" y=\"6\" width=\"10\" height=\"30\" rx=\"3\"/><rect x=\"95\" y=\"6\" width=\"10\" height=\"30\" rx=\"3\"/><rect x=\"120\" y=\"6\" width=\"10\" height=\"30\" rx=\"3\"/><rect x=\"145\" y=\"6\" width=\"10\" height=\"30\" rx=\"3\"/></g>\n      <use href=\"#pins\" transform=\"rotate(90 100 100)\"/><use href=\"#pins\" transform=\"rotate(180 100 100)\"/><use href=\"#pins\" transform=\"rotate(270 100 100)\"/>\n      <rect class=\"body\" x=\"30\" y=\"30\" width=\"140\" height=\"140\" rx=\"18\"/>\n      <rect class=\"die\" x=\"62\" y=\"62\" width=\"76\" height=\"76\" rx=\"8\"/>\n      <path class=\"cut\" d=\"M81 62v76M100 62v76M119 62v76M62 81h76M62 100h76M62 119h76\"/>\n    </svg>\n  </div>\n  <div class=\"chart\" role=\"img\" aria-label=\"Log-scale chart of transistors per chip: Intel 4004 2,300 in 1971 up to NVIDIA Rubin 336 billion in 2026\">\n    <svg width=\"920\" height=\"480\" viewBox=\"0 0 920 480\">\n      <g class=\"grid\">\n        <line x1=\"0\" y1=\"30\" x2=\"920\" y2=\"30\"/><line x1=\"0\" y1=\"167\" x2=\"920\" y2=\"167\"/><line x1=\"0\" y1=\"303\" x2=\"920\" y2=\"303\"/><line class=\"base\" x1=\"0\" y1=\"440\" x2=\"920\" y2=\"440\"/>\n        <text x=\"0\" y=\"22\">1 trillion</text><text x=\"0\" y=\"159\">1 billion</text><text x=\"0\" y=\"295\">1 million</text><text x=\"0\" y=\"432\">1 thousand</text>\n      </g>\n      <g class=\"yr\"><text x=\"258\" y=\"472\" text-anchor=\"middle\">1980</text><text x=\"400\" y=\"472\" text-anchor=\"middle\">1990</text><text x=\"541\" y=\"472\" text-anchor=\"middle\">2000</text><text x=\"682\" y=\"472\" text-anchor=\"middle\">2010</text><text x=\"823\" y=\"472\" text-anchor=\"middle\">2020</text></g>\n      <path class=\"trend\" pathLength=\"1\" d=\"M131 424 L230 373 L329 329 L442 281 L541 229 L682 164 L823 112 L852 80 L880 61 L908 52\"/>\n      <g class=\"leads lab\" style=\"--i:8\"><line class=\"lead\" x1=\"748\" y1=\"44\" x2=\"894\" y2=\"52\"/><line class=\"lead\" x1=\"748\" y1=\"70\" x2=\"868\" y2=\"62\"/><line class=\"lead\" x1=\"748\" y1=\"96\" x2=\"840\" y2=\"82\"/><line class=\"lead\" x1=\"748\" y1=\"122\" x2=\"811\" y2=\"113\"/></g>\n      <circle class=\"dot\" cx=\"131\" cy=\"424\" r=\"8\" style=\"--i:0\"/>\n      <circle class=\"dot\" cx=\"230\" cy=\"373\" r=\"8\" style=\"--i:1\"/>\n      <circle class=\"dot\" cx=\"329\" cy=\"329\" r=\"8\" style=\"--i:2\"/>\n      <circle class=\"dot\" cx=\"442\" cy=\"281\" r=\"8\" style=\"--i:3\"/>\n      <circle class=\"dot\" cx=\"541\" cy=\"229\" r=\"8\" style=\"--i:4\"/>\n      <circle class=\"dot\" cx=\"682\" cy=\"164\" r=\"8\" style=\"--i:5\"/>\n      <circle class=\"dot\" cx=\"823\" cy=\"112\" r=\"8\" style=\"--i:6\"/>\n      <circle class=\"dot\" cx=\"852\" cy=\"80\" r=\"8\" style=\"--i:7\"/>\n      <circle class=\"dot\" cx=\"880\" cy=\"61\" r=\"8\" style=\"--i:8\"/>\n      <circle class=\"dot now\" cx=\"908\" cy=\"52\" r=\"12\" style=\"--i:9\"/>\n      <text class=\"lab\" x=\"0\" y=\"378\" style=\"--i:0\"><tspan class=\"nm\">Intel 4004, 1971</tspan><tspan class=\"v\" x=\"0\" dy=\"25\">2,300</tspan></text>\n      <text class=\"lab\" x=\"246\" y=\"397\" style=\"--i:1\"><tspan class=\"nm\">Intel 8086, 1978</tspan><tspan class=\"v\" x=\"246\" dy=\"25\">29,000</tspan></text>\n      <text class=\"lab\" x=\"345\" y=\"353\" style=\"--i:2\"><tspan class=\"nm\">Intel386, 1985</tspan><tspan class=\"v\" x=\"345\" dy=\"25\">275,000</tspan></text>\n      <text class=\"lab\" x=\"458\" y=\"305\" style=\"--i:3\"><tspan class=\"nm\">Pentium, 1993</tspan><tspan class=\"v\" x=\"458\" dy=\"25\">3.1 million</tspan></text>\n      <text class=\"lab\" x=\"557\" y=\"253\" style=\"--i:4\"><tspan class=\"nm\">Pentium 4, 2000</tspan><tspan class=\"v\" x=\"557\" dy=\"25\">42 million</tspan></text>\n      <text class=\"lab\" x=\"698\" y=\"188\" style=\"--i:5\"><tspan class=\"nm\">2nd gen Intel Core, 2010</tspan><tspan class=\"v\" x=\"698\" dy=\"25\">1.16 billion</tspan></text>\n      <g class=\"lab\" text-anchor=\"end\" style=\"--i:8\">\n        <text x=\"740\" y=\"50\" class=\"v now\">NVIDIA Rubin, 2026: 336 billion</text>\n        <text x=\"740\" y=\"76\"><tspan class=\"nm\">NVIDIA B200, 2024: </tspan><tspan class=\"v\">208 billion</tspan></text>\n        <text x=\"740\" y=\"102\"><tspan class=\"nm\">NVIDIA H100, 2022: </tspan><tspan class=\"v\">80 billion</tspan></text>\n        <text x=\"740\" y=\"128\"><tspan class=\"nm\">Apple M1, 2020: </tspan><tspan class=\"v\">16 billion</tspan></text>\n      </g>\n    </svg>\n  </div>\n  <footer class=\"foot fade\" style=\"animation-delay:1.2s\">\n    <p><strong>Source:</strong> Intel chips timeline poster (2012) for 1971 to 2010; Apple and NVIDIA vendor pages for 2020 to 2026. Years are launch or announcement years. B200 and Rubin count 2 dies in one package.</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
}
