Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/aurora-drift/llms.txt

Use this file to discover all available pages before exploring further.

PageTransition is a lightweight wrapper component that animates page content in and out whenever React Router changes routes. It uses a Framer Motion motion.div to simultaneously fade, slide, and blur each page — entering from below with a blur dissolve and exiting upward with the same blur. The combined effect produces a cinematic depth-of-field quality that fits the space-portfolio aesthetic of Aurora Drift without requiring any per-page configuration. Wrap every page component with PageTransition and pair it with Framer Motion’s AnimatePresence in your router to enable the effect.

​
Usage

​
1 — Wrap each page

// src/pages/Home.jsx
import { PageTransition } from '../components/PageTransition'

export default function Home() {
  return (
    <PageTransition>
      <h1>Hello, world</h1>
      {/* … page content … */}
    </PageTransition>
  )
}

​
2 — Add AnimatePresence to the router

AnimatePresence must be able to observe the unmounting of the outgoing page, so it must sit above the route switch and receive the current location.key as its key-tracking signal. 
// src/App.jsx
import { AnimatePresence }  from 'framer-motion'
import { Routes, Route, useLocation } from 'react-router-dom'
import Home         from './pages/Home'
import About        from './pages/About'
import Projects     from './pages/Projects'

export default function App() {
  const location = useLocation()

  return (
    <AnimatePresence mode="wait">
      <Routes location={location} key={location.pathname}>
        <Route path="/"        element={<Home />} />
        <Route path="/about"   element={<About />} />
        <Route path="/projects" element={<Projects />} />
        {/* … remaining routes … */}
      </Routes>
    </AnimatePresence>
  )
}
Use mode="wait" on AnimatePresence so the exiting page completes its blur-out before the entering page starts its blur-in. Without it both animations run in parallel, which can look cluttered.

​
Props

​
children
React.ReactNode
required
The page content to animate. PageTransition renders it inside a motion.div that applies the layout classes w-full h-full pt-24 pb-12 px-6 md:px-12 max-w-7xl mx-auto. This centres and constrains the content automatically, so individual pages do not need their own container wrapper.

​
Animation states

The following values are applied directly to the Framer Motion motion.div as initial, animate, and exit props.
Stateopacityyfilter
initial020blur(10px)
animate10blur(0px)
exit0-20blur(10px)
The enter direction is upward (y goes from 20 → 0) and the exit direction is also upward (y goes from 0 → -20), giving the impression of pages stacking along the Z axis.

​
Transition configuration

transition: {
  duration: 0.6,
  ease: [0.22, 1, 0.36, 1],
}
ParameterValueNotes
duration0.6 sTotal time for enter or exit animation
ease[0.22, 1, 0.36, 1]Custom cubic-bézier — fast start, smooth deceleration
The cubic-bézier [0.22, 1, 0.36, 1] is sometimes called an “expo out” curve — it launches quickly and glides to rest. To try different feels: use [0.4, 0, 0.2, 1] for a standard Material ease-in-out, [0, 0, 0.2, 1] for a decelerate-only curve, or the string "easeOut" for Framer Motion’s built-in version.

​
Layout classes

PageTransition applies fixed layout classes to every page it wraps. This means individual page components do not need their own outer container:
ClassEffect
w-full h-fullFills the router outlet
pt-2496 px top padding — clears the fixed Nav bar
pb-1248 px bottom padding
px-6 md:px-1224 px / 48 px horizontal padding at sm / md+
max-w-7xl mx-autoCaps content width at 80 rem and centres it

​
How it works

1

AnimatePresence detects route change

When React Router unmounts the current page (because the URL changed), Framer Motion’s AnimatePresence intercepts the unmount and runs the exit animation before the DOM node is removed.
2

Exit animation plays

The outgoing motion.div transitions from { opacity: 1, y: 0, filter: 'blur(0px)' } to { opacity: 0, y: -20, filter: 'blur(10px)' } over 0.6 s using the custom cubic-bézier.
3

New page mounts

With mode="wait", AnimatePresence waits for the exit to finish before mounting the new page component.
4

Enter animation plays

The new motion.div transitions from { opacity: 0, y: 20, filter: 'blur(10px)' } to { opacity: 1, y: 0, filter: 'blur(0px)' } using the same duration and easing.

Build docs developers (and LLMs) love

Get started for freeTalk to us