Transitions
Use a preset or write your own from variant styles. One definition covers push, pop and swipe back.
React screen router
Screens that move like apps.
Push, pop, swipe back and shared elements, from one router. Every transition compiles to CSS, and swipe back moves it with your finger.
$ npm i @flemo/react
Tap a show. Swipe from the left edge to go back.
Tonight
Live near you
Idleaperture
Duration500ms
Quick start
A native stack in one file.
Declare routes, wrap each one in a Screen, and push. The transition you choose handles the rest.
App.tsx
import { Route, Router, Screen, useNavigate } from "@flemo/react";export default function App() { return ( <Router> <Route path="/" element={<Home />} /> <Route path="/places/:id" element={<Place />} /> </Router> );}function Home() { const navigate = useNavigate(); return ( <Screen> <button onClick={() => navigate.push( "/places/:id", { id: "kyoto" }, { transitionName: "material" } ) } > Kyoto </button> </Screen> );}Building blocks
Every piece of a native transition.
Screens, the headers and tab bars around them, and the elements that move between them. Every demo below is live.
Swipe back
The screen follows your finger. When you let go, the transition finishes on the same easing it uses for a tap.
Open a place, then drag from the edge.
Places
Saved for later
Morph
Give two elements the same layoutId, and the element on the new screen animates from where the old one was.
<Morph layoutId>Places
Saved for later
Part
A shared header stays in place while its title and buttons change on each screen.
sharedTopBar + <Part>JH
Places
Nested routers
A tab, a sheet or a pane can own its own stack, with or without the URL.
Layer
Menus and sheets render above every screen and shared header, and animate with the screen transition.
Typed routes
Register your paths once, and TypeScript checks every push and its params.
Under the hood
Built to be measured.
flemo is tuned against screen recordings on real devices, not against a timeline in DevTools.
CSS
Compiled to CSS
Transitions compile to keyframes once, so the browser runs the animation instead of a per-frame script.
Synced
Shared timing
Parts, the dim and Morphs use the screen transition's duration by default, so nothing falls out of step.
1:1
Follows your finger
While you swipe, the screen stays exactly under your finger. When you let go, it finishes from that spot with the same animation a tap plays, so nothing jumps.
rec
Transition recorder
@flemo/devtools records every transition and flags problems while you develop. None of it ships to production.
In production
shiflo runs on flemo.
A React Native shift calendar whose whole UI is a web app in a WebView. Every push, pop and swipe back is flemo.
Start with one Router.
Install the package, read the ten-minute guide, and push your first screen.