Skip to content

Scroll sequence

tsx
export function ScrollStory() {
  const sectionRef = useRef<HTMLElement>(null)
  const progress = useSectionProgress(sectionRef)

  return (
    <section ref={sectionRef} style={{ height: '400vh' }}>
      <div style={{ position: 'sticky', top: 0, height: '100vh' }}>
        <ModelLabViewer
          src="/models/galaxy.glb"
          preset={preset}
          playSequence={false}
          sequenceProgress={progress}
          controls={false}
          effect={{
            type: 'cosmic-pulse',
            progress,
            intensity: 0.9,
          }}
        />
      </div>
    </section>
  )
}

Clamp progress to [0, 1]. Use the same value for the sequence and effect to keep camera, model, lighting, and materials synchronized.

Released under the MIT License.