Interactive Components

This library of framework-agnostic Web Components is designed to bring Prime Period Theory (PPT) to life. These components are highly composable, completely atomic, and independently distributable.

Explore the component families:

Foundational Primitives: The Base Component, Title, and Panel.
Geometric Containers: The Period and Period Step Components.

✨ Component Designer Studio (WIP)

The Component Designer Studio is an experimental, work-in-progress visual workspace. Its primary intention is to help users intuitively understand how to navigate, configure, and compose the various PPT components together. While not a fully-featured HTML editor, it provides a simple drag and drop editor with a live preview canvas, a hierarchical DOM tree, and the ability to export the underlying source code of the design.

Composition Showcase: Tonal Clock

The power of these atomic components comes from composition. Below is an example of the "Tonal Clock", which isn't a single monolithic component, but rather a <ppt-period> container automatically arranging 12 semantic <ppt-period-step-circle> markers!

Parameters

Interactive

View Source Code

<ppt-period shape="circle" starting-angle="-90" interactive="true" min-width="200" min-height="200">
  <ppt-period-step-circle slot="step" color="var(--solfege-do)" style="--ppt-text-color: #fff; --ppt-marker-border: none;">Do</ppt-period-step-circle>
  <ppt-period-step-circle slot="step" color="var(--solfege-re)" style="--ppt-text-color: #000; --ppt-marker-border: none;">Ra</ppt-period-step-circle>
  <ppt-period-step-circle slot="step" color="var(--solfege-re)" style="--ppt-text-color: #000; --ppt-marker-border: none;">Re</ppt-period-step-circle>
  <ppt-period-step-circle slot="step" color="var(--solfege-mi)" style="--ppt-text-color: #fff; --ppt-marker-border: none;">Me</ppt-period-step-circle>
  <ppt-period-step-circle slot="step" color="var(--solfege-mi)" style="--ppt-text-color: #fff; --ppt-marker-border: none;">Mi</ppt-period-step-circle>
  <ppt-period-step-circle slot="step" color="var(--solfege-fa)" style="--ppt-text-color: #fff; --ppt-marker-border: none;">Fa</ppt-period-step-circle>
  <ppt-period-step-circle slot="step" color="var(--solfege-fi)" style="--ppt-text-color: #fff; --ppt-marker-border: none;">Fi</ppt-period-step-circle>
  <ppt-period-step-circle slot="step" color="var(--solfege-so)" style="--ppt-text-color: #fff; --ppt-marker-border: none;">So</ppt-period-step-circle>
  <ppt-period-step-circle slot="step" color="var(--solfege-la)" style="--ppt-text-color: #fff; --ppt-marker-border: none;">Le</ppt-period-step-circle>
  <ppt-period-step-circle slot="step" color="var(--solfege-la)" style="--ppt-text-color: #fff; --ppt-marker-border: none;">La</ppt-period-step-circle>
  <ppt-period-step-circle slot="step" color="var(--solfege-ti)" style="--ppt-text-color: #fff; --ppt-marker-border: none;">Te</ppt-period-step-circle>
  <ppt-period-step-circle slot="step" color="var(--solfege-ti)" style="--ppt-text-color: #fff; --ppt-marker-border: none;">Ti</ppt-period-step-circle>
</ppt-period>