Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/spooky/llms.txt

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

Layout is the root wrapper that every page in Spooky renders through. Rather than repeating the setup of atmospheric components on each individual page, all shared chrome is declared once in Layout and applied universally. It is responsible for mounting the candle cursor, the navigation menu, the jump-scare toggle, all decorative elements, and the animated route transition that plays on every page change.
The overflow-hidden class on the root div clips cobweb corner decorations and other absolutely-positioned elements to the viewport bounds. This intentionally prevents horizontal scroll caused by decorations that extend beyond the page edges.

​
What Layout renders

Based on components/Layout.js, the component renders the following tree: 
<div className="min-h-screen bg-[#1a1a1d] text-[#f5f5f5] relative overflow-hidden">
  <CandleCursor />
  <Navigation />        {/* the site header and slide-in drawer */}
  <JumpScareToggle />

  <AnimatePresence mode="wait">
    <motion.main
      key={location.pathname}
      initial={{ opacity: 0, filter: 'brightness(0)' }}
      animate={{ opacity: 1, filter: 'brightness(1)' }}
      exit={{ opacity: 0, filter: 'brightness(0)' }}
      transition={{ duration: 0.5, ease: 'easeInOut' }}
      className="min-h-screen"
    >
      <O />             {/* React Router outlet */}
    </motion.main>
  </AnimatePresence>
</div>
Each part plays a distinct role:
  • bg-[#1a1a1d] sets the deep charcoal background that all pages share.
  • text-[#f5f5f5] establishes ghost white as the default text color.
  • <CandleCursor /> replaces the system cursor with an animated candle flame.
  • <Navigation /> renders the hamburger button and slide-in drawer menu.
  • <JumpScareToggle /> renders the fixed bottom-right button for enabling or disabling the spider animation.
  • <AnimatePresence mode="wait"> ensures the exit animation of the leaving page fully completes before the entering page’s animation begins.
  • <motion.main> wraps the active route content and carries the fade-to-black transition. It uses location.pathname as its React key, so every route change produces a new element and triggers a fresh animation cycle.
  • <O /> is the React Router outlet that renders the matched route component.

​
Page transition

The transition produces a fade-to-black effect between every route change: 
initial:    { opacity: 0, filter: 'brightness(0)' }  // enter: black → visible
animate:    { opacity: 1, filter: 'brightness(1)' }  // fully visible
exit:       { opacity: 0, filter: 'brightness(0)' }  // exit: visible → black
transition: { duration: 0.5, ease: 'easeInOut' }
Layout reads the current URL with React Router’s useLocation() and passes location.pathname as the key prop on motion.main. Whenever the pathname changes, React unmounts the old motion.main (triggering the exit animation) and mounts a new one (triggering the initial → animate sequence).

​
Customizing the transition

To change the transition style, modify the initial, animate, exit, and transition props on motion.main. For example, to use a slide-up instead of a fade: 
initial:    { opacity: 0, y: 40 }
animate:    { opacity: 1, y: 0 }
exit:       { opacity: 0, y: -40 }
transition: { duration: 0.4, ease: 'easeInOut' }
To remove the transition entirely, replace motion.main with a plain <main> element and remove the <AnimatePresence> wrapper.

​
Adding a new decoration

All shared decorations follow the same pattern: import the component at the top of Layout.js, then add it as a direct child <Component /> inside the root div, alongside the existing atmospheric elements. Because the root div uses relative overflow-hidden, any fixed or absolutely positioned decoration will be clipped to the viewport automatically. 
// 1. Import the new component
import { MyDecoration } from './MyDecoration.js';

// 2. Add it inside the root div
<div className="min-h-screen bg-[#1a1a1d] ...">
  <CandleCursor />
  <MyDecoration />   {/* ← new decoration */}
  <Navigation />
  ...
</div>

Build docs developers (and LLMs) love

Get started for freeTalk to us