Kinetic Collage
Kinetic Collage is a Framer component that builds 3D collages from layered images, letting users drag, swipe, and auto-rotate them for immersive showcases.
Make it with Workshop
Build your own component with AI
Kinetic Collage is a Framer component that builds 3D collages from layered images, letting users drag, swipe, and auto-rotate them for immersive showcases.
Make it with Workshop
Build your own component with AI
Size
Sets the width and height (square) of the collage. Larger values increase perceived 3D depth and the amount of drag distance on screen.
Border
Controls color/thickness/radius of each layer’s border in one place. Useful for framing the stack or cleaning up image edges.
Perspective
Camera-to-object distance defining 3D perspective. Smaller values create stronger perspective; larger values look flatter.
Blur
Blur strength applied to the front/back frames. A subtle value suggests a glass-like plate; too high may cause edge bleed.
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.
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.
Auto Speed
Sets auto-rotation speed as an integer(internally ×0.1 deg/frame). Defines the default spin when idle.
Z Step
Z-axis gap(px) between image layers. Larger values amplify depth; too large may feel overly spaced.
Images
Array of images to display. They are spaced evenly around center in order; if empty, a helper message is shown.
Drag to rotate in 3D
Smooth auto-spin when idle
Adjustable depth (z-step), speed, spring stiffness/damping
Custom border, blur, radius, and perspective
No code required
