From 299f365d719aff3e8940b3f26124fa8d6215611c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jose=20Luis=20Monta=C3=B1es?= Date: Fri, 1 May 2026 17:46:13 +0200 Subject: [PATCH] sandbox: 3 knob variants for design exploration (track 2 prep) Standalone page at web/sandbox/knobs.html showing three aesthetic directions side-by-side: - A "hardware": radial gradient + perimeter ridges + specular highlight, reads as a photographed knob. - B "geometric": flat shapes, dot indicator at perimeter + short tick from center; OP-1 / diagram register. - C "phosphor": outline + heavy glow on accent arc and indicator; synthwave / vacuum-tube feel. Each variant shows 4 static knobs (0/33/66/100%) plus an interactive draggable instance. DPR-aware canvas, vertical drag with shift-fine, double-click to recenter. Pick one and the rest of the surfaces align. Co-Authored-By: Claude Opus 4.7 (1M context) --- web/sandbox/knobs.html | 412 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 412 insertions(+) create mode 100644 web/sandbox/knobs.html diff --git a/web/sandbox/knobs.html b/web/sandbox/knobs.html new file mode 100644 index 0000000..ad9f72d --- /dev/null +++ b/web/sandbox/knobs.html @@ -0,0 +1,412 @@ + + + + +knob design exploration + + + + +

Knob design exploration

+

Three directions for the knob aesthetic, each shown statically at 0% / 33% / 66% / 100% + and as a draggable instance below. Pick one and the rest of the surfaces (faders, + sequencers, piano roll) align to that language.

+ +
+ +
+
+ A · hardware + dimensional +
+

Radial gradient, perimeter ridges, specular highlight from + top-left, drop shadow. Reads as a real photographed knob. Premium but heavier; + can compete visually with the rest of the UI.

+
+
0%
+
33%
+
66%
+
100%
+
+
+ +
0.50
+
cutoff
+
drag vertically · shift = fine
+
+
+ +
+
+ B · geometric + flat / technical +
+

Crisp 2D shapes, no fake depth. Bold accent arc, dot + indicator on the perimeter, short tick from center. Reads like a Teenage + Engineering OP-1 or a clean diagram. Quietest of the three.

+
+
0%
+
33%
+
66%
+
100%
+
+
+ +
0.50
+
cutoff
+
drag vertically · shift = fine
+
+
+ +
+
+ C · phosphor + glow / CRT +
+

Outline-only with strong glow. The accent arc and indicator + both bleed light. Soft inner radial gradient. Synthwave / vacuum-tube feel. + Brightest, most "instrument" — but the glow can be fatiguing en masse.

+
+
0%
+
33%
+
66%
+
100%
+
+
+ +
0.50
+
cutoff
+
drag vertically · shift = fine
+
+
+ +
+ +
+ Tradeoff summary: A looks most premium but loudest in a panel of 12 controls. + B is the safest at scale (a panel of 30 knobs stays readable). C + has the strongest "instrument" identity and pairs with the existing accent + glow elsewhere; risk of visual noise. Once chosen, the same language extends to + faders, step cells, piano roll keys, and indicators. +
+ + + +