Lab
Depth Parallax Hero
Four layers, each assigned a depth value. Scroll moves them at different rates and the cursor shifts them slightly against each other, so the scene reads as one space with distance in it rather than a stack of sliding images.
How it works
What makes it read as depth
One number per layer
Every layer carries a single depth value in a data attribute, and both the scroll and cursor amounts are derived from it. Adding a fifth layer means adding one number, not another tween.
quickTo, not a tween per move
Cursor tracking uses gsap.quickTo, which reuses one tween per property instead of creating a new one on every mousemove. That is the difference between smooth and stuttering on a trackpad.
Restraint is the whole trick
Cursor movement tops out around 26px on the nearest layer. Push it further and it stops looking like depth and starts looking like the page is loose.