Skip to content

Commit 57b121e

Browse files
a-baran-orhana-baran-orhan
committed
Redesign landing page around LLM-written motion
1 parent 84755c1 commit 57b121e

3 files changed

Lines changed: 937 additions & 756 deletions

File tree

‎playground/index.html‎

Lines changed: 141 additions & 190 deletions
Original file line numberDiff line numberDiff line change
@@ -126,224 +126,175 @@
126126
<body>
127127
<div class="bg-fx" aria-hidden="true"></div>
128128

129-
<!-- Nav -->
130129
<header class="nav">
131130
<a class="brand" href="/" aria-label="Posecode home">
132131
<svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="19" height="19" 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>
133132
<span class="wordmark">Posecode</span>
134133
</a>
135134
<nav class="nav-links" aria-label="Primary">
136135
<a href="#how">How it works</a>
137-
<a href="#examples">Examples</a>
138-
<a href="./moves/">Movement library</a>
136+
<a href="#examples">Movements</a>
139137
<a href="#developers">Developers</a>
140138
<a href="/for-products">For products</a>
141139
<a href="https://github.com/posecode-dev/posecode" target="_blank" rel="noopener">GitHub</a>
142140
</nav>
143-
<a class="btn primary nav-cta" href="/play">Open playground&nbsp;→</a>
141+
<a class="btn primary nav-cta" href="/play">Try it live&nbsp;→</a>
144142
</header>
145143

146-
<!-- Hero -->
147-
<section class="hero">
148-
<div class="hero-copy reveal">
149-
<p class="eyebrow">Movement is programmable</p>
150-
<h1 class="headline">
151-
Write the move.<br /><span class="hl">Watch it happen.</span>
152-
</h1>
153-
<p class="subhead">
154-
Turn readable instructions into structured, inspectable 3D motion. Build exercises,
155-
stretches, dance phrases, and rehab routines, then edit every beat live in
156-
the browser.
157-
</p>
158-
<div class="hero-cta">
159-
<a class="btn primary lg" href="/play">Open the playground&nbsp;→</a>
160-
<button id="copy-prompt" class="btn ghost lg">
161-
<span class="lbl">Copy LLM prompt</span>
162-
</button>
144+
<main>
145+
<section class="hero">
146+
<div class="hero-copy reveal">
147+
<p class="eyebrow">A motion language for LLMs</p>
148+
<h1 class="headline">Give your LLM<br /><span class="hl">a body.</span></h1>
149+
<p class="subhead">
150+
Posecode turns LLM-written text into structured, editable 3D human motion, live in your browser.
151+
</p>
152+
<div class="hero-cta">
153+
<a class="btn primary lg" href="/play">Open the playground&nbsp;→</a>
154+
<button class="btn ghost lg" data-copy-prompt>
155+
<span class="lbl">Copy prompt for your LLM</span>
156+
</button>
157+
</div>
158+
<div class="hero-meta" aria-label="Project highlights">
159+
<span>Open source</span>
160+
<span>Runs on-device</span>
161+
<span>LLM-ready</span>
162+
</div>
163163
</div>
164-
<p id="catalog-meta" class="hero-meta">
165-
48 launch-ready moves &nbsp;·&nbsp; 25 experimental previews &nbsp;·&nbsp; validated text &nbsp;·&nbsp; open source
166-
</p>
167-
</div>
168164

169-
<div class="hero-stage reveal" aria-label="Live 3D preview with a contact-phase source excerpt">
170-
<div class="studio">
171-
<div class="studio-bar" aria-hidden="true">
172-
<span class="dots"></span>
173-
<span class="studio-title">superhero-landing.posecode</span>
174-
<span class="studio-live"><i></i>live</span>
165+
<div class="hero-stage reveal" aria-label="A prompt becoming a live 3D movement">
166+
<div class="prompt-card">
167+
<span class="prompt-label">Prompt to a capable LLM</span>
168+
<p>“Write a controlled superhero landing.”</p>
175169
</div>
176-
<canvas id="hero-canvas"></canvas>
177-
<div class="studio-hud"><span id="hero-phase">Drop into the landing</span></div>
178-
</div>
179170

180-
<!-- Compact contact-phase excerpt, pinned above the motion on wide screens. -->
181-
<pre class="code-chip" aria-hidden="true"># contact-phase excerpt
182-
<span class="t-kw">step</span> <span class="t-str">"Make three-point contact"</span> <span class="t-num">0.3s</span> <span class="t-atom">settle</span><span class="t-punct">:</span>
183-
<span class="t-kw">ground-lock</span><span class="t-punct">:</span> <span class="t-atom">foot_right</span>
184-
<span class="t-kw">reach</span><span class="t-punct">:</span> <span class="t-atom">knee_left floor</span>
185-
<span class="t-kw">reach</span><span class="t-punct">:</span> <span class="t-atom">fist_left floor</span>
186-
<span class="t-kw">cue</span> <span class="t-str">"Set all three contacts"</span></pre>
187-
</div>
188-
</section>
171+
<div class="studio">
172+
<div class="studio-bar" aria-hidden="true">
173+
<span class="studio-kicker">AI output</span>
174+
<span class="studio-title">superhero-landing.posecode</span>
175+
<span class="studio-live"><i></i>live 3D</span>
176+
</div>
177+
<canvas id="hero-canvas"></canvas>
178+
<div class="studio-hud"><span id="hero-phase">Drop into the landing</span></div>
179+
</div>
189180

190-
<!-- Value props -->
191-
<section class="props">
192-
<article class="prop reveal">
193-
<div class="prop-mark">⌁</div>
194-
<h3>Semantic, not matrices</h3>
195-
<p>
196-
Models write phases and joint angles, like <code>knees: flex 95</code>,
197-
instead of 3D transforms. The closed syntax makes the intended anatomy inspectable.
198-
</p>
199-
</article>
200-
<article class="prop reveal">
201-
<div class="prop-mark">⛨</div>
202-
<h3>Range-aware &amp; testable</h3>
203-
<p>
204-
Joint targets are constrained to configured reference ranges, while reach
205-
residuals expose a fist, foot, or knee that remains short of its target.
206-
</p>
207-
</article>
208-
<article class="prop reveal">
209-
<div class="prop-mark">◴</div>
210-
<h3>Cheap &amp; client-side</h3>
211-
<p>
212-
Generation is compact text. Rendering is forward kinematics and constrained IK
213-
in Three.js on the user's device, with no server-side diffusion pipeline.
214-
</p>
215-
</article>
216-
</section>
181+
<pre class="code-chip" aria-hidden="true"><span class="code-label">LLM-WRITTEN</span>
182+
<span class="t-kw">step</span> <span class="t-str">"Make three-point contact"</span> <span class="t-num">0.3s</span><span class="t-punct">:</span>
183+
<span class="t-kw">ground-lock</span><span class="t-punct">:</span> <span class="t-atom">foot_right</span>
184+
<span class="t-kw">reach</span><span class="t-punct">:</span> <span class="t-atom">knee_left floor</span>
185+
<span class="t-kw">reach</span><span class="t-punct">:</span> <span class="t-atom">fist_left floor</span></pre>
186+
</div>
187+
</section>
217188

218-
<!-- Examples -->
219-
<section id="examples" class="examples">
220-
<header class="section-head reveal">
221-
<p class="eyebrow">See it move</p>
222-
<h2>One language, many practices</h2>
223-
<p class="section-sub">
224-
A taste of the library, from physiotherapy and posture to yoga, dance, and
225-
martial arts. Every movement opens in the playground, editable and
226-
shareable.
227-
</p>
228-
</header>
229-
<div id="examples-grid" class="examples-grid"></div>
230-
</section>
189+
<section class="proof" aria-label="Why Posecode">
190+
<article class="proof-item reveal">
191+
<span class="proof-n">01</span>
192+
<div><strong>LLM-native</strong><p>Readable movement, not matrices.</p></div>
193+
</article>
194+
<article class="proof-item reveal">
195+
<span class="proof-n">02</span>
196+
<div><strong>Range-aware</strong><p>Targets stay within configured ranges.</p></div>
197+
</article>
198+
<article class="proof-item reveal">
199+
<span class="proof-n">03</span>
200+
<div><strong>Browser-native</strong><p>Live 3D, no server-side diffusion.</p></div>
201+
</article>
202+
</section>
231203

232-
<!-- How it works -->
233-
<section id="how" class="how">
234-
<header class="section-head reveal">
235-
<p class="eyebrow">How it works</p>
236-
<h2>From a sentence to a moving figure</h2>
237-
</header>
238-
<ol class="how-steps">
239-
<li class="reveal">
240-
<span class="how-n">1</span>
241-
<h3>A capable model writes <code>.posecode</code></h3>
242-
<p>Give the Posecode authoring guide to a capable model and ask for a representable movement. For a supported request, its raw <code>.posecode</code> output remains editable and reviewable.</p>
243-
</li>
244-
<li class="reveal">
245-
<span class="how-n">2</span>
246-
<h3>The parser validates &amp; clamps</h3>
247-
<p>A TypeScript parser enforces the closed vocabulary, joint/action compatibility, contacts, and configured range limits.</p>
248-
</li>
249-
<li class="reveal">
250-
<span class="how-n">3</span>
251-
<h3>Three.js renders it</h3>
252-
<p>Forward kinematics plus constrained contact IK animate a low-poly figure live in the browser.</p>
253-
</li>
254-
</ol>
255-
</section>
204+
<section id="how" class="how">
205+
<header class="section-head reveal">
206+
<p class="eyebrow">How it works</p>
207+
<h2>One prompt. Three clear steps.</h2>
208+
</header>
209+
<ol class="how-steps">
210+
<li class="reveal">
211+
<span class="how-n">01</span>
212+
<h3>Ask</h3>
213+
<p>Describe a representable movement.</p>
214+
</li>
215+
<li class="reveal">
216+
<span class="how-n">02</span>
217+
<h3>Generate</h3>
218+
<p>A capable LLM writes a tiny <code>.posecode</code> file.</p>
219+
</li>
220+
<li class="reveal">
221+
<span class="how-n">03</span>
222+
<h3>Move</h3>
223+
<p>The browser validates, constrains, and animates it.</p>
224+
</li>
225+
</ol>
226+
</section>
256227

257-
<!-- Developers -->
258-
<section id="developers" class="developers">
259-
<header class="section-head reveal">
260-
<p class="eyebrow">For developers</p>
261-
<h2>An open core you can build on</h2>
262-
</header>
263-
<div class="dev-grid">
264-
<a class="dev-card reveal" href="/play">
265-
<h3>Playground →</h3>
266-
<p>Live editor, 3D viewport, syntax highlighting, inline range-of-motion diagnostics.</p>
267-
</a>
268-
<div class="dev-card reveal">
269-
<h3>MCP server</h3>
270-
<p>Let a model in an MCP client validate a movement and get back a render link.</p>
271-
<code class="dev-code">npx -y posecode-mcp</code>
272-
</div>
273-
<div class="dev-card reveal">
274-
<h3>VS Code extension</h3>
275-
<p>Highlighting, completion, hover docs, and ROM diagnostics for <code>.posecode</code> files.</p>
276-
</div>
277-
<a class="dev-card reveal" href="https://github.com/posecode-dev/posecode" target="_blank" rel="noopener">
278-
<h3>Apache 2.0 libraries</h3>
279-
<p><code>posecode-parser</code>, <code>posecode-render</code>, and <code>posecode-share</code> are framework-agnostic and on GitHub.</p>
280-
</a>
281-
</div>
282-
</section>
228+
<section id="examples" class="examples">
229+
<header class="section-head reveal">
230+
<p class="eyebrow">Movement library</p>
231+
<h2>Ask for almost any move.</h2>
232+
<p class="section-sub">Explore launch-ready examples across fitness, rehab, dance, and more.</p>
233+
</header>
234+
<div id="examples-grid" class="examples-grid"></div>
235+
</section>
283236

284-
<!-- FAQ -->
285-
<section id="faq" class="faq">
286-
<header class="section-head reveal">
287-
<p class="eyebrow">FAQ</p>
288-
<h2>Common questions</h2>
289-
</header>
290-
<dl class="faq-list">
291-
<div class="faq-item reveal">
292-
<dt>What is Posecode?</dt>
293-
<dd>
294-
Posecode is an open-source text-to-motion language. You describe single-person
295-
movement as phases, joint targets, timing, and contacts; the browser validates
296-
the document and renders it as an animated 3D figure.
297-
</dd>
298-
</div>
299-
<div class="faq-item reveal">
300-
<dt>How do I generate an exercise animation with an LLM?</dt>
301-
<dd>
302-
Copy the authoring guide into a capable chat model and ask for a representable
303-
movement such as a hip hinge or hamstring stretch. For a representable request,
304-
the model should return raw <code>.posecode</code> text. Paste it into the
305-
playground: valid documents animate, while parse errors, range clamps, and
306-
unresolved reach targets appear as diagnostics.
307-
</dd>
308-
</div>
309-
<div class="faq-item reveal">
310-
<dt>Does Posecode guarantee a movement is safe?</dt>
311-
<dd>
312-
No. Posecode constrains authored and IK-generated joint targets to configured
313-
reference ranges and reports unresolved reach targets. A simplified rig cannot
314-
certify that a whole movement is safe, accurate, or appropriate for a person.
315-
It is not medical advice.
316-
</dd>
237+
<section id="developers" class="developers">
238+
<header class="section-head reveal">
239+
<p class="eyebrow">For developers</p>
240+
<h2>Open all the way down.</h2>
241+
<p class="section-sub">Use the language, parser, renderer, or agent tools. Everything is Apache 2.0 licensed.</p>
242+
</header>
243+
<div class="dev-grid">
244+
<a class="dev-card reveal" href="/play">
245+
<span class="dev-kind">Build</span>
246+
<h3>Playground <span>→</span></h3>
247+
<p>Edit and preview movement live.</p>
248+
</a>
249+
<div class="dev-card reveal">
250+
<span class="dev-kind">Connect</span>
251+
<h3>MCP server</h3>
252+
<p>Let agents validate movement.</p>
253+
</div>
254+
<a class="dev-card reveal" href="./spec.html">
255+
<span class="dev-kind">Author</span>
256+
<h3>Language spec <span>→</span></h3>
257+
<p>A small, semantic grammar.</p>
258+
</a>
259+
<a class="dev-card reveal" href="https://github.com/posecode-dev/posecode" target="_blank" rel="noopener">
260+
<span class="dev-kind">Extend</span>
261+
<h3>Apache packages <span>→</span></h3>
262+
<p>Parser, renderer, share codec.</p>
263+
</a>
317264
</div>
318-
<div class="faq-item reveal">
319-
<dt>Is Posecode free to use?</dt>
320-
<dd>
321-
Yes. Posecode is Apache-2.0-licensed and open source: the parser, 3D renderer, share
322-
codec, MCP server, and VS Code extension are all free, and rendering runs
323-
locally in a WebGL-capable browser without server-side motion generation.
324-
</dd>
265+
</section>
266+
267+
<section class="final-cta reveal">
268+
<p class="eyebrow">Your turn</p>
269+
<h2>What should a body do?</h2>
270+
<p>Ask your LLM. Paste the result. Watch it move.</p>
271+
<div class="hero-cta">
272+
<a class="btn primary lg" href="/play">Start with the playground&nbsp;→</a>
273+
<button class="btn ghost lg" data-copy-prompt>
274+
<span class="lbl">Copy LLM prompt</span>
275+
</button>
325276
</div>
326-
</dl>
327-
</section>
277+
</section>
278+
</main>
328279

329-
<!-- Footer -->
330280
<footer class="footer">
331-
<div class="footer-brand">
332-
<svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="19" height="19" 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> Posecode
333-
<span class="footer-tag">kinematic motion as text</span>
281+
<div class="footer-top">
282+
<div class="footer-brand">
283+
<svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="19" height="19" 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>
284+
<span>Posecode</span>
285+
<small>human movement, written as text</small>
286+
</div>
287+
<nav class="footer-links" aria-label="Footer">
288+
<a href="./moves/">Movements</a>
289+
<a href="./spec.html">Spec</a>
290+
<a href="./llm-guide.html">LLM guide</a>
291+
<a href="/for-products">For products</a>
292+
<a href="mailto:hello@posecode.org?subject=Posecode%20Feedback">Feedback</a>
293+
<a href="https://github.com/posecode-dev/posecode" target="_blank" rel="noopener">GitHub</a>
294+
</nav>
334295
</div>
335296
<p class="footer-note">
336-
Range-of-motion values are general literature data, not medical advice.
337-
Consult a qualified professional for physiotherapy or exercise prescription.
338-
</p>
339-
<p class="footer-legal">
340-
Apache-2.0-licensed open core · v0.2 &nbsp;·&nbsp;
341-
<a href="./moves/">Movement library</a> &nbsp;·&nbsp;
342-
<a href="./spec.html">Language spec</a> &nbsp;·&nbsp;
343-
<a href="./llm-guide.html">LLM guide</a> &nbsp;·&nbsp;
344-
<a href="/for-products">For products</a> &nbsp;·&nbsp;
345-
<a href="mailto:hello@posecode.org?subject=Posecode%20Feedback">Feedback</a> &nbsp;·&nbsp;
346-
<a href="https://github.com/posecode-dev/posecode/issues" target="_blank" rel="noopener">Issues</a>
297+
Apache-2.0-licensed · Range-of-motion values are general literature data, not medical advice.
347298
</p>
348299
</footer>
349300

0 commit comments

Comments
 (0)