Music player

Press play, or tap the bar, to open the player; the chevron folds it back.

Things to tryCopy Anchor Link

• Open the player. The thumbnail grows into the cover, the title and artist lift into place under it, and the play button settles into the middle of the controls.
• Press play. The sound waves start to move, and the part already played darkens. The player has a scrubber, skip back 15 and forward 30, and on this page it plays the real song preview.
• Fold it back with the chevron. The cover shrinks back into exactly the thumbnail it came from.
• Open it halfway through closing. Every change starts from where things are on screen, so it just turns around.

InstallCopy Anchor Link

npx shadcn@latest add https://your-docs-site/r/podcast-player.json

DependenciesCopy Anchor Link

npm install @hugeicons/core-free-icons @hugeicons/react @remold-ui/react motion

How it worksCopy Anchor Link

• The mini bar and full player are different markup. A Motion LayoutGroup gives the artwork, title, show and play control matching layoutIds, so the compact player genuinely expands rather than being swapped.
• The play button is the same dark disc in both shapes, only bigger, so it reads as one control. Play and pause are one Icon that morphs between the two symbols.
• episodes takes { id, show, title, artwork, colors, audio, seconds }, and the first one plays. With audio the player plays the file; without it, play just runs the clock.