Geometric Containers
The structural geometry components for Prime Period Theory.
Container
The Period component acts as a structural positional wrapper for peripheral elements. Below, we've stripped it down to just its raw shape so you can see how it reacts to shape changes without content.
Layout Parameters
Controls whether the component responds to mouse/touch events. Disabling this applies 60% opacity and pointer-events: none.
The visual rendering format of the period wrapper.
Angle (in degrees) where the first step is placed on a circular period. -90 is 12 o'clock.
View Source Code
<ppt-container>
<ppt-period shape="circle" starting-angle="-90" min-width="150" min-height="150"></ppt-period>
</ppt-container>Step
A semantic marker component that is natively managed by the Period Component's geometry system. Step circles can have an assigned pitch. Clicking the circle will play the tone, and if a MIDI keyboard is connected, playing the corresponding note will visually highlight the circle.
Parameters (Primary Marker)
Parent Container Properties
The visual rendering format of the period wrapper.
Angle (in degrees) where the first step is placed on a circular period. -90 is 12 o'clock.
Component Properties
Controls whether the component responds to mouse/touch events. Disabling this applies 60% opacity and pointer-events: none.
The musical pitch assigned to this component (e.g. C4, A#3)
The fill color of the step circle.
Text label displayed inside the step circle (e.g., degree or step number).
View Source Code
<ppt-container>
<ppt-period shape="line-horizontal" starting-angle="-90" min-width="150" min-height="150">
<ppt-period-step-circle slot="step" label="A"></ppt-period-step-circle>
<ppt-period-step-circle slot="step" label="B"></ppt-period-step-circle>
<ppt-period-step-circle slot="step" label="C"></ppt-period-step-circle>
</ppt-period>
</ppt-container>Sequencer
A non-visual component (visible as a badge in designer mode) that lives inside a Period and automatically iterates through its siblings (like Step Circles) to play their sounds at a specified tempo.
Parameters
Parent Container Properties
The visual rendering format of the period wrapper.
Angle (in degrees) where the first step is placed on a circular period. -90 is 12 o'clock.
Component Properties
Comma-separated string IDs to listen to from control components.
Playback tempo in BPM.
Toggle to start/stop playback.
View Source Code
<ppt-container>
<ppt-period shape="circle" starting-angle="-90" min-width="150" min-height="150">
<ppt-period-sequencer slot="step" tempo="120" is-playing="false"></ppt-period-sequencer>
<ppt-period-step-circle slot="step" label="C4" pitch="C4"></ppt-period-step-circle>
<ppt-period-step-circle slot="step" label="E4" pitch="E4"></ppt-period-step-circle>
<ppt-period-step-circle slot="step" label="G4" pitch="G4"></ppt-period-step-circle>
<ppt-period-step-circle slot="step" label="C5" pitch="C5"></ppt-period-step-circle>
</ppt-period>
</ppt-container>