be00ebf097
- Concepts is now the landing (/): index.html is the form-factor gallery with the LIVE widget embedded in every box (editor/teacher/stage/micro/showcase/initial), on the shared header/footer. concepts.html retired; every "Concepts" link → /. - New shared chrome partials src/header.html, src/footer.html, src/chrome.js (assembled by build.sh) + .site-foot / details.spec styles in base.css. Applied to the landing + showcase this pass. - Showcase redesign per spec: the pendulum bar IS the display — each lane's subdivisions/accents ride along the rod as moving RGB light (all meters combined); transparent outside the body (no black window); a printed tempo scale on the vertical axis with a draggable weight to set tempo; start is an external button (the real unit starts when lifted from its holder). Next pass: roll the shared header/footer onto the remaining pages (incl. the editor header-above-toolbar), merge Open=Info into one page per form factor with the expandable Info & BOM, and add teacher-style dimensioned views to Stage/Micro/Showcase. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
165 lines
9.6 KiB
HTML
165 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>VARASYS PolyMeter — Concepts (polymetric groove trainer & metronome)</title>
|
||
<meta name="description" content="PolyMeter — a polymetric groove trainer and metronome. One engine, many form factors: a free web editor, hardware concepts, and an embeddable widget. Try each one live." />
|
||
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,@BUILD:favicon@">
|
||
<script>
|
||
(function(){ try{ var p = localStorage.getItem("metronome.theme");
|
||
if (p!=="light" && p!=="dark" && p!=="system") p = "system";
|
||
document.documentElement.dataset.theme = p==="system" ? (matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark") : p;
|
||
} catch(e){ document.documentElement.dataset.theme = "dark"; } })();
|
||
</script>
|
||
<style>
|
||
/*@BUILD:include:src/base.css@*/
|
||
:root{ --bg1:#12151c; --bg2:#05070a; --txt:#c7d0db; --muted:#7f8b9a; --link:#6cb6ff;
|
||
--panel-bg:#161b22; --panel-bd:#2a313c; }
|
||
:root[data-theme="light"]{ --bg1:#f5f8fc; --bg2:#dde4ec; --txt:#1e2630; --muted:#5c6776; --link:#1769c4;
|
||
--panel-bg:#ffffff; --panel-bd:#d2dae4; }
|
||
body{ margin:0; min-height:100vh; padding:22px 16px 56px; color:var(--txt);
|
||
background:radial-gradient(circle at 50% -8%, var(--bg1), var(--bg2)); }
|
||
a{ color:var(--link); }
|
||
main{ width:100%; max-width:1040px; margin:0 auto; }
|
||
|
||
.hero{ text-align:center; padding:40px 12px 26px; }
|
||
.hero h1{ font-size:clamp(34px, 7vw, 58px); margin:0; letter-spacing:-.02em; line-height:1;
|
||
background:linear-gradient(90deg, var(--cyan), #6cb6ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
|
||
.hero .tagline{ margin:14px auto 0; font-size:clamp(15px, 2.4vw, 19px); color:var(--txt); font-weight:600; }
|
||
.hero .pitch{ margin:12px auto 0; max-width:64ch; color:var(--muted); font-size:14.5px; line-height:1.6; }
|
||
|
||
.section-label{ text-align:center; font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin:26px 0 14px; }
|
||
.grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:18px; align-items:start; }
|
||
.card{ background:var(--panel-bg); border:1px solid var(--panel-bd); border-radius:14px; padding:14px;
|
||
display:flex; flex-direction:column; gap:10px; }
|
||
.card.wide{ grid-column:1 / -1; }
|
||
.card-head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
|
||
.card h3{ margin:0; font-size:16px; }
|
||
.chip{ font-size:10px; text-transform:uppercase; letter-spacing:.08em; padding:2px 9px; border-radius:999px;
|
||
border:1px solid var(--panel-bd); color:var(--muted); }
|
||
.chip.hw{ color:var(--cyan); border-color:rgba(10,179,247,.45); }
|
||
.chip.app{ color:#2fe07a; border-color:rgba(47,224,160,.45); }
|
||
/* the embedded live widget sits in a recessed frame */
|
||
.widget{ border:1px solid var(--panel-bd); border-radius:10px; overflow:hidden; background:radial-gradient(circle at 50% 0, rgba(255,255,255,.02), transparent); }
|
||
.widget [data-varasys-metronome], .widget iframe{ display:block; width:100%; }
|
||
.card p{ margin:0; font-size:13px; color:var(--muted); line-height:1.5; }
|
||
.card .links{ display:flex; gap:16px; }
|
||
.card .links a{ color:var(--link); text-decoration:none; font-size:13px; font-weight:600; }
|
||
|
||
/* philosophy */
|
||
.philosophy{ margin-top:34px; }
|
||
.phil-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:16px; }
|
||
.phil{ background:var(--panel-bg); border:1px solid var(--panel-bd); border-radius:14px; padding:18px 18px 16px; }
|
||
.phil h3{ margin:0 0 8px; font-size:15px; display:flex; align-items:center; gap:8px; }
|
||
.phil .ic{ font-size:17px; line-height:1; }
|
||
.phil p{ margin:0; font-size:13.5px; color:var(--muted); line-height:1.62; }
|
||
.phil p b{ color:var(--txt); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
/*@BUILD:include:src/header.html@*/
|
||
|
||
<main>
|
||
<section class="hero">
|
||
<h1>PolyMeter</h1>
|
||
<p class="tagline">Polymetric grooves — one engine, many form factors.</p>
|
||
<p class="pitch">Stack independent meter lanes, each with its own subdivision, drum voice and per‑step
|
||
accents, to build true polymeter and ratio polyrhythm. Design it in the browser, save it as a compact
|
||
program string, then run it on any device below — they're all the same engine. Each box is <b>live</b>:
|
||
press play and try it right here.</p>
|
||
</section>
|
||
|
||
<div class="section-label">The PolyMeter family — try each one live</div>
|
||
<div class="grid">
|
||
|
||
<div class="card wide">
|
||
<div class="card-head"><span class="chip app">Web app</span><h3>PE‑1 — PolyMeter Editor</h3></div>
|
||
<div class="widget"><div data-varasys-metronome="editor" data-patch="v1;t120;b16;kick:4=X..x;snare:4=.X.X;hatClosed:4/4;tom:3" data-height="560"></div></div>
|
||
<p>The full workbench: stack meter lanes, per‑step accents / ghosts / mutes, swing & ratio polyrhythm,
|
||
set lists and shareable links. This is where you design grooves.</p>
|
||
<div class="links"><a href="/editor.html">Open ↗</a></div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-head"><span class="chip hw">Hardware</span><h3>PM‑1 — Teacher</h3></div>
|
||
<div class="widget"><div data-varasys-metronome="teacher" data-patch="v1;t120;b16;kick:4=X.x.;snare:4=.X.X;hatClosed:4/4" data-height="440"></div></div>
|
||
<p>Full‑feature desktop console for studio & lessons: colour TFT showing every lane, arcade buttons,
|
||
thumb‑roller, instrument pass‑through with analog click.</p>
|
||
<div class="links"><a href="/teacher.html">Open ↗</a></div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-head"><span class="chip hw">Hardware</span><h3>PM‑1 — Stage</h3></div>
|
||
<div class="widget"><div data-varasys-metronome="stage" data-patch="v1;t120;b16;kick:4=X.x.;snare:4=.X.X;hatClosed:4/4" data-height="430"></div></div>
|
||
<p>Foot‑pedal stompbox: two footswitches (tap / next), expression‑pedal input, a big floor‑readable RGB
|
||
beat light, instrument pass‑through. Dual‑USB‑C daisy‑chain.</p>
|
||
<div class="links"><a href="/stage.html">Open ↗</a></div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-head"><span class="chip hw">Hardware</span><h3>PM‑µ — Micro</h3></div>
|
||
<div class="widget"><div data-varasys-metronome="micro" data-patch="v1;t120;kick:4;snare:4=.X.X;hatClosed:4/2" data-height="240"></div></div>
|
||
<p>Long, narrow inline practice bar: instrument in one end, amp/headphones out the other, click mixed in.
|
||
Clickable thumb‑roller, amber 14‑segment display, USB‑C.</p>
|
||
<div class="links"><a href="/micro.html">Open ↗</a></div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-head"><span class="chip hw">Hardware</span><h3>PM‑S — Showcase</h3></div>
|
||
<div class="widget"><div data-varasys-metronome="showcase" data-patch="v1;t108;kick:4=X..x;snare:4=.X.X;hatClosed:4/4;tom:3~" data-height="540"></div></div>
|
||
<p>A display piece shaped like a classic pyramid wind‑up metronome — the pendulum is RGB light easing to
|
||
the beat, with light rows for every lane's subdivisions, accents & mutes.</p>
|
||
<div class="links"><a href="/showcase.html">Open ↗</a></div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-head"><span class="chip">Concept</span><h3>PM‑1 — Initial</h3></div>
|
||
<div class="widget"><div data-varasys-metronome="initial" data-patch="v1;t120;b16;kick:4=X.x.;snare:4=.X.X;hatClosed:4/4" data-height="440"></div></div>
|
||
<p>The original idealized device render — full multi‑lane display and set‑list navigation. The north‑star
|
||
concept; the buildable take is the Teacher.</p>
|
||
<div class="links"><a href="/player.html">Open ↗</a></div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-head"><span class="chip">Widget</span><h3>Embed anywhere</h3></div>
|
||
<p style="flex:1">Every form factor above is an embeddable widget — drop one into your own page with a single
|
||
<code><div></code> + a script, preloaded with a program string and auto‑sizing. (Exactly how the
|
||
boxes on this page work.)</p>
|
||
<div class="links"><a href="/embed.html">Embed docs ↗</a></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<section class="philosophy">
|
||
<div class="section-label">Philosophy</div>
|
||
<div class="phil-grid">
|
||
<div class="phil">
|
||
<h3><span class="ic">🛠️</span> Program on the web, play on any device</h3>
|
||
<p>The website is the workbench. Design your grooves in the <a href="/editor.html">PE‑1 editor</a> and
|
||
every pattern saves to a compact <b>program string</b> (a whole set list to a single code). That same
|
||
string loads into whichever form factor fits the moment — Teacher on a studio desk, Stage on a
|
||
pedalboard, Micro inline at the practice desk, or an <a href="/embed.html">embedded widget</a>. One
|
||
engine, one language: author once, run it anywhere.</p>
|
||
</div>
|
||
<div class="phil">
|
||
<h3><span class="ic">🔌</span> USB‑C power everywhere — no batteries</h3>
|
||
<p>Every device is powered over a single <b>USB‑C</b> port — no internal battery to wear out. Plug into a
|
||
wall adapter for a permanent install or carry a power bank like you already do for your phone; the
|
||
larger units add a second USB‑C <b>pass‑through</b> so pedals daisy‑chain off one source. One connector
|
||
across the range keeps builds simple and <b>future‑proof</b>.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
/*@BUILD:include:src/footer.html@*/
|
||
|
||
<script>
|
||
const APP_VERSION = "v0.0.1-dev";
|
||
/*@BUILD:include:src/chrome.js@*/
|
||
</script>
|
||
<script src="/embed.js"></script>
|
||
</body>
|
||
</html>
|