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.

Mystery Haunting layers two animation systems: Framer Motion handles all route-level transitions and interactive component gestures, while Tailwind CSS provides looping utility animations for ambient effects like floating ghosts and rising bubbles. Understanding which system drives each effect makes it straightforward to tune, replace, or disable any animation in the site.
The distributed GitHub repository contains only the compiled output of Mystery Haunting. Animation configuration — Framer Motion variants, whileHover props, and Tailwind keyframes — lives in the original source files (src/ components and tailwind.config.js), which are not included in the distributed repo. The code examples below are reference templates showing what the source looks like. To modify any animation, obtain or fork the original source project and work from there.

​
Page Transition: 3D Book-Flip

Every route change plays a rotateY “book-flip” effect. The variants object that drives it lives directly in the Layout component: 
const pageVariants = {
  initial: {
    opacity: 0,
    rotateY: -90,
    transformPerspective: 1200,
    transformOrigin: 'left center'
  },
  in: {
    opacity: 1,
    rotateY: 0,
    transition: { duration: 0.8, ease: 'easeOut' }
  },
  out: {
    opacity: 0,
    rotateY: 90,
    transformOrigin: 'right center',
    transition: { duration: 0.8, ease: 'easeIn' }
  }
};
To replace the book-flip with a simpler fade, swap the variants object with the following: 
const pageVariants = {
  initial: { opacity: 0 },
  in: { opacity: 1, transition: { duration: 0.4 } },
  out: { opacity: 0, transition: { duration: 0.3 } }
};
Reduce the duration values to make transitions feel snappier. Set duration: 0 on both in and out to disable page transitions entirely while keeping the AnimatePresence wrapper in place.

​
Tailwind Animation Utility Classes

Ambient looping animations are defined as Tailwind utilities in tailwind.config.js under extend.animation and extend.keyframes. They are applied as class names directly on JSX elements.
ClassEffectWhere Used
animate-float-ghostFloating up/down loopGhost icons on the landing page and projects page
animate-bubbleRising bubbles loopSkills potion hover effect
animate-pulseStandard CSS pulseGlowing windows on decorative house elements
text-glow-tealNeon teal text shadowActive nav links, section headings
To disable any of these effects, remove the class from the relevant JSX element. To change the timing or easing of animate-float-ghost or animate-bubble, update the corresponding @keyframes definition and animation shorthand in the Tailwind config, then rebuild.

​
Framer Motion whileHover Animations

Individual cards and interactive elements use Framer Motion’s whileHover prop for gesture-driven micro-animations:
  • Projects — Cards lift and rock on hover: 
    whileHover={{ y: -10, rotate: [-1, 1, -1, 0] }}
  • Skills — Potion bottles scale up and wobble: 
    whileHover={{ scale: 1.1, rotate: [0, -5, 5, 0] }}
  • Blog books — Book spines leap forward with a teal glow: 
    whileHover={{ y: -20, rotate: -5, boxShadow: '0 0 20px rgba(45,212,191,0.5)' }}
Each of these can be tuned by adjusting the numeric values, or removed by deleting the whileHover prop from the component.

​
Scroll-Triggered Animations

Work history cards use Framer Motion’s whileInView prop combined with viewport={{ once: true }} so each card animates in once as the user scrolls down the page and does not replay on subsequent scrolls. Apply the same pattern to any new section you add to preserve visual consistency: 
<motion.div
  initial={{ opacity: 0, y: 40 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true }}
  transition={{ duration: 0.5 }}
>
  {/* card content */}
</motion.div>
All Framer Motion configuration is written inline in the JSX source. There is no separate animation config file. To modify any motion effect, edit the source component and run npm run build to recompile.

Build docs developers (and LLMs) love

Get started for freeTalk to us