Skip to content

feat: Next-Gen Aero glass UI overhaul#20

Closed
Copilot wants to merge 2 commits into
mainfrom
copilot/update-ui-with-next-gen-glass
Closed

feat: Next-Gen Aero glass UI overhaul#20
Copilot wants to merge 2 commits into
mainfrom
copilot/update-ui-with-next-gen-glass

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Mar 26, 2026

Complete UI redesign replacing the flat Qt Quick Controls interface with a glassmorphism/Frutiger Aero aesthetic — physically-inspired materials, fluid animations, and reactive visuals.

New QML component architecture

  • GlassPanel — Real-time frosted glass via ShaderEffectSource + FastBlur with animated edge highlights
  • MeshGradientBackground — Canvas-driven animated fluid gradient using 4 color blobs extracted from album art
  • ParticleField — Ambient floating bubble/dust particle system
  • GlassButton — Skeuomorphic acrylic button with metallic sheen, spring-physics press scale, accent glow mode
  • GlowSlider — Luminous track with radial-glow water-drop handle and spring-animated position
  • AlbumArtDisplay — 3D parallax rotation (±6° from mouse), auto-rotation during playback, dominant color extraction via Canvas getImageData
  • ImmersiveLyrics — Depth-of-field lyrics: current line at full opacity with glow, surrounding lines fade + scale down

Visual system

  • Layered rendering: mesh gradient → blurred album art overlay → particles → glass content panel
  • Mouse-tracked 3D parallax (Translate + SpringAnimation)
  • Playback-reactive breathing animation on main panel
  • Flickable with elastic rebound for spring-physics overscroll
  • Theme accent color dynamically derived from album art dominant colors

Build changes

  • Added Core5Compat and ShaderTools to find_package(Qt6 ...)
  • Runtime dep: qml6-module-qt5compat-graphicaleffects (provides FastBlur, Glow, DropShadow, RectangularGlow, OpacityMask, RadialGradient)

Preview

preview

All existing functionality (dialogs, metadata, lyrics, playlist, i18n) preserved. Tests pass.

Copilot AI and others added 2 commits March 26, 2026 12:47
@MollycodeX
feat: Next-gen Aero glass UI overhaul with 7 new QML components
2f37fd7 
- MeshGradientBackground: animated fluid gradient with album art colors
- ParticleField: floating bubbles/light dust particle system
- GlassPanel: frosted glass panel with blur, tint, and edge lighting
- GlassButton: skeuomorphic glass/acrylic button with metallic sheen
- GlowSlider: luminous slider with glowing water-drop handle
- AlbumArtDisplay: holographic 3D album art with rotation and color extraction
- ImmersiveLyrics: depth-based lyrics with focus/blur effects
- Rewritten main.qml with parallax, spring physics, breathing UI
- Added Qt5Compat.GraphicalEffects for blur/glow/shadow effects

Co-authored-by: MollycodeX <114975977+MollycodeX@users.noreply.github.com>
Agent-Logs-Url: https://github.com/MollycodeX/MSCPLAYER/sessions/d36ba381-7696-4ad0-8b15-d84c80ed2541
@MollycodeX
fix: address code review feedback - accent color logic, breathing amp…
72bbc14 
…litude, comment

Co-authored-by: MollycodeX <114975977+MollycodeX@users.noreply.github.com>
Agent-Logs-Url: https://github.com/MollycodeX/MSCPLAYER/sessions/d36ba381-7696-4ad0-8b15-d84c80ed2541
@MollycodeX MollycodeX closed this Apr 10, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@MollycodeX MollycodeX

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@MollycodeX