play.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Posecode Playground: Write and Preview 3D Human Movement as Text</title>
    <link
      rel="icon"
      type="image/png"
      sizes="192x192"
      href="https://www.posecode.org/favicon-192.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="https://www.posecode.org/apple-touch-icon.png"
    />
    <meta
      name="description"
      content="Write, inspect, and validate a .posecode movement document beside its live 3D render. Browse examples across fitness, physiotherapy, yoga, and dance."
    />
    <link rel="canonical" href="https://www.posecode.org/play" />
    <meta name="theme-color" content="#0a0d12" />
    <meta property="og:title" content="Posecode Playground: live editor for movement as text" />
    <meta
      property="og:description"
      content="Paste a valid .posecode document and watch a 3D figure animate it, with joint targets constrained to configured reference ranges and unresolved reach targets reported."
    />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://www.posecode.org/play" />
    <meta property="og:site_name" content="Posecode" />
    <meta property="og:image" content="https://www.posecode.org/og.png" />
    <meta name="twitter:card" content="summary_large_image" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <!-- Load fonts without blocking render: fetch as a low-priority stylesheet
         (media="print") then flip to "all" once loaded. display=swap paints
         text in the fallback immediately, so first paint isn't font-gated. -->
    <link
      rel="preload"
      as="style"
      href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap"
      rel="stylesheet"
      media="print"
      onload="this.media='all'"
    />
    <noscript>
      <link
        href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap"
        rel="stylesheet"
      />
    </noscript>
    <link rel="stylesheet" href="./src/style.css" />
  </head>
  <body>
    <!-- Ambient studio backdrop: layered glow + grain, purely decorative -->
    <div class="bg-fx" aria-hidden="true"></div>

    <header class="topbar">
      <a class="brand" href="/" aria-label="Posecode home">
        <svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg>
        <span class="wordmark">Posecode</span>
        <span class="tag">playground</span>
      </a>
      <div class="topbar-actions">
        <button
          id="lib-open"
          class="lib-btn"
          type="button"
          aria-haspopup="dialog"
          title="Browse the movement library"
        >
          <span class="lib-btn-kicker">Movement</span>
          <span id="lib-current" class="lib-btn-name"></span>
          <span id="lib-current-status" class="lib-current-status" hidden>Experimental</span>
          <span class="lib-caret" aria-hidden="true"></span>
        </button>
        <span class="tb-divider" aria-hidden="true"></span>
        <button
          id="new-doc"
          class="btn ghost"
          aria-label="New movement"
          title="Clear the editor and start a new movement"
        >
          <span class="ico-plus" aria-hidden="true"></span><span class="lbl">New</span>
        </button>
        <button id="how-to" class="btn ghost" aria-label="How to use">
          <span class="ico-help" aria-hidden="true"></span><span class="lbl">How to use</span>
        </button>
        <a
          id="spec-link"
          href="/spec.html"
          class="btn ghost"
          aria-label="Open the Posecode language specification"
          title="Open the normative Posecode language specification"
        >
          <span class="ico-spec" aria-hidden="true"></span><span class="lbl">Spec</span>
        </a>
        <a
          id="feedback"
          href="https://github.com/posecode-dev/posecode"
          class="btn ghost"
          target="_blank"
          rel="noreferrer"
          aria-label="Open the Posecode repository on GitHub"
          title="Open the Posecode repository on GitHub"
        >
          <span class="ico-github" aria-hidden="true"></span><span class="lbl">GitHub</span>
        </a>
        <button
          id="share"
          class="btn ghost"
          aria-label="Copy link"
          title="Copy a shareable link that renders this exact movement"
        >
          <span class="ico-link" aria-hidden="true"></span
          ><span class="lbl" aria-live="polite">Share</span>
        </button>
        <div class="tb-downloads">
          <button
            id="export-menu-button"
            class="btn ghost"
            type="button"
            aria-haspopup="menu"
            aria-expanded="false"
            aria-controls="export-menu"
          >
            <span class="lbl" aria-live="polite">Export</span>
            <span class="export-caret" aria-hidden="true"></span>
          </button>
          <div id="export-menu" class="export-menu" role="menu" hidden>
            <button
              id="download-bvh"
              class="export-option"
              type="button"
              role="menuitem"
              title="Download the movement as a .bvh motion file for Blender and other tools"
            >
              <span>BVH</span>
              <small>For Blender and animation tools</small>
            </button>
            <button
              id="download-gltf"
              class="export-option"
              type="button"
              role="menuitem"
              title="Download the movement as a .glb glTF asset (rig + animation) for Three.js and web pipelines"
            >
              <span>glTF / GLB</span>
              <small>For Three.js and web pipelines</small>
            </button>
          </div>
        </div>
        <button
          id="copy-prompt"
          class="btn primary"
          title="Copy the optional LLM authoring guide"
        >
          <span class="lbl">Copy LLM guide</span>
        </button>
      </div>
    </header>

    <div id="intro" class="intro">
      <span class="intro-text">
        <b>Make something move.</b> Pick a movement or edit the instructions; the
        figure updates as you type.
      </span>
      <button id="intro-open" class="link">Show me how →</button>
      <button id="intro-dismiss" class="x" aria-label="Dismiss">×</button>
    </div>

    <!-- Mobile-only: swap between the editor and the 3D viewer (each full-height) -->
    <nav class="mobile-tabs" aria-label="Panel">
      <button id="tab-editor" class="mtab" type="button" aria-selected="false">
        Editor
      </button>
      <button id="tab-viewer" class="mtab" type="button" aria-selected="true">
        Viewer
      </button>
    </nav>

    <aside
      id="guided-first-edit"
      class="guided-first-edit"
      aria-labelledby="guided-first-edit-title"
      hidden
    >
      <div class="guided-first-edit-copy">
        <span class="guided-first-edit-kicker">Quick edit</span>
        <strong id="guided-first-edit-title">Bend the right knee a little less.</strong>
        <span id="guided-first-edit-message" aria-live="polite">
          Change <code>knee_right: flex 123</code> to <code>115°</code>.
        </span>
      </div>
      <div class="guided-first-edit-actions">
        <button id="guided-first-edit-start" class="btn primary sm" type="button">
          Adjust knee angle
        </button>
        <button id="guided-first-edit-share" class="btn primary sm" type="button" hidden>
          Share movement
        </button>
        <button
          id="guided-first-edit-dismiss"
          class="x"
          type="button"
          aria-label="Dismiss quick edit"
        >×</button>
      </div>
    </aside>

    <main class="layout">
      <section class="editor-pane">
        <div class="pane-head">
          <span class="traffic" aria-hidden="true"></span>
          <span class="file-name">movement.posecode</span>
          <span class="live" aria-hidden="true"><i></i>live</span>
        </div>
        <div class="editor-wrap">
          <div id="editor"></div>
        </div>
        <div id="warnings" class="warnings" aria-live="polite"></div>
      </section>

      <section class="viewer-pane">
        <canvas id="canvas"></canvas>
        <div class="viewer-veil" aria-hidden="true"></div>
        <div
          id="joint-selection"
          class="joint-selection"
          aria-live="polite"
          hidden
        >
          <span>selected</span>
          <strong id="joint-selection-name"></strong>
        </div>

        <div class="hud">
          <div id="phase" class="phase"></div>
          <div id="cue" class="cue" aria-label="Display-only coaching cue"></div>
        </div>
        <div id="reps" class="reps"></div>

        <div
          id="floor-guide-key"
          class="floor-guide-key"
          role="img"
          aria-label="Floor guide: load origin, current facing, and one metre scale"
          hidden
        >
          <span><i class="floor-key-origin" aria-hidden="true"></i>origin</span>
          <span><i class="floor-key-facing" aria-hidden="true">↑</i>facing</span>
          <span><i class="floor-key-scale" aria-hidden="true"></i>1 m</span>
          <span id="floor-guide-travel" hidden
            ><i class="floor-key-travel" aria-hidden="true"></i>travel</span
          >
          <span id="floor-guide-reset" hidden
            ><i class="floor-key-reset" aria-hidden="true"></i>loop reset</span
          >
          <button
            id="floor-guide-toggle"
            class="floor-guide-toggle"
            type="button"
            aria-label="Toggle floor guide debug mode"
            title="Toggle floor guide debug mode (press G)"
          >debug</button>
        </div>

        <div id="ribbon" class="ribbon"></div>

        <div class="transport">
          <button id="playpause" class="btn-play" data-playing="false">
            <span class="ico" aria-hidden="true"></span>
            <span class="lbl">Play</span>
          </button>
          <div class="scrub-wrap">
            <input id="scrub" type="range" min="0" max="1000" value="0" />
            <div id="markers" class="markers"></div>
          </div>
          <span id="clock" class="clock">0.0s</span>
          <label class="loop"
            ><input id="loop" type="checkbox" checked /><span>loop</span></label
          >
          <label class="speed">
            <span>speed</span>
            <div class="select-wrap sm">
              <select id="speed">
                <option value="0.5">0.5×</option>
                <option value="1" selected>1×</option>
                <option value="1.5">1.5×</option>
                <option value="2">2×</option>
              </select>
            </div>
          </label>
        </div>
      </section>
    </main>

    <!-- How-to slide-over -->
    <div id="scrim" class="scrim" hidden></div>
    <aside id="howto" class="slideover" hidden aria-label="How to use Posecode">
      <header class="slideover-head">
        <h2>How to use Posecode</h2>
        <button id="howto-close" class="x" aria-label="Close">×</button>
      </header>
      <div class="slideover-body">
        <ol class="steps">
          <li>
            <span class="step-n">1</span>
            <div>
              <b>Start with source.</b> Pick a movement from the library or clear the editor
              and write a new <code>.posecode</code> document.
            </div>
          </li>
          <li>
            <span class="step-n">2</span>
            <div>
              <b>Edit beside the render.</b> Change phases, joints, timing, and contacts.
              Valid source renders immediately; diagnostics stay below the editor.
            </div>
          </li>
          <li>
            <span class="step-n">3</span>
            <div>
              <b>Use an LLM if you want a draft.</b> Copy the optional LLM guide from the
              top bar, ask for a movement, then inspect and revise the returned source here.
            </div>
          </li>
        </ol>

        <section class="authoring-reference" aria-labelledby="authoring-reference-title">
          <h3 id="authoring-reference-title">Authoring reference</h3>
          <p>
            The <a href="/spec.html">language specification</a> is the normative
            Posecode contract. The <a href="/llm-guide.html">LLM authoring guide</a>
            is an optional aid built from that contract. Review
            <a href="/llm-guide.html#what-posecode-is-not" id="limits-link">capabilities &amp; limitations</a>
            before authoring complex movements.
          </p>
          <p>
            <strong>The golden rule:</strong> <code>pin</code> moves the body
            (translates the floating root around one anchor); <code>reach</code> moves
            a limb (CCD inverse kinematics toward a target without moving the root).
            <code>ground-lock</code> preserves an existing floor support; and
            <code>grip</code> solves hands onto a bar or rails. A <code>cue</code> is display-only coaching text and never changes the animation.
          </p>
        </section>

        <div class="prompt-block">
          <div class="prompt-head">
            <span>Optional LLM authoring guide</span>
            <div class="prompt-head-actions">
              <a href="/llm-guide.html#what-posecode-is-not" class="link" title="Review language capabilities and limitations">Capabilities &amp; limits →</a>
              <button id="howto-copy" class="btn ghost sm">Copy</button>
            </div>
          </div>
          <pre id="prompt-text"></pre>
        </div>
      </div>
    </aside>

    <!-- Movement library: one place to search, filter, and pick an example -->
    <aside id="library" class="slideover library" hidden aria-label="Movement library">
      <header class="slideover-head">
        <h2>Movement library <span id="lib-count" class="count"></span></h2>
        <button id="library-close" class="x" aria-label="Close">×</button>
      </header>
      <div class="lib-tools">
        <input
          id="lib-search"
          type="search"
          placeholder="Search: squat, hamstrings, yoga, chair…"
          aria-label="Search movements"
          autocomplete="off"
        />
        <div id="lib-readiness" class="chip-row" role="group" aria-label="Filter by launch readiness"></div>
        <div id="lib-domains" class="chip-row" role="group" aria-label="Filter by practice"></div>
        <div id="lib-levels" class="chip-row" role="group" aria-label="Filter by level"></div>
      </div>
      <div id="lib-list" class="lib-list"></div>
    </aside>

    <script type="module" src="./src/main.ts"></script>
  </body>
</html>