STYLEGALLERY / STUDIESCODE + CURIOSITY / 15INDEPENDENT EXAMPLE

15 / Pointer input & bound layers

A window with depth.

Move a shared two-axis input across an original botanical window. Background, middle and foreground layers use different depths while the labels stay still.

THE CONSERVATORY

A quiet
dimension.

BACKGROUND / 0.25MIDDLE / 0.55FOREGROUND / 1.00
What this study teaches

One normalized pointer model drives bounded transforms for three independently illustrated DOM/SVG layers. Direct input and bound-model modes share the same render function, with reset and native coordinate controls. The setting is a botanical display, without game, staking, transaction or provider-runtime behavior.

Independent implementation informed by “Integrating Rive into a React Project: Behind the Scenes of Valley Adventures”, Zajno, Codrops. This is newly authored code and artwork, not a recovered original project. The study is a botanical DOM/SVG parallax example, not a Rive file integration or game interface. No Chumbi artwork, NFT program, staking, transactions or rewards are included.