Live preview: https://image-to-particles.framer.website/

Component link to copy/paste into Framer

Framer Remix Link with a demo

Support transparency on images

Responsive (particles rate changes according to the displayed size)

Highly customizable, choose the oscillation of the particles, density, brightness, and more.

Parameters to change the behavior of the interactivity.

Fallback for low FPS renders, for example, Safari tends to limit the speed of the renders. Also, slow devices could have low frame rates, if the fallback is active, it will render a static image of particles.

If you use a large image, more particles will be rendered, this will potentially decrease the FPS rate.

Try to use a good ratio of particles density and particles size on each breakpoint.

This component was built with Framer Workshop, a tool that allows you to make components using AI.

The next video shows how low FPS is handled on slow devices, or if a browser (like Safari) renders the particles on a low FPS.

This is a component generated with AI using Framer Workshop, depending on where you live, ownership related to AI generated content may vary. For any content that could belong to the author of this product, the author grants a non-exclusive right to copy, modify, distribute, publicly perform and display the component for personal or commercial projects.

In any case, the usage you make of this component with Framer, should comply with Framer Terms of service.

No Waiver: nothing in this license shall indicate that the author is waving or transferring any right to any consumer of the product.

Applicability: This license doesn't cover third party content unless otherwise noted, this license will apply to the maximum extent allowed by applicable law.

Preamble: I take my components seriously and strive to deliver high-quality products. However, I cannot guarantee that this component will be completely error-free. Like most software, it may contain bugs, inaccuracies, or unexpected issues. Additionally, no system on the internet is completely secure. This product may rely on third-party services, libraries, or content which, like much of the software ecosystem, could become compromised or unavailable at some point.

No Warranty & Limitation of Liability:This component is provided “AS IS”, without warranty of any kind, express or implied, including but not limited to warranties of merchantability, fitness for a particular purpose, and non-infringement. In no event shall the author(s), whether current or previous, be liable for any claim, damages, losses, or other liability, whether in an action of contract, tort, or otherwise, arising from, out of, or in connection with the component or the use of the component.

Unless otherwise noted, no person or entity sponsors, endorses, or is officially affiliated with the author or this component. The author(s) do not guarantee that the component, its dependencies, or this disclaimer will always be accurate, error-free, secure, virus-free, or up to date.

AI Disclaimer: If the component has been generated or assisted by AI tools, some code, content, or behavior may contain inaccuracies or unintended issues that are not working as the author or user expects.