StringProgressPart

StringProgressPart does not track scroll by itself. It listens to a progress source by id, takes only one segment of that source timeline, and remaps that segment back to 0..1.

In practice:

source progress 0.00 -> 0.25 can become local slice 0 -> 1
source progress 0.25 -> 1.00 can become another slice 0 -> 1

Public API

Attributes

Attribute	Type	Default	Real runtime effect
`string-part-of`	string	`""`	Declares the source id and slice range in the form `source-id[start-end]`.

CSS Variables and DOM Output

The module writes one CSS variable:

--progress-slice

The value is written directly to the string="progress-part" element itself. There is no configurable key for this module.

Events

Channel	Payload	Fired when
`object:progress-slice:<id>`	`number`	The remapped slice value changes

Mirror Behavior

StringProgressPart does not propagate --progress-slice to mirrors in the current runtime. The write happens only on the source progress-part element.

Quick Example

HTML

<section class="hero">Scroll down</section>

<section string="progress" string-id="page-progress" class="progress-stage">
  <div class="slice-stack">
    <div class="slice-row">
      <div class="slice-label">0% - 50%</div>
      <div class="slice-demo">
        <div
          class="slice-box"
          string="progress-part"
          string-id="slice-a"
          string-part-of="page-progress[0-0.5]"
        ></div>
      </div>
    </div>

    <div class="slice-row">
      <div class="slice-label">50% - 100%</div>
      <div class="slice-demo">
        <div
          class="slice-box"
          string="progress-part"
          string-id="slice-b"
          string-part-of="page-progress[0.5-1]"
        ></div>
      </div>
    </div>
  </div>
</section>

<section class="hero">Scroll up</section>

CSS

.hero,
.progress-stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.slice-stack {
  display: grid;
  gap: 24px;
}

.slice-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 20px;
  align-items: center;
}

.slice-demo {
  display: grid;
  justify-items: center;
}

.slice-box {
  width: 120px;
  height: 120px;
  border: 2px solid black;
  background: white;
  transform: rotate(calc(var(--progress-slice, 0) * 1turn));
}

Registration

TypeScript

import StringTune, { StringProgress, StringProgressPart } from '@fiddle-digital/string-tune';

const stringTune = StringTune.getInstance();
stringTune.use(StringProgress);
stringTune.use(StringProgressPart);
stringTune.start(60);

StringProgressPart depends on a source module emitting object:progress:<id>. In the current public runtime that means a StringProgress source.

Detailed Behavior

The parser expects string-part-of in this exact shape: source-id[start-end].
The current parser accepts positive decimal numbers such as 0, 0.25, and 1.
Slice progress is clamped back to 0..1 after remapping.
On disconnect, the module unsubscribes from the source progress event.