Sebastian Krüger
dc567d0144
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>
Audio UI
A sophisticated browser-only audio editor built with Next.js 16, React 19, and Tailwind CSS 4.
Features (Planned)
- 100% Client-Side: All audio processing happens in your browser
- Multi-Track Editing: Professional multi-track audio editing
- Advanced Effects: EQ, compression, reverb, delay, and more
- Automation: Automate volume, pan, and effect parameters
- Recording: Record audio directly from your microphone
- Analysis Tools: Frequency analyzer, spectrogram, and loudness metering
- Export Formats: WAV, MP3, OGG, FLAC
- Project Management: Save and load complete projects
- Privacy-First: No uploads, all data stays local in your browser
Tech Stack
- Next.js 16 with React 19
- TypeScript 5
- Tailwind CSS 4 with OKLCH colors
- Web Audio API for audio processing
- Canvas API for waveform visualization
- IndexedDB for project storage
Getting Started
This project is currently in the planning phase. See PLAN.md for the complete implementation plan.
Development (Coming Soon)
# Install dependencies
pnpm install
# Run development server
pnpm dev
# Build for production
pnpm build
Inspiration
Inspired by AudioMass and professional DAWs like Ableton Live, Logic Pro, and FL Studio.
License
TBD
Contributing
This is a personal project, but suggestions and ideas are welcome!