Use this file to discover all available pages before exploring further.
Sigils are the visual language of Sys.Witch V2. Every navigation node, personality trait, and decorative accent in the theme is expressed as a named SVG path drawn from a central registry. The Sigil component looks up a path by key, wraps it in a correctly-sized <svg> element, and applies a neon stroke color together with a matching drop-shadow glow filter. PortalRing builds on top of Sigil to produce the iconic animated home screen: three concentric rings orbiting at different speeds around a central home sigil, with the six navigation sigils arranged in a clock-face pattern around the outer edge.
All SVG path data lives in data/sigils.js and is exported as a plain object keyed by sigil name. The Sigil component imports this object and resolves the id prop against it, falling back to rune-1 when a key is not found.
Every path is drawn on a 24 × 24 viewBox. Stroke weight, color, and the drop-shadow filter are applied by the Sigil component at render time — the registry stores pure geometry only.
Sigil renders a single inline <svg> whose path is resolved from the registry. When the animate prop is true, the component swaps the static <path> for a Framer Motion motion.path that draws itself in over two seconds using a pathLength animation from 0 to 1.
The color prop maps to two internal lookup tables. The first resolves the CSS variable used as the SVG stroke; the second selects a Tailwind drop-shadow utility class applied to the <svg> wrapper:
Color token
CSS variable
Drop-shadow class
purple
var(--neon-purple) — #b026ff
drop-shadow-glow-purple
cyan
var(--neon-cyan) — #00f3ff
drop-shadow-glow-cyan
magenta
var(--neon-magenta) — #ff00ff
drop-shadow-glow-magenta
lime
var(--neon-lime) — #39ff14
drop-shadow-glow-lime
deep-purple
var(--neon-deep-purple) — #4a00e0
drop-shadow-glow-purple
Each drop-shadow-glow-* utility applies filter: drop-shadow(0 0 8px rgba(..., 0.8)), producing the signature neon bloom around every icon.
import { Sigil } from "@/components/sigils/Sigil";// Static sigil at default purple<Sigil id="home" size={32} />// Animated cyan sigil, draw-on entrance<Sigil id="about" color="cyan" size={48} animate />// Decorative rune with extra class<Sigil id="rune-4" color="lime" size={16} className="opacity-60" />
If you pass an id that does not exist in the registry, Sigil silently falls back to the rune-1 path rather than throwing. This makes it safe to use with dynamic data.
PortalRing is the animated centerpiece of the home screen. It composes three Framer Motion motion.div elements styled as rounded-full rings, each rotating continuously at a different speed and direction using an infinite repeat transition:
Outer ring — border-neon-purple/20, border-dashed, rotates 360° every 40 seconds
Middle ring — border-neon-cyan/10, rotates −360° (counter-clockwise) every 30 seconds
Inner ring — border-neon-magenta/5, border-dotted, rotates 360° every 20 seconds
At the geometric center sits a home sigil (size={48}, animate, color="purple") and the SYS.WITCH wordmark rendered in the font-display (Tektur) typeface with text-glow-purple.Six navigation nodes orbit the rings at 60° intervals on a radius of 160 px. Each node is a Framer Motion motion.button that holds a Sigil inside a circular bg-surface-elevated badge. The badge gains border-neon-{color} and shadow-glow-{color} on hover, and a text label fades in below the icon via opacity-0 → group-hover:opacity-100 (positioned with absolute top-14). On mobile the entire orbital layout is hidden (hidden md:block on its wrapper); the mobile fallback div carries md:hidden pointer-events-none and renders no navigation children.
To adjust the orbital radius, change the o constant inside PortalRing.js (currently 160). Increase the value to push the navigation nodes further from center, and update the container’s w-[300px] md:w-[500px] sizing to match.