Skip to main content

Documentation Index

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

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

Layout is the application shell that every page in Fortune Seeker is rendered inside. It composes the four global UI layers — custom cursor, animated star background, ambient candle flames, and slide-in navigation — then wraps the routed page content in a Framer Motion <main> with a page-transition animation. A radial vignette overlay is applied on top of everything to focus attention toward the center of the screen. Layout accepts a single children prop and is already wired up in the application router.

​
Props

​
children
ReactNode
required
The page content to render inside the animated <main> element. In the Fortune Seeker router this is always the currently matched route component.

​
Usage Example

import Layout from "@/components/Layout";
import HomePage from "@/pages/HomePage";

// Typical router-level usage
export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route
          path="/*"
          element={
            <Layout>
              <Routes>
                <Route path="/" element={<HomePage />} />
                {/* additional routes */}
              </Routes>
            </Layout>
          }
        />
      </Routes>
    </BrowserRouter>
  );
}

​
Composition

Layout renders the following components in document order:
OrderComponentPurpose
1<CustomCursor />Replaces the OS cursor with a glowing gold dot and sparkle effects.
2<Starfield />Full-viewport canvas star background fixed behind all content.
3<CandleFlame position="bottom-left" />Ambient flickering candle at the bottom-left corner.
4<CandleFlame position="bottom-right" />Ambient flickering candle at the bottom-right corner.
5<Navigation />Fixed hamburger trigger and slide-in route drawer.
6<AnimatePresence mode="wait">Framer Motion wrapper enabling page-exit animation before the next page mounts.
7<motion.main>Animated page content container (see Page Transition below).
8Vignette overlaypointer-events-none radial gradient from transparent center to near-black edges.

​
Page Transition

The <motion.main> element uses React Router’s useLocation().pathname as its Framer Motion key. Changing routes triggers a full unmount-and-remount cycle governed by AnimatePresence mode="wait", ensuring the outgoing page finishes its exit before the incoming page begins its entrance. Enter:
  • opacity: 0, filter: blur(10px), scale: 0.95 → opacity: 1, filter: blur(0px), scale: 1
  • Duration: 0.6s, easing: [0.22, 1, 0.36, 1] (a custom cubic bezier approximating an easeOutExpo curve)
Exit:
  • opacity: 1, filter: blur(0px), scale: 1 → opacity: 0, filter: blur(10px), scale: 1.05
  • The slight scale-up on exit (1.05) combined with the blur creates the impression that the page dissolves into the mist before the next one materializes.

​
Base Styles

The outermost div in Layout applies the following global styles to the page:
  • min-h-screen — ensures the shell never collapses on sparse pages.
  • bg-midnight — the deep near-black background color (#0a0a1a).
  • text-gray-300 — default body text color.
  • selection:bg-velvet selection:text-gold — custom text-selection colors matching the divination palette.
The <motion.main> is given z-index: 10 (z-10) to sit above the Starfield canvas and CandleFlame elements (both at z-index: -1 and z-index: 0 respectively) but below the vignette overlay (z-40) and CustomCursor (z-100).
To add a new globally-present UI element — such as a footer, a sound toggle, or a theme switcher — add it as a sibling to <motion.main> inside the outermost div. Avoid placing new elements inside <AnimatePresence> unless they should also participate in the page-transition animation.

Build docs developers (and LLMs) love

Get started for freeTalk to us