Use the sections the reader is actually passing
The homepage sections have different heights, and text wrapping changes them again. The figure needs to follow those sections rather than an equal division of the total scroll distance.
The component measures headings, anchor offsets and content bottoms, then maps native scroll position to the authored poses. Its passive listener records the position and requests a frame. Reversing direction returns to the corresponding pose without intercepting the wheel or making the page wait for an animation.
Give the phone layout its own behavior
Below 760px, the first Reach figure sits after the opening copy in the normal page flow. It does not travel between reserved illustration bands or morph as the phone scrolls. The drawing buffer retains the 1586 by 992 source grid before the browser scales it down, avoiding the overlap bands produced by squeezing the grain grid into a lower-resolution buffer.
A primary touch or pen contact activates local scatter. Quick taps last long enough to be rendered, releasing another finger does not cancel the active contact, and pointer cancellation clears the effect when the browser takes over a scroll gesture. Native scrolling and pinch zoom remain available.
Make breathing the only idle motion
Idle movement uses one 5.2-second breathing value across a fixed anatomical field. The chest expands and rises while protected head and hand regions share the same vertical lift. There are no travelling phases, separate sway terms or independent grain animations.
Pause and offscreen detection stop frame work; hidden tabs do not keep advancing the animation. Reduced motion disposes the renderer and leaves the source artwork available. Context loss also falls back to that artwork, with a fresh renderer created on recovery.
Watch the result as well as testing the math
Timeline tests cover unequal anchors, reversals and large jumps. Source and particle checks verify the artwork and representation, while the motion tests check that every sampled idle offset follows the same breathing phase.
Browser checks exercise the compact drawing buffer, touch, scrolling, pinch, pause, reduced motion and offscreen recovery. Those checks can reveal a rendering or interaction problem that a matching source hash cannot. They remain browser-emulated checks, not physical-phone performance measurements.