feedback
Completion Morph
Transforms a working action surface into its result while preserving spatial ownership and a reset path.
- feedback
- completion
- morph
- upload
- continuity
The working object becomes the completed object; it does not disappear into a separate success message.
Live preview
Upload brief
Start the action to see the surface transform.
Quick usage
import { CompletionMorph } from "@pinky-ui/systems";
<CompletionMorph label="Upload brief" resultLabel="Brief ready" />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.
npm install @pinky-ui/systemspnpm add @pinky-ui/systemsyarn add @pinky-ui/systemsnpx pinky-ui add completion-morphPrefer to run the whole repository locally instead?
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run devAccessibility
- Pointer and keyboard paths expose the same state change.
- Status and focus remain meaningful when motion is disabled.
Performance
- Uses local state and transforms; no per-frame React pointer loop.
Reduced motion
Resolves state changes without layout animation while preserving semantics.
When to use
- Product workflows with a clear reversible or inspectable state.
When not to use
- Decorative motion without a user task.
Skill
Purpose
Transform a working action surface into its completed result while preserving spatial ownership.
Use when
An upload, publish, generate or submit surface naturally becomes a file card, result summary or ready state.
Avoid
Fading a loader into a generic checkmark, celebrating routine work with confetti, or morphing across unrelated page regions.
Accessibility
Keep the completed result in the same reading order, announce the completion once, and provide a clear reset, inspect or next action.
Keyboard and touch
The initiating control remains a native button. The completed surface must keep its next action reachable at 390px without relying on hover.
Reduced motion and performance
Preserve the same DOM meaning and resolve the transition without travel when motion is reduced. Do not mount a second heavy result surface before the old one is released.
Composition and anti-patterns
The working object should become the result with stable identity. Use Async Action Control for a compact button lifecycle without a spatial result transformation.