Skip to main content

Documentation Index

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

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

PageTransition is a wrapper component that plays a short Framer Motion animation whenever a page enters or exits the viewport. It accepts a single children prop and wraps the rendered output in a motion.div that fades, de-blurs, and scales content into view on entry, then reverses the effect on exit. The result is a navigation experience that feels polished and cohesive — each page transition reinforces the artisan theme’s sense of craft — while keeping individual transition durations short enough that no visitor has to wait for content.

​
Design principle

The Artisan Developer theme treats motion as a quality signal rather than entertainment. Page transitions are intentionally short: motion should make the site feel polished but never slow the visitor down or make the interface feel heavy. This philosophy drives every timing decision in PageTransition. The 0.6-second duration is long enough for the eye to register the transition as smooth, and short enough that fast-clicking visitors will not perceive it as a delay.

​
Animation behaviour

PageTransition wraps its children in a motion.div with the following enter, active, and exit states: 
initial: { opacity: 0, filter: "blur(10px)", scale: 0.98 }
animate: { opacity: 1, filter: "blur(0px)",  scale: 1    }
exit:    { opacity: 0, filter: "blur(10px)", scale: 1.02 }
The entry animation brings a page in from slightly blurred and 2% smaller than its final size. The exit animation sends the departing page out slightly enlarged and blurred, creating an asymmetric push–pull feel where incoming pages grow into focus and outgoing pages expand and dissolve. The transition curve is a custom cubic Bézier [0.22, 1, 0.36, 1] — a fast-out-slow-in easing that mimics the natural deceleration of a physical object settling into place. The total duration is 0.6 seconds. A second motion.div child renders a full-viewport overlay using .tie-dye-bg: 
initial: { x: "-100%", borderTopRightRadius: "50%", borderBottomRightRadius: "50%" }
animate: { x: "100%",  borderTopRightRadius: "0%",  borderBottomRightRadius: "0%"  }
transition: { duration: 0.8, ease: "easeInOut" }
This overlay sweeps left-to-right across the screen at 30% opacity with mix-blend-overlay, painting a brief wash of tie-dye colour across the transition. The rounded leading edge (50% border-radius) gives it an organic, brush-stroke quality that then flattens to a straight edge as it accelerates across the screen. This overlay is z-40 and pointer-events-none, so it never blocks interaction. AnimatePresence from Framer Motion manages the lifecycle of both the entering and exiting pages. It keeps the outgoing page mounted and animating out while the incoming page begins its entry animation, ensuring the two animations overlap smoothly rather than cutting between them. The component reads useLocation() from React Router and passes pathname as the key prop to the motion.div. This tells Framer Motion to treat each route as a distinct element, triggering full enter and exit sequences on every navigation event.

​
Usage

PageTransition wraps the content of every route registered in assets/main.js. All nine portfolio pages use it:
  • Home
  • About
  • Projects
  • Skills
  • Work experience
  • Case studies
  • Blog
  • Contact
  • Testimonials
Because the wrapper applies min-h-screen w-full pt-24 pb-12 px-4 md:px-8 directly to the motion.div, page-level padding and minimum height are also handled by the component. Individual page components do not need to re-declare these layout constraints.

​
Accessibility

The theme’s transitions are short enough that they are unlikely to cause discomfort for users who are sensitive to motion. The blur and scale effects stay within a narrow range (10px blur, 2% scale change), and the 0.6-second duration falls well below the threshold that typically triggers vestibular responses. A future enhancement noted in the project README is to add a visible reduced-motion toggle for the heavier decorative animations (such as TieDyeSwirl’s background spin), which would also provide a clear affordance for users who want to disable all motion globally.
To adjust the transition speed, locate the PageTransition component usage in assets/main.js and modify the transition: \{ duration: ... \} value on the outer motion.div. The default is 0.6 seconds. Keep in mind that the tie-dye overlay sweep uses a separate duration: 0.8 on its own transition prop — update both values together to maintain a consistent feel.

Build docs developers (and LLMs) love

Get started for freeTalk to us