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.

ProjectPanel renders the full detail view of a single selected project: a grayscale header image, neon-magenta title, tag badges, description prose, an optional BINDING NOTES aside, and contextual action buttons. When the selected project changes, Framer Motion animates the outgoing content out and the incoming content in via a horizontal slide transition.

​
Props

​
project
Project | null
required
The project object to display. When null, ProjectPanel renders an empty placeholder state instead of a project detail view.

​
Project Object Shape

FieldTypeRequiredDescription
idstringRequiredUnique identifier for the project
titlestringRequiredDisplay name shown in the panel header
descriptionstringRequiredFull prose description of the project
tagsstring[]RequiredTechnology or topic labels shown as mono badges
imagestringRequiredURL of the project header image
demoUrlstringOptionalURL for the live demo — renders a “Summon Demo” button
sourceUrlstringOptionalURL for the source repository — renders a “Reveal Source” button
readmeUrlstringOptionalURL for the README — renders an “Inspect Readme” button
bindingNotesstringOptionalShort technical note rendered in the BINDING NOTES aside block

​
Usage

const [selectedProject, setSelectedProject] = useState(null);

// Typically paired with SummoningCircle — one circle per project
<div className="flex flex-col lg:flex-row gap-12">
  {projects.map((project, i) => (
    <SummoningCircle
      key={project.id}
      project={project}
      isActive={selectedProject?.id === project.id}
      onClick={() => setSelectedProject(project)}
    />
  ))}
  <ProjectPanel project={selectedProject} />
</div>

​
Placeholder State

When the project prop is null, ProjectPanel renders a centered placeholder instead of a detail view. The placeholder displays a Sigil with id projects, size 48, and color magenta, along with a short prompt instructing the user to select a project from the list. This state appears on initial page load if no project has been pre-selected.

​
Animation Details

ProjectPanel wraps its content in Framer Motion’s AnimatePresence with mode="wait". When the project prop changes, the outgoing panel animates to { opacity: 0, x: -20 } and the incoming panel animates in from { opacity: 0, x: 20 } to { opacity: 1, x: 0 }, with a transition duration of 0.3 seconds. The project.id is used as the motion key so that switching between projects correctly triggers the exit and enter animations.

​
BINDING NOTES

The optional bindingNotes field activates a highlighted aside block inside the panel — styled with a purple left border, the rune-3 Sigil, and a small “BINDING NOTES” label. Use it for brief technical context that sits outside the main description: 
bindingNotes: "Data persists locally. No external database summoned."
This block is purely presentational and is only rendered when bindingNotes is a non-empty string.
Action buttons (Summon Demo, Reveal Source, Inspect Readme) only render if the corresponding URL field is provided in the project data. A project with no URLs will show no action buttons at all.

Build docs developers (and LLMs) love

Get started for freeTalk to us