Routeveil

Routeveil is an open source library that brings sophisticated page transitions and animations to React Router applications without requiring developers to build complex animation infrastructure from scratch. Standard React Router navigation swaps components instantly when users click links or trigger programmatic navigation, which works correctly from a functional standpoint but creates an abrupt user experience where content appears and disappears without visual continuity. Routeveil wraps around React Router to intercept these navigation events and trigger configurable animations during the transition, allowing developers to define effects that execute as users move between routes. The result is smoother, more polished applications where navigation feels intentional and connected rather than a series of jarring page replacements, similar to the experience in native mobile apps or particularly well crafted single page applications.

The library provides per navigation transition control, meaning developers can specify different animations for different route changes rather than applying a single global transition everywhere in the application. A dashboard section might slide in from the right side of the screen while a modal route fades up from center, and a settings page might cross dissolve from the previous view. Returning to a parent route might play the entrance animation in reverse to reinforce the hierarchical relationship. This granularity lets developers match transition style to content relationship, using motion design to reinforce information architecture and help users build mental models of how application sections relate to each other. Typed transition options ensure that the TypeScript compiler catches configuration errors before runtime, which matters when transitions become complex enough that typos or option misconfiguration could produce subtle visual bugs that only appear during specific navigation sequences.

Beyond basic page transitions, Routeveil supports shared element animations coordinated with route changes. A product thumbnail on a listing page can animate directly into the hero image position on the product detail page, creating visual continuity that helps users understand exactly where they are in the application and how they got there. An avatar in a header can smoothly reposition to an expanded profile section. A card in a grid can expand into a full page takeover. These coordinated animations require careful timing to avoid visual glitches where elements appear to duplicate or leave orphaned remnants, and the library handles the complexity of element tracking, position calculation, and animation synchronization internally. Developers define which elements should be treated as shared across routes using straightforward markup, and Routeveil manages the actual animation choreography during navigation.

Full screen overlay effects are included for cases where transitions should completely obscure the underlying content during the changeover period. This is useful for dramatic route changes that represent major context shifts, or when the transition itself carries meaning beyond simply indicating that content is changing. A curtain effect when entering an immersive media section, a radial wipe when transitioning between distinct application modes, or a fade to black between unrelated content areas can all be accomplished with overlay transitions. Programmatic navigation hooks let developers trigger transitions from code rather than requiring user interaction with link elements, important for applications where navigation happens in response to form submissions, timer completions, or other programmatic events.

The library handles practical concerns that frequently trip up custom transition implementations and create subtle bugs. Focus management ensures that keyboard navigation works correctly after transitions complete, preventing accessibility issues where focus gets lost in animated elements or remains stuck on content that's no longer visible. Cleanup for interrupted navigation prevents visual artifacts when users navigate rapidly, clicking multiple links before the first transition finishes or using browser back and forward buttons in quick succession. Support for reduced motion preferences means users who've requested minimal animation through their operating system accessibility settings get appropriately simplified transitions that don't trigger motion sensitivity issues, which is both a usability consideration and increasingly a legal accessibility requirement in many jurisdictions.

Routeveil requires React 18 or 19, React Router DOM version 6.27.0 or later, and a browser supporting the Web Animations API. The Web Animations API requirement covers all modern browsers that developers are likely to target, so this isn't a practical limitation for most projects. The library is completely free under the MIT license with no commercial licensing restrictions, no feature gating based on payment tiers, and no registration requirements. For React developers building applications where polish and user experience matter enough to justify animation complexity, Routeveil provides a structured approach to page transitions that would otherwise require substantial custom development and ongoing maintenance. The open source nature means developers can inspect the implementation details, contribute improvements back to the project, or fork for specialized requirements without vendor dependency or licensing concerns.