Loading…
Live three.js · move your pointer
Open ↗Premiumhinge-fold vertex shader · dark
Folding Map
A paper road map that folds itself on a slate table: the accordion panels tilt into a zigzag fan and stack, the stack folds in half, then the whole map opens flat again, with contour lines, a dashed route and worn creases drawn in the shader.
How to use it
Run the real thing here, tune it, then copy the prompt that rebuilds it.
- 01Launch and look
The preview is the real three.js scene in a sandboxed frame, not a recording. Everything responds to you.
- 02Dial it in
Swatches recolour, sliders move the parameters that matter, Randomize finds what you would not have typed. Structural changes rebuild the geometry.
- 03Pick your stack
Single HTML by default, or a Next.js, React, Vue or Astro component that imports three from npm.
- 04Copy the prompt
It carries geometry, motion, camera and material intent with your values, in build order.
- 05Iterate one element at a time
Geometry, then motion, then camera, then material. Scroll and hover behaviour usually takes a second pass; that is normal.
More 3d scenes
Premium♥ 0
Glass Prism
2D ray-traced dispersion beams
Premium♥ 0
Bolt Assembly
exploded-view choreography with helical thread kinematics
Free♥ 0
Bait Ball
analytic vortex shoal with swim-wave vertex animation
Free♥ 0
Chain Drive
kinematic chain on sprockets with alternating instanced links