Skip to main content

Documentation Index

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

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

Sigil is the mystical emblem of The Craft — a hand-crafted SVG symbol built from overlapping geometric shapes that together form the visual centrepiece of the grimoire’s identity. It appears on the Home page as a large animated foreground mark, fades into page backgrounds as a watermark, and punctuates UI moments like form success states and error pages. Because it’s a single reusable component, every instance of the sigil across the site is always consistent, always animated in the same way, and always inherits its color from Tailwind’s text-* utilities via stroke="currentColor".

​
Visual Structure

The sigil is composed of nine SVG elements across six visual layers, all within a viewBox of 0 0 200 200 and drawn with stroke="currentColor" so they inherit the active text color:

Outer Circle

A circle at cx=100 cy=100 r=90 with strokeWidth="2". This is the outermost bounding ring of the sigil.

Dashed Inner Circle

A circle at cx=100 cy=100 r=75 with strokeWidth="1" and strokeDasharray="4 4". The dashed ring creates a halo effect between the outer circle and the star of David geometry below.

Upward Triangle

A polygon with points 100,25 165,137.5 35,137.5 — a triangle pointing up, drawn with strokeWidth="1.5".

Downward Triangle

A polygon with points 100,175 35,62.5 165,62.5 — a triangle pointing down. Together with the upward triangle, these form the classic Star of David / hexagram geometry.

Central Diamond

A path describing a small diamond: M100 80 L115 100 L100 120 L85 100 Z, drawn with strokeWidth="2". This is the innermost focal point of the sigil.

Four Accent Dots

Four small circle elements (r=4, fill="currentColor") placed at the cardinal points of the sigil: top (cy=45), bottom (cy=155), left (cx=50), and right (cx=150). These are the only filled shapes in an otherwise outline-only symbol.

​
Draw-On Animation

Every element in the sigil uses Framer Motion’s pathLength variant system. When the sigil enters the viewport (whileInView, once: true), each path animates from pathLength: 0, opacity: 0 to pathLength: 1, opacity: 1. The path length uses a spring animation (duration: 3, bounce: 0) and opacity fades in over 0.5s — creating the impression that the sigil is being drawn by an invisible hand.

​
Props

PropTypeDefaultDescription
sizenumber200Sets both width and height on the <svg> element in pixels. The internal viewBox is always 0 0 200 200, so the sigil scales proportionally at any size.
classNamestring""Passed directly to the root <svg> element. Use Tailwind text-* color utilities to change the stroke and fill color. Use opacity-* for transparency.
Because all paths use stroke="currentColor" and the four accent dots use fill="currentColor", a single text-* class controls the entire sigil’s color palette. There is no need to pass separate stroke or fill props.

​
Where Sigil Is Used

PageUsageSize
HomeLarge background watermark300px (at low opacity)
HomePrimary foreground mark180px
AboutPage overlay decorationVaries
ContactSuccess state confirmation mark80px
404Error page decorationVaries

​
Example Usage

import { S as Sigil } from '../components/Sigil';

// Large decorative sigil with teal glow
<Sigil size={180} className="text-spell drop-shadow-[0_0_15px_rgba(45,212,191,0.8)]" />

// Subtle background sigil at 10% opacity
<Sigil size={300} className="text-midnight-darker opacity-10" />

// Small contact success confirmation
<Sigil size={80} className="text-spell" />
Pair the sigil with Tailwind’s animate-pulse or animate-spin (at very slow animation-duration) for living, breathing background decorations. The draw-on animation only plays once per page load (viewport: {{ once: true }}), so adding a subtle CSS pulse afterward gives the sigil a sense of persistent magical energy.

Build docs developers (and LLMs) love

Get started for freeTalk to us