Skip to content
Pinky UI

overlays

Morphing Context Surface

A source surface grows into a focused contextual editor while retaining its visual identity and return path.

  • overlays
  • morph
  • context
  • editing
Related pattern

The source itself becomes the editor; this is a context edit pattern, not a generic morph card.

Live preview

Quick usage

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

<MorphingContextSurface />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

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

Props

PropTypeDefaultDescription
classNamestring—Styles the morphing source/editor surface.

Accessibility

  • Keyboard and touch paths match the pointer interaction.
  • Stable labels and values remain available without motion.

Performance

  • Only the active editor mounts and the layout transition is optional.
  • Enter and Escape provide a complete keyboard return path.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Short contextual edits where the source should become the editor

When not to use

  • Long forms or unrelated modal workflows

Skill

Purpose

Use a morphing context surface when a compact source should become its own short editor while retaining identity and a clear return path.

Interaction anatomy

  • The resting source becomes a focused input surface.
  • The label and value persist across the transformation.
  • Enter or Done commits the local edit; Escape returns without losing context.

Good for

Short contextual notes, names and local values that do not need a full form.

Avoid

Long forms, dependent validation workflows or unrelated modal content.

Live example

Open the context note, edit the value, then press Enter, Escape or Done.

Usage

tsx
<MorphingContextSurface />

Tune

Keep the editor compact, preserve the source label, validate locally and make the return action obvious.

Accessibility and reduced motion

Focus the native input on open, keep the label associated, and support Enter and Escape. Reduced motion renders the editor immediately without changing its semantics.

Open this skill on its own page