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', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
        <h2>Scroll down to start sequence ↓</h2>
        <p> We have two media groups. <i>Progress bar</i> is attached to Scene timeline and <i>Content Animation</i> is attached to media group. </p>
      </section>
      <Scene
        contentAnimations={{
          onScroll: [
            {
              selector: ".animation-attached-to-global-scene-progress",
              track: {
                0:     { width: "calc(0% + 2px)" }, // we can animate simple values and calculations
                1:     { width: "calc(100% - 2px)" }
              }
            }
          ]
        }}
        triggerStart={1} // 0-1 range
        triggerEnd={0} // 0-1 range 
        //markers={true} // enable to see the trigger markers
      >
        <Layer>
          <Canvas2d
            mediaGroups={[
              {
                type: 'manifest',
                rootDir: "https://cdn.scrollsequence.com/dna-blue/",
                imageSizes: {
                  1920: {
                    width: 1920,
                    height: 1080,
                    files: {
                      i: "1920/%04d.jpg",
                    },
                    frameCount: 293,
                  }
                },
                contentAnimations:{
                  onScroll: [ // attached to media group
                    {
                      selector: ".animation-attached-to-first-media-group",
                      track: {
                        0:     { opacity: 0, y: "100px",  scale:0.8 },
                        0.25:  { opacity: 1, y: 0,        scale: 1 },
                        0.75:  { opacity: 1, y: 0,        scale: 1 },
                        1:     { opacity: 0, y: "-100px", scale:0.8 }
                      }
                    }
                  ]
                }
              },
              {
                type: 'manifest',
                rootDir: "https://cdn.scrollsequence.com/dna-blue/",
                isReverse: true, // second media group plays backwards (from end to start)
                imageSizes: {
                  1920: {
                    width: 1920,
                    height: 1080,
                    files: {
                      i: "1920/%04d.jpg",
                    },
                    frameCount: 293,
                  }
                },
              },              
            ]}
          />
        </Layer>
        <Layer placement="top left">
          <div style={{ width: "100%"}} >
            <div className="animation-attached-to-global-scene-progress" style={{  height: "2px", backgroundColor: "#ff0000ff", }}></div>
          </div>
        </Layer>
        <Layer placement="center center">
          <div className="animation-attached-to-first-media-group" style={{ textAlign: 'center' }} >
            <h1 style={{ fontSize: '3rem', fontWeight: 800, margin: 0 }}>
              Animate Any HTML Content
            </h1>
            <p style={{ opacity: 0.7, marginTop: '0.5rem' }}>
              Sync typography, UI layers, and progress indicators directly to scroll
            </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>
  );
}
Animate HTML Content
