Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/sorcerer/llms.txt

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

The home page is the first incantation visitors witness — a full-viewport hero that combines a continuously rotating Elder Futhark runic circle, a staggered letter-reveal title, and a delayed tagline rise. All motion is handled by Framer Motion, keeping the experience smooth and GPU-accelerated. A CandleDivider component marks the transition from the hero into whatever content follows below the fold.

​
What It Shows

The centrepiece is a 600×600 SVG runic circle that spins endlessly in place. Around its outer ring sit all 24 Elder Futhark runes — ᚠᚢᚦᚨᚱᚲᚷᚹᚺᚾᛁᛃᛇᛈᛉᛊᛏᛒᛖᛗᛚᛜᛟᛞ — evenly distributed so that each glyph faces outward from the centre. Two overlapping pentagons are drawn inside the circle, creating a layered geometric sigil effect. Overlaying the circle, the name ALEX WEAVER appears one letter at a time. Each character starts invisible and blurred, then resolves into crisp, light-coloured text. Once every letter is visible, the tagline FULL STACK SORCERER fades and slides up from below. Beneath both, an italic quote reads:
“Crafting digital incantations and weaving webs of logic in the midnight hours.”
At the very bottom of the hero section the CandleDivider component renders a decorative row of candle SVGs that separates the hero from the rest of the page.

​
Animation Details

​
Runic Circle Rotation

The outer SVG <g> element is wrapped in a Framer Motion motion.g and driven by an animate.rotate value that cycles from 0 to 360 degrees forever: 
// Framer Motion config for the runic ring
<motion.g
  animate={{ rotate: 360 }}
  transition={{
    duration: 60,      // one full rotation every 60 seconds
    repeat: Infinity,  // loop forever
    ease: "linear",    // constant speed — no easing
  }}
  style={{ transformOrigin: "300px 300px" }} // pivot at SVG centre
>
  {runes.map((rune, i) => (
    <text
      key={rune}
      x={300 + 270 * Math.cos((i / 24) * 2 * Math.PI - Math.PI / 2)}
      y={300 + 270 * Math.sin((i / 24) * 2 * Math.PI - Math.PI / 2)}
      textAnchor="middle"
      dominantBaseline="middle"
      fontSize="18"
      fill="#94a3b8"
    >
      {rune}
    </text>
  ))}
</motion.g>
PropertyValueEffect
duration60One full 360° rotation per 60 s
repeatInfinityLoops without stopping
ease"linear"No acceleration — constant angular velocity

​
Title Letter Stagger

The string "ALEX WEAVER" is split into individual characters. Each character is wrapped in its own motion.span with an incremental delay calculated from its array index: 
{"ALEX WEAVER".split("").map((letter, i) => (
  <motion.span
    key={i}
    initial={{ opacity: 0, filter: "blur(10px)", color: "#2dd4bf" }}
    animate={{ opacity: 1, filter: "blur(0px)", color: "#e2e8f0" }}
    transition={{
      duration: 1,          // each letter takes 1 s to resolve
      delay: i * 0.15,      // stagger: 0 s, 0.15 s, 0.30 s, …
      ease: "easeOut",
    }}
  >
    {letter === " " ? "\u00A0" : letter}
  </motion.span>
))}
The last letter of "ALEX WEAVER" (index 10) finishes its transition at 10 × 0.15 + 1 = 2.5 s, which is exactly when the tagline begins its own entrance.

​
Tagline Entrance

<motion.p
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.8, delay: 2.5, ease: "easeOut" }}
>
  FULL STACK SORCERER
</motion.p>

​
Customizing the Hero

All visible copy in the hero lives directly inside the HomePage component. No external data files are involved — locate HomePage and edit the following three pieces: Name string — the title that animates letter by letter: 
// Before
"ALEX WEAVER".split("").map(...)

// After — replace with your own name
"YOUR NAME".split("").map(...)
Tagline — the subtitle that appears after the name resolves: 
// Before
FULL STACK SORCERER

// After — any short uppercase phrase works well
FRONT END ENCHANTER
Quote — the italic flavour text beneath the tagline: 
// Before
"Crafting digital incantations and weaving webs of logic in the midnight hours."

// After — write your own one-liner
"Your custom quote goes here."
The 24 Elder Futhark runes and the pentagon geometry are purely decorative and need no changes for a typical personalisation. If you do want to swap the rune set, update the array defined just above the HomePage return statement — it must contain exactly 24 single-character strings so the spacing arithmetic stays correct.

Build docs developers (and LLMs) love

Get started for freeTalk to us