← crank hub

Knob handoff — dynamiklab dials get the puck

The dial-skins puck (originally designed for the TessaCraft control lab, never rolled out) mapped onto KodyB's exact shipped Dial geometry — same viewBox, same stop ring, same hit targets, same handlers. Only the face art changes.

Last updated 2026-07-12 16:24 WEDT · now:

1 · Dial — before / after (both live, tap face or ticks)

current shipped face (flat wafer)

knob face (puck: dome + glint + bevel + raised hub + tapered pointer)

Pointer is a tapered wedge (not a hairline), active stop gets a soft halo, ticks are inset notches with a drop-shadow pip. Geometry identical: R=36, face R+8, first stop −45°, clockwise, 12px invisible hit circles on every tick, tap-anywhere-by-angle preserved.

2 · Slider thumb — before / after (drag either)

current thumb

mini-puck thumb (CSS only — no JSX change)

3 · Controls button — before / after

current affordance (icon button)

knob affordance (mini puck, same button chrome)

The mini-puck icon is a 22px SVG (snippet below) — drop it in place of the ⚙ in the ControlsOverlay toggle and the end-card copy "drag its control knob" finally points at an actual knob.

3b · Size-cascade glyph (new — Davi's Wi-Fi-lines spec)

Cody2's v1 (three straight bars)

definitive glyph — arcs, not bars (Wi-Fi lines ARE arcs)

Three concentric arcs struck from a centre above the glyph — i.e. the helper's ring. The widest arc hugs the ring, each one below is shorter and fainter: the cascade down into the box. Gold-pointer stroke on the knob material, so shell chrome reads as one family. Drop-in: design-lab/knob-handoff/SizeCascade.jsx → swap the bar version in ModuleShell.jsx.

4 · Wiring — three pieces

a) Dial.knob.jsx (below, also at design-lab/knob-handoff/Dial.knob.jsx) — a full drop-in for apps/playable/src/ui/Dial.jsx: logic verbatim from your shipped file, only the SVG internals swapped. b) the CSS contract block → styles.css (theme-aware: a future day theme just redefines the --knob-* vars). c) slider-thumb CSS swap + mini-puck button icon (optional but Davi's ask was "looks like a cool KNOB", so the button matters).

CSS contract (add to styles.css :root)

/* knob skin (Craftee 2026-07-12) — day/night themes re-skin by redefining these */
--knob-edge:#0c0905; --knob-body-hi:#453a29; --knob-body:#2a2214; --knob-body-lo:#14100a;
--knob-hub-hi:#52452f; --knob-hub-lo:#171008;
--knob-tick:#6b5c40; --knob-tick-on:var(--accent); --knob-pointer:var(--accent2);

Slider thumb (replace .slider-thumb)

.slider-thumb { position: absolute; top: 13px; width: 24px; height: 24px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.36), rgba(255,255,255,0) 46%),
    radial-gradient(circle at 38% 30%, var(--knob-body-hi), var(--knob-body) 55%, var(--knob-body-lo));
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 2px var(--knob-edge), 0 2px 5px rgba(0,0,0,.55); }
.slider-thumb::after { content: ''; position: absolute; left: 50%; top: 3px; width: 3px; height: 7px;
  border-radius: 2px; background: var(--knob-pointer); transform: translateX(-50%); }

Mini-puck button icon (controls toggle)

Dial.knob.jsx (full drop-in)

loading knob-handoff/Dial.knob.jsx…