=== CanvaMotion for Elementor ===
Contributors: as8495
Tags: elementor, animation, background, canvas, particles
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
Stable tag: 1.0.1
Requires Plugins: elementor
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

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

== Description ==

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**

* **Neural Network** — Floating nodes connected by a glowing line web. Mouse repels nodes away from the cursor.
* **Particle Field** — Glowing particles that drift and pulse in brightness. Mouse attracts particles magnetically toward the cursor.
* **Constellation** — Sparse twinkling stars joined by dashed lines. Mouse exerts gentle gravity pulling nearby stars closer.

**What you can control per container**

* Enable / disable animation with a single toggle
* Choose animation type from a dropdown
* Set dot colour, line colour, and optional canvas background colour
* Adjust dot count (10–200), dot size (1–10 px), speed (0.1–5×), and mouse influence radius (50–400 px)
* Live preview inside the Elementor editor — no page reload required

**Performance**

* Animations pause automatically when scrolled out of the viewport (IntersectionObserver)
* Canvas resizes automatically with the container (ResizeObserver)
* JavaScript loads in the footer — zero render-blocking
* No external HTTP requests at runtime
* Canvas uses `pointer-events: none` — all content inside the container stays fully clickable

**Compatibility**

* Works with modern Elementor Containers and legacy Section elements
* Requires Elementor (free) — no Elementor Pro needed

== Installation ==

1. Upload the `canvamotion-for-elementor` folder to `/wp-content/plugins/`, or install via **WP Admin → Plugins → Add New → Upload Plugin**.
2. Activate the plugin through the **Plugins** menu in WordPress.
3. Elementor (free) must be installed and active — an admin notice will appear if it is not.

**How to use**

1. Open any page in the Elementor editor.
2. Click a **Container** (or Section) element to select it.
3. Go to the **Style** tab (half-circle icon) in the left panel.
4. Scroll down to **Animated Background** and expand it.
5. Toggle **Enable Animated Background** to **Yes**.
6. Choose an animation type and adjust colours, dot count, size, speed, and mouse radius.

== Frequently Asked Questions ==

= Does this work with legacy Section elements? =
Yes. The plugin supports both modern Elementor Containers and legacy Section elements.

= Will the animation block clicks on content inside the container? =
No. The canvas element uses `pointer-events: none`, so all buttons, links, and other content inside the container remain fully interactive.

= Does it slow down my page? =
No. Animations pause automatically when the container leaves the viewport. JavaScript is loaded in the footer (non-blocking) and makes no external HTTP requests at runtime. For best performance, keep dot count between 40–80.

= Does it work without Elementor? =
No. Elementor (free) must be installed and active.

= Does it use jQuery or any external library? =
No. The plugin uses vanilla JavaScript (ES6+) only.

= Is Elementor Pro required? =
No. The free version of Elementor is all you need.

== Screenshots ==

1. The "Animated Background" section in the Elementor Style tab.
2. Neural Network animation active on a hero container.
3. Particle Field animation on a feature section.
4. Constellation animation on a dark background container.

== Changelog ==

= 1.0.1 =
* Fix: IntersectionObserver was not disconnected on Elementor re-renders, causing ghost animation loops to accumulate.
* Fix: Frontend assets (CSS + JS) no longer load on every page — only on pages built with Elementor.
* Fix: plugins_loaded hook priority raised to 20 to prevent a false "Elementor missing" admin notice when Elementor loads after this plugin.
* Fix: Container resize now proportionally rescales particle positions instead of resetting all particles to random locations.
* Perf: Line colour parsed once per populate() and cached; eliminates ~60 redundant object allocations per second.
* Code: Each particle node now holds its own copy of the colour object instead of a shared reference.

= 1.0.0 =
* Initial release.
* Three animation types: Neural Network, Particle Field, Constellation.
* Eight configurable controls per container element.
* Live preview inside the Elementor editor.
* IntersectionObserver for off-screen pause, ResizeObserver for responsive canvas.

== Upgrade Notice ==

= 1.0.0 =
Initial release — no upgrade steps required.
