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.

GlowFrame and GlyphButton are the two foundational building blocks that give Sys.Witch V2 its consistent cyber-occult feel across every page. GlowFrame supplies the card surface — a semi-transparent elevated panel with hairline neon borders and decorative corner brackets that flare brighter on hover. GlyphButton is the primary interactive control, combining uppercase display typography, an optional inline Sigil icon, three visual variants, and a scan-line shimmer animation that plays on hover. Both components accept a color prop that propagates the chosen neon accent through borders, shadows, and focus rings without any extra CSS.

​
GlowFrame

GlowFrame wraps any content in a <div> (or, when animate is true, a Framer Motion motion.div) styled as a card panel. The component applies a semi-transparent bg-surface-elevated/50 background (#12101c at 50 % opacity) with backdrop-blur-sm frosted glass, and a 1-pixel border whose color starts at {color}/30 opacity and brightens to {color}/80 on hover. Four corner-bracket pseudo-elements — built from absolute-positioned <div> nodes with border-t border-l, border-t border-r, etc. — reinforce the UI frame aesthetic. The animate variant is powered by Framer Motion’s whileInView API: the card fades and slides up (opacity: 0, y: 20 → opacity: 1, y: 0) with a 0.5-second ease, triggering once as the element enters the viewport (viewport: { once: true }).

​
Props

PropTypeDefaultDescription
color"purple" | "cyan" | "magenta" | "lime""purple"Neon accent applied to border, hover border, and hover box-shadow.
animatebooleanfalseWhen true, wraps with Framer Motion and plays a scroll-triggered entrance animation.
classNamestring""Additional classes merged onto the outermost element.
childrenReactNode—Content rendered inside the panel.

​
Hover Glow Classes

Each color maps to three Tailwind utilities applied at different states:
ColorResting borderHover borderHover box-shadow
purpleborder-neon-purple/30hover:border-neon-purple/80hover:shadow-glow-purple
cyanborder-neon-cyan/30hover:border-neon-cyan/80hover:shadow-glow-cyan
magentaborder-neon-magenta/30hover:border-neon-magenta/80hover:shadow-glow-magenta
limeborder-neon-lime/30hover:border-neon-lime/80hover:shadow-glow-lime
The shadow-glow-* utilities are defined in main.css as double-layered radial box-shadows using the matching CSS variable — for example, --glow-purple: 0 0 10px rgba(176, 38, 255, 0.5), 0 0 20px rgba(176, 38, 255, 0.3).

​
Usage

import { GlowFrame } from "@/components/ui/GlowFrame";

// Static card with default purple accent
<GlowFrame>
  <h2>Project Alpha</h2>
  <p>Description text goes here.</p>
</GlowFrame>

// Cyan card with scroll-triggered entrance
<GlowFrame color="cyan" animate>
  <p>This panel fades in when it enters the viewport.</p>
</GlowFrame>

// Magenta card with extra padding override
<GlowFrame color="magenta" className="p-8">
  <p>Custom padding applied via className.</p>
</GlowFrame>
The default internal padding is p-6 (1.5 rem). Use the className prop to override it — for example, className="p-4" for a tighter card or className="p-8" for a spacious one.

​
GlyphButton

GlyphButton is a <button> element styled with the Tektur display typeface (font-display), uppercase text, and tracking-widest letter-spacing. It supports three visual variants (outline, solid, ghost) across all four neon colors. An optional sigilId prop injects a Sigil icon to the left of the label text. A <span> scan-line overlay (bg-gradient-to-b from-transparent via-white/5 to-transparent) animates upward on hover via the custom scan keyframe animation (group-hover:animate-[scan_2s_ease-in-out_infinite]), giving buttons a holographic shimmer.

​
Props

PropTypeDefaultDescription
color"purple" | "cyan" | "magenta" | "lime""purple"Neon accent applied to border, text, hover shadow, and focus ring.
variant"outline" | "solid" | "ghost""outline"Visual treatment of the button surface.
sigilIdstring—Optional sigil registry key. When provided, a Sigil icon is rendered at size={18} before the label.
fullWidthbooleanfalseAdds w-full to make the button span its container.
classNamestring""Additional classes merged onto the button.
childrenReactNode—Button label text.
...restButtonHTMLAttributes—All standard button attributes (e.g., onClick, type, disabled) are spread onto the underlying <button>.

​
Variant Styles

Each variant produces a distinct visual weight. The solid variant fills the button with a semi-transparent neon background at rest and floods it with the full neon color on hover, switching the text to var(--bg-base) (near-black) for contrast. outline keeps the background transparent and only lights up the border and glow on hover. ghost removes the border entirely and shows only the colored text, with a faint neon background wash on hover. 
import { GlyphButton } from "@/components/ui/GlyphButton";

// Outline (default) — purple
<GlyphButton>View Projects</GlyphButton>

// Solid cyan with a sigil icon
<GlyphButton color="cyan" variant="solid" sigilId="projects">
  Open Works
</GlyphButton>

// Ghost magenta, spans full container width
<GlyphButton color="magenta" variant="ghost" fullWidth>
  Read More
</GlyphButton>

// Lime outline with an onClick handler and a sigil
<GlyphButton
  color="lime"
  sigilId="contact"
  onClick={() => console.log("signal sent")}
>
  Send Signal
</GlyphButton>

​
Accessibility

Every GlyphButton includes focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-base in its base class string. The focus:ring-* color is set per-variant to match the active neon accent (e.g., focus:ring-neon-cyan for color="cyan"), producing a clearly visible 2-pixel focus ring that matches the theme palette. The ring-offset-base token offsets the ring against the dark var(--bg-base) background.
GlyphButton renders a <button> element — not an <a> tag. For link-style navigation buttons (e.g., pointing to an external URL), wrap GlyphButton inside a standard <a> element or use your router’s <Link> component rather than passing an href prop directly.

​
Using GlowFrame and GlyphButton Together

A typical card-with-action pattern in Sys.Witch V2 pairs a GlowFrame panel with one or more GlyphButton controls at its footer: 
import { GlowFrame } from "@/components/ui/GlowFrame";
import { GlyphButton } from "@/components/ui/GlyphButton";

export function ProjectCard({ title, description, slug }) {
  return (
    <GlowFrame color="cyan" animate>
      <h3 className="font-display text-lg tracking-wider text-neon-cyan mb-2">
        {title}
      </h3>
      <p className="font-sans text-text-secondary text-sm leading-relaxed mb-6">
        {description}
      </p>
      <div className="flex gap-3">
        <GlyphButton color="cyan" variant="outline" sigilId="projects">
          Case Study
        </GlyphButton>
        <GlyphButton color="magenta" variant="ghost" sigilId="contact">
          Contact
        </GlyphButton>
      </div>
    </GlowFrame>
  );
}
Keep the color props of GlowFrame and its inner GlyphButton controls in sync. A cyan GlowFrame with a cyan GlyphButton creates a cohesive neon accent; mixing colors within a single card works best when one color dominates and the second is used sparingly (e.g., one outline button + one ghost button in a contrasting hue).

Build docs developers (and LLMs) love

Get started for freeTalk to us