VARASYS/metronome
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Stage + micro: matte-black bead-blasted anodised finish (no stage glare)

Browse source 
Replace the shiny brushed-aluminium look with a bead-blasted matte-black
anodised finish on both the stage and micro mockups:
- flat dark graphite case + a fine bead-blast micro-texture, and the specular
  top highlight removed, so the case doesn't reflect stage lights;
- light laser-etched legend colour (--silk) and the light VARASYS logo variant
  on the dark case; lighter metallic rims on the top-edge connector openings so
  they read on black;
- stage BOM enclosure + comments updated to "die-cast aluminium, bead-blasted,
  matte-black Type II anodise, laser-etched legends".

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Me Here 2026-05-26 11:10:20 -05:00
parent 7798ae96c8
commit 31e472c17a
2 changed files with 21 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
micro.html
View file

@ -29,7 +29,7 @@
--bg1:#12151c; --bg2:#05070a;
--txt:#c7d0db; --muted:#7f8b9a; --link:#6cb6ff;
--panel-bd:#2a313c;
--device-bd:#5a616b; --silk:#2f343b; --dmuted:#3f444b;
--device-bd:#33363c; --silk:#aab2bc; --dmuted:#5a626c;
--cyan:#0AB3F7;
}
:root[data-theme="light"]{ --bg1:#f5f8fc; --bg2:#dde4ec; --txt:#1e2630; --muted:#5c6776; --link:#1769c4; --panel-bd:#d2dae4 }
@ -46,10 +46,10 @@
/* ---- the micro device: small brushed-aluminium box ---- */
.device{ width:100%; max-width:330px; position:relative; border-radius:13px; padding:16px 16px 14px;
background:
repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, rgba(0,0,0,.05) 1px 3px),
linear-gradient(158deg, #bcc2ca 0%, #969da7 46%, #aeb4bd 60%, #848b95 100%);
radial-gradient(rgba(255,255,255,.022) .5px, transparent .6px) 0 0/3px 3px, /* bead-blast micro-texture */
linear-gradient(160deg, #26282d, #15161a); /* matte anodised graphite */
border:1px solid var(--device-bd);
box-shadow:0 22px 46px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 8px rgba(0,0,0,.28) }
box-shadow:0 22px 46px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05), inset 0 -2px 8px rgba(0,0,0,.5) }
.brandrow{ display:flex; align-items:center; justify-content:space-between; margin:0 2px 14px }
.brand-logo{ height:14px; width:auto; display:block }
.silk{ display:flex; align-items:center; gap:7px; color:var(--silk) }
@ -100,7 +100,7 @@
<div class="device">
<div class="brandrow">
<div class="silk"><img class="brand-logo" src="data:image/png;base64,@BUILD:logo-light@" alt="VARASYS" /><span class="model">PM‑µ Micro</span></div>
<div class="silk"><img class="brand-logo" src="data:image/png;base64,@BUILD:logo-dark@" alt="VARASYS" /><span class="model">PM‑µ Micro</span></div>
<div class="pwr"><span class="dot"></span>PWR</div>
</div>

32
stage.html
View file

@ -22,8 +22,8 @@
with the click mixed in the ANALOG domain (DAC → summing op-amp → balanced
line driver), a shared 1/4" balanced-TRS main out, plus an analog monitor
amp + speaker. Powered from a standard 9 V DC pedal jack (2.1 mm centre-
negative, pedalboard-friendly) or USB-C (also carries config), in a brushed
aluminium / stainless enclosure.
negative, pedalboard-friendly) or USB-C (also carries config), in a
bead-blasted matte-black anodised aluminium enclosure (no glare on stage).
Beside the device: a top-edge view and a bill of materials. The front and top
views carry inch dimensions (≈ 4.7 × 5.5 × 1.8 in / 120 × 140 × 45 mm).
Compare with the initial /player.html. One file, no deps; shares src/engine.js.
@ -43,9 +43,9 @@
--bg1:#12151c; --bg2:#05070a;
--txt:#c7d0db; --muted:#7f8b9a; --link:#6cb6ff;
--panel-bg:#171b22; --panel-bd:#2a313c; --field-bg:#0e1116; --field-bd:#222a36;
/* device — brushed-aluminium / stainless faceplate (fixed in both themes);
--silk is the dark engraved legend colour on the metal */
--case:#a9afb7; --case2:#878e98; --device-bd:#5a616b; --silk:#2f343b;
/* device — bead-blasted matte-black anodised aluminium (fixed in both themes);
--silk is the light laser-etched legend colour on the dark case */
--case:#26282d; --case2:#15161a; --device-bd:#33363c; --silk:#aab2bc;
--pcb:#0d2620; --oled-bezel:#04060a; --metal:#3a424e;
}
:root[data-theme="light"]{
@ -67,14 +67,14 @@
padding:3px 9px; font-size:14px; line-height:1; cursor:pointer }
.tbtn:hover{ color:var(--txt) }
/* ---- the device: brushed-aluminium / stainless faceplate ---- */
/* ---- the device: bead-blasted matte-black anodised aluminium ---- */
.device{
width:100%; max-width:380px; position:relative;
background:
repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, rgba(0,0,0,.05) 1px 3px), /* brushed grain */
linear-gradient(158deg, #bcc2ca 0%, #969da7 46%, #aeb4bd 60%, #848b95 100%); /* metal sheen */
radial-gradient(rgba(255,255,255,.022) .5px, transparent .6px) 0 0/3px 3px, /* bead-blast micro-texture */
linear-gradient(160deg, var(--case), var(--case2)); /* matte anodised graphite */
border:1px solid var(--device-bd); border-radius:13px; padding:16px 14px 14px;
box-shadow:0 22px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 8px rgba(0,0,0,.28);
box-shadow:0 22px 50px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05), inset 0 -2px 8px rgba(0,0,0,.5);
}
.brandrow{ display:flex; align-items:flex-end; justify-content:space-between; margin:0 2px 12px; }
.silk{ display:flex; align-items:center; gap:8px; color:var(--silk); letter-spacing:.04em }
@ -105,15 +105,15 @@
.tv-row{ display:flex; align-items:stretch; gap:10px }
.tv-edge{ flex:1; border-radius:8px; padding:11px 10px 9px;
background:
repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, rgba(0,0,0,.05) 1px 3px),
linear-gradient(158deg, #bcc2ca 0%, #969da7 46%, #aeb4bd 60%, #848b95 100%);
border:1px solid var(--device-bd); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 12px 24px rgba(0,0,0,.42);
radial-gradient(rgba(255,255,255,.022) .5px, transparent .6px) 0 0/3px 3px,
linear-gradient(160deg, var(--case), var(--case2));
border:1px solid var(--device-bd); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 12px 24px rgba(0,0,0,.5);
display:flex; align-items:flex-start; justify-content:space-between; gap:5px }
.tv-jack{ flex:1; display:flex; flex-direction:column; align-items:center; gap:5px }
.tv-jack i{ width:19px; height:19px; border-radius:50%; background:radial-gradient(circle at 40% 34%, #2b313a, #05070a 72%);
border:2px solid #1f242c; box-shadow:inset 0 0 4px #000 }
border:2px solid #4a525c; box-shadow:inset 0 0 4px #000 }
.tv-jack.dc i{ background:radial-gradient(circle, #6b7480 0 2.5px, #07090c 3.5px 72%) }
.tv-jack.usb i{ width:23px; height:9px; border-radius:4px; border:2px solid #1f242c; background:#05070a; margin-top:5px }
.tv-jack.usb i{ width:23px; height:9px; border-radius:4px; border:2px solid #4a525c; background:#05070a; margin-top:5px }
.tv-jack b{ font-size:7px; font-weight:700; color:var(--silk); letter-spacing:.04em; text-transform:uppercase; text-align:center; line-height:1.25; opacity:.9 }
.tv-dim{ display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:9px; color:var(--muted); letter-spacing:.03em; line-height:1.05; white-space:nowrap }
.tv-dim .ar{ font-size:40px; line-height:.55; opacity:.5 }
@ -231,7 +231,7 @@
<div class="device">
<div class="brandrow">
<div class="silk"><img class="brand-logo" src="data:image/png;base64,@BUILD:logo-light@" alt="VARASYS" /><span class="model">PM‑1 Polymeter Player</span></div>
<div class="silk"><img class="brand-logo" src="data:image/png;base64,@BUILD:logo-dark@" alt="VARASYS" /><span class="model">PM‑1 Polymeter Player</span></div>
<div class="pwr"><span class="dot"></span>PWR</div>
</div>
@ -303,7 +303,7 @@
<tr class="grp"><td colspan="3">Build</td></tr>
<tr><td class="part">Custom PCB (or perfboard)</td><td class="q">1</td><td class="c">5</td></tr>
<tr><td class="part">Passives, headers, wire <span class="spec">— R/C for the analog stage + decoupling</span></td><td class="q">—</td><td class="c">3</td></tr>
<tr><td class="part">Die‑cast aluminium enclosure (Hammond 1590‑style) — or folded stainless <span class="spec">— pedal‑grade</span></td><td class="q">1</td><td class="c">12</td></tr>
<tr><td class="part">Die‑cast aluminium enclosure (Hammond 1590‑style) <span class="spec">— bead‑blasted, matte‑black Type II anodise, laser‑etched legends</span></td><td class="q">1</td><td class="c">12</td></tr>
<tr class="total"><td>Total (one‑off)</td><td class="q"></td><td class="c">≈ $59</td></tr>
</tbody>
</table>