Particle Diffuser: Premium Interactions Component by Crafx Design

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.

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.

Key Features

🎨 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.

SVG Path

For the SVG path, you can get it from any SVG you can download from the internet or you can also create one yourself using tools like Figma or Illustrator. Once you have the SVG, open it in any text editor and copy the contents of the path which are inside the PATH tag: <path d="copy everything inside here" />

Where to Use

Interactive Logo Reveals: Make your brand mark the centerpiece of the hero section.
Feature Cards: Add a layer of delight to grid items or service descriptions.
Loading States: A creative alternative to standard spinners.
404 Pages: engaging background visuals that react to the user.

Best For

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.