Mugen Liquid Player
An expandable glass record deck with real audio previews and album artwork. Track changes stay liquid inside the sleeve, the scrubber trails like rubber, and the edge beam wakes only while media is buffering or playing.
Dependencies
Interaction Types
Play real audio — the square sleeve rounds into a record and keeps its rotation position when paused
Change tracks — the outgoing and incoming artwork marble together at their contact seam
Drag or keyboard-seek the progress rail — its liquid thumb stretches, trails, and settles
Expand the compact deck to reveal larger artwork and an interactive up-next queue
How to use
'use client';
import { MugenLiquidPlayer } from "@/components/mugen-liquid-player";
const tracks = [{
id: "afterimage",
title: "Afterimage",
artist: "Mugen Studies",
artwork: "/music/afterimage.jpg",
audioSrc: "/music/afterimage-preview.mp3",
externalUrl: "https://open.spotify.com/track/...",
}];
export default function Demo() {
return <MugenLiquidPlayer tracks={tracks} provider="spotify" />;
}Component Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tracks | MugenTrack[] | — | Track title, artist, artwork, audioSrc, and optional album/external URL |
| initialTrack | number | 0 | Initially selected track index |
| variant | "default" | "compact" | "default" | Full player or embedded preview density |
| provider | "spotify" | "local" | "spotify" | Provider mark shown in the status line |
| theme | "dark" | "light" | "dark" | Obsidian or porcelain surface treatment |
| autoAdvance | boolean | true | Advance to the next queued track when media ends |
| defaultVolume | number | 0.72 | Initial audio volume from 0 to 1 |
| expandable | boolean | false | Adds a control that opens the full glass deck and its up-next queue |
| expanded | boolean | — | Controlled expanded state |
| defaultExpanded | boolean | false | Initial expanded state when uncontrolled |
| onTrackChange | (track, index) => void | — | Called after a queue navigation |
| onPlaybackChange | (playing) => void | — | Called from actual media play and pause events |
| onExpandedChange | (expanded) => void | — | Called when the glass deck opens or closes |
| onLikeChange | (track: MugenTrack, liked: boolean) => void | — | Called when a track is liked or unliked |