feat(mix-visualizer): Phase 10 tuning — smooth waveform, bouncy collision, 8 knobs

Smooth the loudness contour (~50 ms envelope at preprocessing + decode-time, plus
smootherstep render reconstruction); retune wax↔waveform collision to bouncy/sub-unity
(no explosion/stuck/jitter); split the bubbles knob into fluid-amount + fluid-viscosity
(cohesion via uniform-only smin/wobble); retune scroll/gravity/heat/width ranges; make
the colour rotation visible and boost OKLab chroma; the controls bar now holds its
layout and hides only its knobs via a Visible parameter.
This commit is contained in:
daniel-c-harvey
2026-06-17 05:12:15 -04:00
parent ba1a1cd8ec
commit 4e34696719
9 changed files with 500 additions and 183 deletions
@@ -1,7 +1,13 @@
/* The seven-knob band. Blazor gates its presence (the host renders this component only while the
lava-lamp is on), so this is purely a layout rule for the visible state — no collapse machinery, no
transitions, no glass surface. A plain transparent horizontal flex row of the seven knobs that wraps
to a second line only if the band is genuinely too narrow. */
/* The eight-knob band. Phase 10 §4: the host ALWAYS renders this component and the component @if-gates
the knobs on its Visible parameter. So the container is permanent and reserves its height whether or
not the knobs are present — content below the bar never pops on toggle. No collapse machinery, no
transitions, no glass surface. A plain transparent horizontal flex row of the eight knobs that wraps
to a second line only if the band is genuinely too narrow.
min-height reserves one knob-row's worth of space (knob Size=64 + icon caption + gaps + margins) so
the empty (hidden) state occupies the same vertical box the populated single-row state does. On very
narrow viewports a populated band may wrap to a second row and exceed this floor — the no-pop
guarantee is exact for the common single-row (desktop) layout. */
.mix-visualizer-controls-bar {
display: flex;
flex-wrap: wrap;
@@ -9,6 +15,7 @@
justify-content: center;
gap: 0.85rem 1rem;
margin: 0.5rem 0;
min-height: 6rem;
}
/* One control: a RadialKnob with its Material icon caption underneath. RadialKnob has no icon slot, so