HTML Structure & Data Attributes

The vanilla engine uses semantic class names that mirror the WordPress block system and React components.

DOM Hierarchy


<!-- Root Sticky Scene Container -->
<div class="scrollsequence-scene" data-ssq-duration="1500" data-ssq-scrub="1">
  <div class="scrollsequence-scene_inner">
    
    <!-- Background Canvas Layer -->
    <div class="scrollsequence-layer" data-ssq-placement="center center">
      <div
        class="scrollsequence-canvas2d"
        data-ssq-media-groups='[{"type":"manifest","rootDir":"https://cdn.scrollsequence.com/2026-09/dna-blue/","imageSizes":{"1920":{"width":1920,"height":1080,"files":{"i":"1920/%04d.jpg"},"frameCount":293}}}]'
      >
        <canvas></canvas>
      </div>
    </div>
 
    <!-- Foreground Content Layer -->
    <div class="scrollsequence-layer" data-ssq-placement="center center">
      <div class="text-center">
        <h1>Cinematic Scroll</h1>
        <p>60 FPS Hardware-Accelerated Scrubbing</p>
      </div>
    </div>
 
  </div>
</div>

Data Attributes Reference

All attributes are serialized as JSON or primitive strings via data-ssq-{attribute}:

Attribute	Element	Type	Description
`data-ssq-media-groups`	`.scrollsequence-canvas2d`	`JSON array`	Array of media group configurations or manifest definitions.
`data-ssq-placement`	`.scrollsequence-layer`	`string`	9-point grid anchor (`'center center'`, `'top left'`, etc.).
`data-ssq-duration`	`.scrollsequence-scene`	`number`	Sticky scroll duration in pixels (default `1500`).
`data-ssq-trigger-start`	`.scrollsequence-scene`	`number`	Start viewport trigger ratio (`0` to `1`).
`data-ssq-trigger-end`	`.scrollsequence-scene`	`number`	End viewport trigger ratio (`0` to `1`).
`data-ssq-scrub`	`.scrollsequence-scene`	`number`	Scrub smoothing factor (default `1`).
`data-ssq-content-animations`	`.scrollsequence-scene`	`JSON object`	Declarative keyframe animation definitions.