Skip to content

Commit 73a06c2

Browse files
committed
Simplify playground filters into a movement library, remove em dashes, add SEO
UX: replace the four topbar dropdowns (area / gear / level / example) with a single Movement button that opens a searchable library panel: one search box (accent-insensitive), practice and level chip filters, and a domain-grouped list. Desktop gets a slide-over, phones get a bottom sheet, and the mobile topbar drops from three rows of selects to two dropdown-free rows. Copy: remove em dashes from all user-visible text (landing, playground, embed demo, example cue strings) and point GitHub links at posecode-dev/posecode. SEO: canonical URLs, richer titles/descriptions, Open Graph + Twitter cards with a generated og.png, JSON-LD (WebSite, SoftwareApplication, FAQPage), a visible FAQ section on the landing page, robots.txt, sitemap.xml, and llms.txt for LLM discoverability. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01B7RkyiTt9soiYdw5vt6BEP
1 parent 92b639a commit 73a06c2

33 files changed

Lines changed: 669 additions & 223 deletions

playground/embed-demo.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
</head>
1717
<body>
1818
<main>
19-
<h1>◆ posecode-embed one script tag, live 3D movement anywhere</h1>
19+
<h1>◆ posecode-embed: one script tag, live 3D movement anywhere</h1>
2020
<p>Every player below is the same custom element, fed a movement a different way.</p>
2121

2222
<div class="grid">
@@ -30,7 +30,7 @@ <h2>2. From a URL (<code>src</code>)</h2>
3030
</div>
3131
</div>
3232

33-
<h2>3. From inline text reads like the language itself</h2>
33+
<h2>3. From inline text: reads like the language itself</h2>
3434
<posecode-player>
3535
posecode exercise "Lateral raise"
3636
rig humanoid

playground/index.html

Lines changed: 144 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,111 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Posecode — describe human movement as text</title>
6+
<title>Posecode: Describe Human Movement as Text, Animated in 3D</title>
77
<link
88
rel="icon"
99
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3 29 16 16 29 3 16Z' fill='%23c6f24a'/%3E%3C/svg%3E"
1010
/>
1111
<meta
1212
name="description"
13-
content="Posecode is a tiny language LLMs can write to describe human movement — exercises, stretches, posture — rendered as an animated 3D figure in the browser, with every joint clamped to a safe range of motion."
13+
content="Posecode is an open-source text-to-motion language for LLMs. Describe exercises, physiotherapy, yoga, or dance in plain text and watch an anatomically safe 3D figure animate in your browser."
1414
/>
15-
<meta property="og:title" content="Posecode — human movement, written as text" />
15+
<meta
16+
name="keywords"
17+
content="text to motion, LLM animation, kinematic motion protocol, 3D human movement, exercise animation, physiotherapy animation, pose language, AI motion generation, ChatGPT animation, Claude animation, open source motion language"
18+
/>
19+
<link rel="canonical" href="https://posecode.org/" />
20+
<meta name="theme-color" content="#0a0d12" />
21+
<meta property="og:title" content="Posecode: human movement, written as text" />
1622
<meta
1723
property="og:description"
18-
content="A Mermaid-style language for kinematic motion. LLMs write it; the browser renders an animated, anatomically-safe 3D figure."
24+
content="A Mermaid-style language for kinematic motion. LLMs write it; the browser renders an animated, anatomically safe 3D figure."
1925
/>
2026
<meta property="og:type" content="website" />
27+
<meta property="og:url" content="https://posecode.org/" />
28+
<meta property="og:site_name" content="Posecode" />
29+
<meta property="og:image" content="https://posecode.org/og.png" />
30+
<meta property="og:image:width" content="1200" />
31+
<meta property="og:image:height" content="630" />
2132
<meta name="twitter:card" content="summary_large_image" />
33+
<meta name="twitter:title" content="Posecode: human movement, written as text" />
34+
<meta
35+
name="twitter:description"
36+
content="A Mermaid-style language for kinematic motion. LLMs write it; the browser renders an animated, anatomically safe 3D figure."
37+
/>
38+
<meta name="twitter:image" content="https://posecode.org/og.png" />
2239
<link rel="preconnect" href="https://fonts.googleapis.com" />
2340
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
2441
<link
2542
href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap"
2643
rel="stylesheet"
2744
/>
2845
<link rel="stylesheet" href="./src/landing.css" />
46+
<script type="application/ld+json">
47+
{
48+
"@context": "https://schema.org",
49+
"@graph": [
50+
{
51+
"@type": "WebSite",
52+
"@id": "https://posecode.org/#website",
53+
"url": "https://posecode.org/",
54+
"name": "Posecode",
55+
"description": "An open-source text-to-motion language for LLMs. Describe human movement as text; render it as an animated 3D figure in the browser."
56+
},
57+
{
58+
"@type": "SoftwareApplication",
59+
"@id": "https://posecode.org/#app",
60+
"name": "Posecode",
61+
"url": "https://posecode.org/",
62+
"applicationCategory": "DeveloperApplication",
63+
"operatingSystem": "Any (web browser)",
64+
"description": "Posecode is a tiny language LLMs can write to describe human movement: exercises, stretches, physiotherapy, yoga, and dance. The browser renders it as an animated 3D figure, with every joint clamped to a safe range of motion.",
65+
"offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" },
66+
"license": "https://opensource.org/license/mit",
67+
"sameAs": ["https://github.com/posecode-dev/posecode"],
68+
"keywords": "text to motion, LLM, kinematic motion, 3D animation, exercise, physiotherapy, open source"
69+
},
70+
{
71+
"@type": "FAQPage",
72+
"@id": "https://posecode.org/#faq",
73+
"mainEntity": [
74+
{
75+
"@type": "Question",
76+
"name": "What is Posecode?",
77+
"acceptedAnswer": {
78+
"@type": "Answer",
79+
"text": "Posecode is an open-source text-to-motion language. You describe a human movement in plain text (phases, joint angles, timing) and the browser renders it as an animated 3D figure. It is designed so LLMs like ChatGPT, Claude, and Gemini can write it reliably."
80+
}
81+
},
82+
{
83+
"@type": "Question",
84+
"name": "How do I generate an exercise animation with an LLM?",
85+
"acceptedAnswer": {
86+
"@type": "Answer",
87+
"text": "Copy the Posecode LLM prompt from posecode.org, paste it into any chat model, and ask for a movement such as a deadlift or a hamstring stretch. Paste the model's .posecode reply into the playground and it animates instantly."
88+
}
89+
},
90+
{
91+
"@type": "Question",
92+
"name": "Is the movement anatomically safe?",
93+
"acceptedAnswer": {
94+
"@type": "Answer",
95+
"text": "Every joint angle is hard-clamped to a clinical range of motion, so even a hallucinated angle cannot produce an impossible pose. Range-of-motion values are general literature data, not medical advice."
96+
}
97+
},
98+
{
99+
"@type": "Question",
100+
"name": "Is Posecode free to use?",
101+
"acceptedAnswer": {
102+
"@type": "Answer",
103+
"text": "Yes. Posecode is MIT-licensed and open source: the parser, 3D renderer, share codec, MCP server, and VS Code extension are all free, and rendering runs client-side with no GPU required."
104+
}
105+
}
106+
]
107+
}
108+
]
109+
}
110+
</script>
29111
</head>
30112
<body>
31113
<div class="bg-fx" aria-hidden="true"></div>
@@ -40,7 +122,7 @@
40122
<a href="#how">How it works</a>
41123
<a href="#examples">Examples</a>
42124
<a href="#developers">Developers</a>
43-
<a href="https://github.com/a-baran-orhan/movit" target="_blank" rel="noopener">GitHub</a>
125+
<a href="https://github.com/posecode-dev/posecode" target="_blank" rel="noopener">GitHub</a>
44126
</nav>
45127
<a class="btn primary nav-cta" href="./play.html">Open playground&nbsp;→</a>
46128
</header>
@@ -53,10 +135,10 @@ <h1 class="headline">
53135
Human movement,<br />written as <span class="hl">text</span>.
54136
</h1>
55137
<p class="subhead">
56-
Posecode is a tiny language an LLM can write for physiotherapy, mobility,
57-
posture, yoga, and training — that renders to an animated 3D figure in the
58-
browser. Every joint is clamped to a safe range of motion, so the result is
59-
always anatomically plausible.
138+
Posecode is a tiny language an LLM can write for physiotherapy, mobility,
139+
posture, yoga, and training. It renders to an animated 3D figure in the
140+
browser, and every joint is clamped to a safe range of motion, so the result
141+
is always anatomically plausible.
60142
</p>
61143
<div class="hero-cta">
62144
<a class="btn primary lg" href="./play.html">Open the playground&nbsp;→</a>
@@ -97,24 +179,24 @@ <h1 class="headline">
97179
<div class="prop-mark"></div>
98180
<h3>Semantic, not matrices</h3>
99181
<p>
100-
Models write phases and joint angles <code>knees: flex 95</code> — not 3D
101-
transforms. It's the biomechanics an LLM already knows, given a syntax.
182+
Models write phases and joint angles, like <code>knees: flex 95</code>,
183+
instead of 3D transforms. It's the biomechanics an LLM already knows, given a syntax.
102184
</p>
103185
</article>
104186
<article class="prop reveal">
105187
<div class="prop-mark"></div>
106188
<h3>Anatomically safe</h3>
107189
<p>
108190
Every angle is hard-clamped to a clinical range of motion. A hallucinated
109-
“knee flex 200°” can't produce an impossible joint it's pinned to 144°.
191+
“knee flex 200°” can't produce an impossible joint: it's pinned to 144°.
110192
</p>
111193
</article>
112194
<article class="prop reveal">
113195
<div class="prop-mark"></div>
114196
<h3>Cheap &amp; client-side</h3>
115197
<p>
116198
Generation is a fraction of a cent of text. Rendering is forward kinematics in
117-
Three.js 60fps on a phone, no diffusion model, no GPU farm.
199+
Three.js: 60fps on a phone, no diffusion model, no GPU farm.
118200
</p>
119201
</article>
120202
</section>
@@ -125,8 +207,8 @@ <h3>Cheap &amp; client-side</h3>
125207
<p class="eyebrow">See it move</p>
126208
<h2>One language, many practices</h2>
127209
<p class="section-sub">
128-
From physiotherapy and posture to yoga, dance, and sign language — a taste
129-
of the library. Every movement opens in the playground, editable and
210+
A taste of the library, from physiotherapy and posture to yoga, dance, and
211+
sign language. Every movement opens in the playground, editable and
130212
shareable.
131213
</p>
132214
</header>
@@ -153,7 +235,7 @@ <h3>The parser validates &amp; clamps</h3>
153235
<li class="reveal">
154236
<span class="how-n">3</span>
155237
<h3>Three.js renders it</h3>
156-
<p>Forward kinematics plus ground-lock IK animate a low-poly figure live, in the browser, at 60fps.</p>
238+
<p>Forward kinematics plus ground-lock IK animate a low-poly figure live in the browser, at 60fps.</p>
157239
</li>
158240
</ol>
159241
</section>
@@ -178,13 +260,57 @@ <h3>MCP server</h3>
178260
<h3>VS Code extension</h3>
179261
<p>Highlighting, completion, hover docs, and ROM diagnostics for <code>.posecode</code> files.</p>
180262
</div>
181-
<a class="dev-card reveal" href="https://github.com/a-baran-orhan/movit" target="_blank" rel="noopener">
263+
<a class="dev-card reveal" href="https://github.com/posecode-dev/posecode" target="_blank" rel="noopener">
182264
<h3>MIT libraries</h3>
183-
<p><code>posecode-parser</code>, <code>posecode-render</code>, <code>posecode-share</code> framework-agnostic, on GitHub.</p>
265+
<p><code>posecode-parser</code>, <code>posecode-render</code>, and <code>posecode-share</code> are framework-agnostic and on GitHub.</p>
184266
</a>
185267
</div>
186268
</section>
187269

270+
<!-- FAQ -->
271+
<section id="faq" class="faq">
272+
<header class="section-head reveal">
273+
<p class="eyebrow">FAQ</p>
274+
<h2>Common questions</h2>
275+
</header>
276+
<dl class="faq-list">
277+
<div class="faq-item reveal">
278+
<dt>What is Posecode?</dt>
279+
<dd>
280+
Posecode is an open-source text-to-motion language. You describe a human
281+
movement in plain text (phases, joint angles, timing) and the browser renders
282+
it as an animated 3D figure. It is designed so LLMs like ChatGPT, Claude, and
283+
Gemini can write it reliably.
284+
</dd>
285+
</div>
286+
<div class="faq-item reveal">
287+
<dt>How do I generate an exercise animation with an LLM?</dt>
288+
<dd>
289+
Copy the LLM prompt above, paste it into any chat model, and ask for a
290+
movement such as <em>“write a deadlift”</em> or <em>“a hamstring stretch”</em>.
291+
Paste the model's <code>.posecode</code> reply into the playground and it
292+
animates instantly.
293+
</dd>
294+
</div>
295+
<div class="faq-item reveal">
296+
<dt>Is the movement anatomically safe?</dt>
297+
<dd>
298+
Every joint angle is hard-clamped to a clinical range of motion, so even a
299+
hallucinated angle cannot produce an impossible pose. Range-of-motion values
300+
are general literature data, not medical advice.
301+
</dd>
302+
</div>
303+
<div class="faq-item reveal">
304+
<dt>Is Posecode free to use?</dt>
305+
<dd>
306+
Yes. Posecode is MIT-licensed and open source: the parser, 3D renderer, share
307+
codec, MCP server, and VS Code extension are all free, and rendering runs
308+
client-side with no GPU required.
309+
</dd>
310+
</div>
311+
</dl>
312+
</section>
313+
188314
<!-- Footer -->
189315
<footer class="footer">
190316
<div class="footer-brand">

playground/play.html

Lines changed: 49 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,27 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Posecode Playground — kinematic motion as text</title>
6+
<title>Posecode Playground: Write and Preview 3D Human Movement as Text</title>
77
<link
88
rel="icon"
99
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3 29 16 16 29 3 16Z' fill='%23c6f24a'/%3E%3C/svg%3E"
1010
/>
11+
<meta
12+
name="description"
13+
content="Try Posecode live: paste text from ChatGPT, Claude, or Gemini and watch it animate a 3D figure. Browse a library of movements across fitness, physiotherapy, yoga, and dance."
14+
/>
15+
<link rel="canonical" href="https://posecode.org/play" />
16+
<meta name="theme-color" content="#0a0d12" />
17+
<meta property="og:title" content="Posecode Playground: live editor for movement as text" />
18+
<meta
19+
property="og:description"
20+
content="Paste a .posecode document and watch a 3D figure animate it, with every joint clamped to a safe range of motion."
21+
/>
22+
<meta property="og:type" content="website" />
23+
<meta property="og:url" content="https://posecode.org/play" />
24+
<meta property="og:site_name" content="Posecode" />
25+
<meta property="og:image" content="https://posecode.org/og.png" />
26+
<meta name="twitter:card" content="summary_large_image" />
1127
<link rel="preconnect" href="https://fonts.googleapis.com" />
1228
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
1329
<link
@@ -27,26 +43,17 @@
2743
<span class="tag">playground</span>
2844
</a>
2945
<div class="topbar-actions">
30-
<div class="filter-cluster" role="group" aria-label="Filter examples">
31-
<label class="field filter">
32-
<span>Area</span>
33-
<div class="select-wrap sm"><select id="f-body"></select></div>
34-
</label>
35-
<label class="field filter">
36-
<span>Gear</span>
37-
<div class="select-wrap sm"><select id="f-equip"></select></div>
38-
</label>
39-
<label class="field filter">
40-
<span>Level</span>
41-
<div class="select-wrap sm"><select id="f-level"></select></div>
42-
</label>
43-
</div>
44-
<label class="field field-primary">
45-
<span>Example <span id="preset-count" class="count"></span></span>
46-
<div class="select-wrap">
47-
<select id="preset"></select>
48-
</div>
49-
</label>
46+
<button
47+
id="lib-open"
48+
class="lib-btn"
49+
type="button"
50+
aria-haspopup="dialog"
51+
title="Browse the movement library"
52+
>
53+
<span class="lib-btn-kicker">Movement</span>
54+
<span id="lib-current" class="lib-btn-name"></span>
55+
<span class="lib-caret" aria-hidden="true"></span>
56+
</button>
5057
<span class="tb-divider" aria-hidden="true"></span>
5158
<button id="how-to" class="btn ghost" aria-label="How to use">
5259
<span class="ico-help" aria-hidden="true"></span><span class="lbl">How to use</span>
@@ -153,7 +160,7 @@ <h2>How to use Posecode</h2>
153160
<span class="step-n">1</span>
154161
<div>
155162
<b>Copy the prompt.</b> Click <em>Copy LLM prompt</em> (top right). It teaches
156-
any model ChatGPT, Claude, Gemini to write the Posecode language.
163+
any model (ChatGPT, Claude, Gemini) to write the Posecode language.
157164
</div>
158165
</li>
159166
<li>
@@ -184,6 +191,26 @@ <h2>How to use Posecode</h2>
184191
</div>
185192
</aside>
186193

194+
<!-- Movement library: one place to search, filter, and pick an example -->
195+
<aside id="library" class="slideover library" hidden aria-label="Movement library">
196+
<header class="slideover-head">
197+
<h2>Movement library <span id="lib-count" class="count"></span></h2>
198+
<button id="library-close" class="x" aria-label="Close">×</button>
199+
</header>
200+
<div class="lib-tools">
201+
<input
202+
id="lib-search"
203+
type="search"
204+
placeholder="Search: squat, hamstrings, yoga, chair…"
205+
aria-label="Search movements"
206+
autocomplete="off"
207+
/>
208+
<div id="lib-domains" class="chip-row" role="group" aria-label="Filter by practice"></div>
209+
<div id="lib-levels" class="chip-row" role="group" aria-label="Filter by level"></div>
210+
</div>
211+
<div id="lib-list" class="lib-list"></div>
212+
</aside>
213+
187214
<script type="module" src="./src/main.ts"></script>
188215
</body>
189216
</html>

playground/public/llms.txt

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# Posecode
2+
3+
> Posecode is an open-source (MIT) text-to-motion language: a small, Mermaid-style protocol that LLMs can write to describe human movement (exercises, stretches, physiotherapy, yoga, dance, sign language). A pure-TypeScript parser validates the text and clamps every joint angle to a clinical range of motion, and a Three.js renderer animates it as a 3D figure in the browser at 60fps with no GPU or diffusion model.
4+
5+
Key facts:
6+
- A model writes phases and joint angles ("knees: flex 95"), not 3D transforms.
7+
- Every angle is hard-clamped to an anatomically safe range of motion.
8+
- Rendering is client-side forward kinematics plus ground-lock IK.
9+
- Any LLM (ChatGPT, Claude, Gemini) can author .posecode after reading one system prompt.
10+
11+
## Docs
12+
13+
- [Language specification](https://github.com/posecode-dev/posecode/blob/main/spec/SPEC.md): full grammar, joints, and range-of-motion tables
14+
- [LLM authoring guide](https://github.com/posecode-dev/posecode/blob/main/spec/llm-authoring.md): the system prompt that teaches a model to write .posecode
15+
- [Example movements](https://github.com/posecode-dev/posecode/tree/main/spec/examples): 70+ .posecode documents across fitness, physiotherapy, dance, and more
16+
17+
## Tools
18+
19+
- [Playground](https://posecode.org/play): live editor with a 3D viewer, movement library, and shareable links
20+
- [GitHub repository](https://github.com/posecode-dev/posecode): parser, renderer, share codec, embed web component, MCP server, and VS Code extension
21+
- [MCP server](https://github.com/posecode-dev/posecode/tree/main/packages/posecode-mcp): lets any AI agent validate a movement and get a render link
22+
23+
## Optional
24+
25+
- [Landing page](https://posecode.org/): project overview and highlights

playground/public/og.png

115 KB
Loading

0 commit comments

Comments
 (0)