Remember those classic wooden dexterity games where you tilt a box to guide a steel marble past a sea of holes? The Canvas Labyrinth turns your entire web browser into a living, tactile version of that childhood favorite. Spanning 7 multi-page levels, the website layout is the game board.
Desktop Play: Use your arrow keys to dynamically shift the global gravity vectors of the page, tilting the "board" to roll the marble.
Mobile Play: Seamlessly switches to utilize the device's native gyroscope. Tilt your phone in mid-air to guide the ball with 1:1 tactile responsiveness—just like the physical toy.
The Gauntlet: Dodge the black hole traps to avoid dropping through the floor and resetting. Reaching the pulsing green hole at the bottom instantly triggers an agentic page transition to the next, more unforgiving level.
This entire experience was brought to life by leveraging Framer 3.0's new canvas design agents. By feeding the agent a strict physical blueprint, it dynamically generated:
A responsive 2D physics canvas with finely-tuned mass, air friction, and continuous collision detection so the marble never clips through walls.
Complex input mapping that translates mobile device orientation angles directly into physics engine acceleration forces.
An interconnected multi-page architecture that scales non-linearly in difficulty from a basic tutorial level to a brutal final gauntlet.
Remember those classic wooden dexterity games where you tilt a box to guide a steel marble past a sea of holes? The Canvas Labyrinth turns your entire web browser into a living, tactile version of that childhood favorite. Spanning 7 multi-page levels, the website layout is the game board.
Desktop Play: Use your arrow keys to dynamically shift the global gravity vectors of the page, tilting the "board" to roll the marble.
Mobile Play: Seamlessly switches to utilize the device's native gyroscope. Tilt your phone in mid-air to guide the ball with 1:1 tactile responsiveness—just like the physical toy.
The Gauntlet: Dodge the black hole traps to avoid dropping through the floor and resetting. Reaching the pulsing green hole at the bottom instantly triggers an agentic page transition to the next, more unforgiving level.
This entire experience was brought to life by leveraging Framer 3.0's new canvas design agents. By feeding the agent a strict physical blueprint, it dynamically generated:
A responsive 2D physics canvas with finely-tuned mass, air friction, and continuous collision detection so the marble never clips through walls.
Complex input mapping that translates mobile device orientation angles directly into physics engine acceleration forces.
An interconnected multi-page architecture that scales non-linearly in difficulty from a basic tutorial level to a brutal final gauntlet.
