Shader Grid is a Three.js and WebGL shader powered infinite image grid with smooth drag interaction, post‑processing effects, and optional lightbox support. It’s fully responsive, touch‑friendly, and designed to run across all major browsers and devices.
<h3>Highlights</h3>
Three.js + WebGL Shaders – Next‑gen GLSL grid with rich visual effects and GPU performance.
Easy To Configure And Install – Includes detailed documentation, demo pages, updates, and direct support from the developer – <a href="mailto:tibi@fwdapps.net" rel="nofollow ugc">Tibi @ FWD</a>.
<h3>Main Features</h3>
<ul>
<li>Responsive Layout – Fully responsive and adaptable regardless of which device or screen size is used.</li>
<li>Desktop & Mobile Optimized – Optimized for iOS, Android, and desktop browsers.</li>
<li>Lazy Scrolling/Loading – Initialize only when visible in the page to save resources.</li>
<li>Infinite Drag – Drag infinitely in all directions with seamless wrapping.</li>
<li>Paralax – Optional vertical parallax.</li>
<li>Customizable Size – Adjust image size and spacing as needed.</li>
<li>Caption – Optional captions styled via CSS.</li>
<li>Dynamic Image Black & White – Adjustable black and white falloff from the center.</li>
<li>Hover Scale – Smooth hover scale with custom size.</li>
<li>Scroll Speed Strength – Fine‑tune drag speed and feel.</li>
<li>Wave Post‑Processing – Adjustable wave frequency, amplitude, and RGB shift.</li>
<li>Glitch Post‑Processing – Optional glitch effect.</li>
<li>Bulge Post‑Processing – Bulge effect with RGB distortion controls.</li>
<li>Ripple Post‑Processing – Ripple effect with strength and size controls.</li>
<li>Customizable Mouse Distortion – Flowmap‑based distortion with optional RGB shift.</li>
<li>Lightbox Video/Audio – Supports <a href="https://fwdapps.net/p/sg/demo-1.html#/?rlguid=fwdsg0_&rlmid=7" rel="nofollow ugc">mp3</a>, <a href="https://fwdapps.net/p/sg/demo-1.html#/?rlguid=fwdsg0_&rlmid=0" rel="nofollow ugc">mp4</a>, <a href="https://fwdapps.net/p/sg/demo-1.html#/?rlguid=fwdsg0_&rlmid=12" rel="nofollow ugc">YouTube</a>, <a href="https://fwdapps.net/p/sg/demo-1.html#/?rlguid=fwdsg0_&rlmid=13" rel="nofollow ugc">Vimeo</a>, <a href="https://fwdapps.net/p/sg/demo-1.html#/?rlguid=fwdsg0_&rlmid=11" rel="nofollow ugc">HLS</a>, DASH, <a href="https://fwdapps.net/p/sg/demo-1.html#/?rlguid=fwdsg0_&rlmid=6" rel="nofollow ugc">Google Drive</a>, Dropbox, and more.</li>
<li>Video Autoplay – Optional autoplay inside the <a href="https://fwdapps.net/p/sg/demo-2.html#/?rlguid=fwdsg0_&rlmid=0" rel="nofollow ugc">lightbox</a>.</li>
<li>Private Video & Audio – Password‑protected media support, <a href="https://fwdapps.net/p/sg/demo-1.html#/?rlguid=fwdsg0_&rlmid=1" rel="nofollow ugc">example</a>.</li>
<li>Chromecast Support – Cast compatible streams to TV.</li>
<li>Video Thumbnails Live Preview – VTT or auto‑generated thumbnails in the lightbox.</li>
<li>Video Subtitle Support – Subtitle support inside the <a href="https://fwdapps.net/p/sg/demo-1.html#/?rlguid=fwdsg0_&rlmid=0" rel="nofollow ugc">lightbox</a>.</li>
<li>Automatic Content Detection – <a href="https://fwdapps.net/p/rl/" rel="nofollow ugc">Revolution Lightbox</a> detects media type automatically.</li>
<li>Slideshow Support – Autoplay for grid items and lightbox.</li>
<li>Drag & Swipe Support – Touch and drag navigation.</li>
<li>Maximize & Minimize For Images – Double‑click/tap zoom and maximize controls.</li>
<li>Share Button And Share Window – Built‑in share window with multiple platforms.</li>
<li>Detailed Documentation – <a href="https://fwdapps.net/p/sg/javascript-documentation.html" rel="nofollow ugc">JavaScript documentation</a> and <a href="https://fwdapps.net/p/sg/wordpress-documentation.html" rel="nofollow ugc">WordPress documentation</a> included.</li>
</ul>
<h3>Configuration</h3>
After activation, open the plugin settings in the WordPress admin area and create a new grid preset. Then use the shortcode below in any post or page.
<h3>Use Cases</h3>
<ul>
<li>Infinite image grids for hero sections</li>
<li>Portfolio and gallery showcases</li>
<li>Interactive media walls</li>
<li>Product or brand storytelling sections</li>
<li>Immersive landing pages</li>
</ul>
<h3>Links</h3>
<ul>
<li><a href="https://fwdapps.net/p/sg" rel="nofollow ugc">Homepage & Docs</a></li>
<li><a href="https://fwdapps.net/p/sg/#demos" rel="nofollow ugc">Demos</a></li>
<li><a href="https://fwdapps.net/p/sg/javascript-documentation.html" rel="nofollow ugc">JavaScript Documentation</a></li>
<li><a href="https://fwdapps.net/p/sg/wordpress-documentation.html" rel="nofollow ugc">WordPress Documentation</a></li>
<li><a href="https://fwdapps.net/contact" rel="nofollow ugc">Support</a></li>
<li><a href="https://fwdapps.net/p/rl/" rel="nofollow ugc">Revolution Lightbox</a></li>
</ul>
<h3>Shortcode</h3>
Basic example:
[fwdsg preset_name=”Grid preset 1″ gallery_name=”test”]
<h3>Development</h3>
This plugin’s full source code is publicly available for transparency and verification. 
Developed and maintained by <a href="https://fwdapps.net" rel="nofollow ugc">FutureWebDesign</a>.
<ul>
<li><a href="https://fwdapps.net/d/js/sg.zip" rel="nofollow ugc">Source code & build tools</a> — includes original uncompiled files and Vite build configuration.</li>
<li>Distributed plugin uses a compiled build generated by Vite for optimal performance.</li>
</ul>

Shader Grid

Powerful and extremely customizable responsive infinite image/video grid with WebGL shaders and lightbox support.

WPXERO

Animation Kit lets you add a moving WebGL background to any WordPress page — a particle field, an aurora wash, a sweeping radar pulse — from a single admin screen. No theme editing, no shortcodes, no CSS. Pick an effect, tune the colors and motion, save, and your visitors see a smooth canvas layer behind your content.
The plugin is builder-agnostic: it renders at the document level, so it cooperates with classic themes, block themes, Elementor, Bricks, WPBakery, and Gutenberg page builds without needing a per-builder integration.
<h3>How it works</h3>
You get a dedicated Background Animation screen inside the WP admin. From there:
<ol>
<li>Pick one of 13 free effects (full list below).</li>
<li>Adjust the live controls — colors, speed, density, opacity, z-index, position.</li>
<li>Toggle the background on. The canvas appears site-wide.</li>
</ol>
The free tier targets the whole website (single configuration). Pro adds multiple stacked configurations and per-page placement rules.
<h3>Effects included in the free version</h3>
<ul>
<li>Antigravity — Magnetic particle field that reacts to pointer movement. Good for tech, SaaS, and sci-fi-style hero sections.</li>
<li>Aurora — Flowing color washes. Suits portfolios, night-mode brands, and creative agencies.</li>
<li>Color Bends — Multi-stop color gradient with noise warp and slow rotation. Works as a brand backdrop.</li>
<li>Grid Scan — Animated grid with a sweep line. Tech, cyber, and dashboard aesthetics.</li>
<li>Line Waves — Concentric line waves with color cycling. Graphic, poster-like.</li>
<li>Liquid Ether — Fluid simulation that ripples and bends with cursor movement. Most “wow” of the set.</li>
<li>Particles — Drifting particle systems with configurable count, color, and spread.</li>
<li>Pixel Blast — Animated pixel patterns (square, circle, triangle) with optional click-ripples. Retro and game-style.</li>
<li>Plasma — Classic plasma shader with direction, scale, and color. Soft demoscene feel.</li>
<li>Prism — Rotating 3D prism with bloom. Crystalline, futuristic.</li>
<li>Radar — Sweep-style radar visualization with ring and spoke controls.</li>
<li>Soft Aurora — Lower-intensity aurora with two-color gradient. Easier on small-screen viewers.</li>
<li>Light Pillar — Vertical light column with adjustable glow, width, height, and rotation. Good for landing-page focal points.</li>
</ul>
Each effect has its own controls; you only ship the code for the effect you enable (lazy-loaded chunk per effect, not a single fat bundle).
<h3>Use cases</h3>
<ul>
<li>Hero sections that need motion without an animated video.</li>
<li>Landing pages where you want a moving backdrop behind a CTA.</li>
<li>Portfolios and agency sites that want a signature visual.</li>
<li>Conference, course, and event sites that want a “live” feel.</li>
<li>Dark-mode marketing pages where Aurora or Light Pillar adds depth.</li>
</ul>
<h3>Performance and Core Web Vitals</h3>
Animation Kit is built around lazy loading. The frontend script only ships when a background is enabled; the heavy rendering code (Three.js, OGL, the per-effect shader) is split into separate chunks loaded on demand after <code>DOMContentLoaded</code>. On mobile, particle counts and pixel ratios are clamped automatically.
Compatibility filters are registered for WP Rocket, LiteSpeed Cache, Autoptimize, W3 Total Cache, and WP Fastest Cache so their delay-JS / combine-JS / minify rules don’t break the lazy chunks.
<h3>Accessibility</h3>
<ul>
<li>The canvas wrapper is <code>aria-hidden="true"</code> and <code>pointer-events: none</code> — assistive tech ignores it, and visitors can still click links, forms, and menus through it.</li>
<li><code>prefers-reduced-motion: reduce</code> is honored: when the user’s OS preference is set, the WebGL mount is skipped entirely. If the preference is toggled off during a session, the animation mounts at that point.</li>
</ul>
<h3>Animation Kit Pro</h3>
When the free tier stops fitting, Pro adds:
<ul>
<li>Multiple background configurations stacked or rotated on the same site.</li>
<li>Per-page placement rules — specific pages, CSS selectors, or HTML element targets.</li>
<li>Premium roadmap access and priority support.</li>
</ul>
Pricing and details: https://wpxero.com/plugins/wpxero-animation-kit/pricing

Animation Kit – Animated Backgrounds & WebGL Effects

Add animated WebGL backgrounds to any WordPress page — 13 effects including Particles, Aurora, Plasma, Prism. Lazy-loaded, no code needed.

Shader Grid vs Animation Kit – Animated Backgrounds & WebGL Effects