import { Scene, Layer, Canvas2d } from 'scrollsequence/react';

export default function Example() {
  return (
    <main style={{ background: '#0a0a0a', color: '#fff' }}>
      {/* Spacer content before the sequence */}
      <section style={{ height: '50vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <p>Scroll down to start sequence ↓</p>
      </section>
      <Scene>
        <Layer>
          <Canvas2d
            mediaGroups={[
              {
                type: 'manifest',
                rootDir: "https://cdn.scrollsequence.com/dna-blue/",
                imageSizes: {
                  1920: {
                    width: 1920,
                    height: 1080,
                    files: {
                      i: "1920/%04d.jpg",
                      d: "depthmaps/%04d.jpg" // depthmaps
                    },
                    frameCount: 293
                  }
                },
              },
            ]}
          />
        </Layer>
        <Layer placement="center center">
          <div style={{ textAlign: 'center' }}>
            <h1 style={{ fontSize: '3rem', fontWeight: 800, margin: 0 }}>
              Cinematic Scroll
            </h1>
            <p style={{ opacity: 0.7, marginTop: '0.5rem' }}>
              60 FPS Hardware-Accelerated Scrubbing
            </p>
          </div>
        </Layer>
      </Scene>
      {/* Content continuing after the sequence */}
      <section style={{ height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <p>Sequence ended, continue reading...</p>
      </section>
    </main>
  );
}
Pinned Hero with Depth Map Parallax
