Sebastian Krüger dc567d0144 feat: add professional gradient to level meters matching dB scale ...

Replaced solid color blocks with smooth gradient to match
professional audio metering standards and dB scale mapping.

The Problem:
- Hard color transitions (green/yellow/red) looked jarring
- Didn't match professional DAW aesthetics
- Color didn't reflect actual dB values visually

The Solution:
- Implemented CSS linear gradient across meter bar
- Gradient matches dB scale breakpoints:
  * Green: 0-70% (-60dB to -18dB) - Safe zone
  * Yellow: 70-90% (-18dB to -6dB) - Getting hot
  * Red: 90-100% (-6dB to 0dB) - Very loud/clipping

Gradient Details:
Horizontal: linear-gradient(to right, ...)
Vertical: linear-gradient(to top, ...)

Color stops:
  0%: rgb(34, 197, 94)   - Green start
 70%: rgb(34, 197, 94)   - Green hold
 85%: rgb(234, 179, 8)   - Yellow transition
100%: rgb(239, 68, 68)   - Red peak

Visual Behavior:
- Smooth color transition as levels increase
- Green dominates safe zone (-60dB to -18dB)
- Yellow appears in warning zone (-18dB to -6dB)
- Red shows critical/clipping zone (-6dB to 0dB)
- Matches Pro Tools, Logic Pro, Ableton Live style

Benefits:
✅ Professional appearance matching industry DAWs
✅ Smooth visual feedback instead of jarring transitions
✅ Colors accurately represent dB ranges
✅ Better user experience for mixing/mastering
✅ Gradient visible even at low levels

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-11-18 15:26:10 +01:00

2.3 KiB

Raw Blame History

View Raw