---
title: "Kinetic Collage — Framer component · Best of Framer"
description: "$18.00 · Framer component · by Semantic Ground · Effects. Properties Size Sets the width and height (square) of the collage."
canonical: "https://framer.elliotli.dev/component/kinetic-collage"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Kinetic Collage

# Kinetic Collage

[View on Framer](https://framer.com/marketplace/components/kinetic-collage/?via=elliot-li)

![Kinetic Collage preview image 1](https://framer.elliotli.dev/og/component/kinetic-collage/59b0d8e9a0e4cad9/1600x1200.jpg)

## Summary

Properties Size Sets the width and height (square) of the collage.

## Description

## Properties

**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**

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-u5u4nxev-bAQyjQlKgy0M8EwKrDnxNJHJa6WRWq)

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

**Perspective**

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-u5u4nxev-Qpnn1gWXXkHAoDsF6ZBhErusqwsx2J)

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

**Blur**

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-u5u4nxev-LI0C5aAlyHkfdKKSWCWZRbzJ4z3jVx)

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**

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-u5u4nxev-IQaH7qfwlY8p69OM4peDzbdirdbAKc)

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.

## Feature

-   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
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #9557

## Details

- **Author**: Semantic Ground
- **Price**: $18.00
- **Published**: 2025-09-19
- **Updated**: 2025-09-19
- **Added**: 2025-09-15
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo