Network Background Animation — WordPress Plugin

A lightweight, zero-dependency animated SVG network background for WordPress. Points drift gently; connections fade in/out and periodically rewire. Respects prefers-reduced-motion.

Features

• 70+ configurable nodes with Poisson-disc distribution (no clustering)
• Dynamic connections — lines appear, hold, fade, then rewire to new pairs
• Admin settings — control density, speed, colors, mobile behavior, z-index
• Performance conscious — ~15 KB JS, pauses when tab hidden, no external deps
• Accessible — honors prefers-reduced-motion, aria-hidden, no layout shift
• Works on any theme — fixed-position container at z-index: -1 (configurable)

Installation

Option 1: Upload via WP Admin

1. Zip the network-background folder:

   cd /workspace/dincaradu.ro/wp-plugin
   zip -r network-background.zip network-background

2. In WordPress: Plugins → Add New → Upload Plugin → select the zip → Install Now → Activate

Option 2: Copy via FTP/SFTP

# Copy to your WordPress plugins directory
cp -r /workspace/dincaradu.ro/wp-plugin/network-background /path/to/wp-content/plugins/

Then activate in Plugins → Installed Plugins.

Option 3: Composer (if you manage WP with Composer)

{
  "repositories": [
    { "type": "path", "url": "/workspace/dincaradu.ro/wp-plugin/network-background" }
  ],
  "require": {
    "dincaradu/network-background": "@dev"
  }
}

Configuration

After activation, go to Settings → Network Background:

How It Works

wp_footer (priority 999)
    └─ Injects <div id="network-bg-container"><svg>...</svg></div>
        ├─ #networkGrid — subtle 100px grid
        ├─ #networkAmbientOrbs — 3 large pulsing rings
        ├─ #networkConnections — <line> elements with CSS fade animation
        └─ #networkNodes — <circle> elements with CSS pulse animation

The JS (assets/network-background.js) reads config via wp_localize_script → window.NetworkBGConfig, then:

1. Generates ~70 nodes with Poisson-disc spacing
2. Computes all valid pairs within max_distance
3. Activates a random subset (connection_probability)
4. Animates: nodes drift, connections fade in/out via CSS keyframes
5. Every rewire_interval ms: discards all connections, picks new random subset

Customization

CSS Overrides (in your theme's style.css)

/* Change container stacking */
#network-bg-container { z-index: -2 !important; }

/* Disable on specific pages */
.page-id-42 #network-bg-container { display: none; }

/* Dark mode adjustment */
@media (prefers-color-scheme: dark) {
    #network-bg-container .node,
    #network-bg-container .connection {
        /* override via CSS custom properties if needed */
    }
}

JavaScript Hooks (for developers)

// Pause/resume from console or your code
document.dispatchEvent(new CustomEvent('network-bg:pause'));
document.dispatchEvent(new CustomEvent('network-bg:resume'));

// Access internal state (read-only)
window.NetworkBG = { nodes, connections, config: CONFIG };

Performance

• ~15 KB minified JS (gzipped ~5 KB)
• No external requests — all inline
• Pauses on tab blur — visibilitychange listener cancels requestAnimationFrame
• GPU-friendly — only transform/opacity animations (via CSS)
• Reduced motion — native media query disables all animation

Requirements

• WordPress 5.8+
• PHP 7.4+
• Modern browser (ES2018+)

License

MIT — free to use, modify, distribute.

Changelog

1.0.0

• Initial release
• Admin settings page with 11 configurable options
• Dynamic rewire animation
• Mobile toggle
• Reduced-motion support