5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/2ki4yyrisu2ij.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1p1m6k-07-rnl.js","/creators-assets/_next/static/immutable/chunks/31z3x8-ecursh.js","/creators-assets/_next/static/immutable/chunks/1ref25mu3oq2i.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3jh-ytnj2jozn.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/05rrr83hzalq3.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/2917y2cfwg0e8.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/0r0u_faqg_ape.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T8ef,

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.

5a:[["$","$L5d",null,{"post":{"id":"01a0f7d6-a2e0-77eb-9696-2db412282feb","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"63819440-bb49-4513-aaa2-1d6ea9182b8c","name":"Het darji","slug":"het-darji","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/63819440-bb49-4513-aaa2-1d6ea9182b8c/66znwn23","followed":false,"followsYou":false},"media":[],"resources":[{"id":"remiXaXF3B1LaI1m6uOI","resolved":true,"title":"PNG to Particles","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"About Image-to-Particle Dissolve"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Image-to-Particle Dissolve is an interactive Framer Code Component that transforms any uploaded image into a living field of particles or image pixels."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Converts uploaded images into particles or pixel tiles"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Preserves the original image shape and colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Repel, attract, or hide pointer interactions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Click-and-hold dissolve effect with smooth reformation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive layer sizing based on image scale"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Transparent background support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth animation with optimized particle sampling"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Works with transparent PNG images"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customizable directly from Framer’s properties panel"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Customization"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Use the included controls to adapt the component to your project:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust image scale from 0.1× to 5×"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Control particle density and size"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Switch between particle and image-pixel rendering"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Use sampled image colors or a custom particle color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Change pointer mode, radius, and interaction force"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust animation speed and idle drift"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set a transparent or custom background"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Control canvas pixel density for performance"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Perfect For"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero sections and landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio and creative studio websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product reveals and interactive showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Brand logos and image presentations"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Technology and AI websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Editorial and experimental websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive backgrounds"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Futuristic visual experiences"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"How to Use"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"For the best experience, keep the component unobstructed so visitors can interact with the particles using their cursor or touch device."}]}]},"introduction":"Turn any image into an interactive","slug":"png-to-particles","author":{"framerUserId":"63819440-bb49-4513-aaa2-1d6ea9182b8c","name":"Het darji","slug":"het-darji","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/63819440-bb49-4513-aaa2-1d6ea9182b8c/66znwn23","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/63819440-bb49-4513-aaa2-1d6ea9182b8c/01a0f808-68e1-77a2-a107-60dd701f6fd2.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1200,"height":900}}],"post":null,"createdAt":"2026-10-01T14:20:32.983Z","updatedAt":"2026-10-01T16:06:24.998Z","publishedAt":"2026-10-01T14:20:32.979Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Partical-Effects-dpsDEx.js@FbwXFuffXbgf70vseDMe","previewUrl":"https://honest-tasks-766904.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"FbwXFuffXbgf70vseDMe","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-01T14:20:33.888Z","updatedAt":"2026-10-01T14:20:33.888Z","reported":false}}],"$L5f"]

Suggested for you