Skip to main content

Documentation Index

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

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

PageTransitionBar wraps the page content area inside AppLayout and provides a subtle entrance animation whenever the user navigates between routes. It also renders a thin magenta progress bar that sweeps across the top of the viewport during each navigation, giving immediate visual feedback that a page change is in progress.

​
Props

​
children
ReactNode
required
The page content to animate. PageTransitionBar renders children inside a Framer Motion div keyed to the current pathname, so the animation re-fires on every route change.

​
Animation Behavior

PageTransitionBar uses two separate Framer Motion elements: Page content fade-up — the children wrapper animates on every pathname change: 
initial:    { opacity: 0, y: 10 }
animate:    { opacity: 1, y: 0  }
transition: { duration: 0.3, delay: 0.1 }
This creates a soft upward-fade entrance: content starts slightly below its final position and at zero opacity, then rises into place over 300 ms (with a 100 ms delay to let the progress bar begin first). Top progress bar — a fixed h-1 bar in bg-y2k-magenta is mounted for 300 ms on each navigation and animates its scaleX from 0 to 1: 
initial:    { scaleX: 0 }
animate:    { scaleX: 1 }
exit:       { opacity: 0 }
transition: { duration: 0.3, ease: 'easeInOut' }
The bar is anchored to origin-left, so it sweeps left-to-right across the top of the screen.

​
Usage

PageTransitionBar is applied automatically by AppLayout — you do not need to use it directly in page components: 
// Inside AppLayout — already wired up
<PageTransitionBar>
  {children}
</PageTransitionBar>
Every route rendered through AppLayout receives the transition animation without any additional configuration.

​
Customization

To adjust the transition duration, easing, or starting offset, edit the transition and initial objects in PageTransitionBar.js: 
// Slower, more pronounced entrance
initial:    { opacity: 0, y: 20 }
transition: { duration: 0.5, delay: 0.1 }
Keep the transition duration between 0.2 s and 0.4 s. Shorter durations maintain the snappy, responsive feel appropriate for a portfolio site, while longer durations can make navigation feel sluggish and undermine the Y2K aesthetic’s energetic character.

Build docs developers (and LLMs) love

Get started for freeTalk to us