Kinetic Collage

1. Size

Sets the width and height (square) of the collage. Larger values increase perceived 3D depth and the amount of drag distance on screen.

2. Border

Controls color/thickness/radius of each layer’s border in one place. Useful for framing the stack or cleaning up image edges.

3. Perspective

Camera-to-object distance defining 3D perspective. Smaller values create stronger perspective; larger values look flatter.

4. Blur

Blur strength applied to the front/back frames. A subtle value suggests a glass-like plate; too high may cause edge bleed.

5. Stiffness

Controls how strongly the rotation is pulled toward its target after dragging stops. Lower values make the motion slower and smoother, while higher values make it faster and snappier. Very low values feel sluggish, while very high values can feel stiff or rigid.

6. Damping

Controls how quickly the rotation slows down when stopping or reversing direction — lower values make it stop more quickly and abruptly, while higher values make it slow down more gradually and smoothly.

7. Auto Speed

Sets auto-rotation speed as an integer(internally ×0.1 deg/frame). Defines the default spin when idle.

8. Z Step

Z-axis gap(px) between image layers. Larger values amplify depth; too large may feel overly spaced.

9. Images

Array of images to display. They are spaced evenly around center in order; if empty, a helper message is shown.

⚠️ Adding too many images may impact site performance.