Routeveil

Routeveil is a transition engine for React Router that handles page animations, shared elements, and full-screen overlays. It lets you define per-navigation transitions while keeping your route components clean. The library is TypeScript-native and works with React 18, React 19, and React Router DOM versions 6.27 and above.

The core problem it addresses is that React Router handles navigation but not the visual transitions between routes. You can get from page A to page B, but making that movement feel smooth, with elements that persist across routes or pages that slide in and out, requires custom work. Routeveil provides the infrastructure for those effects without taking over your routing.

The library ships three main components. RouteveilView wraps your route content and manages the transition lifecycle. RouteveilLink replaces your navigation links and triggers the transitions. RouteveilSharedElement marks elements that should animate between routes, connecting them with unique identifiers. When you navigate, the exit animation plays, then shared elements move to their new positions, then the enter animation runs.

Shared element handling is where it gets useful. You mark an element on one page and a matching element on another, and Routeveil figures out how to animate between them. It handles multiple concurrent matches, crossfades between different element types, and gracefully skips missing or duplicate targets. The scroll management keeps incoming shared elements centered without breaking URL hash anchors.

Routeveil also provides programmatic hooks for triggering transitions outside of link clicks, plus deterministic cleanup for interrupted navigation. If a user clicks away mid-transition, it cleans up animations, overlays, and focus state properly. Reduced-motion support is built in for accessibility.

This fits frontend developers building React applications where navigation should feel polished rather than instant. Product pages that share images with listing pages, dashboards with expanding cards, apps where the transition itself communicates structure. The library is MIT licensed, free to use, and distributed through npm.