`<tosi-product>`

The scroll engine. A <tosi-product> owns the scrollable region it lives in: it measures a runway from its <tosi-product-section> children, hosts a sticky viewport-sized window, and translates the stack as you scroll. Each section pins (holds still while its animators run), then exits (scrolls out 1:1). Drop it into HTML — no orchestration code.

Pin.

Then exit.

Scroll the panel: the first section pins while its heading fades in, then scrolls away as the second pins. It's the HTML shown here — read it in Source.

`<tosi-product>` attributes

direction — "vertical" (default) or "horizontal".
debug — overlay showing local position / translate / active section + progress.

`<tosi-product-section>` attributes

scroll — pin duration as a percent of the viewport. 100 (default) = 1× viewport of pinning; the exit phase (1:1 over the section's height) is added on top.
theme / theme-from / theme-to — apply or interpolate a registered theme over the pin.

`<tosi-product-header>`

A sticky overlay header that slides in once scrollY passes its threshold (default 50), inheriting the active theme through the CSS cascade.

Nesting (follower mode)

A <tosi-product> placed inside a <tosi-product-section> becomes a follower: it's driven by the parent section's pin progress instead of document scroll, and sizes to fill its parent.

<tosi-product>