Curate the landing page examples section instead of dumping all 65

The "See it move" section rendered one card per preset directly onto the
marketing landing page, so it grew in lockstep with the movement library
(65 cards today). On mobile that was a single-column wall stretching
many screens — a doom-scroll, not a landing page.

The playground itself already has a proper filterable/grouped gallery
(domain, body part, equipment, difficulty in main.ts). The landing page
doesn't need to duplicate it: show five visually distinct highlights
spanning different domains (dance, fitness w/ prop, yoga, mobility
reach-IK, sign language), then hand off to the real gallery with a
distinct "+N more movements" tile styled as a dashed, accent-colored
CTA rather than another movement card.

Result: a clean 3x2 grid on desktop, single column of 6 short cards on
mobile instead of 65 — same card styling and colors, just curated.

Author: claude

playground/index.html

@@ -125,8 +125,9 @@ <h3>Cheap &amp; client-side</h3>
         <p class="eyebrow">See it move</p>
         <h2>One language, many practices</h2>
         <p class="section-sub">
-          From physiotherapy and posture to yoga, mobility, and the gym — each opens
-          in the playground, editable and shareable.
+          From physiotherapy and posture to yoga, dance, and sign language — a taste
+          of the library. Every movement opens in the playground, editable and
+          shareable.
         </p>
       </header>
       <div id="examples-grid" class="examples-grid"></div>

playground/src/landing.css

@@ -463,6 +463,19 @@ code {
   font-weight: 700;
   color: var(--accent);
 }
+.example-more {
+  border-style: dashed;
+  border-color: var(--border-2);
+  background: transparent;
+  justify-content: center;
+}
+.example-more .example-name {
+  color: var(--accent);
+}
+.example-more:hover {
+  border-style: solid;
+  background: var(--panel);
+}
 
 /* --- How it works ---------------------------------------------------------- */
 .how {

playground/src/landing.ts

@@ -45,10 +45,20 @@ if ("requestIdleCallback" in window) {
   window.setTimeout(initHero, 200);
 }
 
-// --- Examples gallery: each card opens the movement in the playground -------
+// --- Examples gallery: a curated taste, not the full 65 ---------------------
+// The full library already has a proper filterable/grouped gallery in the
+// playground itself (domain, body part, equipment, difficulty). Dumping all
+// 65 cards into the landing page turned this section into a long doom-scroll
+// on mobile, so show a handful of visually distinct highlights spanning
+// different domains, then hand off to the real gallery.
+const HIGHLIGHT_IDS = ["dance-phrase", "pull-up", "cobra", "touch-toes", "hand-wave"];
+
 const grid = document.getElementById("examples-grid");
 if (grid) {
-  for (const preset of PRESETS) {
+  const byId = new Map(PRESETS.map((p) => [p.id, p]));
+  for (const id of HIGHLIGHT_IDS) {
+    const preset = byId.get(id);
+    if (!preset) continue;
     const card = document.createElement("a");
     card.className = "example-card";
     card.href = `play.html${buildShareHash(preset.source)}`;
@@ -58,6 +68,16 @@ if (grid) {
       <span class="example-go">Open in playground →</span>`;
     grid.append(card);
   }
+
+  const remaining = PRESETS.length - HIGHLIGHT_IDS.length;
+  const more = document.createElement("a");
+  more.className = "example-card example-more";
+  more.href = "play.html";
+  more.innerHTML = `
+    <span class="example-kind">Full library</span>
+    <span class="example-name">+${remaining} more movements</span>
+    <span class="example-go">Browse &amp; filter by domain →</span>`;
+  grid.append(more);
 }
 
 // --- Copy the LLM authoring prompt ------------------------------------------