Particle Diffuser
This component lets you create a particle diffuser style particle animation for any SVG icon or graphics. All you need to do is enter the SVG path in the code.
Make it with Workshop
Build your own component with AI
This component lets you create a particle diffuser style particle animation for any SVG icon or graphics. All you need to do is enter the SVG path in the code.
Make it with Workshop
Build your own component with AI
Turn any static icon into a living, breathing particle simulation. The Particle Diffuser component creates a mesmerizing interactive effect where thousands of dots wander organically in the background, only to magnetically snap together to form a sharp, distinct shape when the user hovers.
It is designed for high-performance visual impact, allowing you to paste any SVG path to create custom logo reveals, interactive icons, or abstract shape formations. The animation is driven by fluid spring physics, ensuring the particles feel alive rather than robotic.You have full control over the visual style—from the number of particles and their density to the colors they shift between during the interaction.
🎨 Custom Shape Support: Paste any SVG path data (d attribute) to transform particles into your own logo, icon, or symbol.
⚡ Dual-State Styling: Define unique colors for when particles are wandering (Idle) versus when they form the shape (Active).
🎛 Density Control: Adjust the Particle Count and Sampling Density to balance between a minimalist look or a dense, high-definition shape.
🌊 Organic Physics: Uses custom spring and damping logic to create a fluid, non-linear attraction effect that feels natural.
📐 Responsive & Scalable: The effect automatically adapts to the size of the Frame you draw, making it easy to use in headers, cards, or full-screen sections.
🖱️ Hover Interaction: Particles automatically detect mouse presence—scattering when you leave and assembling when you enter.
🚀 High Performance: Built on HTML5 Canvas to handle thousands of particles smoothly without lagging the browser.
Designers and developers looking to add "micro-delight" to their websites. Perfect for portfolios, agency landing pages, and SaaS headers where you want to grab attention immediately without using heavy video files.
