Skip to main content

Documentation Index

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

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

GlobalEffects is Mystery Haunting’s ambient atmosphere layer. It is a collection of five independent visual effect components imported from components/GlobalEffects.js and mounted once inside the Layout wrapper. Because they live outside the page-specific motion.div, they persist across every route transition — the effects keep running no matter which section the visitor is viewing.

​
Effects Overview

Each effect is a self-contained React component. All five are rendered inside the outer div.min-h-screen wrapper of the Layout component, before the <nav> element. They are all positioned to cover the full viewport and carry pointer-events: none so they never intercept clicks, taps, or keyboard events destined for the UI beneath them. The five components provide ambient atmospheric effects — including cursor effects, particle effects, and atmospheric overlays. Because the components are distributed as compiled code, their individual internal names are not documented here; they are referenced by their compiled module export identifiers (Cc, Pc, Nc, _c, zc) inside Layout.
SlotDescription
Effect 1 (Cc)Ambient atmospheric effect
Effect 2 (Pc)Ambient atmospheric effect
Effect 3 (Nc)Ambient atmospheric effect
Effect 4 (_c)Ambient atmospheric effect
Effect 5 (zc)Ambient atmospheric effect

​
Positioning and Layering

All five effects use position: absolute or position: fixed combined with pointer-events: none. This guarantees two things:
  1. No interaction blocking — Visitors can click navigation links, buttons, and form fields without the effects intercepting their input.
  2. Full-viewport coverage — Effects extend edge-to-edge behind the sidebar and main content area without affecting document flow.
All effects use a z-index below the <nav> and <main> content layers so they remain visually in the background. The sidebar and page content always render on top of the effect overlays.

​
Placement in the Component Tree

The effects are rendered inside the outer div.min-h-screen wrapper of the Layout component, before the <nav> element. This placement means:
  • They are initialized once when the app mounts, not on every navigation.
  • They are never unmounted during Framer Motion’s AnimatePresence page transitions.
  • They render behind both the sidebar and the main content area.

​
Customization

Each effect is a discrete React component exported from components/GlobalEffects.js. To disable a specific effect, locate its compiled JSX tag in the Layout component’s render output and remove it. To adjust the behavior of an individual effect, edit the relevant component directly in components/GlobalEffects.js. Each effect manages its own animation state and does not share timing or configuration with the others.
To reduce motion for accessibility, consider adding a prefers-reduced-motion media query check before rendering animation-heavy effects. You can use the useReducedMotion hook from Framer Motion inside each effect component to conditionally disable or simplify the animation.
import { useReducedMotion } from 'framer-motion';

export function AmbientEffect() {
  const shouldReduce = useReducedMotion();
  if (shouldReduce) return null;
  // ... full animation
}

Build docs developers (and LLMs) love

Get started for freeTalk to us