{
 "cover_html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>7,249,543 English Wikipedia articles</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 start and end in @keyframes count (the hero prints \"7,\" then --k and --r\n  as 3 digits each), and the chart points. Chart scale: x = 14 + 760 * (days since 1 Jan 2006 / days to 1 Jan 2027),\n  y = 440 - 56 * millions of articles (0 at the baseline). Each dot's --t is when the line reaches it. The emoji sits in the empty space above the line.\n-->\n<style>\n  @property --n { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  @property --k { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  @property --r { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  @counter-style pad3 { system: extends decimal; pad: 3 \"0\"; }\n  :root {\n    --paper: #f4efe6; --ink: #1c1a17; --muted: #6b645a; --line: #ddd5c7; --bar: #d9cfbf; --accent: #0c8599;\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: 860px; }\n  .sub { margin-top: 22px; font-size: 28px; line-height: 1.4; color: var(--muted); max-width: 820px; }\n  .hero { margin-top: 44px; }\n  .num { font-size: 184px; line-height: 0.82; font-weight: 800; letter-spacing: -0.05em; color: var(--accent); font-variant-numeric: tabular-nums; --k: calc((var(--n) - 7000000) / 1000 - 0.5); --r: calc(var(--n) - 7000000 - var(--k) * 1000); counter-reset: k var(--k) r var(--r); animation: count 1.7s cubic-bezier(0.45, 0, 0.25, 1) 0.15s both; }\n  .num::after { content: \"7,\" counter(k, pad3) \",\" counter(r, pad3); }\n  @keyframes count { from { --n: 7000000; } to { --n: 7249543; } }\n  .unit { margin-top: 40px; font-size: 30px; font-weight: 600; }\n  .unit span { display: block; color: var(--muted); font-weight: 500; font-size: 26px; margin-top: 6px; }\n  .plot { position: relative; margin-top: auto; }\n  .books { position: absolute; left: 30px; top: 0; font-size: 180px; line-height: 1; animation: drop 0.6s var(--enter) 0.1s both; }\n  @keyframes drop { from { transform: translateY(-60px); opacity: 0; } to { transform: none; opacity: 1; } }\n  .chart { display: block; overflow: visible; }\n  .chart text { font-size: 22px; fill: var(--muted); font-variant-numeric: tabular-nums; }\n  .chart text b, .chart .m { font-weight: 700; fill: var(--ink); }\n  .line { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linejoin: round; stroke-dasharray: 1; animation: draw 1.3s 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(--paper); stroke: var(--accent); stroke-width: 5; transform-box: fill-box; transform-origin: center; animation: pop 0.3s var(--enter) both; animation-delay: var(--t); }\n  .dot.now { fill: var(--accent); }\n  @keyframes pop { from { transform: scale(0); } }\n  .lab { animation: show 0.3s var(--enter) both; animation-delay: var(--t); }\n  .lab.now { fill: var(--accent); font-weight: 700; }\n  .axis { stroke: var(--ink); stroke-width: 3; }\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\">Wikipedia</span><span class=\"chip\">2006 to 2026</span></div>\n  <h1>Each new million Wikipedia articles takes longer</h1>\n  <p class=\"sub\">English Wikipedia, date of each million. 1M to 2M took 1.5 years; 6M to 7M took 5.3 years.</p>\n  <div class=\"hero\">\n      <div class=\"num\" aria-label=\"7,249,543\"></div>\n      <p class=\"unit\">articles on 8 Oct 2026<span>passed 7 million on 28 May 2025</span></p>\n  </div>\n  <div class=\"plot\">\n  <div class=\"books\" aria-hidden=\"true\">📚</div>\n  <svg class=\"chart\" width=\"920\" height=\"476\" viewBox=\"0 0 920 476\" role=\"img\" aria-label=\"Line chart of English Wikipedia articles: 1 million on 1 Mar 2006, 2 million Sep 2007, 3 million Aug 2009, 4 million Jul 2012, 5 million Nov 2015, 6 million Jan 2020, 7 million May 2025, 7,249,543 on 8 Oct 2026\">\n    <line class=\"axis\" x1=\"0\" y1=\"440\" x2=\"920\" y2=\"440\"/>\n    <text x=\"14\" y=\"472\">2006</text><text x=\"158.8\" y=\"472\" text-anchor=\"middle\">2010</text><text x=\"339.7\" y=\"472\" text-anchor=\"middle\">2015</text><text x=\"520.6\" y=\"472\" text-anchor=\"middle\">2020</text><text x=\"701.7\" y=\"472\" text-anchor=\"middle\">2025</text>\n    <polyline class=\"line\" pathLength=\"1\" points=\"19.8,384 75,328 145.2,272 250.3,216 369.8,160 522.8,104 716.2,48 765.6,34\"/>\n    <circle class=\"dot\" cx=\"19.8\" cy=\"384\" r=\"9\" style=\"--t:0.3s\"/>\n    <circle class=\"dot\" cx=\"75\" cy=\"328\" r=\"9\" style=\"--t:0.56s\"/>\n    <circle class=\"dot\" cx=\"145.2\" cy=\"272\" r=\"9\" style=\"--t:0.65s\"/>\n    <circle class=\"dot\" cx=\"250.3\" cy=\"216\" r=\"9\" style=\"--t:0.73s\"/>\n    <circle class=\"dot\" cx=\"369.8\" cy=\"160\" r=\"9\" style=\"--t:0.8s\"/>\n    <circle class=\"dot\" cx=\"522.8\" cy=\"104\" r=\"9\" style=\"--t:0.92s\"/>\n    <circle class=\"dot\" cx=\"716.2\" cy=\"48\" r=\"9\" style=\"--t:1.24s\"/>\n    <circle class=\"dot now\" cx=\"765.6\" cy=\"34\" r=\"11\" style=\"--t:1.6s\"/>\n    <text class=\"lab\" x=\"36\" y=\"410\" style=\"--t:0.3s\"><tspan class=\"m\">1M</tspan> Mar 2006</text>\n    <text class=\"lab\" x=\"91\" y=\"354\" style=\"--t:0.56s\"><tspan class=\"m\">2M</tspan> Sep 2007</text>\n    <text class=\"lab\" x=\"161.2\" y=\"298\" style=\"--t:0.65s\"><tspan class=\"m\">3M</tspan> Aug 2009</text>\n    <text class=\"lab\" x=\"266.3\" y=\"242\" style=\"--t:0.73s\"><tspan class=\"m\">4M</tspan> Jul 2012</text>\n    <text class=\"lab\" x=\"385.8\" y=\"186\" style=\"--t:0.8s\"><tspan class=\"m\">5M</tspan> Nov 2015</text>\n    <text class=\"lab\" x=\"538.8\" y=\"130\" style=\"--t:0.92s\"><tspan class=\"m\">6M</tspan> Jan 2020</text>\n    <text class=\"lab\" x=\"732.2\" y=\"74\" style=\"--t:1.24s\"><tspan class=\"m\">7M</tspan> May 2025</text>\n    <text class=\"lab now\" x=\"784\" y=\"42\" style=\"--t:1.6s\">Oct 2026</text>\n  </svg>\n  </div>\n  <footer class=\"foot fade\" style=\"animation-delay:1.2s\">\n    <p><strong>Source:</strong> Wikipedia, History of Wikipedia (milestone dates) and the MediaWiki statistics API, 8 Oct 2026. Self-reported; milestone dates are approximate.</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>7,249,543 English Wikipedia articles</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 start and end in @keyframes count (the hero prints \"7,\" then --k and --r\n  as 3 digits each), and the chart points. Chart scale: x = 14 + 760 * (days since 1 Jan 2006 / days to 1 Jan 2027),\n  y = 440 - 56 * millions of articles (0 at the baseline). Each dot's --t is when the line reaches it. The emoji sits in the empty space above the line.\n-->\n<style>\n  @property --n { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  @property --k { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  @property --r { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  @counter-style pad3 { system: extends decimal; pad: 3 \"0\"; }\n  :root {\n    --paper: #f4efe6; --ink: #1c1a17; --muted: #6b645a; --line: #ddd5c7; --bar: #d9cfbf; --accent: #0c8599;\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: 860px; }\n  .sub { margin-top: 22px; font-size: 28px; line-height: 1.4; color: var(--muted); max-width: 820px; }\n  .hero { margin-top: 44px; }\n  .num { font-size: 184px; line-height: 0.82; font-weight: 800; letter-spacing: -0.05em; color: var(--accent); font-variant-numeric: tabular-nums; --k: calc((var(--n) - 7000000) / 1000 - 0.5); --r: calc(var(--n) - 7000000 - var(--k) * 1000); counter-reset: k var(--k) r var(--r); animation: count 1.7s cubic-bezier(0.45, 0, 0.25, 1) 0.15s both; }\n  .num::after { content: \"7,\" counter(k, pad3) \",\" counter(r, pad3); }\n  @keyframes count { from { --n: 7000000; } to { --n: 7249543; } }\n  .unit { margin-top: 40px; font-size: 30px; font-weight: 600; }\n  .unit span { display: block; color: var(--muted); font-weight: 500; font-size: 26px; margin-top: 6px; }\n  .plot { position: relative; margin-top: auto; }\n  .books { position: absolute; left: 30px; top: 0; font-size: 180px; line-height: 1; animation: drop 0.6s var(--enter) 0.1s both; }\n  @keyframes drop { from { transform: translateY(-60px); opacity: 0; } to { transform: none; opacity: 1; } }\n  .chart { display: block; overflow: visible; }\n  .chart text { font-size: 22px; fill: var(--muted); font-variant-numeric: tabular-nums; }\n  .chart text b, .chart .m { font-weight: 700; fill: var(--ink); }\n  .line { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linejoin: round; stroke-dasharray: 1; animation: draw 1.3s 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(--paper); stroke: var(--accent); stroke-width: 5; transform-box: fill-box; transform-origin: center; animation: pop 0.3s var(--enter) both; animation-delay: var(--t); }\n  .dot.now { fill: var(--accent); }\n  @keyframes pop { from { transform: scale(0); } }\n  .lab { animation: show 0.3s var(--enter) both; animation-delay: var(--t); }\n  .lab.now { fill: var(--accent); font-weight: 700; }\n  .axis { stroke: var(--ink); stroke-width: 3; }\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\">Wikipedia</span><span class=\"chip\">2006 to 2026</span></div>\n  <h1>Each new million Wikipedia articles takes longer</h1>\n  <p class=\"sub\">English Wikipedia, date of each million. 1M to 2M took 1.5 years; 6M to 7M took 5.3 years.</p>\n  <div class=\"hero\">\n      <div class=\"num\" aria-label=\"7,249,543\"></div>\n      <p class=\"unit\">articles on 8 Oct 2026<span>passed 7 million on 28 May 2025</span></p>\n  </div>\n  <div class=\"plot\">\n  <div class=\"books\" aria-hidden=\"true\">📚</div>\n  <svg class=\"chart\" width=\"920\" height=\"476\" viewBox=\"0 0 920 476\" role=\"img\" aria-label=\"Line chart of English Wikipedia articles: 1 million on 1 Mar 2006, 2 million Sep 2007, 3 million Aug 2009, 4 million Jul 2012, 5 million Nov 2015, 6 million Jan 2020, 7 million May 2025, 7,249,543 on 8 Oct 2026\">\n    <line class=\"axis\" x1=\"0\" y1=\"440\" x2=\"920\" y2=\"440\"/>\n    <text x=\"14\" y=\"472\">2006</text><text x=\"158.8\" y=\"472\" text-anchor=\"middle\">2010</text><text x=\"339.7\" y=\"472\" text-anchor=\"middle\">2015</text><text x=\"520.6\" y=\"472\" text-anchor=\"middle\">2020</text><text x=\"701.7\" y=\"472\" text-anchor=\"middle\">2025</text>\n    <polyline class=\"line\" pathLength=\"1\" points=\"19.8,384 75,328 145.2,272 250.3,216 369.8,160 522.8,104 716.2,48 765.6,34\"/>\n    <circle class=\"dot\" cx=\"19.8\" cy=\"384\" r=\"9\" style=\"--t:0.3s\"/>\n    <circle class=\"dot\" cx=\"75\" cy=\"328\" r=\"9\" style=\"--t:0.56s\"/>\n    <circle class=\"dot\" cx=\"145.2\" cy=\"272\" r=\"9\" style=\"--t:0.65s\"/>\n    <circle class=\"dot\" cx=\"250.3\" cy=\"216\" r=\"9\" style=\"--t:0.73s\"/>\n    <circle class=\"dot\" cx=\"369.8\" cy=\"160\" r=\"9\" style=\"--t:0.8s\"/>\n    <circle class=\"dot\" cx=\"522.8\" cy=\"104\" r=\"9\" style=\"--t:0.92s\"/>\n    <circle class=\"dot\" cx=\"716.2\" cy=\"48\" r=\"9\" style=\"--t:1.24s\"/>\n    <circle class=\"dot now\" cx=\"765.6\" cy=\"34\" r=\"11\" style=\"--t:1.6s\"/>\n    <text class=\"lab\" x=\"36\" y=\"410\" style=\"--t:0.3s\"><tspan class=\"m\">1M</tspan> Mar 2006</text>\n    <text class=\"lab\" x=\"91\" y=\"354\" style=\"--t:0.56s\"><tspan class=\"m\">2M</tspan> Sep 2007</text>\n    <text class=\"lab\" x=\"161.2\" y=\"298\" style=\"--t:0.65s\"><tspan class=\"m\">3M</tspan> Aug 2009</text>\n    <text class=\"lab\" x=\"266.3\" y=\"242\" style=\"--t:0.73s\"><tspan class=\"m\">4M</tspan> Jul 2012</text>\n    <text class=\"lab\" x=\"385.8\" y=\"186\" style=\"--t:0.8s\"><tspan class=\"m\">5M</tspan> Nov 2015</text>\n    <text class=\"lab\" x=\"538.8\" y=\"130\" style=\"--t:0.92s\"><tspan class=\"m\">6M</tspan> Jan 2020</text>\n    <text class=\"lab\" x=\"732.2\" y=\"74\" style=\"--t:1.24s\"><tspan class=\"m\">7M</tspan> May 2025</text>\n    <text class=\"lab now\" x=\"784\" y=\"42\" style=\"--t:1.6s\">Oct 2026</text>\n  </svg>\n  </div>\n  <footer class=\"foot fade\" style=\"animation-delay:1.2s\">\n    <p><strong>Source:</strong> Wikipedia, History of Wikipedia (milestone dates) and the MediaWiki statistics API, 8 Oct 2026. Self-reported; milestone dates are approximate.</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
}
