Theme · Product · Beginner

Music Player

Music player = a frosted panel, album art, transport controls, and a progress bar with a readable time.

How to prompt it

Build a glassmorphism music player.

STYLE
- Glassmorphism: translucent panels, backdrop blur, light edge, layered surfaces
- Vivid mesh backdrop: sky #9FD4FF, mint #B8FFF3, sand #EAD7C4 on #D7E4EE — without it the glass reads as plain white
- Glass plates rgba(255,255,255,0.42) with backdrop-filter blur(18px), 1px light edge rgba(255,255,255,0.72), 20px radius
- Type #1D1D1F, mute #6E6E73, one accent #0071E3: progress fill, play button, like icon

LAYOUT
- A slim frosted "NOW PLAYING" bar at the top
- A glass player card: album thumbnail, track + artist, like icon, seek bar, transport
- An "Up next" queue on its own glass panel (shown in the expanded view)

COMPONENTS
- Album artwork thumbnail (square)
- Track title and artist, plus a heart/like toggle
- Seek bar with current / total time
- Transport controls: prev, play, next (accent play)
- Queue rows with thumbnail, title, artist

TECHNICAL
- React
- Tailwind CSS
- shadcn/ui

Revise only the transport controls of this music player.

CHANGES
- Centre play, previous, and next in one row with equal 44px hit areas
- Make the progress bar scrubbable with a knob that appears on hover
- Show elapsed time and remaining time at both ends

DO NOT
- Do not restyle the album art or the panel
- Do not change the glass treatment

Build a production glassmorphism music player.

STYLE
- Frosted panel: 16px backdrop blur, 12% white fill, 1px light top edge
- A vivid album-derived gradient sits behind the panel, or the glass reads grey
- 20px radii with a soft 0 8px 32px shadow

LAYOUT
- Album art on the left, title and artist on the right
- Progress bar full width with elapsed and remaining time
- Transport controls centred with equal hit areas
- Volume and queue on the trailing edge

COMPONENTS
- Card, button, icon button, slider, list
- Progress bar is scrubbable with a knob that appears on hover

INTERACTION
- Art scales to 1.02 while playing
- The panel reacts subtly to album colour changes

TECHNICAL
- React, Tailwind CSS, shadcn/ui
- Respect prefers-reduced-motion for every transition

MOTION
- Progress: 100ms linear tracking. Cover art changes cross-fade over 300ms.
- Play/pause icon: 160ms cross-fade, scale 0.25 to 1 with blur 4px to 0.
- Visualiser: CSS loop. The page around it must not pulse.
- prefers-reduced-motion: stop the visualiser.

Modify prompts change only the target — the rest of your page stays untouched.

Tips

The mesh backdrop is half the style — keep it vivid or the glass turns into flat white cards.

Music Player

Tips

See also

Components

Animations

Styles

Themes

Prompts

Glossary

Anti-patterns