FxMusicBall

A music player floating in the bottom-left corner with a frosted glass effect, supporting single and playlist modes.

Visual Effects

• Frosted Glass Background — backdrop-filter: blur() translucent effect, auto-adapts to light/dark mode
• Purple-blue Gradient Progress Ring — Custom SVG progress ring with gradient stroke (#bd34fe → #41d1ff)
• Orbit Ring — A uniformly rotating gradient ring appears around the ball during playback
• Progress Ring Pulse — Purple-to-blue pulse glow effect on the progress ring during playback
• Background Shimmer — Purple-blue light spots flowing across the ball background during playback
• Dark Glow — Purple-blue halo around the ball in dark mode during playback

Interaction Design

State	Behavior
Default	50px circle showing play button and ring progress
Mouse hover	Elastic expansion to 330px control panel after 0.5s
Control panel	Play/pause, time display, progress bar, volume control, playlist button
Volume	Volume slider expands when hovering over the volume icon
Music list	Song list pops up when clicking the list button, with fade-in slide animation

Configuration

Single Mode

musicBall: {
  src: '/music/my-song.mp3',
  autoplay: false,
  loop: true,
}

List Mode

musicBall: {
  list: [
    { name: 'Mariage d\'Amour', src: '/music/wedding-dream.mp3' },
    { name: 'Boundless Oceans', src: '/music/broad-sea-sky.mp3' },
    { name: 'A Few Coins', src: '/music/silver-coins.mp3' },
  ],
  autoplay: true,
  loop: true,
}

Options

Field	Type	Default	Description
enable	boolean	true	Enable the music ball
visible	boolean	true	Visibility (controlled via display)
autoplay	boolean	false	Autoplay (note: browsers may block autoplay)
loop	boolean	true	Loop playback (single mode only)
src	string	''	Single music file URL
list	MusicItem[]	—	Multi-song playlist

Accessibility

All animation effects respect the prefers-reduced-motion system setting. When the user enables reduced motion preference, orbit ring, pulse, shimmer and other animations are automatically disabled.

Technical Details

• Uses custom SVG instead of Element Plus's ElProgress component for gradient stroke support
• Progress ring uses stroke-dasharray for arc progress indication
• Playback state animations controlled via is-playing CSS class
• Orbit ring conditionally rendered with v-if="isPlay", removed from DOM when paused to save resources
• Uses MutationObserver to watch document.documentElement style attribute changes, tracking --fx-beam-c1/--fx-beam-c2 variable updates in real time, ensuring the progress ring gradient responds immediately when heroImageColor dynamically changes colors