Skip to main content

Documentation Index

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

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

RuneCircle is a decorative inline SVG component that renders a layered occult sigil — concentric circles, a hexagram formed from two overlapping triangles, and four cardinal cross marks — and animates each element drawing itself into existence using Framer Motion’s pathLength spring transitions. It is used on the Home page as a large, semi-transparent background glyph positioned behind the hero heading.

​
Props

​
className
string
default:"\"\""
Additional Tailwind CSS classes applied to the outer <div> wrapper. Used to position, scale, and control the opacity of the entire sigil. The SVG itself always fills its container at max-w-md and opacity-80.

​
Usage

The component is used once on the Home page, centered and scaled behind the hero heading: 
import { RuneCircle } from './components/RuneCircle';

<RuneCircle
  className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 scale-150 md:scale-[2] opacity-30 pointer-events-none"
/>
Class breakdown:
ClassEffect
absoluteTakes the element out of flow so it sits behind the heading text
top-1/2 left-1/2Anchors the top-left corner to the center of the parent
-translate-x-1/2 -translate-y-1/2Shifts it back by half its own size, perfectly centering it
scale-150Scales up to 1.5× on mobile so it fills the hero area
md:scale-[2]Scales to 2× on medium screens and above
opacity-30Renders at 30% opacity — visible but clearly subordinate to the heading
pointer-events-nonePasses all mouse and touch events through to content underneath
The parent element must have position: relative (or any non-static position) for absolute to work correctly. On the Home page this is handled by the hero section wrapper.

​
SVG Structure

The SVG is 400×400 with a viewBox="0 0 400 400", making it fully resolution-independent. It is composed of five distinct visual layers, each animated independently:
1

Outer violet circle

A solid-stroke circle (r=190) in violet (#6B3FA0) with a soft purple glow via drop-shadow. This is the primary bounding ring of the sigil.
2

Inner amber dashed circle

A dashed circle (r=170, strokeDasharray="5 5") in amber (#F5B25B). The dash pattern gives the impression of segmented runic script.
3

Upward triangle

A large equilateral triangle in bone (#EDE6D3) pointing upward, drawn as a path from apex (200, 30) to base corners (347, 285) and (53, 285).
4

Downward triangle

An inverted triangle in bone (#EDE6D3) pointing downward. Overlaid on the upward triangle, the two together form a hexagram (six-pointed star).
5

Cardinal rune marks

Four amber cross-shaped tick marks at the top, right, bottom, and left of the outer circle (north, east, south, west cardinal positions), approximating runic script.
A radial violet glow <div> sits behind the SVG and fades in after the draw animation completes, adding depth: 
// Glow layer — fades in after a 3-second delay
<motion.div
  className="absolute inset-0 bg-radial-glow from-violet/20 to-transparent rounded-full blur-2xl"
  initial={{ opacity: 0, scale: 0.5 }}
  animate={{ opacity: 1, scale: 1 }}
  transition={{ delay: 3, duration: 2 }}
/>

​
Animation

Each SVG path uses Framer Motion’s pathLength variant to draw itself from nothing (pathLength: 0, opacity: 0) to fully visible (pathLength: 1, opacity: 1). A custom prop staggers the start time of each element: 
const variants = {
  hidden: { pathLength: 0, opacity: 0 },
  visible: (custom) => ({
    pathLength: 1,
    opacity: 1,
    transition: {
      pathLength: {
        delay: 1 + custom * 0.5, // each element starts slightly later
        type: 'spring',
        duration: 2.5,
        bounce: 0,
      },
      opacity: {
        delay: 1 + custom * 0.5,
        duration: 0.1,
      },
    },
  }),
};
Stagger order (by custom value):
ElementcustomApprox. start
Outer violet circle01.0 s
Inner amber dashed circle11.5 s
Upward triangle22.0 s
Downward triangle2.52.25 s
Cardinal marks3.0 – 3.62.5 – 2.8 s
Background glow—3.0 s (separate)

​
Customizing the Animation

Change draw speed — adjust duration in the pathLength transition: 
// Faster draw (1.5 s instead of 2.5 s per element):
pathLength: { delay: 1 + custom * 0.5, type: 'spring', duration: 1.5, bounce: 0 }
Change stagger spacing — adjust the multiplier on custom: 
// Tighter stagger (0.2 s between elements instead of 0.5 s):
delay: 1 + custom * 0.2
Add bounce — increase the bounce value (0 = no overshoot, 1 = maximum spring bounce): 
pathLength: { ..., bounce: 0.3 }
RuneCircle is only rendered on the Home page in the current template. To reuse it on other pages, wrap its parent section in position: relative and apply the same absolute centering pattern shown in the Usage section above.

Build docs developers (and LLMs) love

Get started for freeTalk to us