Tilt Transition

ProTransitions3Dpowered by @vectorvesper/motion

A route-transition provider that tumbles the outgoing page away like a card. The incoming route renders underneath immediately while a clone of the old page tilts, spins and falls back through the viewport. Prefetches on hover. Next.js only.

Tilt Transition

Included with membership

Members install Tilt Transition with one command and get the full source, the usage code and the Framer remix, licensed for client work. One membership covers the whole library and the CLI.

When to use it

A site where navigation should feel like handling objects rather than loading documents — a portfolio, a small marketing site. It is an app-level commitment: the provider mounts once and every link routed through it gets the tumble. It is heavier-handed than a fade, so it suits a few destinations rather than a deep site someone navigates repeatedly.

  • Mount the provider once, in the root layout, above everything the tumble should carry.
  • Use TiltLink in place of your router's link — it also prefetches the route on hover and focus, so the incoming page is usually ready before the click.
  • Keep duration near the default; the tumble has two phases and a long one leaves the page spinning in empty space.
  • Read isTransitioning from useTiltTransition if you need to disable a control while a transition is running.

Avoid:

  • Do not mount two providers. Each renders its own overlay and the second one clones a page that is already mid-tumble.
  • Do not use TiltLink for external links — it only intercepts paths starting with a slash, so an external href falls through to a normal navigation with no transition.
  • Do not rely on it for a content-heavy app. The outgoing page is cloned into the overlay, so a very large DOM is duplicated for the length of the transition.
  • Do not mount it inside a container with no height. The wrapper is the 3D stage and the card is positioned against it, so an unsized parent leaves the card nowhere to fall.

Props

Route transitions where the page you are leaving tumbles away like a dropped card. The new route is already rendered underneath before the tumble starts, so the transition never delays the arrival — it plays over a page that has finished loading.

<TiltTransitionProvider />

Wraps the app, owns the 3D stage and runs the tumble. Mount it once, as high as the transition should reach.

PropTypeDefaultDescription
children*React.ReactNode—Your app.
durationnumber0.8Seconds the whole tumble takes. It is split internally — the first 38% tilts the page back, the rest spins and drops it away.
pitchnumber-24Degrees the outgoing page tips back around the horizontal axis at the top of the tilt. Negative leans it away from the viewer.
yawnumber-22Degrees it turns around the vertical axis over the same phase. The second phase carries it on to a half-turn regardless.
glassColorstring"#94a3b8"Colour of the glow around the tumbling card, as a hex value. It is used for the shadow's tint, not for a surface, so a saturated colour reads more strongly than you might expect.
backgroundstring"transparent"Surface behind the tumbling card. Usually unnecessary: the card is a clone of the outgoing page and brings that page's own background with it. Set it only if your pages take their colour from outside the provider — from `body`, say — in which case the clone comes out see-through and you watch the incoming page through the departing one.
classNamestring""Appended to the wrapper. The wrapper sets no colours of its own, so this is where you put a background or text colour if the transition covers a region that needs its own theme.

<TiltLink />

Use in place of your router's link inside the provider. Takes everything an anchor takes, plus href, and prefetches on hover or focus.

PropTypeDefaultDescription
href*string—Destination route. Only paths beginning with a slash are intercepted; anything else navigates normally.
children*React.ReactNode—Link content.

<useTiltTransition />

hook

Access to the transition from anywhere inside the provider. Returns startTransition, prefetchRoute and isTransitioning — use it to trigger a tumble from something that is not a link, or to disable UI while one runs. Throws if called outside the provider.

It has no reduced-motion state — the tumble runs whatever the visitor prefers. This is full-viewport 3D movement on every navigation, which is exactly what the preference exists to suppress, so gate the provider on the preference yourself if your audience needs it.
The outgoing page is cloned into the overlay for the length of the transition, so the cost scales with how large that page's DOM is. It animates transform and opacity only, which stay off the main thread, but a very heavy page is duplicated in memory while it plays.
The wrapper inherits your palette rather than setting one, so the provider drops into a dark theme unchanged, and the tumbling card is a clone of your own page — it carries your colours with it. The case that needs attention is a page whose background comes from outside the provider, which clones see-through; set background then.
Client component, and Next-only: it reads the app router directly to push the route and to prefetch on hover.
Back to all components