Skip to main content

Documentation Index

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

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

The Layout component is the root wrapper rendered for every route in Sys.Witch V2. It composes three distinct layers — the animated ParticleField canvas, the sticky PortalNav navigation bar, and the scrollable main content area — into a single full-screen flex column. A matching footer with a mono-font copyright line is appended on all non-home routes. Framer Motion’s AnimatePresence drives a blur-and-scale page transition whenever the route changes.

​
Structure

Layout renders a single outer div with min-h-screen flex flex-col relative and stacks three layers inside it:
LayerElementz-indexNotes
Particle canvas<ParticleField />z-0Sits behind everything
Navigation<PortalNav />z-40 / z-50Suppressed on the home (/) route
Page content<main>z-10flex-grow, scrollable
Footer<footer>z-10Shown on all non-home routes
The home route (pathname === "/") hides both PortalNav and the footer and removes the pt-24 pb-16 padding from main, leaving the full viewport available for the hero experience.

​
Page Transition

Layout uses Framer Motion’s AnimatePresence in "wait" mode, keyed to location.pathname, so each route unmounts before its successor mounts. The entering and exiting animation is: 
initial={{ opacity: 0, scale: 0.95, filter: "blur(10px)" }}
animate={{ opacity: 1, scale: 1,    filter: "blur(0px)"  }}
exit={{    opacity: 0, scale: 1.05, filter: "blur(10px)" }}
transition={{ duration: 0.5, ease: "easeInOut" }}
This produces the signature portal-lens effect between page navigations.

​
Dark Background and Color Tokens

The page background is set on body in main.css via the CSS custom property --bg-base: #050508. The corresponding Tailwind utility is bg-base. The full token palette used across the theme is: 
:root {
  --bg-base:              #050508;
  --bg-surface:           #0a0a12;
  --bg-surface-elevated:  #12101c;
  --neon-purple:          #b026ff;
  --neon-magenta:         #ff00ff;
  --neon-cyan:            #00f3ff;
  --neon-lime:            #39ff14;
  --neon-deep-purple:     #4a00e0;
}
body additionally sets font-family: Inter, sans-serif and -webkit-font-smoothing: antialiased / -moz-osx-font-smoothing: grayscale for crisp text rendering on dark backgrounds.

​
Footer

On non-home routes, Layout appends a footer with:
  • border-t border-neon-purple/20 — a 1 px top border at 20 % neon-purple opacity
  • bg-surface/50 backdrop-blur-sm — a semi-transparent frosted-glass surface
  • Monospaced copyright text: © {year} // SYS.WITCH // NO ACTUAL SPELLS, JUST SUSPICIOUSLY ORGANIZED FILES. // SYS.WITCH // NO ACTUAL SPELLS, JUST SUSPICIOUSLY ORGANIZED FILES.

​
Usage

Wrap your page content with Layout at the router level. Because Layout already renders the <Outlet /> internally (via React Router’s <Outlet>), you only need to place it once at the root route: 
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./components/layout/Layout";
import HomePage from "./pages/HomePage";
import AboutPage from "./pages/AboutPage";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* Layout wraps all child routes */}
        <Route path="/" element={<Layout />}>
          <Route index element={<HomePage />} />
          <Route path="about" element={<AboutPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}
Layout reads useLocation() internally to determine whether it is on the home route. Do not pass a pathname prop — the component sources it directly from the router context.

​
Props

Layout accepts no props. All page content is injected through React Router’s <Outlet /> component rendered inside <main>.

​
Z-Index Reference

ParticleField

Rendered at z-0. Always beneath all other content. Uses fixed inset-0 positioning so it never scrolls.

PortalNav

The <nav> element sits at z-40; the mobile hamburger button is at z-50 to remain clickable above the open menu overlay.

Main + Footer

Page content and footer share z-10, placing them above the particle canvas but below the navigation.

​
Styling Notes

The body font stack is Inter, sans-serif (mapped to the font-sans Tailwind utility). Display headings use Tektur, cursive (font-display) and monospaced code blocks use JetBrains Mono, monospace (font-mono). All three families are loaded via Google Fonts in main.css.
Removing antialiased from body will cause Inter to render with heavier strokes on macOS and Windows, which reduces legibility against the near-black #050508 background. Keep -webkit-font-smoothing: antialiased in place.

Build docs developers (and LLMs) love

Get started for freeTalk to us