Layer Block
The Layer block (scroll-sequence/v2-layer) is the primary layout child of a Scene Block.
Each Scene is composed of one or more stacked Layers. Layers allow you to pin visual canvases (such as Canvas 2D or Canvas 3D) and overlay any standard WordPress content (headings, paragraphs, buttons, or group blocks) at precise viewport coordinates while scrolling.
Strict Hierarchy: The Layer block must always be a direct child of a Scene block. The Scene block only accepts Layer blocks as its immediate children.
Why Use Layers?
In Scrollsequence V2, all visual elements within a pinned sequence are organized into layers:
- Background Canvas Layer: Contains a Canvas 2D or Canvas 3D block that scrubs image frames as you scroll.
- Foreground Content Layers: Contain text, CTAs, product details, or headers that stay fixed or animate over the video sequence.
- Progress & UI Layers: Contain scroll progress indicators or interactive HUD elements pinned to the viewport corners.
Block Attributes & Settings
1. Placement Matrix
The placement attribute controls where the inner content is anchored inside the pinned Scene viewport.
| Placement Option | Description |
|---|---|
center center (Default) | Centers content both vertically and horizontally. Ideal for hero titles. |
top left | Anchors content to top-left corner. Perfect for progress bars or logos. |
top center | Anchors content to top-center. Ideal for header banners. |
top right | Anchors content to top-right corner. Great for secondary navigation or badges. |
center left | Vertically centered, left-aligned. Ideal for split-screen layouts. |
center right | Vertically centered, right-aligned. Ideal for product detail panels. |
bottom left | Anchors to bottom-left corner. Great for captions or footnotes. |
bottom center | Anchors to bottom-center. Common for “scroll down” hints or CTAs. |
bottom right | Anchors to bottom-right corner. Ideal for interactive controls. |
Example Layer Structure
Here is how a typical cinematic hero sequence is assembled in the WordPress Block Editor:
▼ Scene Block (Duration: 1500px, Sticky)
├── ▼ Layer Block (Placement: center center)
│ └── Canvas 2D Block (Image sequence media group)
│
├── ▼ Layer Block (Placement: top left)
│ └── Progress Bar Block (Global scroll tracker)
│
└── ▼ Layer Block (Placement: center center)
├── Heading: "Cinematic Scroll"
└── Paragraph: "60 FPS hardware-accelerated scrubbing"Layer Stacking Order
Layers are rendered in the order they appear in the editor:
- First Layer: Rendered at the bottom (ideal for Canvas 2D/3D).
- Subsequent Layers: Stack on top of preceding layers (ideal for text, buttons, and UI overlays).