Skip to content
Pinky UI

mobile

Fullscreen Media Morph

A thumbnail grows into a focused media surface and returns to its source with focus and identity preserved.

  • mobile
  • media
  • fullscreen
  • morph
  • touch
Related pattern

Fullscreen is a continuation of the tapped media object, not an unrelated gallery shell or hardware mockup.

Live preview

Quick usage

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

<FullscreenMediaMorph items={media} />

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

Fullscreen Media Morph lets a thumbnail become the focused media surface and return to its source. The transition preserves identity and focus instead of opening an unrelated phone or hardware mockup.

Use when

  • A media item needs a larger inspection state on touch.
  • Closing should return to the same collection position.

Interaction

Tap a thumbnail, inspect the enlarged frame and close with the visible button or Escape. The trigger receives focus again after close.

Accessibility

Use a labelled modal dialog, a close button and meaningful media text. Keep the thumbnail label available before and after expansion.

Reduced motion

Open and close as immediate state changes while preserving the same media content and focus restoration.

Tune

  • Keep controls out of the media's readable center.
  • Use real media dimensions and loading states in production.
Open this skill on its own page