Block Transition

Overview

Block Transition turns the cut between routes into a designed moment: blocks cover and reveal the next route.

Use it on brand sites, campaign pages, portfolios, and editorial journeys where route changes benefit from continuity. Avoid it in apps, docs, checkout, and search paths where navigation speed is the feature.

In production, the risk is delay. Mount the transition where route state actually changes, keep the duration short, restore focus after navigation, and give reduced-motion users an instant or nearly instant path.

Install

Usage

Component Code

Example Production Use Case

Use this as route-transition implementation guidance. Verify the shipped integration point, route-state behavior, focus restoration, cleanup, timing controls, and reduced-motion fallback before relying on exact props, defaults, imports, or installation steps.

Best Used For

• Graphic brand sites where a fast cover-and-reveal cut can make navigation feel intentional.
• Small route trees where transition timing stays short and destination focus is restored.
• Block Transition turns route change into a brief brand moment without delaying orientation.

Not For

Not for apps, docs, checkout, search, or frequently navigated product flows where delay harms completion.

Performance Budget

Keep duration short, avoid artificial route delays, and do not block interactivity after the destination route is ready.

Accessibility and Mobile

Move focus to the destination main region after navigation. On mobile and reduced motion, use instant transitions or short fades.

Common Mistakes

• Using Block Transition as a fake loading delay.
• Forgetting focus restoration after navigation.
• Running full-screen motion for reduced-motion users.