Skip to content

Commit 908e8a4

Browse files
a-baran-orhana-baran-orhan
committed
Add product integration page
1 parent b424a75 commit 908e8a4

9 files changed

Lines changed: 624 additions & 5 deletions

File tree

‎playground/for-products.html‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Use Posecode in Your Product | Open-Source Motion Tools</title>
7+
<meta name="description" content="Embed Posecode movement in a web product today with an open-source web component, parser, renderer, share links, npm packages, or a local MCP server." />
8+
<link rel="canonical" href="https://www.posecode.org/for-products" />
9+
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192.png" />
10+
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
11+
<meta name="theme-color" content="#0b0c0d" />
12+
<meta property="og:title" content="Use Posecode in your product" />
13+
<meta property="og:description" content="Open-source building blocks for adding readable, editable 3D movement to web products—with a clear view of what exists today and what does not." />
14+
<meta property="og:type" content="website" />
15+
<meta property="og:url" content="https://www.posecode.org/for-products" />
16+
<meta property="og:site_name" content="Posecode" />
17+
<meta property="og:image" content="https://www.posecode.org/og.png" />
18+
<meta property="og:image:width" content="1200" />
19+
<meta property="og:image:height" content="630" />
20+
<meta name="twitter:card" content="summary_large_image" />
21+
<meta name="twitter:title" content="Use Posecode in your product" />
22+
<meta name="twitter:description" content="Embed readable, editable 3D movement with Posecode's open-source web component and TypeScript packages." />
23+
<meta name="twitter:image" content="https://www.posecode.org/og.png" />
24+
<link rel="preconnect" href="https://fonts.googleapis.com" />
25+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
26+
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap" />
27+
<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'" />
28+
<noscript><link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet" /></noscript>
29+
<link rel="stylesheet" href="./src/landing.css" />
30+
<link rel="stylesheet" href="./src/for-products.css" />
31+
</head>
32+
<body class="product-page">
33+
<div class="bg-fx" aria-hidden="true"></div>
34+
35+
<header class="nav">
36+
<a class="brand" href="/" aria-label="Posecode home">
37+
<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>
38+
<span class="wordmark">Posecode</span>
39+
</a>
40+
<nav class="nav-links" aria-label="Primary">
41+
<a href="#integrate">Integrate</a>
42+
<a href="#today">Available today</a>
43+
<a href="#exploring">Exploring next</a>
44+
<a href="https://github.com/posecode-dev/posecode" target="_blank" rel="noopener">GitHub</a>
45+
</nav>
46+
<a class="btn primary nav-cta" href="mailto:hello@posecode.org?subject=Posecode%20product%20integration">Talk to us&nbsp;→</a>
47+
</header>
48+
49+
<main>
50+
<section class="product-hero">
51+
<div class="product-hero-copy reveal">
52+
<p class="eyebrow">For product owners &amp; developers</p>
53+
<h1>Put movement inside your product.</h1>
54+
<p class="product-lede">Posecode turns a small, readable text document into an editable 3D movement. Use the open-source pieces now—or help shape the product infrastructure that should come next.</p>
55+
<div class="hero-cta">
56+
<a class="btn primary lg" href="mailto:hello@posecode.org?subject=Posecode%20product%20integration">Discuss an integration&nbsp;→</a>
57+
<a class="btn ghost lg" href="#today">See what exists today</a>
58+
</div>
59+
</div>
60+
<aside class="reality-card reveal" aria-label="Posecode service status">
61+
<p class="status-label"><span aria-hidden="true"></span> The honest version</p>
62+
<h2>Open-source toolkit today.<br />No hosted commercial platform yet.</h2>
63+
<p>You can ship the web component and TypeScript packages in your own product now. Hosted APIs, cloud rendering, private libraries, and enterprise operations are ideas we would explore with design partners—not services you can buy today.</p>
64+
</aside>
65+
</section>
66+
67+
<section id="integrate" class="product-section integration-section">
68+
<header class="product-section-head reveal">
69+
<p class="eyebrow">Ways to integrate</p>
70+
<h2>Start at the layer you need.</h2>
71+
<p>Keep the standard player, compose the lower-level libraries, or give a local agent movement tools.</p>
72+
</header>
73+
<div class="integration-grid">
74+
<article class="integration-card reveal">
75+
<span class="card-index">01 / embed</span>
76+
<h3>Drop in a movement player</h3>
77+
<p>Use the framework-free <code>&lt;posecode-player&gt;</code> web component with inline Posecode, a <code>.posecode</code> URL, or a share token.</p>
78+
<pre aria-label="HTML web component example"><code>&lt;script src="https://unpkg.com/posecode-embed@0.2.2/dist/posecode-embed.js"&gt;&lt;/script&gt;
79+
&lt;posecode-player src="/moves/squat.posecode"&gt;&lt;/posecode-player&gt;</code></pre>
80+
</article>
81+
<article class="integration-card reveal">
82+
<span class="card-index">02 / compose</span>
83+
<h3>Own the interface</h3>
84+
<p>Parse text into a typed, range-of-motion-clamped IR, then drive the Three.js renderer inside your own editor, lesson, or workflow.</p>
85+
<pre aria-label="npm installation example"><code>npm install posecode-parser posecode-render three</code></pre>
86+
</article>
87+
<article class="integration-card reveal">
88+
<span class="card-index">03 / agents</span>
89+
<h3>Run movement tools locally</h3>
90+
<p>The npm MCP server runs over stdio on your machine. It teaches an MCP client the language, validates documents, and creates playground links.</p>
91+
<pre aria-label="Local MCP command example"><code>npx -y posecode-mcp@latest</code></pre>
92+
</article>
93+
</div>
94+
</section>
95+
96+
<section class="product-section use-cases">
97+
<header class="product-section-head reveal">
98+
<p class="eyebrow">Where it fits</p>
99+
<h2>Movement that stays inspectable.</h2>
100+
</header>
101+
<div class="use-case-grid">
102+
<article class="use-case reveal"><h3>Animation editors</h3><p>Generate a first pass from text, expose timing and joint values, and let a human revise the movement instead of accepting a black-box clip.</p></article>
103+
<article class="use-case reveal"><h3>Fitness &amp; rehab products</h3><p>Show an exercise beside a program or cue. Joint angles are clamped to general range-of-motion limits, but Posecode is not clinical advice or patient-specific validation.</p></article>
104+
<article class="use-case reveal"><h3>Education tools</h3><p>Connect written instruction to a moving figure for anatomy, dance, physical education, or movement vocabulary.</p></article>
105+
<article class="use-case reveal"><h3>Movement libraries</h3><p>Store small, diffable text files, validate them in CI, and open any movement in the browser without pre-rendering video.</p></article>
106+
<article class="use-case reveal"><h3>Agent workflows</h3><p>Let an MCP-capable local agent write, validate, repair, and return a link to movement the user can inspect.</p></article>
107+
<article class="use-case reveal"><h3>Other web products</h3><p>Use movement as editable content anywhere a video or static diagram is too rigid and a full animation pipeline is too heavy.</p></article>
108+
</div>
109+
</section>
110+
111+
<section id="today" class="product-section today-section">
112+
<header class="product-section-head reveal">
113+
<p class="eyebrow">Available today</p>
114+
<h2>The current open-source surface.</h2>
115+
<p>These pieces are in the public repository and licensed Apache-2.0. You run them in your browser, build, or local environment.</p>
116+
</header>
117+
<div class="capability-list" role="list">
118+
<article class="capability-row reveal" role="listitem"><h3><code>posecode-embed</code></h3><p>A web component with lazy loading, controls, reduced-motion behavior, events, and inline, URL, or share-token inputs.</p><span>browser</span></article>
119+
<article class="capability-row reveal" role="listitem"><h3><code>posecode-parser</code></h3><p>A TypeScript parser and CLI that produce typed movement data, diagnostics, and range-of-motion clamps.</p><span>npm + CLI</span></article>
120+
<article class="capability-row reveal" role="listitem"><h3><code>posecode-render</code></h3><p>A Three.js client-side renderer for a procedural figure or a compatible Mixamo-rigged GLB.</p><span>npm</span></article>
121+
<article class="capability-row reveal" role="listitem"><h3><code>posecode-share</code></h3><p>A dependency-free codec for URL-safe documents and playground permalinks. The document lives in the URL; this is not private cloud storage.</p><span>npm</span></article>
122+
<article class="capability-row reveal" role="listitem"><h3>Share links</h3><p>The public playground opens encoded movements for viewing and editing in the browser.</p><span>posecode.org</span></article>
123+
<article class="capability-row reveal" role="listitem"><h3><code>posecode-mcp</code></h3><p>A local stdio MCP server for authoring guidance, validation, and render links. It does not render in the cloud.</p><span>local npm process</span></article>
124+
</div>
125+
<p class="availability-note reveal"><strong>Operational boundary:</strong> there is currently no hosted product API, hosted MCP endpoint, account system, private content store, uptime commitment, or commercial support plan.</p>
126+
</section>
127+
128+
<section id="exploring" class="product-section exploring-section">
129+
<div class="exploring-copy reveal">
130+
<p class="eyebrow">Exploring next</p>
131+
<h2>Useful infrastructure should be shaped by real products.</h2>
132+
<p>We are interested in working with a small number of design partners to learn which operational layer actually matters. Possibilities—not announced products—include:</p>
133+
</div>
134+
<ul class="future-list reveal">
135+
<li>Hosted generation or validation API</li>
136+
<li>Hosted MCP access</li>
137+
<li>Cloud rendering and asset exports</li>
138+
<li>Custom characters and rigs</li>
139+
<li>Private movement libraries</li>
140+
<li>White-label embeds</li>
141+
<li>Usage analytics</li>
142+
<li>Support, security review, and SLAs</li>
143+
</ul>
144+
<p class="future-qualifier reveal">None of these capabilities is generally available today. There is no published commercial pricing. A design-partner conversation is for scoping the problem, constraints, and a possible collaboration—not selling a service that already exists.</p>
145+
</section>
146+
147+
<section class="product-cta reveal" aria-labelledby="product-cta-title">
148+
<p class="eyebrow">Bring a concrete problem</p>
149+
<h2 id="product-cta-title">What movement does your product need to explain?</h2>
150+
<p>Tell us what you are building, where the animation would appear, and whether the open-source pieces cover the first version. We will reply from there.</p>
151+
<a class="btn primary lg" href="mailto:hello@posecode.org?subject=Posecode%20product%20integration">Email hello@posecode.org&nbsp;→</a>
152+
</section>
153+
</main>
154+
155+
<footer class="footer product-footer">
156+
<div class="footer-brand"><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 <span class="footer-tag">kinematic motion as text</span></div>
157+
<p class="footer-legal"><a href="/">Home</a> &nbsp;·&nbsp; <a href="/play">Playground</a> &nbsp;·&nbsp; <a href="/moves/">Movement library</a> &nbsp;·&nbsp; <a href="https://github.com/posecode-dev/posecode" target="_blank" rel="noopener">GitHub</a></p>
158+
</footer>
159+
160+
<script type="module" src="./src/for-products.ts"></script>
161+
</body>
162+
</html>

‎playground/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@
137137
<a href="#examples">Examples</a>
138138
<a href="./moves/">Movement library</a>
139139
<a href="#developers">Developers</a>
140-
<a href="mailto:hello@posecode.org?subject=Posecode%20Feedback">Feedback</a>
140+
<a href="/for-products">For products</a>
141141
<a href="https://github.com/posecode-dev/posecode" target="_blank" rel="noopener">GitHub</a>
142142
</nav>
143143
<a class="btn primary nav-cta" href="/play">Open playground&nbsp;→</a>
@@ -341,6 +341,7 @@ <h2>Common questions</h2>
341341
<a href="./moves/">Movement library</a> &nbsp;·&nbsp;
342342
<a href="./spec.html">Language spec</a> &nbsp;·&nbsp;
343343
<a href="./llm-guide.html">LLM guide</a> &nbsp;·&nbsp;
344+
<a href="/for-products">For products</a> &nbsp;·&nbsp;
344345
<a href="mailto:hello@posecode.org?subject=Posecode%20Feedback">Feedback</a> &nbsp;·&nbsp;
345346
<a href="https://github.com/posecode-dev/posecode/issues" target="_blank" rel="noopener">Issues</a>
346347
</p>

‎playground/public/sitemap.xml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,12 @@
1212
<changefreq>weekly</changefreq>
1313
<priority>0.9</priority>
1414
</url>
15+
<url>
16+
<loc>https://www.posecode.org/for-products</loc>
17+
<lastmod>2026-07-16</lastmod>
18+
<changefreq>monthly</changefreq>
19+
<priority>0.8</priority>
20+
</url>
1521
<url>
1622
<loc>https://www.posecode.org/moves/</loc>
1723
<lastmod>2026-07-16</lastmod>

0 commit comments

Comments
 (0)