Skip to content
Pinky UI

mobile

Mini Player

A persistent compact player bar expands to a full player on tap or an upward drag, and collapses on a downward drag.

  • mobile
  • player
  • media
  • sheet
  • drag
Related pattern

Portals its expanded panel to document.body for the same reason Bottom Sheet does: a fixed overlay nested under a filtered ancestor would be fixed to that ancestor, not the viewport.

Live preview

Focus mixStudio session · 24 min

Quick usage

usage
import { MiniPlayer } from "@pinky-ui/systems";

<MiniPlayer title="Focus mix" subtitle="24 min" playing={playing} onPlayingChange={setPlaying} expanded={expanded} onExpandedChange={setExpanded}>{fullControls}</MiniPlayer>

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Every gesture has a labelled button or keyboard path, and primary controls meet a 44px touch target.
  • State remains readable without relying on colour or motion.

Performance

  • Interaction state is local and bounded; gesture updates do not require a page-wide render loop.
  • Timers and listeners are cleaned up on unmount.

Reduced motion

The same state change resolves immediately; travel, scale and spring motion are removed without removing the interaction.

When to use

  • Touch-first product surfaces where the next action should stay close to the hand.

When not to use

  • Desktop-only workflows or interactions whose gesture would hide the only available action.