Skip to main content

Documentation Index

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

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

The 404 page transforms a dead URL into an on-brand tombstone moment. Visitors who wander into an unknown route see a stone grave marker engraved with “404 / RIP this URL / It’s dead, Jim.” and a single button offering to return to safety. When Haunt Mode is active, a GhostIcon rises from the grave in a looping float-and-fade animation, turning an error state into part of the experience rather than an interruption.

​
Route

/*   (React Router catch-all)
The path="*" route in React Router is a catch-all that matches any URL not handled by a more specific route. It is registered last in the <Routes> block so it only activates when no other route matches.

​
Tombstone Design

The tombstone is a <div> styled to look like a classic rounded-top headstone: 
<div className="w-64 h-80 bg-haunt-tombstone rounded-t-full border-8 border-haunt-tombstoneDark
                flex flex-col items-center justify-center p-8 shadow-2xl relative z-10">
  <h1 className="font-spooky text-6xl text-haunt-dark mb-4 opacity-50">404</h1>
  <h2 className="font-spooky text-2xl text-haunt-dark mb-8">RIP this URL</h2>
  <p  className="text-haunt-dark/80 text-sm font-bold">It's dead, Jim.</p>
</div>
PropertyValueEffect
rounded-t-fullFull-radius top cornersCharacteristic tombstone arch
bg-haunt-tombstoneMuted grey-greenWeathered stone colour
border-8 border-haunt-tombstoneDarkThick darker borderCarved-edge depth
opacity-50 on <h1>50 % opacityFaded-inscription look for “404”

​
Shadow Base

A separate dark ellipse is placed absolutely at the base of the tombstone to simulate the shadow cast on the earth: 
<div className="absolute -bottom-4 -left-8 -right-8 h-8 bg-haunt-dark rounded-full z-20 opacity-80" />
It is slightly wider (-left-8 -right-8) and sits below the stone (-bottom-4) to look like the tombstone is half-buried.
To customise the epitaph, edit the three text strings inside the tombstone <div>: the <h1> (“404”), the <h2> (“RIP this URL”), and the <p> (“It’s dead, Jim.”). All three use font-spooky (h1/h2) or bold body text (p) and the text-haunt-dark colour family, so replacements will inherit the stone-engraved style automatically.

​
Floating Ghost (Haunt Mode)

When isHaunted is true, a GhostIcon animates upward from the centre of the tombstone and fades in and out in a continuous loop: 
{isHaunted && (
  <motion.div
    initial={{ y: 0, opacity: 0 }}
    animate={{ y: -150, opacity: [0, 1, 0] }}
    transition={{ duration: 4, repeat: Infinity, ease: 'easeInOut', delay: 1 }}
    className="absolute top-1/2 left-1/2 -translate-x-1/2 z-0 text-haunt-moon"
  >
    <GhostIcon className="w-16 h-16" />
  </motion.div>
)}
PropValueMeaning
initial.y0Starts at tombstone centre
animate.y-150Rises 150 px upward
animate.opacity[0, 1, 0]Fades in, holds, fades out
transition.duration4 sFull cycle takes 4 seconds
transition.repeatInfinityLoops forever
transition.delay1 sPauses 1 second before first rise
The ghost sits at z-0, behind the tombstone stone face (z-10) and the shadow base (z-20), so it appears to pass through the stone rather than in front of it — as a ghost should. If Haunt Mode is disabled the ghost element is not rendered at all, keeping the 404 page clean and non-distracting for visitors who prefer the toned-down experience.

​
”Flee Back to Safety” Button

Below the tombstone group, a <Link> component routes the visitor back to the homepage: 
<Link
  to="/"
  className="mt-12 px-6 py-3 bg-haunt-moon/20 text-haunt-moon rounded-full
             hover:bg-haunt-moon/40 transition-colors border border-haunt-moon/50"
>
  Flee back to safety
</Link>
The pill-shaped button (rounded-full) uses the site’s teal moon colour at low opacity, brightening on hover — consistent with the ghost-UI buttons found elsewhere in the portfolio.

Build docs developers (and LLMs) love

Get started for freeTalk to us