Skip to main content

Documentation Index

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

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

SpellCircle is the centrepiece of the portfolio’s home (/) route. It renders a large square div (max-width 2xl, 1:1 aspect ratio) centred in the hero section and fills it with a Framer Motion–animated SVG that draws itself stroke-by-stroke before unveiling the site owner’s name and title. The component takes no props — it is self-contained and purely decorative/introductory.

​
Visual Structure

The SVG viewport is fixed at 400 × 400 with a drop-shadow filter that emits a soft turquoise glow (rgba(64,224,208,0.4)). Inside it, four elements are sequentially drawn:
LayerElementColorNotes
1Outer circle (r=180)#40E0D0 (60% opacity)Solid stroke, strokeWidth=2
2Inner dashed circle (r=160)#008080strokeDasharray="10 5", strokeWidth=1
310-pointed star polygon#40E0D0 (80% opacity)strokeWidth=1.5, fill none
4Five anchor nodes#40E0D0 stroke / #0f0c29 fillr=6, spaced 72° apart at r=180

​
Animation System

The component uses a single Framer Motion variants object applied to every motion.* SVG element via the custom prop: 
const variants = {
  hidden: { pathLength: 0, opacity: 0 },
  visible: (custom) => {
    const delay = 1 + custom * 0.5;
    return {
      pathLength: 1,
      opacity: 1,
      transition: {
        pathLength: { delay, type: "spring", duration: 3, bounce: 0 },
        opacity:   { delay, duration: 0.5 },
      },
    };
  },
};
Each element receives a numeric custom value (0–4+) that staggers its draw delay. The full circle completes first, then the dashed ring, then the star, then each of the five nodes in quick succession. After all SVG elements are drawn (approximately 3.5 s), the central text block fades in and de-blurs: 
// Center text entrance
initial: { opacity: 0, scale: 0.9, filter: "blur(10px)" }
animate: { opacity: 1, scale: 1,   filter: "blur(0px)"  }
transition: { delay: 3.5, duration: 1.5, ease: "easeOut" }
The text renders two lines:
  • <h1> — "Morgana Ash" in font-serif, size 5xl/7xl, text-parchment, with a text-glow utility class
  • <p> — "Creative Developer & Digital Alchemist", text-turquoise, uppercase, wide letter-spacing

​
Usage in Context

SpellCircle is composed inside the HeroSection helper in main.js. Four Candle components are absolutely positioned around it as atmospheric decoration: 
// From main.js — HeroSection
<div className="flex-1 flex items-center justify-center relative w-full px-4">
  {/* Ambient candles scattered around the circle */}
  <div className="absolute inset-0 overflow-hidden pointer-events-none">
    <Candle className="absolute top-20 left-[15%] opacity-60 scale-75"   delay={0}   />
    <Candle className="absolute top-40 right-[20%] opacity-80 scale-90"  delay={1.2} />
    <Candle className="absolute bottom-32 left-[25%] opacity-70 scale-110" delay={0.5} />
    <Candle className="absolute bottom-40 right-[15%] opacity-50 scale-75" delay={2.1} />
  </div>
  <SpellCircle />
</div>
SpellCircle has no interactive states — it is a purely presentational entrance animation. It renders once on mount and does not reset on re-render.

​
Implementation Notes

  • The SVG initial="hidden" / animate="visible" pair is set on the motion.svg parent, which propagates the variant context to every motion.circle, motion.polygon, and motion.circle child.
  • The five anchor nodes are generated with an .map() over [0, 72, 144, 216, 288] degrees, converting each to radians to compute (cx, cy) coordinates on the r=180 circumference.
  • pointer-events-none is set on the surrounding hero div so the candles behind the circle never intercept mouse events.

Build docs developers (and LLMs) love

Get started for freeTalk to us