Skip to content
Pinky UI

transitions

Liquid Wipe Transition

A short two-layer soft wipe between keyed views.

  • transitions
  • transition
  • wipe
  • expressive

Live preview

Chapter 1

Quick usage

usage
import { LiquidWipeTransition } from "@pinky-ui/experiences";

<LiquidWipeTransition transitionKey={chapter} direction="right">{content}</LiquidWipeTransition>

Presets

Default

The restrained Pinky production default.

Default behaviour

Quiet

A flatter or lower-intensity treatment for dense pages.

disabled={true}

Install

Add @pinky-ui/experiences 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/experiences

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
direction"left" | "right" | "up" | "down""right"The direction that matches the content relationship.
classNamestring—Styles the outer composition without changing its behaviour.
disabledbooleanfalseUses the static, readable composition.

Accessibility

  • Content remains in logical DOM order and motion never carries the only meaning.
  • Interactive descendants retain native link or button semantics and visible focus.

Performance

  • Two transform-only temporary layers.
  • No SVG displacement or real-time fluid simulation.

Reduced motion

Spatial or continuous movement is removed while content, selection and controls remain available.

When to use

  • Occasional branded chapter changes

When not to use

  • Every route in a utility application

Skill

Purpose

LiquidWipeTransition uses two soft transform layers to cover and reveal keyed content. Use it for occasional chapter changes, portfolios and brand-led sections that can afford a more expressive handoff.

Keep it under roughly 0.7 seconds and choose a direction that matches navigation. Avoid every-link usage, heavy SVG displacement, real-time fluid simulation or stacking it with a shared-element transition.

Content order and controls remain semantic, with optional focus transfer after the wipe. Reduced motion replaces the view immediately and mobile uses the same transform-only path. Keep wipe layers opaque enough to avoid unreadable half-states.

Open this skill on its own page