Refresh movement pages and mannequin startup

Author: a-baran-orhan

packages/posecode-render/src/index.ts

@@ -83,6 +83,14 @@ export interface ViewerOptions {
    * skeleton, rebuilt to the character's exact proportions (see character.ts).
    */
   characterUrl?: string;
+  /**
+   * Show the procedural figure while `characterUrl` loads. Defaults to true
+   * for embeds and offline-friendly consumers. Set false when a brief empty
+   * stage is preferable to flashing the procedural figure before the skinned
+   * character appears. The procedural figure is still revealed if loading
+   * fails, so the viewer never remains permanently blank.
+   */
+  showProceduralWhileLoading?: boolean;
   /**
    * Mocap clip library: clip name (as written in a document's `clip "<name>"`
    * directive) → FBX/GLB asset URL. When a loaded document names a clip found
@@ -174,6 +182,9 @@ export function createViewer(
 
   let mannequin: Mannequin = buildMannequin();
   enableShadows(mannequin.root);
+  if (opts.characterUrl && opts.showProceduralWhileLoading === false) {
+    setMannequinMeshesVisible(mannequin.root, false);
+  }
   scene.add(mannequin.root);
 
   // Skinned character layer (optional). While loading (and on failure) the
@@ -768,8 +779,9 @@ export function createViewer(
         else char.sync(mannequin);
       })
       .catch(() => {
-        // Keep the procedural figure. Deliberately silent: an offline embed
-        // or a blocked CDN should degrade, not error.
+        // Reveal the fallback if it was hidden during loading. Deliberately
+        // silent: an offline embed or blocked CDN should degrade, not error.
+        setMannequinMeshesVisible(mannequin.root, true);
       });
   }
 
@@ -785,6 +797,12 @@ function enableShadows(root: THREE.Object3D): void {
   });
 }
 
+function setMannequinMeshesVisible(root: THREE.Object3D, visible: boolean): void {
+  root.traverse((obj) => {
+    if ((obj as THREE.Mesh).isMesh) obj.visible = visible;
+  });
+}
+
 /** Free GPU resources for a discarded subtree (prop set swapped on reload). */
 function disposeTree(root: THREE.Object3D): void {
   root.traverse((obj) => {

playground/public/llm-guide.html

@@ -26,41 +26,43 @@
       rel="stylesheet"
     />
     <style>
-:root{--bg:#0a0d12;--panel:#0f141b;--panel-2:#141a23;--border:#1e2530;--border-2:#2a323f;
---text:#e9eef4;--text-2:#9aa6b4;--muted:#616d7c;--accent:#c6f24a;--accent-2:#a9e02f;
---accent-ink:#0a0d12;--accent-glow:rgba(198,242,74,.45);--accent-wash:rgba(198,242,74,.1);
---accent-line:rgba(198,242,74,.35);--mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
---sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;--radius:10px;}
+:root{--bg:#0b0c0d;--panel:#111315;--panel-2:#171a1d;--border:#292d30;--border-2:#3a3f43;
+--text:#f2f1eb;--text-2:#aaa9a2;--muted:#74746f;--accent:#d4ff3f;
+--accent-ink:#0b0c0d;--accent-line:rgba(212,255,63,.42);
+--mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
+--sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;--radius:3px;}
 *{box-sizing:border-box}
 html,body{margin:0}
 body{background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.6;
 -webkit-font-smoothing:antialiased;}
 a{color:var(--accent);text-decoration:none}
 a:hover{text-decoration:underline}
-.wrap{max-width:840px;margin:0 auto;padding:0 24px}
-header.site-nav{border-bottom:1px solid var(--border);padding:16px 0;margin-bottom:8px}
+.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
+header.site-nav{position:sticky;top:0;z-index:10;border-bottom:1px solid var(--border);padding:18px 0;
+background:rgba(11,12,13,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
 header.site-nav .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
 .brand{display:flex;align-items:center;gap:9px;color:var(--text);font-weight:800;font-size:18px}
 .brand .logo{color:var(--accent)}
-nav.links{display:flex;gap:18px;font-size:13.5px;font-weight:600;flex-wrap:wrap}
+nav.links{display:flex;gap:24px;font-size:13.5px;font-weight:600;flex-wrap:wrap}
 nav.links a{color:var(--text-2)}
 nav.links a:hover{color:var(--text)}
-main{padding:36px 0 64px}
+main{padding-top:clamp(54px,8vw,96px);padding-bottom:80px}
 .eyebrow{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:2px;
-text-transform:uppercase;color:var(--accent);margin:0 0 12px}
-h1{font-size:clamp(28px,4.5vw,42px);font-weight:900;letter-spacing:-1px;line-height:1.1;margin:0 0 14px}
-h2{font-size:22px;font-weight:800;letter-spacing:-.3px;margin:36px 0 12px}
+text-transform:uppercase;color:var(--text-2);margin:0 0 16px}
+h1{max-width:13ch;font-size:clamp(46px,7vw,82px);font-weight:900;letter-spacing:-.055em;
+line-height:.94;margin:0 0 24px;text-wrap:balance}
+h2{font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-.035em;margin:58px 0 18px}
 h3{font-size:17px;font-weight:700;margin:24px 0 8px}
 h4{font-size:14px;font-weight:700;margin:18px 0 6px}
-p{color:var(--text-2);margin:0 0 14px}
+p{max-width:760px;color:var(--text-2);font-size:16px;margin:0 0 18px}
 .meta-line{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin:0 0 22px;
 letter-spacing:.2px}
 .meta-line b{color:var(--text-2);font-weight:600}
 code{font-family:var(--mono);font-size:.92em;background:var(--panel-2);border:1px solid var(--border);
-padding:1px 6px;border-radius:5px;color:var(--text)}
+padding:1px 6px;border-radius:2px;color:var(--text)}
 pre.code-block{font-family:var(--mono);font-size:12.5px;line-height:1.55;color:var(--text-2);
-background:var(--panel);border:1px solid var(--border-2);border-radius:var(--radius);
-padding:16px 18px;overflow:auto;margin:0 0 18px}
+background:#0e1011;border:1px solid var(--border-2);border-radius:2px;
+padding:20px 22px;overflow:auto;margin:0 0 18px}
 pre.code-block code{background:none;border:none;padding:0;color:inherit}
 .table-wrap{overflow-x:auto;margin:0 0 18px}
 table{border-collapse:collapse;width:100%;font-size:13.5px}
@@ -70,33 +72,35 @@
 ul,ol{color:var(--text-2);padding-left:22px;margin:0 0 16px}
 li{margin-bottom:6px}
 hr{border:none;border-top:1px solid var(--border);margin:28px 0}
-.card{border:1px solid var(--border);border-radius:var(--radius);
-background:linear-gradient(180deg,var(--panel),transparent);padding:20px 22px;margin:0 0 16px}
+.card{border:1px solid var(--border);border-radius:0;background:transparent;padding:20px 22px;margin:0 0 16px}
 .btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;
-color:var(--accent-ink);background:linear-gradient(180deg,var(--accent),var(--accent-2));
-border-radius:8px;padding:11px 18px;text-decoration:none}
-.btn:hover{filter:brightness(1.06);text-decoration:none}
-.steps{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:12px}
-.steps li{border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;
-background:var(--panel)}
+color:var(--accent-ink);background:var(--accent);border-radius:3px;padding:12px 19px;text-decoration:none}
+.btn:hover{filter:none;transform:translateY(-1px);text-decoration:none}
+.steps{list-style:none;padding:0;margin:0 0 22px;border-top:1px solid var(--border)}
+.steps li{border-bottom:1px solid var(--border);padding:20px 0;background:transparent}
 .steps .step-name{font-weight:700;color:var(--text);display:block;margin-bottom:4px}
 .steps .step-cue{color:var(--text-2);font-size:13.5px}
 .steps .step-dur{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:8px}
-.chip-list{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
-.chip-list a{font-size:12.5px;font-weight:600;color:var(--text-2);background:var(--panel-2);
-border:1px solid var(--border-2);border-radius:999px;padding:5px 12px}
-.chip-list a:hover{color:var(--text);text-decoration:none;border-color:var(--accent-line)}
-.domain-group{margin-bottom:26px}
+.chip-list{display:flex;flex-wrap:wrap;gap:0;margin:0 0 8px;border-top:1px solid var(--border);border-left:1px solid var(--border)}
+.chip-list a{font-size:12.5px;font-weight:600;color:var(--text-2);background:transparent;
+border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:8px 13px}
+.chip-list a:hover{color:var(--bg);background:var(--text);text-decoration:none}
+.domain-group{margin:64px 0 0}
 .domain-group h2{margin-top:0}
-.move-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
-.move-card{display:block;border:1px solid var(--border);border-radius:var(--radius);
-padding:13px 15px;background:var(--panel)}
-.move-card:hover{border-color:var(--accent-line);text-decoration:none}
-.move-card .mc-name{display:block;font-weight:700;color:var(--text);font-size:13.5px}
-.move-card .mc-meta{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
-footer.site-footer{border-top:1px solid var(--border);padding:26px 0 40px;margin-top:20px}
+.move-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--border);border-left:1px solid var(--border)}
+.move-card{display:flex;min-height:126px;flex-direction:column;justify-content:space-between;
+border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:19px 20px;background:transparent}
+.move-card:hover{background:var(--text);text-decoration:none}
+.move-card .mc-name{display:block;font-weight:700;color:var(--text);font-size:16px;letter-spacing:-.2px}
+.move-card .mc-meta{display:block;font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:16px}
+.move-card:hover .mc-name{color:var(--bg)}
+.move-card:hover .mc-meta{color:#555853}
+footer.site-footer{border-top:1px solid var(--border);padding:34px 0 48px;margin-top:20px}
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
-@media(max-width:600px){.wrap{padding:0 18px}}
+@media(max-width:820px){nav.links a:nth-child(n+4){display:none}.move-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
+@media(max-width:600px){.wrap{padding-left:18px;padding-right:18px}header.site-nav{padding:14px 0}
+nav.links{gap:14px}nav.links a:nth-child(n+3){display:none}main{padding-top:48px}h1{font-size:clamp(44px,14vw,62px)}
+.move-grid{grid-template-columns:1fr}.move-card{min-height:104px}.domain-group{margin-top:48px}}
 </style>
 
     <script>

playground/public/moves/arm-circles.html

@@ -26,41 +26,43 @@
       rel="stylesheet"
     />
     <style>
-:root{--bg:#0a0d12;--panel:#0f141b;--panel-2:#141a23;--border:#1e2530;--border-2:#2a323f;
---text:#e9eef4;--text-2:#9aa6b4;--muted:#616d7c;--accent:#c6f24a;--accent-2:#a9e02f;
---accent-ink:#0a0d12;--accent-glow:rgba(198,242,74,.45);--accent-wash:rgba(198,242,74,.1);
---accent-line:rgba(198,242,74,.35);--mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
---sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;--radius:10px;}
+:root{--bg:#0b0c0d;--panel:#111315;--panel-2:#171a1d;--border:#292d30;--border-2:#3a3f43;
+--text:#f2f1eb;--text-2:#aaa9a2;--muted:#74746f;--accent:#d4ff3f;
+--accent-ink:#0b0c0d;--accent-line:rgba(212,255,63,.42);
+--mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
+--sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;--radius:3px;}
 *{box-sizing:border-box}
 html,body{margin:0}
 body{background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.6;
 -webkit-font-smoothing:antialiased;}
 a{color:var(--accent);text-decoration:none}
 a:hover{text-decoration:underline}
-.wrap{max-width:840px;margin:0 auto;padding:0 24px}
-header.site-nav{border-bottom:1px solid var(--border);padding:16px 0;margin-bottom:8px}
+.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
+header.site-nav{position:sticky;top:0;z-index:10;border-bottom:1px solid var(--border);padding:18px 0;
+background:rgba(11,12,13,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
 header.site-nav .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
 .brand{display:flex;align-items:center;gap:9px;color:var(--text);font-weight:800;font-size:18px}
 .brand .logo{color:var(--accent)}
-nav.links{display:flex;gap:18px;font-size:13.5px;font-weight:600;flex-wrap:wrap}
+nav.links{display:flex;gap:24px;font-size:13.5px;font-weight:600;flex-wrap:wrap}
 nav.links a{color:var(--text-2)}
 nav.links a:hover{color:var(--text)}
-main{padding:36px 0 64px}
+main{padding-top:clamp(54px,8vw,96px);padding-bottom:80px}
 .eyebrow{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:2px;
-text-transform:uppercase;color:var(--accent);margin:0 0 12px}
-h1{font-size:clamp(28px,4.5vw,42px);font-weight:900;letter-spacing:-1px;line-height:1.1;margin:0 0 14px}
-h2{font-size:22px;font-weight:800;letter-spacing:-.3px;margin:36px 0 12px}
+text-transform:uppercase;color:var(--text-2);margin:0 0 16px}
+h1{max-width:13ch;font-size:clamp(46px,7vw,82px);font-weight:900;letter-spacing:-.055em;
+line-height:.94;margin:0 0 24px;text-wrap:balance}
+h2{font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-.035em;margin:58px 0 18px}
 h3{font-size:17px;font-weight:700;margin:24px 0 8px}
 h4{font-size:14px;font-weight:700;margin:18px 0 6px}
-p{color:var(--text-2);margin:0 0 14px}
+p{max-width:760px;color:var(--text-2);font-size:16px;margin:0 0 18px}
 .meta-line{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin:0 0 22px;
 letter-spacing:.2px}
 .meta-line b{color:var(--text-2);font-weight:600}
 code{font-family:var(--mono);font-size:.92em;background:var(--panel-2);border:1px solid var(--border);
-padding:1px 6px;border-radius:5px;color:var(--text)}
+padding:1px 6px;border-radius:2px;color:var(--text)}
 pre.code-block{font-family:var(--mono);font-size:12.5px;line-height:1.55;color:var(--text-2);
-background:var(--panel);border:1px solid var(--border-2);border-radius:var(--radius);
-padding:16px 18px;overflow:auto;margin:0 0 18px}
+background:#0e1011;border:1px solid var(--border-2);border-radius:2px;
+padding:20px 22px;overflow:auto;margin:0 0 18px}
 pre.code-block code{background:none;border:none;padding:0;color:inherit}
 .table-wrap{overflow-x:auto;margin:0 0 18px}
 table{border-collapse:collapse;width:100%;font-size:13.5px}
@@ -70,33 +72,35 @@
 ul,ol{color:var(--text-2);padding-left:22px;margin:0 0 16px}
 li{margin-bottom:6px}
 hr{border:none;border-top:1px solid var(--border);margin:28px 0}
-.card{border:1px solid var(--border);border-radius:var(--radius);
-background:linear-gradient(180deg,var(--panel),transparent);padding:20px 22px;margin:0 0 16px}
+.card{border:1px solid var(--border);border-radius:0;background:transparent;padding:20px 22px;margin:0 0 16px}
 .btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;
-color:var(--accent-ink);background:linear-gradient(180deg,var(--accent),var(--accent-2));
-border-radius:8px;padding:11px 18px;text-decoration:none}
-.btn:hover{filter:brightness(1.06);text-decoration:none}
-.steps{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:12px}
-.steps li{border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;
-background:var(--panel)}
+color:var(--accent-ink);background:var(--accent);border-radius:3px;padding:12px 19px;text-decoration:none}
+.btn:hover{filter:none;transform:translateY(-1px);text-decoration:none}
+.steps{list-style:none;padding:0;margin:0 0 22px;border-top:1px solid var(--border)}
+.steps li{border-bottom:1px solid var(--border);padding:20px 0;background:transparent}
 .steps .step-name{font-weight:700;color:var(--text);display:block;margin-bottom:4px}
 .steps .step-cue{color:var(--text-2);font-size:13.5px}
 .steps .step-dur{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:8px}
-.chip-list{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
-.chip-list a{font-size:12.5px;font-weight:600;color:var(--text-2);background:var(--panel-2);
-border:1px solid var(--border-2);border-radius:999px;padding:5px 12px}
-.chip-list a:hover{color:var(--text);text-decoration:none;border-color:var(--accent-line)}
-.domain-group{margin-bottom:26px}
+.chip-list{display:flex;flex-wrap:wrap;gap:0;margin:0 0 8px;border-top:1px solid var(--border);border-left:1px solid var(--border)}
+.chip-list a{font-size:12.5px;font-weight:600;color:var(--text-2);background:transparent;
+border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:8px 13px}
+.chip-list a:hover{color:var(--bg);background:var(--text);text-decoration:none}
+.domain-group{margin:64px 0 0}
 .domain-group h2{margin-top:0}
-.move-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
-.move-card{display:block;border:1px solid var(--border);border-radius:var(--radius);
-padding:13px 15px;background:var(--panel)}
-.move-card:hover{border-color:var(--accent-line);text-decoration:none}
-.move-card .mc-name{display:block;font-weight:700;color:var(--text);font-size:13.5px}
-.move-card .mc-meta{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
-footer.site-footer{border-top:1px solid var(--border);padding:26px 0 40px;margin-top:20px}
+.move-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--border);border-left:1px solid var(--border)}
+.move-card{display:flex;min-height:126px;flex-direction:column;justify-content:space-between;
+border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:19px 20px;background:transparent}
+.move-card:hover{background:var(--text);text-decoration:none}
+.move-card .mc-name{display:block;font-weight:700;color:var(--text);font-size:16px;letter-spacing:-.2px}
+.move-card .mc-meta{display:block;font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:16px}
+.move-card:hover .mc-name{color:var(--bg)}
+.move-card:hover .mc-meta{color:#555853}
+footer.site-footer{border-top:1px solid var(--border);padding:34px 0 48px;margin-top:20px}
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
-@media(max-width:600px){.wrap{padding:0 18px}}
+@media(max-width:820px){nav.links a:nth-child(n+4){display:none}.move-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
+@media(max-width:600px){.wrap{padding-left:18px;padding-right:18px}header.site-nav{padding:14px 0}
+nav.links{gap:14px}nav.links a:nth-child(n+3){display:none}main{padding-top:48px}h1{font-size:clamp(44px,14vw,62px)}
+.move-grid{grid-template-columns:1fr}.move-card{min-height:104px}.domain-group{margin-top:48px}}
 </style>
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Arm circles","description":"How to do the arm circles (warm-up): 3 phases targeting the deltoids, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Up & forward","text":"Sweep the arms up and forward"},{"@type":"HowToStep","name":"Out to sides","text":"Open the arms out wide to the sides"},{"@type":"HowToStep","name":"Down & round","text":"Lower and continue the circle back to the start"}]}</script>
     <script>