Updates companany list to reflect new companies that signed the open weight american leadership paper like spacexai and sakana for example

README.md

@@ -10,7 +10,7 @@ pinned: false
 
 # Open Weights Breakout
 
-A stripped-down Breakout game built from all 50 logos on Microsoft’s
+A stripped-down Breakout game built from all 77 logos on Microsoft’s
 [Open Weights and American AI Leadership](https://www.microsoft.com/en-us/corporate-responsibility/topics/open-weight/)
 signatory wall.
 

app/LogoBreakout.tsx

@@ -4,41 +4,58 @@ import { useCallback, useEffect, useRef, useState } from "react";
 
 const WIDTH = 1120;
 const HEIGHT = 700;
-const BRICK_COLUMNS = 8;
+const BRICK_COLUMNS = 11;
 const ACCENTS = ["#2d9cdb", "#7fba00", "#ffb900", "#f25022", "#67e8f9"];
 
 const LOGOS = [
+  ["Agno", "agno"],
   ["AI21", "ai21"],
   ["AMD", "amd"],
   ["American Innovators Network", "american-innovators-network"],
   ["AMP", "amp"],
   ["Andreessen Horowitz", "andreessen-horowitz"],
+  ["Applied Compute", "applied-compute"],
   ["Arcee AI", "arcee-ai"],
   ["Arena", "arena"],
+  ["Atreides Management", "atreides-management"],
   ["Baseten", "baseten"],
   ["Black Forest Labs", "black-forest-labs"],
   ["Block", "block"],
+  ["Bolt", "bolt"],
   ["Box", "box"],
+  ["Camber", "camber"],
   ["Cisco", "cisco"],
   ["Cloudflare", "cloudflare"],
   ["Cohere", "cohere"],
+  ["Core Automation", "core-automation"],
   ["CrowdStrike", "crowdstrike"],
   ["Dell Technologies", "dell-technologies"],
   ["DoorDash", "doordash"],
+  ["EdgeRunner", "edgerunner"],
   ["Emergence Capital", "emergence-capital"],
+  ["Exia Labs", "exia-labs"],
+  ["Fastino Labs", "fastino-labs"],
   ["Fireworks AI", "fireworks-ai"],
   ["Genspark", "genspark"],
   ["GitHub", "github"],
+  ["Glean", "glean"],
   ["Google", "google"],
+  ["GPU MODE", "gpu-mode"],
   ["Hugging Face", "hugging-face"],
+  ["humans&", "humans-and"],
   ["IBM", "ibm"],
   ["Inferact", "inferact"],
+  ["Intangible", "intangible"],
   ["Interconnects AI", "interconnects-ai"],
+  ["LangChain", "langchain"],
   ["The Linux Foundation", "linux-foundation"],
+  ["LM Studio", "lm-studio"],
+  ["LMSYS", "lmsys"],
   ["Mariana Minerals", "mariana-minerals"],
   ["Meta", "meta"],
   ["Microsoft", "microsoft"],
   ["Mistral", "mistral"],
+  ["Modal", "modal"],
   ["Morph", "morph"],
   ["Mozilla", "mozilla"],
   ["Nebius", "nebius"],
@@ -51,15 +68,27 @@ const LOGOS = [
   ["Palo Alto Networks", "palo-alto-networks"],
   ["Periodic Labs", "periodic-labs"],
   ["Perplexity", "perplexity"],
+  ["Plastic Labs", "plastic-labs"],
   ["Prime Intellect", "prime-intellect"],
+  ["PrismML", "prismml"],
+  ["RadixArk", "radixark"],
   ["Reflection", "reflection"],
+  ["Rehearsals", "rehearsals"],
   ["Replit", "replit"],
+  ["Sakana AI", "sakana-ai"],
+  ["Scale", "scale"],
   ["ServiceNow", "servicenow"],
+  ["SpaceX", "spacex"],
   ["Telnyx", "telnyx"],
   ["Trajectory", "trajectory"],
+  ["Unsloth", "unsloth"],
+  ["Unusual Ventures", "unusual-ventures"],
+  ["Vercel", "vercel"],
   ["Y Combinator", "y-combinator"],
 ] as const;
 
+const LOGO_COUNT = LOGOS.length;
+
 type Status = "loading" | "ready" | "running" | "paused" | "won" | "lost";
 
 type Brick = {
@@ -104,12 +133,14 @@ const loadImage = (src: string) =>
     image.src = src;
   });
 
+// 77 signatories fill an exact 11 x 7 grid, so the wall has no ragged last row
+// and still clears the paddle with room for the ball to work.
 const createBricks = (images: HTMLImageElement[]): Brick[] => {
-  const marginX = 28;
-  const gapX = 10;
-  const gapY = 7;
+  const marginX = 26;
+  const gapX = 9;
+  const gapY = 12;
   const width = (WIDTH - marginX * 2 - gapX * (BRICK_COLUMNS - 1)) / BRICK_COLUMNS;
-  const height = 64;
+  const height = 54;
   const startY = 32;
 
   return LOGOS.map(([name], index) => {
@@ -359,7 +390,7 @@ export function LogoBreakout() {
       burst(game, brick);
       tone(610 + (game.destroyed % 7) * 48);
 
-      if (game.destroyed === LOGOS.length) {
+      if (game.destroyed === LOGO_COUNT) {
         game.status = "won";
         tone(880, 0.32);
       }
@@ -475,16 +506,26 @@ export function LogoBreakout() {
         context.save();
         const cropX = brick.image.naturalWidth * 0.07;
         const cropY = brick.image.naturalHeight * 0.07;
+        const sourceWidth = brick.image.naturalWidth - cropX * 2;
+        const sourceHeight = brick.image.naturalHeight - cropY * 2;
+        // Contain the mark in its brick rather than stretching it, so a denser
+        // grid keeps every wordmark at its own proportions.
+        const scale = Math.min(
+          brick.width / sourceWidth,
+          brick.height / sourceHeight,
+        );
+        const drawWidth = sourceWidth * scale;
+        const drawHeight = sourceHeight * scale;
         context.drawImage(
           brick.image,
           cropX,
           cropY,
-          brick.image.naturalWidth - cropX * 2,
-          brick.image.naturalHeight - cropY * 2,
-          brick.x,
-          brick.y,
-          brick.width,
-          brick.height,
+          sourceWidth,
+          sourceHeight,
+          brick.x + (brick.width - drawWidth) / 2,
+          brick.y + (brick.height - drawHeight) / 2,
+          drawWidth,
+          drawHeight,
         );
         context.restore();
       }
@@ -585,7 +626,7 @@ export function LogoBreakout() {
     loading: {
       kicker: "Initializing field",
       title: "Loading logos",
-      copy: "Preparing all 50 signatory nodes.",
+      copy: `Preparing all ${LOGO_COUNT} signatory nodes.`,
       action: "Please wait",
     },
     ready: {
@@ -603,13 +644,13 @@ export function LogoBreakout() {
     won: {
       kicker: "Mission complete",
       title: "Field cleared",
-      copy: "All 50 signatory logos are down. The weights are open.",
+      copy: `All ${LOGO_COUNT} signatory logos are down. The weights are open.`,
       action: "Play again",
     },
     lost: {
       kicker: "Signal lost",
       title: "Try another run",
-      copy: `${destroyed} of 50 logos cleared. Reconnect and finish the field.`,
+      copy: `${destroyed} of ${LOGO_COUNT} logos cleared. Reconnect and finish the field.`,
       action: "Restart mission",
     },
     running: null,
@@ -630,7 +671,9 @@ export function LogoBreakout() {
           </div>
           <div className="hud-item">
             <span>Cleared</span>
-            <strong>{destroyed}/50</strong>
+            <strong>
+              {destroyed}/{LOGO_COUNT}
+            </strong>
           </div>
         </div>
         <div className="console-actions">
@@ -671,7 +714,7 @@ export function LogoBreakout() {
           ref={canvasRef}
           width={WIDTH}
           height={HEIGHT}
-          aria-label="Breakout playfield containing 50 company logo bricks"
+          aria-label={`Breakout playfield containing ${LOGO_COUNT} company logo bricks`}
         />
         {overlay && (
           <div className="game-overlay">

app/layout.tsx

@@ -4,7 +4,7 @@ import "./globals.css";
 export const metadata: Metadata = {
   title: "Open Weights Breakout",
   description:
-    "A 50-logo Breakout game with Anthropic at the controls.",
+    "A 77-logo Breakout game with Anthropic at the controls.",
   icons: {
     icon: "/anthropic-wordmark.png",
     shortcut: "/anthropic-wordmark.png",

scripts/download-logos.mjs

@@ -1,40 +1,58 @@
-import { mkdir, writeFile } from "node:fs/promises";
+import { mkdir, readFile, writeFile } from "node:fs/promises";
 
 const PAGE_URL =
   "https://www.microsoft.com/en-us/corporate-responsibility/topics/open-weight/";
 
+// [display name, alt text on the signatory wall, local slug]
 const logos = [
+  ["Agno", "Agno", "agno"],
   ["AI21", "AI21", "ai21"],
   ["AMD", "AMD", "amd"],
   ["American Innovators Network", "American Innovators Network", "american-innovators-network"],
   ["AMP", "AMP", "amp"],
   ["Andreessen Horowitz", "Andreessen Horowitz", "andreessen-horowitz"],
+  ["Applied Compute", "Applied Compute", "applied-compute"],
   ["Arcee AI", "Arcee", "arcee-ai"],
   ["Arena", "Arena", "arena"],
+  ["Atreides Management", "Artriedes Management", "atreides-management"],
   ["Baseten", "Baseten", "baseten"],
   ["Black Forest Labs", "Black Forest Labs", "black-forest-labs"],
   ["Block", "Block", "block"],
+  ["Bolt", "Bolt", "bolt"],
   ["Box", "Box", "box"],
+  ["Camber", "Camber", "camber"],
   ["Cisco", "Cisco", "cisco"],
   ["Cloudflare", "Cloudflare", "cloudflare"],
   ["Cohere", "Cohere", "cohere"],
+  ["Core Automation", "Core Automation", "core-automation"],
   ["CrowdStrike", "Crowdstrike", "crowdstrike"],
   ["Dell Technologies", "Dell Technologies", "dell-technologies"],
   ["DoorDash", "DoorDash", "doordash"],
+  ["EdgeRunner", "EdgeRunner", "edgerunner"],
   ["Emergence Capital", "Emergence", "emergence-capital"],
+  ["Exia Labs", "Exia Labs", "exia-labs"],
+  ["Fastino Labs", "Fastino", "fastino-labs"],
   ["Fireworks AI", "Fireworks AI", "fireworks-ai"],
   ["Genspark", "Genspark", "genspark"],
   ["GitHub", "GitHub", "github"],
+  ["Glean", "Glean", "glean"],
   ["Google", "Google", "google"],
+  ["GPU MODE", "GPU MODE", "gpu-mode"],
   ["Hugging Face", "Hugging Face", "hugging-face"],
+  ["humans&", "humans and", "humans-and"],
   ["IBM", "IBM", "ibm"],
   ["Inferact", "Inferact", "inferact"],
+  ["Intangible", "Intangible", "intangible"],
   ["Interconnects AI", "Interconnects AI", "interconnects-ai"],
+  ["LangChain", "LangChain", "langchain"],
   ["The Linux Foundation", "Linux Foundation", "linux-foundation"],
+  ["LM Studio", "LM Studio", "lm-studio"],
+  ["LMSYS", "LMSYS", "lmsys"],
   ["Mariana Minerals", "Mariana Minerals", "mariana-minerals"],
   ["Meta", "Meta", "meta"],
   ["Microsoft", "Microsoft", "microsoft"],
   ["Mistral", "Mistral", "mistral"],
+  ["Modal", "Modal", "modal"],
   ["Morph", "Morph", "morph"],
   ["Mozilla", "Mozilla", "mozilla"],
   ["Nebius", "Nebius", "nebius"],
@@ -47,12 +65,22 @@ const logos = [
   ["Palo Alto Networks", "Palo Alto Networks", "palo-alto-networks"],
   ["Periodic Labs", "Periodic Labs", "periodic-labs"],
   ["Perplexity", "Perplexity", "perplexity"],
+  ["Plastic Labs", "Plastic Labs", "plastic-labs"],
   ["Prime Intellect", "Prime Intellect", "prime-intellect"],
+  ["PrismML", "PrismML", "prismml"],
+  ["RadixArk", "RadixArk", "radixark"],
   ["Reflection", "Reflection", "reflection"],
+  ["Rehearsals", "Rehearsals", "rehearsals"],
   ["Replit", "Replit", "replit"],
+  ["Sakana AI", "Sakana AI", "sakana-ai"],
+  ["Scale", "Scale", "scale"],
   ["ServiceNow", "ServiceNow", "servicenow"],
+  ["SpaceX", "SpaceX", "spacex"],
   ["Telnyx", "Telnyx", "telnyx"],
   ["Trajectory", "Trajectory", "trajectory"],
+  ["Unsloth", "Unsloth", "unsloth"],
+  ["Unusual Ventures", "Unusual", "unusual-ventures"],
+  ["Vercel", "Vercel", "vercel"],
   ["Y Combinator", "Y-Combinator", "y-combinator"],
 ];
 
@@ -79,6 +107,7 @@ for (const tag of imageTags) {
 
 await mkdir(new URL("../public/logos/", import.meta.url), { recursive: true });
 
+let written = 0;
 for (const [name, sourceAlt, slug] of logos) {
   const url = byAlt.get(sourceAlt);
   if (!url) throw new Error(`Missing source image for ${name}`);
@@ -89,8 +118,16 @@ for (const [name, sourceAlt, slug] of logos) {
   }
 
   const bytes = new Uint8Array(await response.arrayBuffer());
-  await writeFile(new URL(`../public/logos/${slug}.png`, import.meta.url), bytes);
+  const target = new URL(`../public/logos/${slug}.png`, import.meta.url);
+  const existing = await readFile(target).catch(() => null);
+  if (existing && existing.equals(Buffer.from(bytes))) {
+    console.log(`${name}: unchanged`);
+    continue;
+  }
+
+  await writeFile(target, bytes);
+  written += 1;
   console.log(`${name}: ${bytes.length} bytes`);
 }
 
-console.log(`Downloaded ${logos.length} logo bricks.`);
+console.log(`${logos.length} logo bricks (${written} written).`);