Skip to content
Pinky UI

transitions

Blur Route Transition

A minimal fade, low blur and focus-aware handoff between keyed views.

  • transitions
  • route
  • blur
  • production

Live preview

Chapter 1

Quick usage

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

<BlurRouteTransition transitionKey={pathname}>{page}</BlurRouteTransition>

Presets

Default

The restrained Pinky production default.

Default behaviour

Quiet

A flatter or lower-intensity treatment for dense pages.

duration={0.18} blur={3}

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
blurnumber5Small blur radius used during the handoff.
classNamestring—Styles the outer composition without changing its behaviour.
disabledbooleanfalseUses the static, readable composition.

Accessibility

  • The keyed region receives focus after a content change when requested.
  • Content remains mounted in a predictable region with no focus trap.

Performance

  • Short, low-radius blur limits paint cost.
  • Reduced motion avoids the transition lifecycle entirely.

Reduced motion

AnimatePresence is bypassed and new content is rendered and focused immediately.

When to use

  • Routine production route or tab transitions

When not to use

  • Large persistent surfaces on low-power devices

Skill

Purpose

BlurRouteTransition is the restrained default for keyed route or content changes: a small fade, blur and vertical handoff. Use it when continuity helps but branded choreography would be excessive.

Use about 3–6px blur and 0.18–0.3 seconds. Avoid large blurred surfaces on low-power devices, delaying data-bound content or nesting multiple route transitions. Motion must never be the only sign that navigation occurred.

The wrapper can receive focus after change so keyboard and screen-reader context is not lost. Reduced motion bypasses AnimatePresence and replaces content immediately. Prefer this over Bubble or Liquid Wipe for routine product navigation.

Open this skill on its own page