Build a model on the front page instead of describing one

src/app/globals.css

@@ -216,6 +216,26 @@
       background-color 120ms ease;
   }
 
+  /*
+    An icon-only button.
+
+    Sized to the box a hud-button with a word in it would have taken: one line
+    of type, the padding above, and the two hairlines box-sizing folds in. That
+    is what keeps it square without a magic number, and what keeps it the same
+    height as the labelled buttons it sits beside.
+
+    Both axes are written out because neither can be inferred. Equal padding
+    around the icon squares the box only until a labelled neighbour makes the
+    flex line taller than the glyph, and `aspect-ratio` does not help either: a
+    flex item is sized from its content first, so the ratio loses to a 14px
+    icon.
+  */
+  .hud-square {
+    width: calc(1lh + 0.8rem + 2px);
+    height: calc(1lh + 0.8rem + 2px);
+    padding: 0;
+  }
+
   .hud-button:hover:not(:disabled) {
     color: var(--color-ink);
     background: var(--color-panel-hover);
@@ -237,6 +257,36 @@
     border-color: var(--color-accent);
   }
 
+  /*
+    An indeterminate bar, for waits whose length is not knowable in advance:
+    packing a set fetches every part it uses, and how many that is is exactly
+    what nobody knows until it is done. A segment that travels says the app is
+    still working; a static one that fills would be a lie about how far along
+    it is.
+  */
+  .progress-track {
+    overflow: hidden;
+    background: var(--color-edge);
+  }
+
+  .progress-track::after {
+    display: block;
+    width: 34%;
+    height: 100%;
+    content: "";
+    background: var(--color-accent-fg);
+    animation: progress-slide 1.4s ease-in-out infinite;
+  }
+
+  @keyframes progress-slide {
+    from {
+      transform: translateX(-100%);
+    }
+    to {
+      transform: translateX(394%);
+    }
+  }
+
   /* Needs to outrank the plain hover rule, which is why it repeats the state. */
   .hud-button[data-active="true"]:hover:not(:disabled) {
     color: var(--color-on-accent);

src/app/opengraph-image.tsx

@@ -1,7 +1,7 @@
 import { ImageResponse } from "next/og";
 
 export const alt =
-  "LDraw Builder: watch a LEGO model assemble itself, one build step at a time";
+  "LDraw Builder: watch a LEGO model build itself, then build one yourself";
 export const size = { height: 630, width: 1200 };
 export const contentType = "image/png";
 
@@ -57,28 +57,30 @@ export default function OpenGraphImage() {
         </div>
       </div>
 
-      <div style={{ display: "flex", flexDirection: "column", maxWidth: 720 }}>
-        <div style={{ fontSize: 62, letterSpacing: -1, lineHeight: 1.12 }}>
-          Tip the bricks onto the floor and watch a model assemble itself.
+      {/*
+        The page's own heading, at the page's own weights. A card that is read
+        in a second in a feed cannot carry the paragraph and the feature list
+        that used to be here as well, and the four words below say what it is
+        for anyone the heading leaves guessing.
+      */}
+      <div style={{ display: "flex", flexDirection: "column", maxWidth: 760 }}>
+        <div style={{ fontSize: 68, letterSpacing: -1, lineHeight: 1.1 }}>
+          Watch it build itself.
         </div>
         <div
           style={{
             color: "#b3bac6",
-            fontSize: 27,
-            lineHeight: 1.4,
-            marginTop: 26,
+            fontSize: 68,
+            letterSpacing: -1,
+            lineHeight: 1.1,
           }}
         >
-          LDraw models in the browser. Follow the build step by step, explode
-          it, slice it open, or click any brick.
+          Then build it yourself.
         </div>
       </div>
 
-      <div style={{ color: "#8d95a2", display: "flex", fontSize: 21, gap: 40 }}>
-        <div>Build order</div>
-        <div>Explode</div>
-        <div>Layer slice</div>
-        <div>Part inspector</div>
+      <div style={{ color: "#8d95a2", display: "flex", fontSize: 23 }}>
+        LDraw models, in the browser.
       </div>
     </div>,
     size