Skip to content

Refresh Posecode landing and playground with a darker editorial UI #35

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
a-baran-orhan merged 1 commit into from
Jul 11, 2026
Merged

Refresh Posecode landing and playground with a darker editorial UI #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 6 additions & 7 deletions playground/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,15 +148,14 @@
<!-- Hero -->
<section class="hero">
<div class="hero-copy reveal">
<p class="eyebrow">Open kinematic-motion protocol</p>
<p class="eyebrow">Movement is programmable</p>
<h1 class="headline">
Human movement,<br />written as <span class="hl">text</span>.
Write the move.<br /><span class="hl">Watch it happen.</span>
</h1>
<p class="subhead">
Posecode is a tiny language an LLM can write for physiotherapy, mobility,
posture, yoga, and training. It renders to an animated 3D figure in the
browser, and every joint is clamped to a safe range of motion, so the result
is always anatomically plausible.
Turn readable instructions into precise 3D movement. Build exercises,
stretches, dance phrases, and rehab routines—then edit every beat live in
the browser.
</p>
<div class="hero-cta">
<a class="btn primary lg" href="/play">Open the playground&nbsp;→</a>
Expand All @@ -165,7 +164,7 @@ <h1 class="headline">
</button>
</div>
<p class="hero-meta">
Open source · MIT &nbsp;•&nbsp; 60&nbsp;fps in the browser &nbsp;•&nbsp; no GPU, no diffusion
65+ moves included &nbsp;·&nbsp; 60&nbsp;fps &nbsp;·&nbsp; open source &nbsp;·&nbsp; runs on-device
</p>
</div>

Expand Down
4 changes: 2 additions & 2 deletions playground/play.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,8 +110,8 @@

<div id="intro" class="intro">
<span class="intro-text">
<b>New here?</b> Posecode turns text into 3D movement. Copy the LLM prompt,
ask any AI for an exercise, paste the result on the left.
<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>
Expand Down
151 changes: 151 additions & 0 deletions playground/src/landing.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -712,3 +712,154 @@ a.dev-card:hover {
padding-top: 40px;
}
}

/* 2026 editorial refresh: let the motion carry the spectacle. Flat surfaces,
strong rules, and restrained color replace generic glowing SaaS cards. */
:root {
--bg: #0b0c0d;
--bg-viewer: #101214;
--panel: #111315;
--panel-2: #171a1d;
--panel-3: #1c2023;
--border: #292d30;
--border-2: #3a3f43;
--text: #f2f1eb;
--text-2: #aaa9a2;
--muted: #74746f;
--accent: #d4ff3f;
--accent-2: #d4ff3f;
--radius: 4px;
--radius-sm: 3px;
--shadow-2: 0 18px 50px rgba(0, 0, 0, 0.34);
}
.bg-fx { background: var(--bg); }
.bg-fx::after { opacity: .018; }
.nav {
max-width: none;
padding: 18px max(24px, calc((100vw - var(--container)) / 2 + 28px));
border-bottom: 1px solid var(--border);
background: rgba(11, 12, 13, .94);
backdrop-filter: blur(18px);
}
.brand .logo { filter: none; }
.nav-links { margin-left: auto; }
.nav-links a { color: var(--text-2); }
.btn { box-shadow: none; border-radius: 3px; }
.btn:hover { box-shadow: none; transform: translateY(-1px); }
.btn.primary,
.btn.primary:hover {
background: var(--accent);
box-shadow: none;
filter: none;
}
.hero {
grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr);
min-height: min(780px, calc(100vh - 68px));
gap: clamp(42px, 6vw, 92px);
padding-top: clamp(54px, 8vh, 100px);
padding-bottom: clamp(70px, 10vh, 120px);
}
.eyebrow { color: var(--text-2); letter-spacing: 2.4px; }
.headline {
max-width: 10ch;
font-size: clamp(52px, 6.4vw, 88px);
line-height: .92;
letter-spacing: -.055em;
}
.headline .hl { color: var(--text); }
.headline .hl::after { display: none; }
.subhead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; }
.hero-meta { border-top: 1px solid var(--border); padding-top: 18px; }
.studio { border-radius: 3px; box-shadow: var(--shadow-2); }
.studio-bar { background: #0d0f10; }
.studio-bar .dots { display: none; }
.code-chip {
right: -28px;
bottom: -30px;
border-radius: 2px;
background: #0b0d0e;
backdrop-filter: none;
}
.props {
gap: 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding-top: 0;
padding-bottom: 0;
}
.prop {
border: 0;
border-right: 1px solid var(--border);
border-radius: 0;
padding: 38px 30px 42px;
background: transparent;
}
.prop:first-child { border-left: 1px solid var(--border); }
.prop:hover { border-color: var(--border); transform: none; background: #0e1011; }
.prop-mark {
width: auto;
height: auto;
display: block;
border: 0;
border-radius: 0;
background: transparent;
font-family: var(--mono);
font-size: 14px;
}
.section-head { text-align: left; margin-left: 0; }
.section-head h2 { font-size: clamp(34px, 4.5vw, 56px); letter-spacing: -.04em; }
.examples-grid { gap: 0; border-top: 1px solid var(--border); }
.example-card {
min-height: 154px;
border: 0;
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
border-radius: 0;
background: transparent;
justify-content: space-between;
}
.example-card:nth-child(3n + 1) { border-left: 1px solid var(--border); }
.example-card:hover { transform: none; background: var(--text); color: var(--bg); box-shadow: none; border-color: var(--border); }
.example-card:hover .example-kind { color: #555; }
.example-card:hover .example-go { color: #1e2410; }
.how-steps { gap: 0; border-top: 1px solid var(--border); }
.how-steps li {
border: 0;
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
border-radius: 0;
background: transparent;
padding: 32px;
}
.how-steps li:first-child { border-left: 1px solid var(--border); }
.how-n { background: transparent; color: var(--accent); place-items: start; }
.dev-grid { gap: 0; border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.dev-card { border: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; }
.dev-card:hover, a.dev-card:hover { transform: none; background: #0e1011; border-color: var(--border); }
.faq-list { border-top: 1px solid var(--border); }
.faq-item { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; padding: 24px 0; }

@media (max-width: 920px) {
.hero { grid-template-columns: 1fr; min-height: auto; }
.headline { max-width: 12ch; }
.prop:nth-child(2) { border-left: 1px solid var(--border); }
.example-card:nth-child(3n + 1) { border-left: 0; }
.example-card:nth-child(2n + 1) { border-left: 1px solid var(--border); }
}
@media (max-width: 620px) {
.nav { padding: 14px 18px; }
.nav-cta { padding: 9px 12px; }
.hero, .props, .examples, .how, .developers, .faq, .footer { padding-left: 18px; padding-right: 18px; }
.hero { gap: 34px; padding-top: 48px; padding-bottom: 64px; }
.headline { font-size: clamp(46px, 14vw, 62px); }
.headline .hl { white-space: normal; }
.subhead { font-size: 17px; }
.hero-cta { display: grid; }
.hero-cta .btn { width: 100%; }
.studio { margin-left: -18px; margin-right: -18px; border-left: 0; border-right: 0; }
.hero-stage { min-width: 0; }
.studio-bar { padding-left: 18px; }
.props { border: 0; }
.prop, .prop:first-child, .prop:nth-child(2) { border-left: 0; border-right: 0; border-top: 1px solid var(--border); padding-left: 0; padding-right: 0; }
.example-card, .example-card:nth-child(2n + 1), .how-steps li, .how-steps li:first-child { border-left: 0; border-right: 0; }
}
72 changes: 72 additions & 0 deletions playground/src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1340,3 +1340,75 @@ select:hover {
padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
}

/* 2026 product-tool refresh: neutral, flat, and purpose-built. */
:root {
--bg: #0b0c0d;
--bg-viewer: #101214;
--panel: #111315;
--panel-2: #171a1d;
--panel-3: #1c2023;
--border: #292d30;
--border-2: #3a3f43;
--text: #f2f1eb;
--text-2: #aaa9a2;
--muted: #74746f;
--accent: #d4ff3f;
--accent-2: #d4ff3f;
--radius: 3px;
--radius-sm: 3px;
--sheen: none;
--edge: none;
--edge-strong: none;
}
.bg-fx { background: var(--bg); }
.bg-fx::after { opacity: .018; }
.topbar { background: rgba(11, 12, 13, .96); backdrop-filter: blur(18px); box-shadow: none; padding: 14px 20px; }
.brand .logo { filter: none; animation: none; }
.brand .tag { border: 0; border-left: 1px solid var(--border-2); border-radius: 0; padding-left: 10px; }
.btn, .lib-btn, select { border-radius: 3px; box-shadow: none; }
.btn.primary, .btn.primary:hover { background: var(--accent); box-shadow: none; filter: none; }
.intro { background: #0e1011; padding-top: 10px; padding-bottom: 10px; }
.intro::before { width: 18px; height: 1px; border-radius: 0; box-shadow: none; }
.layout { grid-template-columns: minmax(400px, .82fr) 1.18fr; }
.pane-head { background: #0e1011; box-shadow: none; padding-top: 11px; padding-bottom: 11px; }
.traffic { display: none; }
.live i, .phase:not(:empty)::before { border-radius: 0; box-shadow: none; }
#editor .cm-phase-active { background: rgba(212,255,63,.055); box-shadow: none; }
.editor-wrap:focus-within { box-shadow: inset 0 0 0 1px var(--border-2); }
.warnings { background: #0e1011; }
.viewer-veil { background: linear-gradient(180deg, rgba(8,10,12,.5), transparent); }
.reps { border-radius: 3px; backdrop-filter: none; }
.ribbon { gap: 0; padding: 0 16px; border-top: 1px solid var(--border); }
.ribbon .chip { border: 0; border-right: 1px solid var(--border); border-radius: 0; background: transparent; padding: 10px 14px; }
.ribbon .chip:first-child { border-left: 1px solid var(--border); }
.ribbon .chip::before { border-radius: 0; }
.ribbon .chip:hover { background: var(--panel-2); }
.ribbon .chip.active { background: var(--text); color: var(--bg); border-color: var(--border); box-shadow: none; }
.ribbon .chip.active::before { background: var(--bg); box-shadow: none; }
.transport { background: #0e1011; box-shadow: none; padding-top: 15px; padding-bottom: 15px; }
.btn-play { border-radius: 3px; background: var(--accent); box-shadow: none; }
.btn-play:hover { box-shadow: none; filter: none; transform: translateY(-1px); }
#scrub::-webkit-slider-runnable-track { border-radius: 0; box-shadow: none; background: linear-gradient(90deg,var(--accent) 0%,var(--accent) var(--pct,0%),var(--track) var(--pct,0%),var(--track) 100%); }
#scrub::-webkit-slider-thumb { border-radius: 1px; background: var(--text); box-shadow: 0 0 0 2px var(--bg); }
.loop input { border-radius: 2px; }
.loop input::after { border-radius: 1px; }
.mobile-tabs { gap: 0; padding: 0; background: #0e1011; }
.mtab { border: 0; border-right: 1px solid var(--border); border-radius: 0; background: transparent; padding: 12px; }
.mtab[aria-selected="true"] { color: var(--bg); background: var(--text); box-shadow: none; }
.slideover { background: var(--bg); }
.fchip { border-radius: 3px; }
.lib-item { border-radius: 3px; }
.lib-item[aria-current="true"] { box-shadow: none; }

@media (max-width: 860px) {
.topbar { padding: 12px; }
.topbar-actions { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; }
.lib-btn { min-height: 42px; }
#copy-prompt { grid-column: 1 / -1; min-height: 42px; }
.intro { padding-left: 12px; padding-right: 12px; }
.layout { grid-template-columns: 1fr; }
.transport { gap: 8px; padding-left: 12px; padding-right: 12px; }
.speed > span, .loop > span { display: none; }
.clock { padding-left: 8px; min-width: 40px; }
}
Loading