Every page in Spooky is wrapped by theDocumentation 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 component, which mounts all atmospheric components automatically. Developers don’t need to add components to individual pages — once the app is running, CandleCursor, Navigation, and JumpScareToggle are always active, and route-level decorations like FlickeringLights, CobwebCorner, GhostMascot, JumpScareSpider, and SwingingLantern appear on every page as part of the theme.
CandleCursor
Animated flame that replaces the default cursor
FlickeringLights
Atmospheric light flicker across the viewport
CobwebCorner
Decorative cobwebs in page corners
GhostMascot
Floating ghost mascot with idle animation
JumpScareSpider
Surprise spider that drops from the top of the screen
SwingingLantern
Swinging lantern decoration
Layout
Root wrapper that composes all components together
Navigation
Slide-in hamburger navigation menu
Component architecture
Layout sits at the top of the render tree and is responsible for mounting the core set of always-on components. Concretely, Layout renders:
CandleCursor— the custom flame cursor, fixed above all other content atz-[9999]Navigation— the site header and slide-in hamburger menuJumpScareToggle— the opt-out button for the jump-scare feature- A Framer Motion
AnimatePresencetransition — wraps the<Outlet />(routed page content) so each route fades in and out with abrightnessfilter transition over 500 ms
FlickeringLights, CobwebCorner, GhostMascot, JumpScareSpider, and SwingingLantern — are rendered either directly inside Layout or as route-level decorations that appear on every page, sitting in the page background layer behind interactive content.
Jump-scare system
JumpScareContext (in assets/JumpScareContext.js) provides a React Context that both JumpScareSpider and JumpScareToggle consume. The context exposes a scaresEnabled boolean and a setter. JumpScareSpider reads scaresEnabled before starting its random interval — if it is false, the spider never appears. JumpScareToggle renders a button in the UI that calls the setter to flip the flag, and persists the user’s preference so the opt-out survives page navigation.
The component JS files in
/components are pre-compiled Vite output. To modify component internals — such as changing the flame colors, the cobweb SVG paths, or the ghost animation — you should work from a fork of the source repository and rebuild with vite build. Editing the compiled output directly is not recommended, as those changes will be overwritten on the next build.