Core React Components
Scrollsequence exports three primary building blocks from scrollsequence/react:
import { Scene, Layer, Canvas2d } from 'scrollsequence/react';1. <Scene>
The <Scene> component controls the sticky scroll container and timing timeline for the sequence.
Common Props
| Prop | Type | Default | Description |
|---|---|---|---|
ref | Ref<SceneHandle> | undefined | Imperative handle for controlling progress via code (e.g., slider or mouse). |
triggerStart | number | 0.5 | Viewport trigger start ratio (0 = top, 0.5 = middle, 1 = bottom). |
triggerEnd | number | 0.5 | Viewport trigger end ratio where sequence unpins. |
scrub | number | 1 | Smoothness factor (1 for standard smoothing, 0 for instantaneous). |
contentAnimations | object | undefined | Timelines for animating CSS on scroll. |
markers | boolean | false | Visual debug markers on screen for trigger points. |
2. <Layer>
The <Layer> component sits directly inside <Scene> and anchors content inside the pinned viewport.
Common Props
| Prop | Type | Default | Description |
|---|---|---|---|
placement | string | 'center center' | 9-point grid anchor: 'top left', 'center center', 'bottom right', etc. |
className | string | '' | Custom CSS class names applied to the layer wrapper. |
style | CSSProperties | undefined | Inline styling. |
3. <Canvas2d>
The <Canvas2d> component renders the image frames onto a high-performance HTML5 <canvas>. It can be run unpinned as a standalone element, or placed inside a <Layer> in a <Scene>.
Unpinned Standalone Canvas Example
When used outside of <Scene>, <Canvas2d> scrubs directly relative to its own visibility in the page flow:
📄CanvasMinimal.tsx
Open preview↗import { Canvas2d } from 'scrollsequence/react';
import manifest from '../manifests/dna-blue-no-depth/scrollsequence-manifest.json'
export default function CanvasMinimal() {
return (
<main className="min-h-screen bg-neutral-950 text-white">
{/* Spacer before sequence */}
<section className="h-[50vh] flex items-center justify-center text-neutral-400">
<p className="text-lg">Scroll down to start sequence ↓</p>
</section>
{/* Scroll-driven canvas scrubbing */}
<Canvas2d
mediaGroups={[
{
type: 'manifest',
rootDir: 'https://cdn.scrollsequence.com/2026-09/dna-blue/',
imageSizes: manifest.imageSizes,
},
]}
/>
{/* Spacer after sequence */}
<section className="h-screen flex items-center justify-center text-neutral-400">
<p className="text-lg">Sequence ended, continue reading...</p>
</section>
</main>
);
}4. 3D WebGL Depth Parallax with <Canvas2d>
When your manifest contains grayscale depth maps (files.d), <Canvas2d> automatically initializes a WebGL shader for interactive 2.5D displacement and tilt:
📄SceneDepth.tsx
Open preview↗import { Scene, Layer, Canvas2d } from 'scrollsequence/react';
import manifest from '../manifests/dna-blue/scrollsequence-manifest.json'
export default function SceneDepth() {
return (
<main className="min-h-screen bg-neutral-950 text-white">
{/* Spacer before sequence */}
<section className="h-[50vh] flex items-center justify-center text-neutral-400">
<p className="text-lg">Scroll down to start sequence ↓</p>
</section>
{/* Pinned Scene with Depth Map Parallax */}
<Scene>
<Layer>
<Canvas2d
mediaGroups={[
{
type: 'manifest',
rootDir: 'https://cdn.scrollsequence.com/2026-09/dna-blue/',
imageSizes: manifest.imageSizes,
},
]}
/>
</Layer>
<Layer placement="center center">
<div className="text-center px-4">
<h1 className="text-4xl sm:text-6xl font-extrabold tracking-tight">
Cinematic Depth & Parallax
</h1>
<p className="mt-3 text-lg sm:text-xl text-neutral-300">
Hardware-accelerated 2.5D depth map simulation
</p>
</div>
</Layer>
</Scene>
{/* Spacer after sequence */}
<section className="h-screen flex items-center justify-center text-neutral-400">
<p className="text-lg">Sequence ended, continue reading...</p>
</section>
</main>
);
}Last updated on