React Integration

import { 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>
      <Canvas2d
        mediaGroups={[
          {
            type: 'manifest',
            rootDir: "https://cdn.scrollsequence.com/dna-blue/",
            imageSizes: {
              1920: {
                width: 1920,
                height: 1080,
                files: {
                  i: "1920/%04d.jpg",
                },
                frameCount: 293
              }
            },
          },
        ]}
      />
      {/* Content continuing after the sequence */}
      <section style={{ height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <p>Sequence ended, continue reading...</p>
      </section>
    </main>
  );
}