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.

Every long-form page in Sys.Witch V2 needs breathing room between its major content blocks — a moment of visual pause that stays on-theme rather than defaulting to a plain <hr>. RuneDivider fills that role by combining two short glowing line segments with a trio of inline Sigil runes centered between them. The result is a compact, symmetrical ornament that reinforces the cyber-occult aesthetic without overwhelming the surrounding content. It is a fully self-contained component that accepts only a color prop, making it trivial to drop anywhere a section boundary is needed.

​
What RuneDivider Renders

RuneDivider returns a full-width flex row with py-8 vertical padding and three children:
  1. Left line — a h-[1px] flex-grow max-w-[100px] div whose background color is set to the neon token (bg-neon-{color}) and whose matching glow shadow (shadow-glow-{color}) illuminates it. Both are rendered at opacity-50.
  2. Center rune cluster — a flex gap-2 row of three Sigil components: rune-1 at opacity-70, rune-3 at full opacity, and rune-2 at opacity-70. All three are rendered at size={16} using the same color prop passed to the divider.
  3. Right line — an identical mirror of the left line.
The asymmetric opacity pattern (70 / 100 / 70) gives the cluster a soft spotlight effect, drawing the eye to the center rune while the flanking runes recede slightly.

​
Props

PropTypeDefaultDescription
color"purple" | "cyan" | "magenta" | "lime""purple"Neon accent applied to the line backgrounds, glow shadows, and all three rune sigils.
classNamestring""Additional Tailwind classes merged onto the outer wrapper <div>.

​
Color Tokens

The color prop drives two internal lookup tables — one for background color and one for the glow box-shadow:
ColorBackground classShadow class
purplebg-neon-purpleshadow-glow-purple
cyanbg-neon-cyanshadow-glow-cyan
magentabg-neon-magentashadow-glow-magenta
limebg-neon-limeshadow-glow-lime
The shadow-glow-* utilities are declared in main.css and use the project’s CSS variable glow values — for example, --glow-cyan: 0 0 10px rgba(0, 243, 255, 0.5), 0 0 20px rgba(0, 243, 255, 0.3) — giving each line segment a two-layer radial bloom.

​
Usage

import { RuneDivider } from "@/components/layout/RuneDivider";

// Default purple divider
<RuneDivider />

// Cyan accent to match a surrounding GlowFrame
<RuneDivider color="cyan" />

// Lime divider with extra top margin via className
<RuneDivider color="lime" className="mt-8" />

​
Placement in Page Layout

RuneDivider is intended to be inserted between major content sections — for example, between the hero block and the projects grid, or between the skills section and the contact form. Because the component already includes py-8 (2 rem top and bottom padding), it provides its own breathing room and typically does not need additional margin wrappers: 
import { RuneDivider } from "@/components/layout/RuneDivider";
import { GlowFrame }   from "@/components/ui/GlowFrame";

export default function AboutPage() {
  return (
    <main>
      <section>{/* Origin / bio content */}</section>

      <RuneDivider color="cyan" />

      <section>{/* Skills grid */}</section>

      <RuneDivider color="magenta" />

      <section>{/* Trait cards */}</section>
    </main>
  );
}
The max-width of each line segment is capped at max-w-[100px]. On very wide viewports the lines will not stretch beyond 100 px — the component is designed as a compact ornament, not a full-bleed rule. If you need a longer horizontal line, pass a className override and adjust the inner div widths directly in a forked copy of the component.

​
Customizing the Color

The divider’s accent is entirely controlled by the color prop, which maps to the four neon tokens defined in main.css: 
// CSS variable reference (main.css :root)
--neon-purple:  #b026ff;
--neon-cyan:    #00f3ff;
--neon-magenta: #ff00ff;
--neon-lime:    #39ff14;
To introduce a new color, add a matching entry to the bgColor and glowColor lookup objects inside RuneDivider.js and define the corresponding bg-neon-* and shadow-glow-* utilities in main.css.
When using RuneDivider between two GlowFrame cards that share a color, match the divider’s color prop to the card accent for a cohesive neon throughline. When separating sections of different colors, a neutral purple divider acts as a natural reset between contrasting hues.

Build docs developers (and LLMs) love

Get started for freeTalk to us