Parallax
Layers moving at different speeds as you scroll, so the background drags behind the foreground and the page fakes depth.
See it
What it is
Move layers at different rates and the brain reads the difference as distance. Far things drift slowly, near things race past. Disney's multiplane camera did it in 1937, side-scrolling arcade games did it in the early 80s, and Nike Better World turned it into a web trend around 2011. Same trick every time: one scroll input, several speeds.
Scroll parallax is the common flavor (background at 0.5x, foreground at 1x), but pointer parallax works too: layers offset a few pixels toward the cursor. Build it with 'transform: translate3d()' driven by a scroll value, or with the pure-CSS perspective trick (a scrolling container with 'perspective' plus children pushed back on 'translateZ' and scaled back up).
Gotcha: subtlety is the whole game. A 10 to 30 percent speed difference reads as depth; 60 percent reads as a broken page. Avoid 'background-attachment: fixed', which forces a full repaint on every scroll frame and stutters badly on mobile. And parallax is a top trigger for motion sickness, so kill it under prefers-reduced-motion.
Ask AI for it
Add a scroll parallax effect to this hero: the background image should translate vertically at about 0.5x scroll speed, a mid-layer at 0.8x, and the headline at normal speed, creating layered depth. Drive it with 'transform: translate3d(0, y, 0)' on a requestAnimationFrame or scroll-timeline, never 'background-attachment: fixed'. Keep the offset range under 120px so nothing detaches visibly, overscale the background about 20 percent so no edges show, and disable the effect entirely under prefers-reduced-motion.