Skip to main content

Documentation Index

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

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

SummoningCircle is a purely decorative, full-bleed SVG composition that sits behind every other element on the home page. It draws a layered occult diagram — concentric circles, a pentagram, a hexagon, and six rotating glyphs — then spins the entire assembly at a single, slow revolution every 60 seconds. The component functions as Digital Coven’s atmospheric backdrop rather than as an interactive or informational element.

​
Visual Role on the Home Page

SummoningCircle is the first component rendered in the home page stack. Its wrapper is absolute inset-0, meaning it stretches to fill whatever container it lives in without occupying document flow. A z-0 index keeps it beneath all content layers; pointer-events-none ensures it never interferes with clicks or hovers on the cards, terminal, or marquee above it. At opacity-20 the SVG is deliberately dim — visible enough to read as intentional art direction, but subdued enough not to compete with the text hierarchy above it. Home page render order:
PositionComponent
1SummoningCircle
2HeroText
3CardsOfFate
4TerminalStatus
5ProjectMarquee

​
Props

SummoningCircle accepts no props. The SVG geometry, glyph set, color tokens, and animation parameters are all hard-coded inside the component.

​
SVG Geometry

The drawing is contained in a motion.svg with viewBox="0 0 800 800", centred at coordinate (400, 400). All shapes use fill="none" with stroke="currentColor", inheriting the text-electric-purple Tailwind color utility applied to the SVG element itself.

​
Concentric rings

ElementRadiusstrokeWidthNotes
Outer dashed ring3802strokeDasharray="10 5" — dashes
Inner solid ring3601Solid stroke
Inner circle2502Defines the inner boundary

​
Pentagram

A <path> element draws a five-pointed star using five vertices evenly spaced around the 800 × 800 canvas: 
<path
  d="M400 50 L635 773 L17 324 L783 324 L165 773 Z"
  fill="none"
  stroke="currentColor"
  strokeWidth="1.5"
  className="opacity-50"
/>

​
Hexagon

A <polygon> inscribes a six-sided shape between the concentric circles: 
<polygon
  points="400,150 616,275 616,525 400,650 184,525 184,275"
  fill="none"
  stroke="currentColor"
  strokeWidth="1"
  className="opacity-40"
/>

​
Rotating glyph nodes

Six <g> elements are generated by mapping over the degree array [0, 60, 120, 180, 240, 300]. Each group is rotated around the SVG centre point (400, 400) using a transform attribute, placing one glyph at each cardinal/diagonal position on the outermost ring: 
[0, 60, 120, 180, 240, 300].map((degrees, i) => (
  <g key={i} transform={`rotate(${degrees} 400 400)`}>
    <text
      x="400" y="60"
      fill="currentColor"
      fontSize="24"
      textAnchor="middle"
      className="font-display"
    >
      {["⟁", "⨂", "⧋", "⎊", "Δ", "∇"][i]}
    </text>
    <circle cx="400" cy="80" r="5" fill="currentColor" />
  </g>
))
The six glyphs — ⟁ ⨂ ⧋ ⎊ Δ ∇ — are the same occult/mathematical symbols used elsewhere in the Digital Coven UI (navigation icons, section headers, decorative elements).

​
Framer Motion Animation

The motion.svg element itself carries the only animation: a continuous 360-degree clockwise rotation. 
// motion.svg
animate={{ rotate: 360 }}
transition={{
  duration: 60,       // one full revolution per minute
  repeat: Infinity,
  ease: "linear",     // constant angular velocity — no easing
}}
Because ease: "linear" is used, the rotation velocity is perfectly constant with no acceleration or deceleration at the loop boundary. This prevents the subtle “pop” that would occur with eased transitions on repeat: Infinity.
There is no entrance animation — the SVG appears at full (relative) opacity immediately and begins rotating on mount.

​
CSS Classes and Color Tokens

​
Wrapper <div>

absolute inset-0
flex items-center justify-center
pointer-events-none
opacity-20
z-0
overflow-hidden
overflow-hidden clips the corners of the oversized SVG canvas, preventing horizontal scroll on smaller viewports.

​
motion.svg

w-[800px] h-[800px] md:w-[1200px] md:h-[1200px]
text-electric-purple
drop-shadow-[0_0_15px_var(--electric-purple)]
The SVG is deliberately larger than the viewport at the md breakpoint (1200 px wide) to ensure the outer ring bleeds past all screen edges, giving the impression of an infinite occult floor. drop-shadow applies a 15 px blur halo using the --electric-purple CSS custom property, adding the neon glow characteristic of the Digital Coven aesthetic.

​
Interactive Behaviour

SummoningCircle has no interactive behaviour. It is non-clickable (pointer-events-none), plays no sound, and fires no events. The sole motion is the autonomous slow rotation driven by Framer Motion.

​
Usage Example

import { SummoningCircle } from "../components/home/SummoningCircle";

function HomePage() {
  return (
    <div className="relative w-full">
      <SummoningCircle />  {/* ← absolute, z-0, behind everything */}
      <HeroText />
      <CardsOfFate />
      <TerminalStatus />
      <ProjectMarquee />
    </div>
  );
}
The parent container must have position: relative (or any non-static positioning) for the absolute inset-0 wrapper to resolve against it rather than the nearest positioned ancestor higher up the DOM tree.

Build docs developers (and LLMs) love

Get started for freeTalk to us