Skip to main content

Documentation Index

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

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

GlowFrame is the primary card container for Sys.Witch V2. It wraps content in a bordered panel with a neon-colored border, corner accent marks, and a matching box-shadow glow. When the animate prop is enabled, the component upgrades to a Framer Motion element that fades and slides in from below as it enters the viewport — used to give focal panels a polished entrance.

​
Props

​
color
'purple' | 'magenta' | 'cyan' | 'lime'
Controls the border color and glow shadow color of the frame. Defaults to purple.
​
animate
boolean
When true, replaces the root <div> with a Framer Motion motion.div that animates from opacity: 0, y: 20 to opacity: 1, y: 0 once the element enters the viewport. The animation runs once (viewport: { once: true }) with a 0.5 s ease transition. Defaults to false.
​
className
string
Additional Tailwind or CSS classes merged onto the root element. Use for custom dimensions, layout, or positioning.
​
children
ReactNode
required
Content rendered inside the card.

​
Usage

import { GlowFrame } from './components/ui/GlowFrame.js';

// Basic card
<GlowFrame color="cyan">
  <h3>Terminal Output</h3>
  <p>Content inside a glowing cyan panel.</p>
</GlowFrame>

// Viewport-entrance animation (used for contact form)
<GlowFrame color="magenta" animate className="max-w-2xl mx-auto">
  <SummoningForm />
</GlowFrame>

// Full-height flex column (ProjectPanel pattern)
<GlowFrame color="magenta" className="h-full flex flex-col">
  {/* ... */}
</GlowFrame>

​
Color Variants

ColorBorderShadow Token
purpleborder-neon-purpleshadow-glow-purple
magentaborder-neon-magentashadow-glow-magenta
cyanborder-neon-cyanshadow-glow-cyan
limeborder-neon-limeshadow-glow-lime
GlowFrame uses bg-surface-elevated/50 with backdrop-blur-sm as its background by default, sitting one step above the page background with a subtle blur. The animate prop is best reserved for focal elements — overusing it dilutes the visual impact.

Build docs developers (and LLMs) love

Get started for freeTalk to us