PNG to Particles

About Image-to-Particle Dissolve

Image-to-Particle Dissolve is an interactive Framer Code Component that transforms any uploaded image into a living field of particles or image pixels.

Move your cursor through the image to repel particles, then click and hold to pull nearby particles toward the pointer and dissolve them before they smoothly reform into the original image.

Key Features

• Converts uploaded images into particles or pixel tiles

• Preserves the original image shape and colors

• Repel, attract, or hide pointer interactions

• Click-and-hold dissolve effect with smooth reformation

• Responsive layer sizing based on image scale

• Transparent background support

• Smooth animation with optimized particle sampling

• Works with transparent PNG images

• Customizable directly from Framer’s properties panel

Customization

Use the included controls to adapt the component to your project:

• Adjust image scale from 0.1× to 5×

• Control particle density and size

• Switch between particle and image-pixel rendering

• Use sampled image colors or a custom particle color

• Change pointer mode, radius, and interaction force

• Adjust animation speed and idle drift

• Set a transparent or custom background

• Control canvas pixel density for performance

Perfect For

• Hero sections and landing pages

• Portfolio and creative studio websites

• Product reveals and interactive showcases

• Brand logos and image presentations

• Technology and AI websites

• Editorial and experimental websites

• Interactive backgrounds

• Futuristic visual experiences

How to Use

Add Image-to-Particle Dissolve to your Framer project, upload an image, resize it using the Scale control, and customize the effect from the properties panel.

For the best experience, keep the component unobstructed so visitors can interact with the particles using their cursor or touch device.