HUD parallax — head tracked

Three ordinary elements at three depths, translated from the pose. The same idea @leumas/hud’s useParallax applies to Studio’s HUD; here it is the raw hook and a CSS transform, which is all a heads-up layout needs.

How it moves

Three panels at three depths are translated by the pose through a CSS transform. Farther panels move less, so the layout gains depth without a canvas.

Use it

Import it from @leumas/headlock and mount a HeadlockStage, or copy the snippet on this page. The camera starts only when the visitor presses the button. Tags: hud, dom, css.