docs: Orbital UI design spec and implementation plan#10
Open
ivan-kalachikov wants to merge 22 commits into
Open
docs: Orbital UI design spec and implementation plan#10ivan-kalachikov wants to merge 22 commits into
ivan-kalachikov wants to merge 22 commits into
Conversation
Complete design spec for Concept 1 "Orbital" — spatial depth / celestial theme with aurora palette, glassmorphic panels, particle visualization, and starfield parallax background. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
16 implementation tasks across 13 phases with 4 mandatory quality gates. Each gate uses Chrome DevTools MCP for screenshots, DOM verification, and computed style audits against the design spec. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…s and aurora background Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
… text Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
… and state animations Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…nd volume slider Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…host text Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…yout Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Moved up from cleanup phase — blocks dev server since vue-audio-visual is no longer used by any component. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Create Starfield.vue with Canvas 2D starfield background featuring: - 200 stars (desktop) / 100 stars (mobile) with random size, brightness, depth - Mouse-driven parallax on desktop, auto-drift on mobile - musicAmplitude modulates brightness, airportAmplitude modulates twinkle rate - ResizeObserver + devicePixelRatio for crisp HiDPI rendering - prefers-reduced-motion support (single static frame, no rAF loop) - Full cleanup in beforeUnmount (rAF, mousemove listener, ResizeObserver) Integrate into Main.vue as first child of main-area for z-index 0 layering. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Plain JS factory function that wraps Web Audio API to provide real-time frequency analysis from <audio> elements. Uses a shared AudioContext singleton and WeakMap-cached MediaElementSource nodes to avoid browser limits and double-bind errors. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…useAudioAnalyser - Cache canvas context in Starfield instead of calling getContext each frame - Add zero-size canvas guard to prevent NaN from modulo with 0 - Add disconnect() at top of connect() to prevent AnalyserNode leaks on reconnect - Disconnect source before rewiring to prevent accumulated audio graph connections - Add try/catch around AudioContext creation for robustness Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…activity Create ParticleCanvas.vue with two particle systems orbiting the central sphere — music particles (inner, #FFCC66) and airport particles (outer, #44FFBB). Features include: - Audio-reactive modulation via useAudioAnalyser (radius, brightness, speed) - Trail effect using semi-transparent rgba overlay - Object pooling with pre-allocated particles and visibility toggling - Responsive particle counts via matchMedia (mobile/desktop) - Reduced motion support (static render, no animation loop) - Performance: rAF loop with document.hidden skip, cached canvas context, zero-size canvas guard, ResizeObserver for sizing with devicePixelRatio Wire audio analysers into Main.vue: - Create and connect useAudioAnalyser instances for both audio elements - Pass amplitude data to Starfield via rAF-driven data properties - Track sphere position via updateSphereRect for orbit center - Clean up all listeners, observers, and rAF loops in beforeUnmount Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
… and Main.vue - Remove useAudioAnalyser from setup() return, call directly in mounted() - ParticleCanvas now accepts musicAmplitude/airportAmplitude props instead of raw analyser objects, eliminating duplicate getAmplitude() calls per frame - Connect analysers on mount if already in playing state - Always allocate desktop max pool size to prevent overflow on viewport change Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Use @touchmove.prevent instead of manual preventDefault (passive listener fix) - Add role="region" and aria-label on drawer root - Add id, aria-controls, aria-labelledby for complete ARIA tab pattern - Remove dead onTouchMove method Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
… i18n, scroll active item - Move ghost text from GlassPanel overlay to sphere zone (above/below orb) to improve list readability - Add play triangle and pause bars icons to Sphere for clear button affordance - Wire i18n ($t) for all hardcoded UI strings: search, volume, labels, tabs - Add scrollToActive() to DataList to center the active selection on mount and selection change - Clean up GlassPanel: remove unused ghost text props and CSS Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Space toggles play/pause, [ ] adjust music volume, { } adjust ATC volume.
Escape in search fields clears and blurs.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…s asset Deleted: CustomSelect.vue, Airports.vue, Music.vue, christmas-hat.png Uninstalled: vue-audio-visual 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.
Orbital UI Redesign
Complete implementation of the Orbital design concept — a space-themed ambient music + ATC radio player.
What changed
New components:
Starfield.vue— Canvas starfield background with parallax and audio reactivityParticleCanvas.vue— Dual orbit particle system (music inner #FFCC66, ATC outer #44FFBB) with trail effectsSphere.vue— Central orb button with play/pause icons, breathing animation, expanding ringsGlassPanel.vue— Glassmorphism container with 3D tilt and backdrop blurDataList.vue— Reusable search/select/volume component with accent colorsMobileDrawer.vue— Bottom drawer with swipe gestures and tab switchingHeaderBar.vue— Minimal header with status indicatoruseAudioAnalyser.js— Web Audio API composable (shared AudioContext, WeakMap source cache)Redesigned:
Main.vue— Layout orchestrator with responsive breakpoints, amplitude loop, sphere zone with ghost textFooter.vue— Restyled, hidden on mobileApp.vue— New CSS design system (custom properties, aurora gradients)Infrastructure:
prefers-reduced-motionsupport in all animated componentsRemoved:
Airports.vue,Music.vue,CustomSelect.vue,christmas-hat.pngvue-audio-visualdependencyQuality gates passed
Test plan
npm run build