A little fox who treats every DOM element as a platform — powered by KAPLAY physics
Strolls across elements, reversing direction at random or at the page edge.
Leaps between platforms. Every heading, card, button and footer is fair game.
Takes short breaks mid-journey before setting off on the next adventure.
On load, querySelectorAll walks the DOM collecting every visible element.
Each element's getBoundingClientRect() is converted to document coordinates
and used to place an invisible static physics body in the KAPLAY world at that exact spot.
The buddy is a dynamic physics body rendered as an emoji on a fixed canvas overlay.
pointer-events: none on the canvas keeps everything below fully interactive.
Gravity does the rest.
Platforms rebuild automatically on scroll and resize. You can also trigger a manual rebuild with the button below — useful if content changes after load.
"Every div is a platform. Every page is a level. Every scroll is a new adventure."
Scroll down — the buddy follows and discovers new terrain as it enters the viewport.
The buddy respawns automatically if it falls out of the visible area.
Platforms are rebuilt on every resize and after scrolling stops briefly.
The KAPLAY canvas is transparent and pointer-events: none, so links and
buttons beneath stay fully clickable.