---
title: "Geometric Scatter — Free Framer component · Best of Framer"
description: "Free Framer component · by Jirei · Effects. Geometric Scatter is a premium, highly-interactive image component that breaks your visuals apart and brings them to life."
canonical: "https://framer.elliotli.dev/component/geometric-scatter"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Geometric Scatter

# Geometric Scatter

Interactive image slicing.

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

![Geometric Scatter preview image 1](https://framer.elliotli.dev/og/component/geometric-scatter/7c37da0bee9d8cc6/1600x1200.jpg)

## Summary

Geometric Scatter is a premium, highly-interactive image component that breaks your visuals apart and brings them to life.

## Description

**\### The Ultimate Image Slicer**

Geometric Scatter is a premium, highly-interactive image component that breaks your visuals apart and brings them to life. By utilizing an advanced SVG engine, the component slices any image you provide into customizable, geometric pieces that playfully scatter when hovered.

**\### 10 Stunning Patterns**

Choose from 10 distinct, mathematically generated cut patterns to perfectly match your site's aesthetic:

\- **Grid, Rows & Columns**: Clean, classic rectangular slices.

\- **Triangles & Cross Cuts**: Sharp, modern diagonal slices.

\- **Diamonds & Chevrons**: Dynamic, directional arrow-like shapes.

\- **Concentric & Sunburst**: Beautiful radial slices expanding from the center.

**\### Unmatched Customization**

Unlike standard CSS \`clip-path\` solutions, Geometric Scatter is built entirely on inline SVGs, meaning it **natively supports borders** on every single complex geometric piece.

\- **Complexity**: Increase the grid size to create dozens of tiny shards, or keep it simple with a few large pieces.

\- **Border Control**: Add sleek borders to your slices with full width and color controls.

\- **Animation Tuning**: Tweak the scatter distance, spring speed, and entry delay to dial in the perfect physics.

**\### Performant & Production Ready**

\- **Reactive Cursor Physics**: The pieces intelligently calculate their distance from your cursor, naturally scattering out of the way as you brush your mouse over them.

\- **Mobile Safe**: Includes a dedicated "Disable Mobile" toggle to ensure the interaction gracefully degrades to a static image on touch devices.

\- **SEO & Editor Friendly**: Uses hidden semantic \`<img>\` tags for perfect SEO, and utilizes Framer's \`useIsStaticRenderer\` to ensure it never disrupts your canvas editing experience.

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

-   All · #3047

## Details

- **Author**: Jirei
- **Published**: 2026-05-06
- **Updated**: 2026-07-30
- **Added**: 2026-04-20
- **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