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.

RitualReport renders a full case study document from a structured data object. It displays the case study title, a thematic Sigil, and then each named section as a heading + prose block — following the Ritual Report format used throughout the portfolio. Section headings are rendered in font-display with neon colors; section content uses font-sans for extended readability. Each section animates into view via a scroll-triggered Framer Motion transition.

​
Props

​
caseStudy
CaseStudy
required
The case study data object to render. See the Case Study Object Shape section below.

​
Case Study Object Shape

{
  id: string,
  title: string,           // e.g. 'RITUAL REPORT: NEXUS DASHBOARD REBUILD'
  sigilId: string,         // Sigil ID for the header decoration
  sections: [
    {
      heading: string,     // e.g. 'Problem', 'Goal', 'Process'
      content: string,     // Full prose paragraph
    }
  ]
}

​
Standard Section Headings

These eight headings make up the recommended full Ritual Report structure. Include them in the order shown — the sections array is rendered sequentially:
HeadingPurpose
ProblemDescribe what was broken, missing, or suboptimal before the project
GoalState the desired outcome or north-star metric
ProcessSummarize the research, exploration, or investigation approach
Design DecisionsExplain UX and visual choices made and the reasoning behind them
Dev DecisionsDetail technical implementation choices — stack, architecture, trade-offs
Testing & DebuggingDocument notable bugs found, diagnosed, and resolved
ResultReport measurable or observable outcomes
Skills DemonstratedComma-separated list of technologies and competencies applied

​
Usage

import { RitualReport } from './components/case/RitualReport.js';
import { caseStudies } from './data/caseStudies.js';

{caseStudies.map(caseStudy => (
  <RitualReport key={caseStudy.id} caseStudy={caseStudy} />
))}

​
Animation

The header Sigil icon animates from { scale: 0.8, opacity: 0 } to { scale: 1, opacity: 1 } via whileInView with once: true. Each section block animates from { opacity: 0, y: 20 } to { opacity: 1, y: 0 } as it enters the viewport, with a -100px margin offset so the transition triggers slightly before the section is fully on screen.
You do not need to use all eight standard sections. The sections array is rendered in order, so include only the headings that are relevant to your case study. A minimal entry might only have Problem, Process, and Result.

Build docs developers (and LLMs) love

Get started for freeTalk to us