Music, podcast and video player chrome with simulated playback — drawn cover art, chaptered progress, speed control and a scene that pans as the video plays.
Music player
music.tsxDrawn cover art that crossfades per track, a draggable keyboard scrubber, equaliser bars and a queue with shuffle and repeat.
| Prop | Type | Default | Description |
|---|---|---|---|
tracks | { title; artist; duration; palette? }[] | — | Queue; palette colours the drawn cover. |
defaultTrack / defaultPosition | number | 0 / 72 | Starting track and second. |
defaultPlaying | boolean | false | Start playing on mount. |
onLikeChange | (track, liked) => void | — | Like toggle handler. |
Podcast episode
podcast.tsxEpisode card with a progress track split into chapters, 15/30 second skips, a rolling speed button and a chapter list that follows playback.
| Prop | Type | Default | Description |
|---|---|---|---|
show / episode / title / published | string | — | Episode details. |
duration | number | 2834 | Length in seconds. |
chapters | { title; start }[] | — | Chapter starts in seconds. |
defaultPosition | number | 498 | Start position in seconds. |
speeds | number[] | [1, 1.25, 1.5, 2] | Speeds the speed button cycles through. |
onPlayChange | (playing: boolean) => void | — | Play state handler. |
Video player
video.tsxPlayer chrome over a drawn scene that pans with playback: buffered progress, volume slider, timed captions and controls that hide while you watch.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Overlay title. |
duration / defaultPosition / bufferAhead | number | 96 / 14 / 22 | Timing in seconds. |
cues | { start; end; text }[] | — | Captions shown while the CC toggle is on. |
defaultVolume | number | 70 | 0–100. |
defaultCaptions | boolean | true | Captions on at start. |
Install the whole set
Installs every media players variant at once. Each section above has its own command for a single variant.
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
Accessibility
- Every scrubber and volume control is a role=slider with arrow, Page and Home/End keys and an aria-valuetext like “1:12 of 3:41”.
- Play, like, shuffle, mute and captions are real buttons with labels and aria-pressed where they toggle.
- Reduced motion stops equaliser bars and cover scaling; playback itself still advances.