Depth Shift Transition

Overview

Depth Shift Transition moves the route change through layered perspective instead of a flat cut.

It gives navigation a sense of space: the current page pulls back, moves aside and makes room while the next view arrives with depth. Use it when a site wants route changes to feel dimensional but does not need a full WebGL scene.

Use Depth Shift Transition on portfolios, agency sites, editorial journeys, brand microsites, and launch pages where navigation can carry a controlled visual moment. The page job is continuity: the visitor should feel the change of route, understand the destination, and keep moving without waiting for the animation to finish performing.

The production risk is disorientation. Perspective motion can feel premium when it is short and clear, but it becomes frustrating when it hides the destination, breaks scroll restoration, or leaves keyboard focus behind on the previous route.

(Next.js App Router only. Requires next-transition-router for route-transition lifecycle hooks and must be wrapped in its provider. This effect will not function in plain React or in the Next.js Pages Router.)

Install Command

Usage Code

Component Code

Example Production Use Case

A creative portfolio can use Depth Shift Transition between project pages so each case study feels connected to the next. The old page recedes, the new page arrives, and the visitor lands in the destination content without losing orientation. The outcome is spatial continuity: navigation feels designed without becoming a loading screen.

Best Used For

• Portfolio and agency websites where route changes should feel spatial and crafted.
• Campaign pages where the transition can reinforce a premium visual system.
• Editorial journeys where depth helps one page hand off to the next.

Not For

Not for dashboards, docs, checkout, search, pricing comparison flows, or routes where navigation speed is the feature.

Not for pages where perspective movement would make users lose their place.

Performance Budget

Keep the transition short, animate transform and opacity, avoid layout reads during route change, and clean up listeners or timelines after navigation completes. Depth should come from composited layers, not from expensive layout work.

Accessibility and Mobile

Move focus to the destination main region or heading after navigation. On mobile, reduce perspective distance and avoid heavy motion that makes the route feel unstable. Reduced-motion users should get instant navigation or a brief fade.

Common Mistakes

• Using depth motion as fake loading delay.
• Letting the previous page remain visually dominant after the destination is ready.
• Forgetting focus restoration after the route changes.
• Making the perspective shift so strong that the destination feels hard to track.