### 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.
### 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.
Jirei
