Add smooth fade, slide, or blur transitions when users navigate between pages in a React Router app.
Preview transition effects without actually changing the URL for an interactive showcase or demo.
Keep headers and footers stable while only the main content area animates during page changes.
Register custom transition effects to create a unique visual style for your web app navigation.
| milkevich/routeveil | 7etsuo/anvil | antonp29/sylvasigner | |
|---|---|---|---|
| Stars | 26 | 26 | 26 |
| Language | TypeScript | TypeScript | TypeScript |
| Setup difficulty | moderate | moderate | moderate |
| Complexity | 3/5 | 3/5 | 3/5 |
| Audience | developer | developer | developer |
Figures from each repo's GitHub metadata at analysis time.
Requires an existing React Router application and familiarity with wrapping routes and using custom link components or programmatic navigation hooks.
Routeveil is a TypeScript library that adds cinematic visual transitions to React Router applications. When a user moves between pages in a web app, Routeveil coordinates a five-step sequence: it animates the current page out, swaps the route while the view is hidden, waits for the next page to render, animates the new page in, and then restores normal interaction. The goal is to give web apps the kind of polished, film-like scene changes usually seen in native mobile apps. The library provides 20 built-in transitions split into two categories. Page transitions, such as fade, blur, slide, spin, and bounce, animate only the main content area. Overlay transitions, such as pixel, curtain, wipe, iris, tunnel, and dissolve, cover the entire screen through a portal attached to the document body. Each transition accepts its own typed set of options, so developers can control direction, color, duration, origin point, and other parameters specific to that effect. Several transitions are cursor-aware, meaning the animation can radiate from where the user clicked. A key design principle is that page components contain no animation code. Developers wrap their routes in a component called RouteveilView, and persistent interface elements like headers and footers can sit outside it so they stay mounted and stable during transitions. Navigation happens through a custom link component or a programmatic hook, both of which accept a transition name and its options on a per-navigation basis. Omitting the transition property falls back to ordinary navigation. Routeveil also supports previewing a transition without actually changing the URL, which is useful for demos or interactive showcases. It respects reduced-motion preferences, handles external links and modifier clicks with native browser behavior, and allows developers to register custom transitions. The public API is imported from a dedicated subpath, and the package root intentionally exposes no runtime entry point. The full README is longer than what was shown.
Routeveil is a TypeScript library for React Router apps that adds cinematic, film-like page transitions when users navigate between pages, with 20 built-in effects and full customization.
Mainly TypeScript. The stack also includes TypeScript, React Router, React.
No license information was provided in the explanation, so the terms of use are unknown.
Setup difficulty is rated moderate, with roughly 30min to a first successful run.
Mainly developer.
This repo across BitVibe Labs
double-check against the repo, no cap.