Systems Witch ships as a complete, self-contained React application. There is no scaffolding step, no configuration wizard, and no generator to run — you clone the repository, install dependencies, and the dev server is live in seconds. This guide walks you from a bare machine to a running local instance to a deployed production site, covering every command you need along the way.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.
Prerequisites
Before you begin, make sure the following are available on your machine:- Node.js 18 or later — Vite requires Node 18+ for its native ESM pipeline and
import.metafeatures. Check withnode --version. - A package manager — npm (bundled with Node), yarn, or pnpm all work. Examples below cover all three.
- Git — to clone the repository. Check with
git --version.
Node version managers like
nvm or fnm make it easy to switch to Node 18 without affecting other projects. Run nvm use 18 (or fnm use 18) if you have one installed.Installation
Clone the repository
Clone Systems Witch from GitHub to a local directory:Then move into the project directory:
Install dependencies
Install all Node dependencies using your preferred package manager:This installs React 18, Vite, React Router, Framer Motion, Tailwind CSS, and their transitive dependencies into
node_modules/. The first install typically takes 20–40 seconds depending on network speed.Start the dev server
Launch the Vite development server:Vite starts at
http://localhost:5173 by default and enables Hot Module Replacement (HMR). Any change you save to a component or stylesheet is reflected in the browser within milliseconds — no full page reload required.You should see output similar to:Open the site in a browser
Navigate to
http://localhost:5173 in your browser. You will be redirected to http://localhost:5173/#/ automatically — the inline script in index.html ensures the hash fragment is always present on first load.For the first 2.5 seconds you will see the ASCII boot animation: a pre-formatted WITCH ASCII art rendered in JetBrains Mono with text-acid colouring, followed by a blinking [ SYSTEM BOOTING... ] prompt. When the timer clears, the boot sequence fades out and the HeroSigil appears — a slowly rotating SVG sigil, 40-second revolution period, with a pulsing acid-green dot at its centre and the SYSTEMS Witch logotype beneath it.Project Structure
The repository layout after cloning is as follows:assets/ — The compiled output from Vite’s build pipeline. main.js contains the full React application including all seven page components, routing logic, and animation definitions. main.css is the Tailwind CSS output plus custom keyframe animations (pulse-glow, glitch-anim-1, glitch-anim-2) and utility classes (text-glow, ascii-border, shadow-glow). proxy.js re-exports Framer Motion primitives and React Router hooks so they can be consumed by individual component modules without duplicating the dependency.
components/ — Reusable UI primitives. These are the building blocks shared across all seven pages: the sidebar, the footer, the CRT overlay, the page transition wrapper, the glitch heading, and the two SVG sigil variants.
pages/ — Static HTML shells for each route. These correspond 1-to-1 with the seven hash routes defined in main.js and are used by the production build for initial HTML delivery.
index.html — The single root HTML document. It mounts the #root div, module-preloads all component scripts, links main.css, and runs an inline script that ensures the #/ hash fragment is present before React hydrates — critical for the hash-based router to initialise correctly.
Production Build
When your changes are ready for deployment, run the Vite production build:dist/ directory. Output includes:
- A static HTML shell for each route (
dist/index.htmland one file per page) - Hashed asset filenames (e.g.
main-Bx3kP9aQ.js) for long-term cache busting - Minified CSS with all unused Tailwind utilities purged
dist/ on http://localhost:4173.
Deployment
Thedist/ output is a fully static site — no Node.js server, no serverless functions, no database. Drop the contents of dist/ onto any platform that can serve static files:
| Platform | How to deploy |
|---|---|
| Vercel | Connect the GitHub repo; Vercel auto-detects Vite and sets the build command to npm run build and output directory to dist |
| Netlify | Drag-and-drop the dist/ folder into the Netlify dashboard, or connect the repo with build command npm run build and publish directory dist |
| GitHub Pages | Use the peaceiris/actions-gh-pages Action to push dist/ to the gh-pages branch on every push to main |
| Cloudflare Pages | Connect the repo; set build command npm run build and build output directory /dist |
python3 -m http.server. Point the server root at dist/ and no additional configuration is required.