Resources
Desktop app
Marketplace
Community
Developers
Wallpapers
Meetups
Company
Security
Careers
Report
Status
Legal
Blog
Creators
Program
Payouts
Experts
Awards
Events
Brand
Compare
Squarespace
Wordpress
Unbounce
Webflow
Figma
Wix
Solutions
Figma to HTML
Website builder
Portfolio maker
Landing pages
UI/UX design
No-code
Socials
Instagram
X Twitter
YouTube
LinkedIn
Threads
TikTok
    Component preview thumbnail
    MarketplaceComponents

    Image Shatter

    Interactive image shatter component for Framer, using motion tiles, magnetic hover, spring physics, responsive grids, and precise object-fit alignment control.

    Framer Mint
    Framer Mint
    Creator
    2w ago
    Updated
    40
    Installs
    Framer Mint
    Framer Mint
    Creator
    2w ago
    Updated
    40
    Installs

    Make it with Workshop

    Build your own component with AI


    About this Component

    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.

    Support
    About ComponentsRefund PolicyContact Creator
    Framer
    EnterprisePricing
    Log inSign up
    Enterprise
    Pricing
    Log in
    Sign up
    Marketplace
    TemplatesPluginsComponentsVectors
    Templates
    Plugins
    Components
    Vectors

    More Components

    See All →
    Thumbnail for FF Podcast Player, a Framer Marketplace template by Ryan Halls.
    FF Podcast Player
    $10
    Ryan Halls
    Thumbnail for Mechanical Keyboard, a Framer Marketplace template by Golden Ekpendu.
    Mechanical Keyboard
    Free
    Golden Ekpendu
    Thumbnail for Ripple Effect Loader, a Framer Marketplace template by Framer Spark.
    Ripple Effect Loader
    $8
    Framer Spark
    Thumbnail for PulseVideo, a Framer Marketplace template by Sherif Alabi.
    PulseVideo
    $10
    Sherif Alabi
    Thumbnail for Dynamic Copyright, a Framer Marketplace template by Digithink Technologies.
    Dynamic Copyright
    Free
    Digithink Technologies
    Thumbnail for HotSpot Component, a Framer Marketplace template by Natália Tímea.
    HotSpot Component
    $19
    Natália Tímea
    Thumbnail for Phone Input, a Framer Marketplace template by Roman Avshalumov.
    Phone Input
    Free
    Roman Avshalumov
    Thumbnail for 3D Model Viewer, a Framer Marketplace template by Chien Pham.
    3D Model Viewer
    $10
    Chien Pham

    More from Framer Mint

    See All →
    Thumbnail 1 for Organic Blobs, a Framer Marketplace vectorSet by Framer Mint.Thumbnail 2 for Organic Blobs, a Framer Marketplace vectorSet by Framer Mint.
    Organic Blobs
    Vector Set · $5
    Framer Mint
    Thumbnail for Image Ripple Effect, a Framer Marketplace component by Framer Mint.
    Image Ripple Effect
    component · Free
    Framer Mint
    Thumbnail for Animated Gradient BG, a Framer Marketplace component by Framer Mint.
    Animated Gradient BG
    component · $5
    Framer Mint
    Thumbnail for Interactive Gradient, a Framer Marketplace component by Framer Mint.
    Interactive Gradient
    component · Free
    Framer Mint