Routeveil
Adds smooth, movie-like transitions between pages in a React app — instead of the page just snapping instantly to the next screen.
🔗 Visit Routeveil
Description
Native page navigation in most React apps is instant and a little jarring — one screen disappears and another appears with no visual continuity. Routeveil is a library that adds proper animated transitions between routes, the kind of polish you normally see in native mobile apps or high-end marketing sites, without having to hand-build the animation logic yourself.
It's an open-source npm package for React Router that supports both scoped page transitions (via a RouteveilView component) and full-screen overlay transitions with typed, transition-specific options. It ships 20 built-in transitions covering both page and overlay types, supports cursor-aware radial effects that animate outward from where the user clicked, lets you preview a transition without actually navigating, and offers a custom transition registry for building your own. Routeveil manages the whole transition lifecycle automatically: animate the current route out, commit the navigation while hidden, wait for the new route to render, animate it in, then restore interactivity. It respects reduced-motion accessibility settings and handles native browser behavior correctly for external links and modifier-key clicks (so cmd/ctrl-click to open in a new tab still works as expected). It requires React 18+, React DOM 18+, and React Router DOM 6.27.0+.
💬 Our review
The short version: if your React app uses React Router and pages just cut instantly from one to the next, Routeveil is a drop-in way to add the kind of transition polish that usually requires a dedicated animation engineer, and having 20 built-in transitions plus a custom registry means you're not stuck with one look.
Compared to building transitions yourself with Framer Motion or React Transition Group directly, Routeveil is more opinionated and route-transition-specific — it handles the full lifecycle (exit, commit navigation while hidden, enter, restore interaction) so you don't have to coordinate that timing manually, at the cost of being tied specifically to React Router rather than working with any routing setup. It correctly handles two details that are easy to get wrong by hand: respecting reduced-motion accessibility preferences and not breaking native behavior for external links or modifier-key clicks. At 41 GitHub stars it's a small but real open-source project — worth adopting if you're already on React Router and want route transitions without building the state machine yourself, though for apps not using React Router specifically, a more general animation library like Framer Motion remains the more portable choice.
💰 Pricing
📊 Global score
🤖 AI-enriched data
Gratuit, licence open source (npm)
Pros
20 transitions intégrées, page et overlay
Gère tout le cycle de vie de la transition automatiquement
Effets radiaux qui suivent le clic de l'utilisateur
Respecte les préférences d'accessibilité (reduced-motion)
Gratuit et open source
Cons
Spécifique à React Router, pas portable vers d'autres routeurs
Projet encore modeste en communauté (41 étoiles GitHub)
Nécessite React 18+ et React Router DOM 6.27+