Glass Music PlayerMini music player with glass surface, spinning vinyl art, animated progress bar, and ambient glow.
.png)
Midnight Drive
Neon Collective
Add to your project
One command adds this component to your project.
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/glass-music-playerFor dark mode, add the dark class to your <html> element:
<html class="dark">Install with AI Canvas MCP
With AI Canvas MCP, your AI knows every component we ship. Ask for one inside Claude Code, Codex, or Cursor and it installs the component you pick. Works with any AI Canvas account, free or premium.
About Glass Music Player
Glass Music Player is a mini player widget with a frosted-glass surface, a spinning vinyl-art disc beside the track info, an animated progress bar, and a soft ambient glow that picks up the album cover color. Motion handles the spin and the progress fill so they share a single animation timeline. The component is decorative-but-functional: it accepts real metadata for any track you give it, and works well as a portfolio detail, a marketing-site lower-third, or a mobile preview card.
Built with
Frequently asked questions
- Is Glass Music Player free to use?
- Yes. Glass Music Player is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.
- How do I install Glass Music Player?
- One command: npx shadcn@latest add https://aicanvas.me/r/glass-music-player.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Glass Music Player for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.
- What is Glass Music Player built with?
- Glass Music Player is built with React and TypeScript, using Motion and Tailwind CSS.
- Where would I use Glass Music Player?
- Common uses include Marketing site, Portfolio, and Mobile app. Like every AI Canvas component, it is self-contained and drops into any React project.
- Can I remix Glass Music Player with AI?
- Yes. Glass Music Player ships with expert prompts for Claude Code, Lovable, and V0, so you can recreate and customize it in your AI builder of choice.
AI Canvas