Sebastian Krüger
ecf7f060ec
Track height & spacing improvements: - Increased DEFAULT_TRACK_HEIGHT from 180px to 240px for vertical controls - Increased MIN_TRACK_HEIGHT from 60px to 120px - Increased MAX_TRACK_HEIGHT from 300px to 400px - Added COLLAPSED_TRACK_HEIGHT constant (48px) - Reduced control panel gap from 8px to 6px for tighter spacing - Added min-h-0 and overflow-hidden to prevent flex overflow - Optimized fader container with max-h-[140px] constraint Clip-style waveform visualization (Ableton-like): - Wrapped waveform canvas in visible "clip" container - Added border, rounded corners, and shadow for clip identity - Added 16px clip header bar showing track name - Implemented hover state for better interactivity - Added gradient background from-foreground/5 to-transparent Track height resize functionality: - Added draggable bottom-edge resize handle - Implemented cursor-ns-resize with hover feedback - Constrain resizing to MIN/MAX height range - Real-time height updates with smooth visual feedback - Active state highlighting during resize Effects section visual integration: - Changed from solid background to gradient (from-muted/80 to-muted/60) - Reduced device rack height from 192px to 176px for better proportion - Improved visual hierarchy and connection to track row Flexible VerticalFader component: - Changed from fixed h-32 (128px) to flex-1 layout - Added min-h-[80px] and max-h-[140px] constraints - Allows parent container to control actual height - Maintains readability and proportions at all sizes CSS enhancements (globals.css): - Added .track-clip-container utility class - Added .track-clip-header utility class - Theme-aware clip styling for light/dark modes - OKLCH color space for consistent appearance Visual results: - Professional DAW appearance matching Ableton Live - Clear clip/region boundaries for audio editing - Better proportions for vertical controls (240px tracks) - Resizable track heights (120-400px range) - Improved visual hierarchy and organization Files modified: - types/track.ts (height constants) - components/tracks/Track.tsx (layout + clip styling + resize) - components/ui/VerticalFader.tsx (flexible height) - app/globals.css (clip styling) 🤖 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!