CanvaMotion for Elementor

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