Skip to main content

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.

The home page is a two-act performance. For the first 2.5 seconds the screen displays nothing but the WITCH ASCII art and a blinking boot message — every visitor’s first impression is a cold terminal startup. When the timer clears, a Framer Motion fade-out removes the boot screen and the hero fades in: a perpetually rotating sigil, the site wordmark, the tagline, and a live-status line. The transition is handled entirely in React state with no routing — both phases live inside the same component.

​
Boot sequence phase

When the component mounts, useState(true) sets isBooting to true and a useEffect fires a setTimeout of 2500 ms. The cleanup function (clearTimeout) prevents a state update on an unmounted component if the user navigates away during the boot window. 
const [isBooting, setIsBooting] = useState(true);

useEffect(() => {
  const timer = setTimeout(() => setIsBooting(false), 2500);
  return () => clearTimeout(timer);
}, []);
While isBooting is true, the component renders the ASCII constant wrapped in a motion.div with initial={{ opacity: 0 }} and animate={{ opacity: 1 }}. Framer Motion’s AnimatePresence (mode "wait") handles the cross-fade between the two phases.

​
The ASCII art constant

The WITCH logotype is defined as a template-string constant named asciiArt at the top of main.js: 
  _   _  ____  ___  ____  
 | | | |/ __ \/ _ \/ ___| 
 | |_| | |  | | | | |     
 |  _  | |  | | | | |     
 | | | | |__| | |_| |___  
 |_| |_|\____/ \___/\____|
The [ SYSTEM BOOTING... ] line is a separate motion.div child that fades in after a 1-second delay (transition: { delay: 1 }), appearing as though the terminal is printing in real time. Both elements share the classes font-mono text-acid text-xs sm:text-sm whitespace-pre text-glow, rendering the boot screen in acid green with the text-glow CSS effect (text-shadow: 0 0 8px rgba(164,255,61,.6)).

​
Hero section

Once isBooting flips to false, the hero motion.div animates in from { opacity: 0, y: 20 } to { opacity: 1, y: 0 } over 0.8 seconds.

​
Rotating sigil

The HeroSigil SVG component is wrapped in its own motion.div with an infinite rotation animation: 
<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>
A small acid-green dot (w-2 h-2 bg-acid rounded-full animate-pulse-glow) sits at the absolute center of the sigil container, pulsing independently. The animate-pulse-glow keyframe is defined in main.css: 
@keyframes pulse-glow {
  0%, 100% { opacity: 1; text-shadow: 0 0 10px #A4FF3D, 0 0 20px #A4FF3D; }
  50%       { opacity: 0.7; text-shadow: 0 0 5px #A4FF3D; }
}

​
Wordmark and tagline

The <h1> mixes two font families in one element: the word SYSTEMS uses font-mono (JetBrains Mono) in bone, while Witch is a <span> with font-serif italic font-normal (Cinzel italic) in acid green. Together they produce the key visual contrast of the brand. 
<h1 className="font-mono text-4xl md:text-6xl font-bold text-bone tracking-tighter">
  SYSTEMS{" "}
  <span className="text-acid italic font-serif font-normal">Witch</span>
</h1>
The tagline sits directly below in font-sans text-lg md:text-xl text-lilac:
Bridging engineering rigor with creative intuition. Architecting digital grimoires and scalable realities.

​
Status line

A three-part inline readout is rendered beneath the tagline: 
<div className="pt-8 flex gap-4 justify-center font-mono text-sm">
  <span className="text-graphite">//</span>
  <span className="text-acid">STATUS:</span>
  <span className="text-bone">ACCEPTING_CONTRACTS</span>
</div>
The // comment marker is deliberately rendered in near-invisible text-graphite (#0E0E10 on a black background), making STATUS: and ACCEPTING_CONTRACTS appear to float without a prefix — visible only on very careful inspection.

​
Customization

All customizable strings are plain constants or JSX literals in main.js. No config file is involved — search for the string you want to change and edit it directly.
Change the tagline: Locate the <p> with class font-sans text-lg md:text-xl text-lilac inside the hero block and replace its text content. Change the availability status: Find ACCEPTING_CONTRACTS in the status line and replace it with any string — for example ON_SABBATICAL, OPEN_TO_COLLABORATIONS, or EMPLOYED. Change the boot delay: The 2500 millisecond value in setTimeout(() => setIsBooting(false), 2500) can be shortened (e.g. 1000) for a snappier experience or removed entirely by initializing isBooting to false. Replace the ASCII art: Edit the asciiArt template string constant. Use any ASCII art generator and paste the result in — just make sure it is wrapped in backticks and the whitespace-pre class is present on the container so newlines render correctly. Change the sigil rotation speed: Adjust the duration: 40 value on the animate={{ rotate: 360 }} transition. Lower numbers spin faster; Infinity duration would stop it entirely.
The HeroSigil component is imported from ../components/sigils/HeroSigil.js. To swap the sigil SVG, replace that component’s SVG paths — the wrapping motion.div rotation and centering will apply automatically to whatever shape you use.

Build docs developers (and LLMs) love

Get started for freeTalk to us