Skip to main content

Documentation Index

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

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

Sigil is the core primitive for all iconography in Sys.Witch V2. It looks up a path string from the sigil library by id and renders it as a stroked SVG with configurable size and neon color. When animate is enabled, the path draws itself in using a Framer Motion pathLength transition, producing a handwritten-glyph entrance effect.

​
Props

​
id
string
required
The sigil identifier used to look up the corresponding path string in data/sigils.js. Falls back to rune-1 if the ID is not found. See the Sigils & Runes page for the complete list of available IDs.
​
size
number
The rendered width and height of the SVG element in pixels. The SVG uses a fixed 24×24 viewBox, so size scales proportionally. Defaults to 24. Typical values:
ValueContext
12Inline / form field label
16Small badge
18GlyphButton icon
24Navigation icon (default)
32Feature tile
48Decorative element
64Hero / large display
​
color
'purple' | 'cyan' | 'magenta' | 'lime' | 'deep-purple'
Maps to the corresponding neon CSS variable applied as the stroke color on the path. Defaults to purple.
ValueCSS Variable
purplevar(--neon-purple)
cyanvar(--neon-cyan)
magentavar(--neon-magenta)
limevar(--neon-lime)
deep-purplevar(--neon-deep-purple)
​
animate
boolean
When true, replaces the static <path> with a Framer Motion motion.path that animates pathLength from 0 to 1 and opacity from 0 to 1 over 2 s with an ease-in-out transition, producing a self-drawing glyph effect. Defaults to false.
​
className
string
Additional classes applied to the <svg> element. Useful for transition effects, rotation, or positioning helpers. Note that drop-shadow glow classes (drop-shadow-glow-*) are applied automatically based on color and do not need to be added manually.

​
SVG Attributes

The following attributes are set on the rendered <svg> element and are not configurable via props:
AttributeValue
viewBox0 0 24 24
fillnone
The following stroke attributes are applied to the inner <path> element:
AttributeValue
strokeNeon CSS variable for the active color (e.g., var(--neon-magenta))
strokeWidth1.5
strokeLinecapround
strokeLinejoinround

​
Usage Examples

import { Sigil } from './components/sigils/Sigil.js';

// Navigation icon (PortalNav pattern)
<Sigil id="projects" size={24} color="magenta" />

// Feature tile icon
<Sigil id="skills" size={32} color="lime" className="mb-4" />

// Hero/decorative element
<Sigil id="case-studies" size={48} color="magenta" className="mx-auto" />

// Small form field label icon
<Sigil id="rune-1" size={12} color="magenta" />

// Self-drawing entrance animation
<Sigil id="about" size={48} color="purple" animate />

// Animated on group hover
<div className="group">
  <Sigil
    id="about"
    size={20}
    color="purple"
    className="transition-transform duration-500 group-hover:rotate-180"
  />
</div>

​
Using Sigils in Skill Tiles

Each entry in data/skills.js includes a sigilId field. RuneTile reads this field and passes it directly to Sigil as the id prop, rendering the skill’s associated glyph as its tile icon. This is the standard pattern for associating content records with their visual glyphs — add a sigilId to a data entry, then let the consuming component hand it off to Sigil. For the complete sigil ID reference and path definitions, see the Sigils & Runes page.

Build docs developers (and LLMs) love

Get started for freeTalk to us