Merge pull request #6 from a-baran-orhan/claude/market-research-expansion-3xwm6w

Author: a-baran-orhan

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 ------------------------------------------