Skip to content
Pinky UI

mobile

Auth Completion Morph

Carries a sign-in surface from ready to verifying to complete without replacing the spatial object.

  • mobile
  • auth
  • completion
  • status
  • morph
Related pattern

Completion stays attached to the action surface so success is readable without a route-sized interruption.

Live preview

Account / ready

Keep the welcome in place.

The same surface will acknowledge completion.

Quick usage

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

<AuthCompletionMorph />

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

  • 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

Use an auth completion morph when verification should resolve into a welcome state on the same spatial surface.

Interaction anatomy

  • Ready becomes verifying after an explicit action.
  • Verification resolves to completion without a full-screen replacement.
  • Run again makes the state reversible in the example.

Good for

Sign-in confirmation, invite acceptance and short account handoffs.

Avoid

Long asynchronous workflows or success states that need a separate destination.

Live example

Activate Complete sign in and watch the surface move from ready to verifying to complete.

Usage

tsx
<AuthCompletionMorph />

Tune

Keep the delay truthful, preserve the action surface and provide a clear result label.

Accessibility and reduced motion

Use a polite live status for verifying and complete, keep text independent of color and clean up pending timers. Reduced motion removes travel while preserving all phases.

Open this skill on its own page