SVG Brush Transition

Overview

SVG Brush Transition turns the cut between routes into a designed moment. A line-drawn mask guides the visitor from one page to the next.

Use SVG Brush Transition on brand sites, portfolios, campaign pages, and editorial journeys where navigation should feel connected. The page job is continuity: the transition should make the change of route feel intentional without making the destination wait for applause.

The production risk is delay. Page transitions become a problem when they pretend to be loading states, trap focus, or run full-screen motion for people who asked for less motion. Mount the transition where route state actually changes, keep it short, restore focus after navigation, and provide an instant fallback.

(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

An illustrated portfolio can use SVG Brush Transition between project pages so each route change feels like part of the visual language. The linework moves briefly, the next page appears, and focus lands where the visitor can continue. The outcome is continuity: the brand gets a crafted navigation moment without slowing the route.

Best Used For

• Illustrated brands where drawn linework already belongs to the design system.
• Portfolio and editorial route changes that should feel crafted but brief.
• Small navigation trees where the transition supports orientation instead of hiding latency.

Not For

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

Not for routes where visitors navigate repeatedly and would resent the same flourish every few seconds.

Performance Budget

Keep duration short, avoid artificial route delays, animate SVG properties with restraint, and do not block interactivity after the destination route is ready. A transition that overstays its welcome is just a branded door in the user’s face.

Accessibility and Mobile

Move focus to the destination main region or heading after navigation. Respect reduced-motion preferences with instant navigation or a short fade. On mobile, reduce mask complexity and avoid full-screen linework that delays orientation.

Common Mistakes

• Using SVG Brush Transition as fake loading delay.
• Forgetting focus restoration after navigation.
• Running full-screen motion for reduced-motion users.
• Making the SVG linework too complex for a route change that should last under a second.