Documentation

Everything you need to integrate Cursor Motion into your website

Installation
Add Cursor Motion to your website in just a few steps

Step 1: Add the Script

Add the following script tag to your HTML file, preferably before the closing </body> tag:

<script src="https://www.cursormotion.com/cursor-motion.min.js"></script>

Step 2: Initialize the Effect

Add this script to initialize Cursor Motion with default settings:

<script>
  // Initialize with default settings
  const cursorMotion = new CursorMotion();
  cursorMotion.init();
</script>
Usage Examples
Customize the particle effect to match your design

Custom Configuration

// Create instance with custom settings
const cursorMotion = new CursorMotion({
  particleCount: 10,        // Number of particles per frame
  particleColor: '#D21C69', // Particle color (hex)
  particleSize: 3,          // Particle size in pixels
  trailLength: 30           // Trail length in frames
});

cursorMotion.init();

Destroy Effect

Remove the effect and clean up resources:

// Stop and remove the effect
cursorMotion.destroy();
WordPress Integration
How to add Cursor Motion to your WordPress site

Method 1: Theme Footer (Recommended)

Add the script to your theme's footer.php file before the closing </body> tag:

<!-- Add this to footer.php before </body> -->
<script src="https://www.cursormotion.com/cursor-motion.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const cursorMotion = new CursorMotion({
      particleCount: 3,
      particleColor: '#D21C69',
      particleSize: 4,
      trailLength: 25
    });
    cursorMotion.init();
  });
</script>
<?php wp_footer(); ?>

Method 2: Functions.php (Enqueue Script)

Add this code to your theme's functions.php file:

function enqueue_cursor_motion() {
    // Enqueue the cursor motion script
    wp_enqueue_script(
        'cursor-motion',
        'https://www.cursormotion.com/cursor-motion.min.js',
        array(),
        '1.0.0',
        true
    );
    
    // Add inline initialization script
    wp_add_inline_script('cursor-motion', '
        document.addEventListener("DOMContentLoaded", function() {
            const cursorMotion = new CursorMotion({
                particleCount: 8,
                particleColor: "#3b82f6",
                particleSize: 4,
                trailLength: 25
            });
            cursorMotion.init();
        });
    ');
}
add_action('wp_enqueue_scripts', 'enqueue_cursor_motion');

Method 3: Plugin (Code Snippets)

If you use a plugin like "Code Snippets" or "Insert Headers and Footers":

  1. Install a code snippet plugin
  2. Create a new snippet in the "Footer" section
  3. Paste the following code:
<script src="https://www.cursormotion.com/cursor-motion.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const cursorMotion = new CursorMotion({
      particleCount: 8,
      particleColor: '#3b82f6',
      particleSize: 4,
      trailLength: 25
    });
    cursorMotion.init();
  });
</script>

💡 Pro Tip

For better performance on mobile devices, consider detecting screen size and only enabling the effect on desktop:

if (window.innerWidth > 768) {
  const cursorMotion = new CursorMotion();
  cursorMotion.init();
}
Browser Compatibility
Cursor Motion works on all modern browsers
  • ✓Chrome 90+
  • ✓Firefox 88+
  • ✓Safari 14+
  • ✓Edge 90+