git404hub

what is routeveil fr?

milkevich/routeveil — explained in plain English

Analysis updated 2026-05-18

26TypeScriptAudience · developerComplexity · 3/5Setup · moderate

tl;dr

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.

vibe map

mindmap
  root((repo))
    What it does
      Cinematic page transitions
      Five-step animation sequence
      No animation code in pages
    Transitions
      Page transitions
      Overlay transitions
      Cursor-aware effects
    Tech stack
      TypeScript
      React Router
      Portals
    Use cases
      Polished web app navigation
      Interactive demos
      Custom transition effects
    Audience
      React developers
      Frontend designers

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

what do people make with this?

VIBE 1

Add smooth fade, slide, or blur transitions when users navigate between pages in a React Router app.

VIBE 2

Preview transition effects without actually changing the URL for an interactive showcase or demo.

VIBE 3

Keep headers and footers stable while only the main content area animates during page changes.

VIBE 4

Register custom transition effects to create a unique visual style for your web app navigation.

what's the stack?

TypeScriptReact RouterReactPortals

how it stacks up fr

milkevich/routeveil7etsuo/anvilantonp29/sylvasigner
Stars262626
LanguageTypeScriptTypeScriptTypeScript
Setup difficultymoderatemoderatemoderate
Complexity3/53/53/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

how do i run it?

Difficulty · moderate time til it works · 30min

Requires an existing React Router application and familiarity with wrapping routes and using custom link components or programmatic navigation hooks.

No license information was provided in the explanation, so the terms of use are unknown.

in plain english

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.

prompts (copy fr)

prompt 1
I have a React Router app and want to add cinematic page transitions using Routeveil. Show me how to wrap my routes with RouteveilView and use a custom link component with a fade transition.
prompt 2
How do I use Routeveil to preview an overlay transition like iris or tunnel without actually navigating to a new URL?
prompt 3
I want to keep my header and footer persistent while animating only the main content area in React Router. How do I set this up with Routeveil?
prompt 4
Show me how to register a custom transition effect in Routeveil and use it with cursor-aware animation that radiates from where the user clicked.

Frequently asked questions

what is routeveil fr?

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.

What language is routeveil written in?

Mainly TypeScript. The stack also includes TypeScript, React Router, React.

What license does routeveil use?

No license information was provided in the explanation, so the terms of use are unknown.

How hard is routeveil to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is routeveil for?

Mainly developer.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.