Skip to content

UI polish: three.js visualizers, tabbed observation panel, instant startup#14

Merged
jamiesun merged 1 commit into
mainfrom
ui-polish-three-visualizers
Jul 19, 2026
Merged

UI polish: three.js visualizers, tabbed observation panel, instant startup#14
jamiesun merged 1 commit into
mainfrom
ui-polish-three-visualizers

Conversation

@jamiesun

Copy link
Copy Markdown
Contributor

Refines the workbench UI per the "sonic control room" reference:

  • Custom seek bar — pointer-captured slider with hover time tooltip, ticks, keyboard control (arrows/Home/End); replaces the native range input.
  • Rebuilt player bar — round transport pod with dashed-ring play button and loop pill, spectrum stage with expand button, visual side panel, segmented stereo LED meters with peak hold.
  • Tabbed right panel — ScenePanel split into Observe / Render / Outputs; Observe leads with a 2×2 grid of large 270° instrument gauges (value + semantic word), tabs carry status lights (validation dot, building pulse, output count).
  • Four three.js visual styles — flux (particle nebula), terrain (synthwave grid), rings (tunnel), crystal (reactive icosahedron); lazy-loaded chunk (~508 KB) kept out of the startup bundle; WebGL failure falls back to bars without stopping playback.
  • Auto style selectionauto.ts derives energy/dynamics/brightness/density traits from the decoded AudioBuffer and picks a style deterministically on each load (9 unit tests).
  • Instant open — Tauri window backgroundColor + inline dark shell and EQ boot splash in app.html, faded out on mount; no white flash.
  • Fullscreen visualizer — ⛶ expands to a VisualizerOverlay with idle-hiding HUD, style pills, ESC/space/double-click controls.
  • Readability + texture pass — app-wide font scale bump (9/10/11px floor), self-drawn select chevrons, glowing range thumbs, button depth states.

Verification: npm run check 0 errors/0 warnings; vitest 11/11; production build green. No Rust source changes (config-only tauri.conf.json).

- Custom SeekBar with pointer/keyboard control, hover time tip, ticks
- Player bar rebuilt: transport pod, spectrum stage, side panel, stereo LED meters
- ScenePanel restructured into Observe/Render/Outputs tabs with large 270° gauges
- Four lazy-loaded three.js visual styles: flux, terrain, rings, crystal
- Auto style selection from decoded AudioBuffer traits (unit-tested)
- Instant dark first paint: window backgroundColor + inline boot splash
- Fullscreen VisualizerOverlay (ESC/space/double-click, idle-hide HUD)
- App-wide font scale bump for readability; tactile select/range/button styling

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@jamiesun
jamiesun merged commit 4211a7c into main Jul 19, 2026
2 checks passed
@jamiesun
jamiesun deleted the ui-polish-three-visualizers branch July 19, 2026 05:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant