---
title: "Image Shatter — Free Framer component · Best of Framer"
description: "Free Framer component · by Weblr Studio · Backgrounds. This Framer component turns any image into animated tiles that separate on hover and reassemble smoothly."
canonical: "https://framer.elliotli.dev/component/image-shatter"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Image Shatter

# Image Shatter

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

![Image Shatter preview image 1](https://framer.elliotli.dev/og/component/image-shatter/ef6602a20d3389d6/1600x1200.jpg)

## Summary

This Framer component turns any image into animated tiles that separate on hover and reassemble smoothly.

## Description

This Framer component turns any image into animated tiles that separate on hover and reassemble smoothly. It supports controllable object-fit modes, custom object-position, DPR capping, and pixel-aligned tile edges to avoid seams. Configure tiles per axis, random seed, maximum offset, rotation, and spring stiffness or damping. A magnetic cursor effect adds directional pull with adjustable strength and radius, including delayed reassembly after leaving hover. Responsive logic reduces tile counts on small screens. Backgrounds are calculated from the loaded image or srcset, preserving natural dimensions and crisp scaling. Motion uses Framer Motion springs, reduced-motion preferences, and GPU-friendly transforms for excellent performance.

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

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

-   All · #4773

## Details

- **Author**: Weblr Studio
- **Published**: 2025-09-11
- **Updated**: 2025-10-26
- **Added**: 2025-09-01
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background