Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/systems-witch/llms.txt
Use this file to discover all available pages before exploring further.
Every page in Systems Witch is built from the same set of shared components. These components handle the CRT aesthetic, glitch typography, route transitions, navigational chrome, and decorative sigil graphics. This page documents each one — its purpose, props, and a usage example drawn directly from the source.
FilesystemNav
The primary navigation sidebar renders the site map as a Unix-style directory tree. On desktop (md breakpoint and above) it is sticky top-0, occupying the full viewport height at w-64. On mobile it is fixed and off-screen by default, sliding in when the hamburger toggle is activated.
Routes rendered:
| Label | Path |
|---|
~/home | / |
~/about | /about |
~/projects/* | /projects |
~/skills | /skills |
~/testimonials | /testimonials |
~/articles | /articles |
~/contact | /contact |
NavLink and applies text-acid text-glow when active, text-lilac hover:text-bone otherwise. A > chevron fades in on hover via opacity-0 group-hover:opacity-100. The component also renders a bottom status block with STATUS: ONLINE, MEM: 4096MB, and UPLINK: SECURE in font-mono text-xs text-lilac opacity-50.
The mobile hamburger button (md:hidden) is fixed at top-4 right-4 z-50 and renders a Lucide Menu icon (open) or X icon (close). A backdrop overlay (bg-black/80 backdrop-blur-sm) fills the screen behind the drawer and dismisses it on click.
Props: none — the route list is defined as a static constant inside the component.
// Rendered once inside the Layout shell; no props required
<FilesystemNav />
To add a new route to the sidebar, add an entry to the $p array inside FilesystemNav. See Adding Pages for the full walkthrough.
GlitchHeading
A typographic component that wraps any heading level in a CSS glitch effect. On hover, ::before and ::after pseudo-elements clone the heading text (sourced from the data-text attribute) and animate independently with glitch-anim-1 and glitch-anim-2 keyframes, producing offset, clipped slices in red and blue.
Props:
| Prop | Type | Default | Description |
|---|
text | string | — | The heading text. Rendered as children and set on data-text for the pseudo-element content. |
as | string (HTML tag) | "h2" | The element tag to render ("h1", "h2", "h3", etc.). |
className | string | "" | Additional Tailwind or custom classes applied to the wrapper div. |
font-mono font-bold text-bone plus relative inline-block to position the absolute pseudo-elements correctly.
<GlitchHeading text="~/about/profile.sys" as="h1" className="text-3xl" />
// Section-level usage
<GlitchHeading text="~/projects/*" as="h1" className="text-3xl" />
The glitch effect is CSS-only and activates on hover. No JavaScript or Framer Motion is involved, so it works at any render frequency and has zero layout cost.
PageTransition
Wraps each page’s top-level content in a Framer Motion motion.div that provides a CRT-style entrance and exit. Every page component uses <PageTransition> as its outermost element.
Animation:
| Phase | opacity | scaleY | filter |
|---|
initial | 0 | 0.01 | brightness(2) contrast(2) |
animate | 1 | 1 | brightness(1) contrast(1) |
exit | 0 | 0.01 | brightness(0) |
0.4s with ease: "circOut". The wrapper div carries w-full h-full min-h-screen pb-16 to ensure consistent height and bottom padding that clears the fixed TerminalFooter.
Props:
| Prop | Type | Description |
|---|
children | ReactNode | The page content to animate. |
<PageTransition>
<div className="space-y-12">
<header className="flex items-center gap-4 border-b border-graphite pb-6">
<SectionSigil />
<GlitchHeading text="~/skills" as="h1" className="text-3xl" />
</header>
{/* page content */}
</div>
</PageTransition>
PageTransition relies on being a direct child of AnimatePresence (via the route tree) to trigger its exit animation. If you render it outside of AnimatePresence, only the initial → animate transition will fire.
ScanlineOverlay
A purely decorative fixed overlay that simulates the horizontal scanlines of a CRT monitor. It sits above all other content at z-50 (mix-blend-mode: overlay) and never intercepts pointer events (pointer-events-none).
The scanline pattern is produced by a repeating linear-gradient applied as an inline background style:
linear-gradient(
to bottom,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0) 50%,
rgba(0, 0, 0, 0.2) 50%,
rgba(0, 0, 0, 0.2)
)
backgroundSize is 100% 4px, giving one scanline every four pixels. A child div with bg-acid opacity-[0.02] animate-pulse adds an extremely subtle acid-green phosphor bloom that breathes over time.
Props: none.
// Rendered once at the root layout level; no configuration needed
<ScanlineOverlay />
The overlay uses mix-blend-overlay at opacity-[0.15], which keeps the effect visible on dark backgrounds without washing out content. Increasing opacity or switching to mix-blend-screen will make the scanlines more pronounced.
A fixed status bar anchored to the bottom of the viewport. It displays a cycling sequence of system-flavoured status messages in font-mono text-xs text-acid, updating every 3 seconds via setInterval. The current UTC time is shown on the right side (hidden on small screens with hidden sm:inline).
Status message rotation:
Initializing neural pathways...Loading grimoire modules...Establishing secure uplink...Bypassing mainframe security...Decrypting ancient texts...Compiling reality distortion field...System optimal. Ready for input.
The footer is h-8 bg-graphite border-t border-black and offsets from the left edge by md:left-64 to sit flush with the content area rather than sliding behind the sidebar on desktop.
Props: none.
// Rendered once at the root layout level; no configuration needed
<TerminalFooter />
HeroSigil
An animated SVG sigil rendered exclusively on the home page hero. The sigil is constructed from Framer Motion path-drawing animations: each stroke (outer circle, upward triangle, downward triangle, accent circles, inner ring, and center dot) draws itself in sequence using pathLength spring transitions staggered by a custom delay multiplier.
After drawing, the entire sigil is wrapped in a continuously rotating motion.div:
animate={{ rotate: 360 }}
transition={{ duration: 40, repeat: Infinity, ease: "linear" }}
w-2 h-2 bg-acid rounded-full animate-pulse-glow dot is absolutely centered over the sigil using absolute inset-0 flex items-center justify-center.
Props:
| Prop | Type | Default | Description |
|---|
className | string | "" | Additional classes passed to the SVG element (e.g. "w-48 h-48"). |
<div className="relative mb-12">
<motion.div
animate={{ rotate: 360 }}
transition={{ duration: 40, repeat: Infinity, ease: "linear" }}
>
<HeroSigil className="w-48 h-48 md:w-64 md:h-64 opacity-80" />
</motion.div>
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
<div className="w-2 h-2 bg-acid rounded-full animate-pulse-glow" />
</div>
</div>
The rotation wrapper and center dot are implemented in HomeView, not inside HeroSigil itself. The component only exports the SVG; the surrounding animation is the responsibility of the parent.
SectionSigil
A smaller decorative sigil displayed at the top of every page’s <header> section, paired with a GlitchHeading. It is purely ornamental and has no interactive behaviour.
The SVG (40×40 viewBox 0 0 40 40) draws a diamond, an inner circle, and crosshair lines. On mount it animates from opacity: 0, rotate: -90 to opacity: 1, rotate: 0 over 1s using whileInView with viewport={{ once: true }}.
Props:
| Prop | Type | Default | Description |
|---|
className | string | "" | Additional classes passed to the SVG element. |
<header className="flex items-center gap-4 border-b border-graphite pb-6">
<SectionSigil />
<GlitchHeading text="~/projects/*" as="h1" className="text-3xl" />
</header>