How it works
ScrollTrigger writes progress into a ref; useFrame lerps each part along its own explode vector and the camera along an arc. No React state per frame.
Scroll-Driven Disassembly
A procedural device explodes into parts as you scroll, while the camera orbits around it.
★ showcaseR3FdreiGSAPScrollTrigger
Performance
Renders through the single shared <Canvas> via drei <View> — no extra WebGL context, and the render loop only runs while a view is mounted. Parts share materials; geometry is created once with useMemo.
Accessibility & reduced motion
Reduced mode shows the exploded state statically with labels.
Export
{
"lerp": 0.1,
"scrub": 1,
"markers": false,
"explode": 2
}