{"id":326343,"date":"2026-07-08T15:24:11","date_gmt":"2026-07-08T15:24:11","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/spherexr-canvas-orb-animations\/"},"modified":"2026-07-08T15:29:34","modified_gmt":"2026-07-08T15:29:34","slug":"cmxr-canvas-motion-backgrounds","status":"publish","type":"plugin","link":"https:\/\/sq.wordpress.org\/plugins\/cmxr-canvas-motion-backgrounds\/","author":23319514,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0.1","stable_tag":"1.0.1","tested":"7.0","requires":"6.0","requires_php":"7.4","requires_plugins":null,"header_name":"CMXR \u2014 Canvas Motion Backgrounds","header_author":"Ayal Othman","header_description":"Create animated HTML5 canvas motion backgrounds with shapes, orbs, blobs, and interactive effects for WordPress, Elementor, Gutenberg, and any theme with a visual editor.","assets_banners_color":"504d60","last_updated":"2026-07-08 15:29:34","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/expoxr.com\/","header_author_uri":"https:\/\/expoxr.com","rating":0,"author_block_rating":0,"active_installs":0,"downloads":33,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.1":{"tag":"1.0.1","author":"expoxr","date":"2026-07-08 15:29:34"}},"upgrade_notice":{"1.0.1":"<p>Fixes admin footer layout overlap and removes obsolete pre-release migration code. No manual upgrade steps required.<\/p>","1.0.0":"<p>Initial release \u2014 no upgrade steps required.<\/p>"},"ratings":[],"assets_icons":{"Icon-128x128.png":{"filename":"Icon-128x128.png","revision":3600488,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"Icon-256x256.png":{"filename":"Icon-256x256.png","revision":3600488,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500-rtl.png":{"filename":"banner-1544x500-rtl.png","revision":3600488,"resolution":"1544x500","location":"assets","locale":"","width":772,"height":250},"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3600488,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250-rtl.png":{"filename":"banner-772x250-rtl.png","revision":3600488,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3600488,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.1"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3600488,"resolution":"1","location":"assets","locale":"","width":2560,"height":1237},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3600488,"resolution":"2","location":"assets","locale":"","width":2560,"height":1241},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3600488,"resolution":"3","location":"assets","locale":"","width":2560,"height":1238},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3600488,"resolution":"4","location":"assets","locale":"","width":2560,"height":1238},"screenshot-5.png":{"filename":"screenshot-5.png","revision":3600488,"resolution":"5","location":"assets","locale":"","width":2560,"height":1240},"screenshot-6.png":{"filename":"screenshot-6.png","revision":3600488,"resolution":"6","location":"assets","locale":"","width":2560,"height":1268},"screenshot-7.png":{"filename":"screenshot-7.png","revision":3600488,"resolution":"7","location":"assets","locale":"","width":2560,"height":1243},"screenshot-8.png":{"filename":"screenshot-8.png","revision":3600488,"resolution":"8","location":"assets","locale":"","width":2560,"height":1239}},"screenshots":{"1":"CMXR Dashboard","2":"New Animation Dashboard","3":"Settings Page","4":"New Animation \u2014 different shapes","5":"Different color styling for shapes","6":"Different color animation styling for shapes","7":"Different shapes with easy blur, opacity, size, and position controls","8":"Different shape animation styles"}},"plugin_section":[],"plugin_tags":[785,2767,864,76538,188147],"plugin_category":[50],"plugin_contributors":[251328],"plugin_business_model":[],"class_list":["post-326343","plugin","type-plugin","status-publish","hentry","plugin_tags-animation","plugin_tags-background","plugin_tags-canvas","plugin_tags-elementor","plugin_tags-shapes","plugin_category-media","plugin_contributors-expoxr","plugin_committers-expoxr"],"banners":{"banner":"https:\/\/ps.w.org\/cmxr-canvas-motion-backgrounds\/assets\/banner-772x250.png?rev=3600488","banner_2x":"https:\/\/ps.w.org\/cmxr-canvas-motion-backgrounds\/assets\/banner-1544x500.png?rev=3600488","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/cmxr-canvas-motion-backgrounds\/assets\/Icon-128x128.png?rev=3600488","icon_2x":"https:\/\/ps.w.org\/cmxr-canvas-motion-backgrounds\/assets\/Icon-256x256.png?rev=3600488","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/cmxr-canvas-motion-backgrounds\/assets\/screenshot-1.png?rev=3600488","caption":"CMXR Dashboard"},{"src":"https:\/\/ps.w.org\/cmxr-canvas-motion-backgrounds\/assets\/screenshot-2.png?rev=3600488","caption":"New Animation Dashboard"},{"src":"https:\/\/ps.w.org\/cmxr-canvas-motion-backgrounds\/assets\/screenshot-3.png?rev=3600488","caption":"Settings Page"},{"src":"https:\/\/ps.w.org\/cmxr-canvas-motion-backgrounds\/assets\/screenshot-4.png?rev=3600488","caption":"New Animation \u2014 different shapes"},{"src":"https:\/\/ps.w.org\/cmxr-canvas-motion-backgrounds\/assets\/screenshot-5.png?rev=3600488","caption":"Different color styling for shapes"},{"src":"https:\/\/ps.w.org\/cmxr-canvas-motion-backgrounds\/assets\/screenshot-6.png?rev=3600488","caption":"Different color animation styling for shapes"},{"src":"https:\/\/ps.w.org\/cmxr-canvas-motion-backgrounds\/assets\/screenshot-7.png?rev=3600488","caption":"Different shapes with easy blur, opacity, size, and position controls"},{"src":"https:\/\/ps.w.org\/cmxr-canvas-motion-backgrounds\/assets\/screenshot-8.png?rev=3600488","caption":"Different shape animation styles"}],"raw_content":"<!--section=description-->\n<p>Canvas Motion Background Made Easy. CMXR lets you build and manage animated canvas motion backgrounds directly from the WordPress admin. Compose moving shapes \u2014 orbs, blobs, and multi-ring forms \u2014 that render on an HTML5 canvas, sit behind your page content, and are driven by a tiny vanilla-JS engine with zero frontend dependencies.<\/p>\n\n<p><strong>Key features:<\/strong><\/p>\n\n<ul>\n<li><strong>Visual configurator<\/strong> \u2014 three-panel editor with live canvas preview, shape\/color\/animation controls, and real-time feedback<\/li>\n<li><strong>Drag-to-reorder layers<\/strong> \u2014 drag shapes in the sidebar to control which one renders on top<\/li>\n<li><strong>Layer badges<\/strong> \u2014 each shape shows its layer number (1 = topmost)<\/li>\n<li><strong>6 animation types<\/strong> \u2014 Drift, Orbit, Pulse, Wave, Fixed, Figure-8 (Lissajous)<\/li>\n<li><strong>Interactivity modes<\/strong> \u2014 Parallax, Repel, Attract<\/li>\n<li><strong>12 shapes<\/strong> \u2014 Soft Orbs (Circle, Double, Triple, Blob, Outline, Ring), Geometry (Box, Box Outline, Capsule, Capsule Outline), and Lines (Line, Wave Line)<\/li>\n<li><strong>Blend modes<\/strong> \u2014 Screen, Normal, Multiply, Overlay, Lighten, Hard-Light<\/li>\n<li><strong>REST API<\/strong> \u2014 full programmatic control over animations<\/li>\n<li><strong>Performance<\/strong> \u2014 pauses off-screen (IntersectionObserver), respects <code>prefers-reduced-motion<\/code>, DPR cap to limit canvas size on HiDPI screens<\/li>\n<li><strong>Any theme, any builder<\/strong> \u2014 works with Elementor, Divi, Gutenberg, or hand-coded HTML; just add a CSS ID<\/li>\n<\/ul>\n\n<!--section=installation-->\n<h4>From ZIP<\/h4>\n\n<ol>\n<li>Download the plugin ZIP<\/li>\n<li>Go to <strong>Plugins &gt; Add New &gt; Upload Plugin<\/strong><\/li>\n<li>Upload the ZIP and click <strong>Install Now<\/strong><\/li>\n<li>Activate the plugin<\/li>\n<\/ol>\n\n<h4>Manual<\/h4>\n\n<ol>\n<li>Extract the <code>cmxr-canvas-motion-backgrounds<\/code> folder<\/li>\n<li>Upload it to <code>\/wp-content\/plugins\/<\/code><\/li>\n<li>Go to <strong>Plugins<\/strong> and activate CMXR<\/li>\n<\/ol>\n\n<h4>Usage<\/h4>\n\n<ol>\n<li>Go to <strong>CMXR &gt; New Animation<\/strong> in the WordPress admin<\/li>\n<li>Add shapes, configure colors, animation types, and sizes<\/li>\n<li>Note the <strong>Animation ID<\/strong> (e.g., <code>hero-bg<\/code>)<\/li>\n<li>Add that ID as a CSS ID on any element in your page<\/li>\n<li>The animation renders automatically as the element's background<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"does%20this%20require%20elementor%3F\"><h3>Does this require Elementor?<\/h3><\/dt>\n<dd><p>No. CMXR works with any theme or page builder. Add the CSS ID to any HTML element or Elementor section.<\/p><\/dd>\n<dt id=\"how%20do%20i%20control%20which%20shape%20appears%20on%20top%3F\"><h3>How do I control which shape appears on top?<\/h3><\/dt>\n<dd><p>Drag shapes in the configurator's left sidebar. The shape at the top of the list renders above all others. The layer badge (number) shows each shape's stacking order.<\/p><\/dd>\n<dt id=\"how%20do%20i%20attach%20an%20animation%20to%20an%20elementor%20section%3F\"><h3>How do I attach an animation to an Elementor section?<\/h3><\/dt>\n<dd><p>In Elementor, open the section settings \u2192 <strong>Advanced<\/strong> tab \u2192 <strong>CSS ID<\/strong> field. Enter the Animation ID shown in the configurator or dashboard.<\/p><\/dd>\n<dt id=\"why%20is%20the%20animation%20not%20showing%3F\"><h3>Why is the animation not showing?<\/h3><\/dt>\n<dd><ol>\n<li>Verify the Animation ID is set in the configurator<\/li>\n<li>Confirm the animation is set to <strong>Active<\/strong> on the dashboard<\/li>\n<li>Confirm the CSS ID on your element exactly matches the Animation ID (case-sensitive)<\/li>\n<li>Check the <strong>Debug<\/strong> page (CMXR &gt; Debug) for registered animations and asset URLs<\/li>\n<\/ol><\/dd>\n<dt id=\"can%20i%20have%20multiple%20animations%20on%20one%20page%3F\"><h3>Can I have multiple animations on one page?<\/h3><\/dt>\n<dd><p>Yes. Each animation targets a unique CSS ID. Add as many as you need.<\/p><\/dd>\n<dt id=\"does%20it%20affect%20page%20performance%3F\"><h3>Does it affect page performance?<\/h3><\/dt>\n<dd><p>The engine pauses automatically when the animated element is scrolled off-screen. It also respects the browser's <code>prefers-reduced-motion<\/code> setting and caps the device pixel ratio (configurable in Settings) to control canvas resolution on HiDPI displays.<\/p><\/dd>\n<dt id=\"is%20there%20a%20limit%20on%20shapes%20per%20animation%3F\"><h3>Is there a limit on shapes per animation?<\/h3><\/dt>\n<dd><p>Up to 20 shapes per animation.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0.1<\/h4>\n\n<ul>\n<li>Fixed WordPress admin footer overlap on CMXR admin screens and configurator columns.<\/li>\n<li>Removed obsolete pre-release interactivity migration code.<\/li>\n<li>Added GPL-2.0 license file and translation template for publishing readiness.<\/li>\n<\/ul>\n\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release<\/li>\n<li>Canvas-based motion backgrounds with 6 animation types<\/li>\n<li>Visual 3-panel configurator with live preview<\/li>\n<li>Drag-to-reorder shape layers with layer number badges<\/li>\n<li>Layer ordering: top of list = visually on top on canvas<\/li>\n<li>Interactivity: Parallax, Repel, Attract<\/li>\n<li>12 shapes: Circle, Double, Triple, Blob, Outline, Ring, Box, Box Outline, Capsule, Capsule Outline, Line, Wave Line<\/li>\n<li>6 blend modes<\/li>\n<li>REST API for full programmatic control<\/li>\n<li>Duplicate, toggle-active, preview modal on dashboard<\/li>\n<li>Consistent admin UI across all pages (Settings, Debug, Configurator)<\/li>\n<li>Debug page with system info and config inspection<\/li>\n<li>Performance: IntersectionObserver pause, DPR cap, reduced-motion support<\/li>\n<li>WordPress 6.0+ and PHP 7.4+ compatible<\/li>\n<\/ul>","raw_excerpt":"Canvas Motion Background Made Easy. Create animated canvas backgrounds for WordPress, Elementor, Gutenberg, Divi, and any theme.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/sq.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/326343","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sq.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/sq.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/sq.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=326343"}],"author":[{"embeddable":true,"href":"https:\/\/sq.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/expoxr"}],"wp:attachment":[{"href":"https:\/\/sq.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=326343"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/sq.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=326343"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/sq.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=326343"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/sq.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=326343"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/sq.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=326343"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/sq.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=326343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}