Skip to content
Pinky UI

mobile

Floating Media Controls

Media controls stay minimal at rest, reveal on tap and collapse after idle without hiding the primary play path.

  • mobile
  • media
  • controls
  • idle
  • touch
Related pattern

The control layer responds to touch intent and does not depend on hover to expose playback.

Live preview

Media / Lesson 01Paused
Tap the surface for controls

Quick usage

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

<FloatingMediaControls label="Lesson 01" />

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.

Skill

Purpose

Floating Media Controls keep a media surface quiet at rest, reveal the small control set after a tap and collapse it after idle. The primary play control never disappears from the interaction model.

Use when

  • A media preview needs occasional playback without a permanent desktop control bar.
  • The content should remain visually primary.

Interaction

Tap the surface to reveal controls, use Play/Pause and let the layer settle back after idle. Tapping the control itself keeps the action visible.

Accessibility

Use a labelled Play/Pause button and announce the current playback state. Do not make hover the only reveal path.

Reduced motion

Keep the controls visible or switch visibility without opacity travel; the play state remains explicit.

Tune

  • Keep the idle timeout long enough for touch users.
  • Let the host own actual media playback and cleanup.
Open this skill on its own page