Skip to main content

Documentation Index

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

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

Full Moon’s visual experience depends on multiple independent layers rendering simultaneously — a fog overlay, an animated starfield, a floating navigation bar, and a custom cursor that always stays on top. The Layout component is the single place where all of these layers are assembled, stacked in a deliberate z-index order, and wrapped in the page-transition animation that plays on every route change.

​
Layout Component Source

The Layout component is a thin composition layer. It renders two fixed background layers, the cursor, the navigation, and then a Framer Motion <main> element that fades in and out with each route. 
import { j as e, m as i } from "../assets/proxy.js";
import { C as t } from "./Cursor.js";
import { N as s, O as a } from "./Navigation.js";

function m() {
  return e.jsxs("div", {
    className: "min-h-screen bg-midnight-base text-witch-teal-glow relative overflow-hidden",
    children: [
      e.jsx("div", { className: "fixed inset-0 bg-fog pointer-events-none z-0" }),
      e.jsx("div", { className: "fixed inset-0 starfield pointer-events-none z-0" }),
      e.jsx(t, {}),   // <Cursor />
      e.jsx(s, {}),   // <Navigation />
      e.jsx(i.main, {
        initial: { opacity: 0 },
        animate: { opacity: 1 },
        exit: { opacity: 0 },
        transition: { duration: 0.5 },
        className: "relative z-10 min-h-screen flex flex-col",
        children: e.jsx(a, {})  // <Outlet />
      })
    ]
  });
}
export { m as L };
<Outlet /> is the React Router slot where the active page component renders. Because Layout owns the <motion.main> wrapper, every page benefits from the fade transition automatically — individual page components do not need to declare their own entry/exit animations.

​
Layer Stack

Each visual layer occupies a specific z-index tier so that background effects never overlap interactive content, and the custom cursor always floats above everything else.
Layerz-indexClass / ComponentDescription
Background fog0bg-fogFixed full-screen CSS fog overlay, always behind all content
Starfield0starfieldFixed full-screen animated star field, rendered at the same depth as the fog
Navigationfixed, above content<Navigation>Site nav uses its own fixed positioning and stacks above the page content
Page content10<motion.main>Animated main content area; all page components render inside this element
Cursor100<Cursor>Custom cursor glow element, always rendered above every other layer
Both the bg-fog overlay and the starfield layer carry pointer-events-none. This is essential — without it, those fixed div elements would sit on top of the page and silently swallow every click, tap, and hover event before they could reach any interactive element.

​
Page Transition

The <motion.main> element is powered by Framer Motion and acts as a shared transition wrapper for all pages. It transitions opacity from 0 to 1 on mount and back to 0 on unmount, with a duration of 0.5 seconds: 
initial:    { opacity: 0 }
animate:    { opacity: 1 }
exit:       { opacity: 0 }
transition: { duration: 0.5 }
This produces a clean cross-dissolve effect when navigating between routes. Because the <motion.main> element is declared directly in Layout (outside any individual page component), the fade plays consistently on every navigation event without any per-page configuration. For exit animations to fire correctly, the page must be wrapped in Framer Motion’s <AnimatePresence> at the router level. Ensure <AnimatePresence mode="wait"> wraps the <Routes> component so the outgoing page fully fades out before the incoming page fades in.

​
Root Classes

The outermost div in Layout carries four Tailwind utility classes that establish the global visual baseline for the entire application: 
<div class="min-h-screen bg-midnight-base text-witch-teal-glow relative overflow-hidden">
ClassEffect
min-h-screenEnsures the root container is always at least the full viewport height, preventing a collapsed layout on short pages
bg-midnight-baseApplies the #0a0e1a deep navy background as the canvas behind every layer
text-witch-teal-glowSets the inherited default text color to #2dd4bf teal across the entire app
relativeEstablishes a positioning context so that child elements using absolute or fixed positioning are anchored correctly
overflow-hiddenClips any atmospheric effects or animations that extend beyond the viewport boundary, keeping the layout clean

Build docs developers (and LLMs) love

Get started for freeTalk to us