About Hover Expand Player
A compact, interactive music player for Framer that smoothly expands on hover into a full playback interface. Upload your own audio, add album artwork, customize the colors and sizing, and give your website a polished music experience without any external setup.
Built with smooth spring motion, real audio playback, progress controls, volume control, and responsive Framer property controls.
Preview
https://hoverexpandplayer.framer.website/
Great For
Music portfolios
Artist & musician websites
Creative portfolios
Personal websites
Audio experiences
Interactive landing pages
Product showcases
Creative agencies
Experimental websites
Framer projects that need a compact audio player
Features
🎵 Upload your own music directly from Framer
🖼️ Custom album artwork
✨ Smooth hover-to-expand interaction
▶️ Play / pause controls
🔄 Restart track
⏹️ Stop track
🎚️ Volume control
📊 Interactive playback progress
⌨️ Keyboard-friendly progress controls
🎧 Live playback time and duration
📈 Animated equalizer
🌙 Reduced-motion support
📐 Fully customizable closed and expanded sizes
🎨 Custom background, text, accent, progress, and muted colors
💫 Optional shadow and adjustable shadow opacity
⚡ Adjustable animation speed
📱 Responsive Framer component
🧩 Framer property controls for easy customization
The component supports uploaded MP3, WAV, OGG, M4A, and AAC files through its Music control.
Customize
Everything is designed to be customized directly inside Framer.
Content
Track title
Artist name
Music file
Album artwork
Layout
Closed width
Closed height
Open width
Open height
Corner radius
Colors
Background
Text
Muted text
Accent
Progress track
Progress fill
Interaction
Hover expansion
Animation speed
Preview open/closed state
Effects
Shadow
Shadow opacity
All of these controls are exposed through Framer's property panel.
Support
Need help customizing the component or have an issue with your setup?
Email: karimsaif010@gmail.com
X: @Karim Saif
