The Home page is the first ritual visitors encounter when arriving at Spell Index. It is designed to establish tone immediately — dark, animated, and unmistakably crafted — before the visitor has scrolled a single pixel. Three layered components fire in sequence on load: theDocumentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/spell-index/llms.txt
Use this file to discover all available pages before exploring further.
MoonPhases cycle plays first, then the ConstellationText hero resolves the developer’s name, and finally a short cascade of supporting text fades in. Below the fold, CauldronCanvas provides a second point of engagement that rewards curiosity.
Route
| Nav label | Plain label | Path |
|---|---|---|
| The Summoning | Home | / |
Page structure
The page is divided into two sections, both wrapped in the globalPageTransition component that handles enter/exit animations shared by every route.
Hero section
The upper section occupies at least 80 vh and centres all content both horizontally and vertically. The entrance sequence is fully timed using Framer Motion delays:| Delay | Element |
|---|---|
| 0.2 s | MoonPhases component fades and slides up into view |
| 1.5 s | Sub-label "The Developer Known As" fades in (teal, spaced uppercase) |
| ~1.5–2.5 s | ConstellationText resolves the name ALEXANDER in a star-connecting animation |
| 2.5 s | Tagline paragraph and status line fade in together |
Weaving logic into digital spells. No bugs, just features in disguise. Specializing in front-end alchemy and back-end sorcery.
Status line
Immediately below the tagline, a secondary line of amber italic text reads:Status: Caffeinated and dangerous.
The sidebar navigation also surfaces the status copy beneath the “Spell Index” wordmark as “Currently brewing…” — this is the persistent ambient signal that the developer is actively working on something new.
CauldronCanvas section
A second full-width section sits 32 spacing units below the hero. It renders theCauldronCanvas component — an interactive canvas element that acts as a visual call-to-action and thematic anchor for the portfolio’s “alchemy” identity. This section has a max-width of 5xl (64 rem) and is horizontally centred.
Components used
MoonPhases
Renders an animated sequence of moon phase glyphs. Enters with a
y: 20 slide and opacity fade over 1 second.ConstellationText
Receives
text="ALEXANDER" and draws connecting lines between letter-glyphs like a star constellation resolving on screen.CauldronCanvas
A canvas-based interactive element placed below the fold in a dedicated section, providing a secondary visual focal point.