Skip to content
Pinky UI

mobile

Swipe Media Inspector

An open media surface reveals metadata on upward swipe while keeping an explicit Details control and downward return.

  • mobile
  • media
  • inspector
  • swipe
  • metadata
Related pattern

Metadata moves with the media reading surface instead of opening a fixed detached overlay.

Live preview

Quick usage

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

<SwipeMediaInspector title="Working room" />

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

Swipe Media Inspector adds a metadata layer to an open media surface. An upward swipe reveals details and a downward swipe returns to the frame without leaving the media context.

Use when

  • Media metadata is useful but should not occupy the resting frame.
  • A full-screen or bounded media surface has a clear vertical reading direction.

Interaction

Open the frame, swipe up or activate Details, then swipe down or choose Hide details. Close remains explicit.

Accessibility

Provide a Details button with aria-expanded, a close button and readable metadata in normal DOM order. Swiping must enhance, not replace, those controls.

Reduced motion

Toggle the metadata region immediately and retain the same action labels.

Tune

  • Keep metadata concise enough for a lower panel.
  • Do not capture vertical page scroll outside the open media surface.
Open this skill on its own page