Radial Slice Transition

Overview

Radial Slice Transition turns a route change into a graphic cut. The page does not fade away; it slices open.

Use Radial Slice Transition when circular geometry belongs to the brand system and route changes need a brief, memorable handoff. It fits campaign pages, portfolios, launch sites, and editorial journeys where navigation can carry a little visual identity. The page job is continuity: the user should feel the route change without waiting for it.

The production risk is delay. Page transitions become irritating when they pretend to be loading states or run every time a visitor tries to move quickly. The slice should be short, tied to real route change, and respectful of reduced motion.

(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 campaign microsite can use Radial Slice Transition between short editorial routes where the brand already uses circular or sliced geometry. The outcome is continuity: navigation feels designed into the system without making the destination wait.

Best Used For

• Campaign and portfolio sites where radial motion matches the visual language.
• Short route trees where navigation frequency is low enough for a designed cut.
• Brand pages that need a transition with more edge than a fade but less weight than WebGL.

Not For

Not for apps, docs, checkout, search, dashboards, or flows where fast navigation is the main feature.

Not for routes where users bounce between pages repeatedly and would see the same slice too often.

Performance Budget

Keep duration short, avoid fake loading delays, animate transforms and masks with restraint, and do not block interactivity after the destination is ready.

Accessibility and Mobile

Restore focus to the destination main region or heading after navigation. On mobile and reduced motion, use instant navigation or a brief fade instead of full-screen radial movement.

Common Mistakes

• Using Radial Slice Transition as a fake preloader.
• Letting the slice run after the next route is already usable.
• Forgetting focus restoration after navigation.
• Making the segments so complex that the transition feels heavier than the page.