Capsule Player

Installation & usage

npm i @youj/react

For an app already set up with npx @youj/cli init, which installs the peers (@youj/core, @youj/motion, motion and Base UI) and wires the provider. New app? Start at Installation.

Use a capsule player as a compact now-playing bar: at the foot of a music app, over a video timeline, in the corner of a podcast page. It shows the cover, the title and artist, a thin progress rail you can seek, the time played, and the transport buttons.

The player has no clock of its own. Pass it the playhead and the length from your audio or video element, and act on its callbacks.

import { CapsulePlayer } from '@youj/react'

<CapsulePlayer
  title="Low Tide"
  subtitle="Mara Quell"
  artwork={<img src={cover} alt="" />}
  playing={playing}
  onPlayingChange={(next) => (next ? audio.play() : audio.pause())}
  position={time}
  duration={audio.duration}
  onSeek={(seconds) => (audio.currentTime = seconds)}
  onPrevious={previousTrack}
  onNext={nextTrack}
/>

Without onSeek the rail only shows progress. Without onPrevious or onNext, that button is disabled.

Reference

Propstitle, playing, onPlayingChange… (12)

Props

CapsulePlayer props
Prop	Type	Default
`title`Required	`string`	–
`subtitle`	`string` The artist, show or source, muted after the title.	–
`artwork`	`ReactNode` Cover art: an <img> or any node, cropped to a disc. Decorative.	–
`playing`Required	`boolean`	–
`onPlayingChange`Required	`(playing: boolean) => void`	–
`position`Required	`number` The playhead, in seconds.	–
`duration`Required	`number` The track's length, in seconds.	–
`onSeek`	`(seconds: number) => void` Seeks to a time in seconds, as the rail is dragged or stepped. Without it the rail only shows progress.	–
`onPrevious`	`() => void` Without it, the previous button is disabled.	–
`onNext`	`() => void` Without it, the next button is disabled.	–
`locale`	`string` Formats the times. Default: the YoujProvider locale.	–
`size`	`'sm' \| 'default'` `sm` for a dense toolbar; the default lines up with default-size controls. default `default`	`default`

StylingParts and data attributes

MotionPlay and pause, new track, rail

Motion

Motion tokens
Moment	Tokens	Value
Play and pausethe triangle folds into the two pause bars	`spring.snappy` 0.2s, bounce 0	0.2s, bounce 0
New trackthe new title rises in as the old one leaves upward	`duration.baseease.emphasized` 220ms · cubic-bezier(0.6, 0, 0.1, 1)	220mscubic-bezier(0.6, 0, 0.1, 1)
Railthe thumb grows in on hover and focus; the fill follows the time exactly	`duration.fastease.enter` 140ms · cubic-bezier(0.16, 1, 0.3, 1)	140mscubic-bezier(0.16, 1, 0.3, 1)

Reduced motion

The icon and the title change at once.

AccessibilityKeyboard