Abdullah Sharaf

CanvaMotion adds a new “Animated Background” capability to any Elementor Container or legacy Section element. It renders lightweight, GPU-friendly particle animations using the HTML5 Canvas 2D API and plain JavaScript — no external libraries, no iframes, no coding required.
Three animation types
<ul>
<li>Neural Network — Floating nodes connected by a glowing line web. Mouse repels nodes away from the cursor.</li>
<li>Particle Field — Glowing particles that drift and pulse in brightness. Mouse attracts particles magnetically toward the cursor.</li>
<li>Constellation — Sparse twinkling stars joined by dashed lines. Mouse exerts gentle gravity pulling nearby stars closer.</li>
</ul>
What you can control per container
<ul>
<li>Enable / disable animation with a single toggle</li>
<li>Choose animation type from a dropdown</li>
<li>Set dot colour, line colour, and optional canvas background colour</li>
<li>Adjust dot count (10–200), dot size (1–10 px), speed (0.1–5×), and mouse influence radius (50–400 px)</li>
<li>Live preview inside the Elementor editor — no page reload required</li>
</ul>
Performance
<ul>
<li>Animations pause automatically when scrolled out of the viewport (IntersectionObserver)</li>
<li>Canvas resizes automatically with the container (ResizeObserver)</li>
<li>JavaScript loads in the footer — zero render-blocking</li>
<li>No external HTTP requests at runtime</li>
<li>Canvas uses <code>pointer-events: none</code> — all content inside the container stays fully clickable</li>
</ul>
Compatibility
<ul>
<li>Works with modern Elementor Containers and legacy Section elements</li>
<li>Requires Elementor (free) — no Elementor Pro needed</li>
</ul>

CanvaMotion for Elementor

Animated canvas backgrounds for Elementor — Neural Network, Particle Field, and Constellation — with live preview and interactive mouse tracking.

M Gogul Saravanan

Elevate your Elementor pages with stunning particle effects. Easily add dynamic particles using particles.js for an engaging visual experience. 
<a href="https://gogul.pro/ext/particles-extension-for-elementor/" rel="nofollow ugc">Demo</a>
<h4>How to install Particles extension for Elementor Plugin</h4>
1.Login to Your WordPress Dashboard 
2.Navigate to the Plugins Section 
3.Choose “Add New” 
4.Search for the Plugin: ( In the “Search plugins” box, type “Particles” ) 
5.Select the “Particles extension for Elementor Plugin” Plugin & Activate it.
<h4>Installing a WordPress plugin via FTP (File Transfer Protocol) involves uploading the plugin files to your server manually.</h4>
1.Download the Particles extension for Elementor Plugin 
2.Unzip the downloaded file. You’ll typically get a folder containing all the plugin files. 
3.Use an FTP client like FileZilla to connect to your server. 
4.Once connected, navigate to the /wp-content/plugins/ directory in your WordPress installation on the server. 
5.From your local machine, locate the folder extracted in step 2. Drag this folder into the /wp-content/plugins/ directory on your server. 
6.Allow FileZilla or your FTP client to complete the upload. This might take a few moments, depending on the plugin’s size and your internet speed. 
7.Once the upload is complete, go to your WordPress dashboard. Navigate to the “Plugins” section. You should see the plugin you just uploaded listed there. Click “Activate” to activate the plugin.
<h4>How to use</h4>
1.First, install and activate the <a href="https://wordpress.org/plugins/elementor/" rel="ugc">Elementor Page Builder Plugin.</a>This plugin is necessary to use Particles extension for Elementor Plugin. 
2.Next, install & activate the <a href="https://wordpress.org/plugins/particles-extension-for-elementor" rel="ugc">Particles extension for Elementor Plugin</a> 
3.Once both plugins are activated, when editing a page with Elementor this plugin adds “Section Particles” or “Container Particles” settings section.
<h4>Adding Particle Effects</h4>
1.Once you’re in the Elementor editor, add a new section or select an existing one. 
2.Look for the “Section Particles” or “Container Particles” settings section (this will be added by the Particles Extension for Elementor plugin). 
3.Configure the particle settings, such as particle type, number, speed, size, color, and more, according to your preferences. 
4.Preview your changes and update the page when you’re satisfied. 
5.After updating the page, view the page on the front-end to see the particle effects in action.

Particles extension for Elementor

Elevate your Elementor pages with stunning particle effects. Easily add dynamic particles using particles.js for an engaging visual experience.

CanvaMotion for Elementor vs Particles extension for Elementor