Appearance
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.