KQ-1274 · TRACK/CARD

Track Card

A music track card whose waveform is its bottom edge: a dotted baseline at rest that stands up bar by bar on hover, keyboard focus or play, rippling out from where the pointer came in with every bar on its own springs.snap step response, while moving along the card scrubs a ghost playhead that lights the bars up to the pointer and a press or drag on the lane seeks with the playhead gliding on springs.glide. Play slides the record half out of its sleeve on glide and spins it up like a turntable under a sheen that does not turn; Like and Queue throw a copy of the cover on a parabola into the Up next badge, which recoils on springs.recoil and rolls its count on snap when it lands and opens a real disclosure panel on snap. The lane is a slider (arrows five seconds, Page keys thirty, Home and End), Play, Like and Queue are buttons, and Escape closes the panel and hands focus back to the badge.

KQ-1274 · TRACK/CARD

Single · 2026

Low Tide Signal

Mara Venn

0:003:41

paused · not liked · 2 up next

Open it on the Studio stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/track-card

Props

track: { id: string; title: string; artist: string; duration: number; release?: string }; default defaultTrack; The track; its title is the card's heading and duration (seconds) sets the lane's length.
art: React.ReactNode; default —; Cover art drawn inside the sleeve, such as an <img>. Defaults to procedural art seeded from the track.
upNext: { id: string; title: string; artist: string; duration: number }[]; default defaultUpNext; The tracks already lined up after this one, listed in the Up next panel and counted on the badge.
playing / defaultPlaying: boolean; default false; Playback. Playing slides the record out and spins it; uncontrolled, the playhead advances by itself.
onPlayingChange: (playing: boolean) => void; default —; Fires from the press that changed it, or when the track reaches its end.
position / defaultPosition: number; default 0; The playhead in seconds. Controlled, the playhead follows the host and glides on a real seek.
onPositionChange: (seconds: number) => void; default —; Fires on every seek (press, drag, arrow keys), on pause and at the end.
liked / defaultLiked: boolean; default false; The heart.
onLikedChange: (liked: boolean) => void; default —; Fires from the press that changed it.
queued / defaultQueued: boolean; default false; This track is lined up in Up next.
onQueuedChange: (queued: boolean) => void; default —; Fires from Queue, from a like that lines the track up, or from Remove in the panel.
likeQueues: boolean; default true; Liking a track that is not lined up yet also adds it to Up next, thrown into the badge.
bars: number; default 56; How many bars the waveform is drawn with: coarse blocks or a dense comb (under 4 px a bar, the gaps close).
spin: number; default 16; How fast the record turns while playing, in rpm; 0 holds it still.
peek: number; default 0.5; How far the record slides out of its sleeve while playing, as a share of the record (0.1 to 0.7).
reveal: "hover" | "always"; default "hover"; When the waveform stands up: on hover, focus, play and scrub, or always.
size: "sm" | "md" | "lg"; default "md"; Sleeve 64 / 72 / 80 px on a narrow card, 96 / 112 / 128 px on a wide one.
accent: string; default "var(--accent-bright)"; Colour of the played bars, the playhead and the cover art, as any CSS colour.
sound: boolean; default false; Ticks for presses and scrub detents, and a blup when a thrown track lands in the badge.
disabled: boolean; default false; Nothing plays, seeks, reveals or queues.
className: string; default —; Classes for the card.

Prop	Type	Default	Description
track	{ id: string; title: string; artist: string; duration: number; release?: string }	defaultTrack	The track; its title is the card's heading and duration (seconds) sets the lane's length.
art	React.ReactNode	—	Cover art drawn inside the sleeve, such as an <img>. Defaults to procedural art seeded from the track.
upNext	{ id: string; title: string; artist: string; duration: number }[]	defaultUpNext	The tracks already lined up after this one, listed in the Up next panel and counted on the badge.
playing / defaultPlaying	boolean	false	Playback. Playing slides the record out and spins it; uncontrolled, the playhead advances by itself.
onPlayingChange	(playing: boolean) => void	—	Fires from the press that changed it, or when the track reaches its end.
position / defaultPosition	number	0	The playhead in seconds. Controlled, the playhead follows the host and glides on a real seek.
onPositionChange	(seconds: number) => void	—	Fires on every seek (press, drag, arrow keys), on pause and at the end.
liked / defaultLiked	boolean	false	The heart.
onLikedChange	(liked: boolean) => void	—	Fires from the press that changed it.
queued / defaultQueued	boolean	false	This track is lined up in Up next.
onQueuedChange	(queued: boolean) => void	—	Fires from Queue, from a like that lines the track up, or from Remove in the panel.
likeQueues	boolean	true	Liking a track that is not lined up yet also adds it to Up next, thrown into the badge.
bars	number	56	How many bars the waveform is drawn with: coarse blocks or a dense comb (under 4 px a bar, the gaps close).
spin	number	16	How fast the record turns while playing, in rpm; 0 holds it still.
peek	number	0.5	How far the record slides out of its sleeve while playing, as a share of the record (0.1 to 0.7).
reveal	"hover" \| "always"	"hover"	When the waveform stands up: on hover, focus, play and scrub, or always.
size	"sm" \| "md" \| "lg"	"md"	Sleeve 64 / 72 / 80 px on a narrow card, 96 / 112 / 128 px on a wide one.
accent	string	"var(--accent-bright)"	Colour of the played bars, the playhead and the cover art, as any CSS colour.
sound	boolean	false	Ticks for presses and scrub detents, and a blup when a thrown track lands in the badge.
disabled	boolean	false	Nothing plays, seeks, reveals or queues.
className	string	—	Classes for the card.