Pointer parallax layers

Use it for

• Illustrated heroes and empty states
• Destination or product scenes built from a few flat layers

Avoid

• Photos, which break when sliced into layers
• Layouts where shifting layers could cover text or controls

How it works

Each layer carries a data-depth between 0.15 and 1. The pointer offset from the stage centre is normalised to -1 to 1 and eased with a 0.08 lerp in a requestAnimationFrame loop, and each layer translates against it by depth times 4 percent of the stage width. Layers overhang the stage on every side so their edges never show. Leaving the stage eases the scene back to centre.

Accessibility

The scene is decorative and aria-hidden, the caption is real text. Touch input is ignored so scrolling stays free; with no pointer input the scene drifts slowly, which covers phones. Reduced motion shows the still scene and runs no loop, and the loop pauses off screen.