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.

SummoningCircle renders a single animated circular button representing one project. It displays the project title and a Sigil icon inside a set of concentric rotating rings — an outer dashed ring and an inner dotted ring — that spin continuously when the item is active. Clicking the circle fires the onClick callback, and the isActive prop toggles the selected visual state. One SummoningCircle is rendered per project; selection state is lifted to the parent.

​
Props

​
project
Project
required
The project object to display inside the circle. The component reads project.title for the heading and project.image for the background texture, and passes project.title to the button’s aria-label.
​
onClick
() => void
required
Callback fired when the user clicks the circle. Wire this to your parent state setter to update the selected project and drive ProjectPanel.
​
isActive
boolean
required
When true, the outer and inner rings animate to a full 360° rotation loop, borders shift to full neon-magenta and neon-purple, and the title inside the circle switches to text-neon-magenta with a glow. When false, borders are dimmed and rings are stationary.

​
Usage

import { SummoningCircle } from './components/projects/SummoningCircle.js';
import { projects } from './data/projects.js';

function ProjectsPage() {
  const [selected, setSelected] = useState(projects[0]);

  return (
    <div className="flex flex-col lg:flex-row gap-12">
      <div className="flex flex-wrap gap-8 justify-center">
        {projects.map(project => (
          <SummoningCircle
            key={project.id}
            project={project}
            isActive={selected?.id === project.id}
            onClick={() => setSelected(project)}
          />
        ))}
      </div>
      <ProjectPanel project={selected} />
    </div>
  );
}

​
Interaction

Each SummoningCircle has two interactive states:
  • Hover — When isActive is false, hovering the circle scales it up via hover:scale-105 and partially brightens the ring borders from their dimmed state.
  • Active — When isActive is true, the circle scales to scale-105, both rings animate into a continuous rotation loop (outer ring at 20s, inner ring at 15s in the opposite direction), borders glow at full neon intensity, and the Sigil color switches from purple to magenta.
The four cardinal rune icons around the outside of the circle also increase in opacity from 50% to 100% and gain a magenta drop-shadow glow when the circle is active.
Pre-select the first project on page load by passing projects[0] as the initial value to your useState call. This avoids showing the empty ProjectPanel placeholder state on initial render.

Build docs developers (and LLMs) love

Get started for freeTalk to us