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.

Shahzad Shahab

Season Spark loads tasteful front-end particle effects and lightweight visual overlays. The plugin’s implementation and admin UI provide the following behavior and options (exactly as implemented in the plugin):
<ul>
<li>Included effects: <code>christmas</code> (snow/twinkles), <code>halloween</code> (ghosts/pumpkins + fog overlay), <code>valentines</code> (hearts + confetti), <code>newyear</code> (occasional fireworks bursts), <code>easter</code> (eggs & bunnies, occasional large egg drop), <code>thanksgiving</code> (falling leaves + occasional turkey popup), <code>independence</code> (fireworks + occasional flag/spark bursts), <code>diwali</code> (lights/diya sparkles + occasional diya popup), <code>hanukkah</code> (menorah sparkles + occasional menorah popup), and <code>generic</code> (custom graphics: rain/stars/bubbles or an uploaded background).</li>
<li>Per-effect configuration: <code>enabled</code>, optional <code>schedule</code> with <code>start</code>/<code>end</code> dates, <code>density</code>, <code>speed</code>, and <code>color</code> for effects that use color (the admin shows color pickers only for effects that accept color).</li>
<li>Custom Graphics support: the <code>generic</code> effect can use an uploaded background (<code>custom_bg</code>) and an uploaded custom cursor image (<code>custom_cursor_image</code>). When <code>custom_bg</code> is set the plugin creates a lightweight animated background element instead of particles.</li>
<li>Custom Cursor support: when a per-effect <code>custom_cursor</code> is enabled the front-end will attempt to use a provided <code>custom_cursor_image</code> or bundled SVG image as an overlay cursor (implemented by the public JS initializer).</li>
<li>Accessibility: the plugin respects the user’s <code>prefers-reduced-motion</code> setting, supports a site-level <code>motion_reduced</code> admin toggle, and prints a small per-user motion toggle (stored in <code>localStorage</code>). When reduced motion is active, visual initialization is skipped.</li>
<li>Performance: only enabled effects have their per-effect JS files enqueued; the plugin localizes <code>seasonSparkSettings</code> and <code>seasonSparkImages</code> for front-end initialization and ships the <code>tsparticles</code> bundle under <code>assets/vendor/tsparticles/</code>.</li>
</ul>
Admin and developer features (as implemented):
<ul>
<li>Admin pages: top-level “Season Spark” menu with the subpages <code>Effects</code>, <code>Settings</code>, and <code>For Devs</code>.</li>
<li>Settings: global toggles (load particle library, reduce motion) and default density/speed values; the Effects page exposes per-effect controls, schedule toggles, density/speed inputs, color pickers for color effects, and WP Media-based selectors for custom background/cursor on the <code>generic</code> effect.</li>
<li>Developer filters present in the code: <code>seasonspark_get_registered_effects</code> (modify the list of effects), <code>seasonspark_settings_for_js</code> (filter settings passed to front-end JS), and <code>seasonspark_images_for_js</code> (filter the image mapping sent to JS).</li>
</ul>
Notes:
<ul>
<li>Default activation: by default only the <code>valentines</code> effect is enabled on activation.</li>
<li>Assets: effect scripts, images and styles are bundled under <code>assets/</code>; the plugin enqueues only enabled effect scripts to keep the front-end lightweight.</li>
</ul>

Season Spark

Lightweight seasonal and holiday visual effects for WordPress, including snow, fireworks, hearts, and more, with accessibility-friendly controls.

CanvaMotion for Elementor vs Season Spark