Framer Motion’sDocumentation 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.
motion.* components are the engine behind every animated moment in Full Moon — from the moon slowly rising above the horizon to letters crystallising out of a blur, from a perfectly-tracked custom cursor to sigil lines drawing themselves across the screen. This page catalogues every animation pattern in the project, including the exact easing curves, durations, and prop shapes used, so you can extend or replicate them consistently.
Page Transitions
Every page in Full Moon is wrapped in a<motion.main> element that fades in on mount and fades out on unmount. This gives every route change a smooth 0.5-second cross-dissolve rather than an instant swap.
The
exit prop only fires when the component is removed from the React tree. For this to work, the router must be wrapped in Framer Motion’s <AnimatePresence> component. Without it, exit animations are silently ignored and the page disappears immediately on navigation.<Outlet /> renders the active route’s content. Because the wrapper is a motion.main, all child content inherits the fade — no per-page setup is required for basic transition coverage.
Home Page Entrance Sequence
The home page runs a four-step staggered entrance that plays out over roughly four seconds. Each element is timed to appear after the previous one has established itself, building a sense of ceremony.Step 1 — Moon rises from below
A largeMoonSVG is wrapped in a motion.div that translates up from 100 px below its resting position while fading in:
easeOut curve means the moon decelerates as it settles into position, mimicking a real celestial rise.
Step 2 — Title letters blur in (per-character stagger)
Each character of the heading is wrapped in its ownmotion.span. A blur(10px) CSS filter creates a ghostly materialisation effect as each letter sharpens into focus:
index × 0.15s, so the first letter starts at 0s and the last letter (index 12) starts at 1.8s. Space characters are replaced with a non-breaking space (\u00A0) to preserve word spacing — without this, inline-block spans collapse whitespace.
Step 3 — Subtitle fades up
Once the title is nearly complete, the subtitle paragraph fades up from 20 px below:Step 4 — CTA button appears
Finally, the call-to-action button fades in with no vertical movement — a pure opacity transition at delay 3.5s:SVG Animations
Two of the three SVG components include Framer Motion-driven animations. The table below summarises each:| Component | Animation | Duration | Trigger |
|---|---|---|---|
| CandleSVG flame | Scale / rotate / opacity keyframes | 0.5s, repeat: Infinity | Always active when lit={true} |
| SigilSVG draw | pathLength 0 → 1 | 2s easeInOut | On mount when draw={true} |
| MoonSVG | None (static SVG with CSS glow filter) | — | — |
Cursor Animations
Full Moon replaces the system cursor with a three-layer custom cursor, each layer using a different motion profile to create depth and personality.Layer 1 — Glow orb (lags behind)
A large semi-transparent orb that trails the cursor slightly, giving the impression of a luminous wake:backOut easing causes the orb to overshoot the target position slightly before settling, adding a springy organic feel even though the transition is a fixed-duration tween rather than a true spring.
Layer 2 — Precision dot (instant)
A small solid dot that tracks the exact pointer position with zero lag — this is the functional cursor replacement:duration: 0 makes the transition instantaneous, so the dot is always exactly under the pointer.
Layer 3 — Particles (burst on interaction)
Small particles that spawn at the cursor position and drift upward while fading and expanding. Each particle uses a unique randomy and x offset:
opacity: 0.6, scale: 1 to fully transparent and three times their original size while drifting upward, creating a dissolving sparkle trail.