Merge pull request #35 from posecode-dev/codex/ui

Refresh Posecode landing and playground with a darker editorial UI

Author: a-baran-orhan

playground/index.html

@@ -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>
@@ -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>
 

playground/play.html

@@ -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>

playground/src/landing.css

@@ -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; }
+}

playground/src/style.css

@@ -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; }
+}