feat: Signal UI redesign — neo-brutalist ATC terminal aesthetic#8
Open
ivan-kalachikov wants to merge 38 commits into
Open
feat: Signal UI redesign — neo-brutalist ATC terminal aesthetic#8ivan-kalachikov wants to merge 38 commits into
ivan-kalachikov wants to merge 38 commits into
Conversation
- Convert serverless function to Edge runtime for better routing priority with Vite framework preset - Add explicit rewrite in vercel.json to ensure /api/radio/* routes reach the Edge function - Fix mixed content: upgrade SomaFM music URLs from http to https Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add major airports across USA (JFK, LAX, ATL, SFO, DFW, IAH, EWR, BOS), Europe (Amsterdam, Zurich, Lisbon, Bucharest), and Asia (Tokyo, Hong Kong, Singapore, Manila). All feeds verified streaming on s1-fmt2.liveatc.net. Also sorts all airports alphabetically by country then city, and fixes Westchester County Airport country from "Mexico" to "United States". Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Three initial concepts explored (Orbital, Liquid, Signal). Signal chosen and refined into comprehensive spec covering: - Full design system (colors, typography, spacing) - Responsive grid layout with 4 breakpoints - All component specifications with state handling - Custom oscilloscope with phosphor glow rendering - SVG logo design, animations, accessibility - Resolved all open decisions Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
16 tasks across 8 phases with quality gates after every visual task. Each gate includes DOM structure checks, computed style verification, and Chrome DevTools screenshots analyzed against the design spec. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…ains Mono Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
HeaderBar: wire up logo blink animation when playing StatusWord: add buffering dots ::after, fix glitch/typewriter animation composition, improve typewriter to use ch units StatusBar: i18n for connection/format/version strings, slide-up animation, min-height 32px, fix about panel font size messages.js: add statusConnected/Disconnected/Offline/Format keys across all 9 locales Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…lume Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Both components now use the shared DataList with search, volume, and scrollable list. Added i18n keys for atcFeed, airportVolume, musicFeed, musicVolume across all 9 locales. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Rewrite Main.vue as grid orchestrator with all 6 Signal components - Connect useAudioAnalyser composable for both ATC and music streams - Update App.vue to render single <Main /> component - Remove Footer.vue and CustomSelect.vue (replaced by StatusBar and DataList) - Uninstall vue-audio-visual dependency Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Set --vol-pct inline style on range input so the webkit track gradient shows the green fill up to the thumb position. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Space toggles play/pause, [ ] adjust music volume, { } adjust ATC
volume. Shortcuts are disabled when typing in search inputs.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
AudioContext created in mounted() was suspended by autoplay policy, silencing all audio routed through the analyser. Now resume() is called inside the play() method (triggered by user click). Also watch the audio prop to apply initial volume when the element becomes available. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Bump --text-dim from #00802080 to #00AA30C0 and --text-muted from #1A3A1F to #2D5A35. Clock, labels, country codes, and status bar text are now clearly readable while remaining visually subordinate. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Bump --text-dim to #00CC38DD and --text-muted to #3A7A45 for better readability on pure black background. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Bump --grid-line to #1A2A1C and --grid-line-dim to #0F170F for better visibility of section dividers on pure black background. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace solid 1px gap trick with dotted outlines on grid children. Bump --grid-line to #254A2C for clearly visible section dividers with a technical terminal aesthetic. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Use negative margins to pull header, search, and volume borders past the cell padding so they span the full panel width. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…erlap Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Make feed titles prominent (14px bold, primary green with dotted underline). Search input is now a subtle bordered box, smaller and subordinate. Better spacing between header, search, and list. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Use height: 100vh + overflow: hidden on desktop to prevent vertical scrollbar. Mobile breakpoint reverts to auto height with scroll. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Increase scan-line opacity from 0.08 to 0.15 so the CRT stripe effect is actually visible. Add subtle crt-flicker animation with an occasional quick brightness glitch every 4 seconds. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Bump scan-line opacity from 0.15 to 0.22 for more visible effect - Make CRT flicker more pronounced with sharp opacity drops (0.5/0.55) - Add subtle-glitch animation to status word text (8s cycle, always on) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The flicker was animating the scan-line overlay opacity, which was nearly invisible. Now applies brightness filter directly to .layout, making the entire screen flash. Set to maximum intensity for testing. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Brief dimming (brightness 0.6-0.65) instead of full blackout. Catches the eye without being distracting. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Dims to 80% brightness instead of 60% — noticeable but not distracting. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Inset box-shadow on each of the 4 main panels for curved-glass depth - Each panel gets its own flicker animation at prime-ish durations (7s, 5s, 11s, 8s) so they never synchronize — feels like 4 independent CRT monitors Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Black shadow on black background is invisible. Use subtle green inset glow to simulate phosphor illumination from the center of each screen. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Increased scan line width from 2px to 3px and opacity from 0.22 to 0.35. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Bumped all text sizes by ~2px to compensate for scan-line overlay: - Base: 14→16px, labels: 14→16px, search: 13→15px - IATA codes: 16→18px, cities: 14→16px, country: 11→13px - Music names: 14→16px, descriptions: 11→13px - Volume/misc: 11→13px Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Complete UI redesign implementing the "Signal" concept — a neo-brutalist ATC terminal aesthetic with phosphor green (#00FF41) on pure black, JetBrains Mono monospace typography, and CSS Grid layout.
AnalyserNodeviauseAudioAnalysercomposable, shared AudioContext singleton, idle sine wave when paused, live waveform when playing, grid overlay, dB RMS readout[](music volume),{}(ATC volume)prefers-reduced-motionsupportvue-audio-visualdependency, Footer.vue, CustomSelect.vueScreenshots
Test plan
vite build)🤖 Generated with Claude Code