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.

microwave

Plugin
<ul>
<li>Placable Labels: text, images, HTML code</li>
<li>To be able to import images and movies, you first need to upload them to Media Library on WordPress. (you could also paste URLs) The plugin will recognize your sources once you upload them to Media Library.</li>
<li>Do not import a movie file as is.</li>
<li>Before using the plugin, convert the imported movie files to expanded 2 dimensional format. Contact the manufacturer of your capturing device for the conversion process. </li>
<li>cf. For RICOH THETA, there is an app where it converts your source to the suitable format. Click the following link to download the app. 
<a href="https://theta360.com/ja/support/download/" rel="nofollow ugc">https://theta360.com/ja/support/download/</a></li>
</ul>
What’s the difference between free and pro version?
Up to 3 scenes can be created only with the free version. 
Please use the following pro version for a further scene create. 
<a href="https://www.micro-wave.net/ext/plugins/" title="pro version" rel="nofollow ugc">https://www.micro-wave.net/ext/plugins/</a>
Creating Scenes
※ Only administrator can see the menu. 
– You will see SphereManager in your WordPress menu after you install it. 
– You will see the list of scenes and edit view when you open it. 
– The editing tool lets you name the scene, put description, and change the background image/video. 
– On “Label,” you can create labels with texts, images, and HTML codes. 
– With the “transfer” tool, you can link a scene to a label to be able to make the viewer jump to a certain scene. (The tool for only text and image) 
– You can click where you want the label to be on edit preview to place a label. 
– You can drag the label on the scene to move it around. Click on the delete button(x) on label list to delete it. 
– Hit save and the scene is added to the list on the right. 
– Simply paste the short code to your website and the visitor will be able to maneuver through the image as they like.
About the controller
<ul>
<li>Click on the controller at the bottom left corner to maneuver through the image.</li>
<li>You can also click and drag to get the same effect.</li>
<li>For full-screen mode, click the icon on the bottom right corner. Hit escape to exit.</li>
<li>You’ll also be able to jump to other scenes by clicking labels you specified.</li>
<li>Function restriction of each OS
<ul>
<li>Cannot use full screan function on iOS</li>
<li>Cannot play background video on mobile devices(iOS/Android). However, show the first flame image of a video.</li>
</ul>
</li>
</ul>
System requirements
<ul>
<li>
Applicable browser
<ul>
<li>Google Chrome (latest version)</li>
<li>Firefox (latest version)</li>
<li>Safari (latest version)</li>
<li>Microsoft Edge (latest version)</li>
</ul>
</li>
<li>
Non-applicable browser
<ul>
<li>Internet Explorer</li>
</ul>
</li>
<li>
Applicable smart phone OS
<ul>
<li>over iOS 10</li>
<li>over Android 6</li>
</ul>
</li>
</ul>

Sphere Manager

SphereManager is a plugin for sharing spherical panorama images (captured by cameras such as RICOH THETA) on the web. You can customize a player by pu …

Shader Grid vs Sphere Manager