About this effect
layers is a single perspective stage, a background plate and four svgcut-outs (card, ring, star and orb) placed at different depths with their own drift values.
scrolling turns the stage on the x-axis (rotateX) from 15° to 180° over 2.5 viewports on desktop. the mobile preset shortens this to 160° over 2 viewports. each layer moves on its own x, y and z path, while the background drifts more slowly. on desktop the pointer adds up to 4° of tilt. smaller screens keep the scroll turn but disable the pointer tilt.
there is a sweep effect that runs across the board before the turn begins, then the primary frame and square corner markers appear around the layers. the board leaves the hero before the rotation reaches 90°, so the movement reads as a departure rather than a complete flip. dainty.