Title: Shader Grid
Author: FWD
Published: <strong>13 Tháng 2, 2026</strong>
Last modified: 21 Tháng 5, 2026

---

Tìm kiếm plugin

![](https://ps.w.org/shader-grid/assets/banner-772x250.png?rev=3461037)

![](https://ps.w.org/shader-grid/assets/icon-256x256.png?rev=3461037)

# Shader Grid

 Bởi [FWD](https://profiles.wordpress.org/futurewebdesign/)

[Tải về](https://downloads.wordpress.org/plugin/shader-grid.1.0.zip)

 * [Chi tiết](https://vi.wordpress.org/plugins/shader-grid/#description)
 * [Đánh giá](https://vi.wordpress.org/plugins/shader-grid/#reviews)
 *  [Cài đặt](https://vi.wordpress.org/plugins/shader-grid/#installation)
 * [Nhà phát triển](https://vi.wordpress.org/plugins/shader-grid/#developers)

 [Hỗ trợ](https://wordpress.org/support/plugin/shader-grid/)

## Mô tả

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.

### Highlights

**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 – **[Tibi @ FWD](https://vi.wordpress.org/plugins/shader-grid/tibi@fwdapps.net?output_format=md)**.

### Main Features

 * **Responsive Layout** – Fully responsive and adaptable regardless of which device
   or screen size is used.
 * **Desktop & Mobile Optimized** – Optimized for iOS, Android, and desktop browsers.
 * **Lazy Scrolling/Loading** – Initialize only when visible in the page to save
   resources.
 * **Infinite Drag** – Drag infinitely in all directions with seamless wrapping.
 * **Paralax** – Optional vertical parallax.
 * **Customizable Size** – Adjust image size and spacing as needed.
 * **Caption** – Optional captions styled via CSS.
 * **Dynamic Image Black & White** – Adjustable black and white falloff from the
   center.
 * **Hover Scale** – Smooth hover scale with custom size.
 * **Scroll Speed Strength** – Fine‑tune drag speed and feel.
 * **Wave Post‑Processing** – Adjustable wave frequency, amplitude, and RGB shift.
 * **Glitch Post‑Processing** – Optional glitch effect.
 * **Bulge Post‑Processing** – Bulge effect with RGB distortion controls.
 * **Ripple Post‑Processing** – Ripple effect with strength and size controls.
 * **Customizable Mouse Distortion** – Flowmap‑based distortion with optional RGB
   shift.
 * **Lightbox Video/Audio** – Supports [mp3](https://fwdapps.net/p/sg/demo-1.html#/?rlguid=fwdsg0_&rlmid=7),
   [mp4](https://fwdapps.net/p/sg/demo-1.html#/?rlguid=fwdsg0_&rlmid=0), [YouTube](https://fwdapps.net/p/sg/demo-1.html#/?rlguid=fwdsg0_&rlmid=12),
   [Vimeo](https://fwdapps.net/p/sg/demo-1.html#/?rlguid=fwdsg0_&rlmid=13), [HLS](https://fwdapps.net/p/sg/demo-1.html#/?rlguid=fwdsg0_&rlmid=11),
   DASH, [Google Drive](https://fwdapps.net/p/sg/demo-1.html#/?rlguid=fwdsg0_&rlmid=6),
   Dropbox, and more.
 * **Video Autoplay** – Optional autoplay inside the [lightbox](https://fwdapps.net/p/sg/demo-2.html#/?rlguid=fwdsg0_&rlmid=0).
 * **Private Video & Audio** – Password‑protected media support, [example](https://fwdapps.net/p/sg/demo-1.html#/?rlguid=fwdsg0_&rlmid=1).
 * **Chromecast Support** – Cast compatible streams to TV.
 * **Video Thumbnails Live Preview** – VTT or auto‑generated thumbnails in the lightbox.
 * **Video Subtitle Support** – Subtitle support inside the [lightbox](https://fwdapps.net/p/sg/demo-1.html#/?rlguid=fwdsg0_&rlmid=0).
 * **Automatic Content Detection** – [Revolution Lightbox](https://fwdapps.net/p/rl/)
   detects media type automatically.
 * **Slideshow Support** – Autoplay for grid items and lightbox.
 * **Drag & Swipe Support** – Touch and drag navigation.
 * **Maximize & Minimize For Images** – Double‑click/tap zoom and maximize controls.
 * **Share Button And Share Window** – Built‑in share window with multiple platforms.
 * **Detailed Documentation** – [JavaScript documentation](https://fwdapps.net/p/sg/javascript-documentation.html)
   and [WordPress documentation](https://fwdapps.net/p/sg/wordpress-documentation.html)
   included.

### Configuration

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.

### Use Cases

 * Infinite image grids for hero sections
 * Portfolio and gallery showcases
 * Interactive media walls
 * Product or brand storytelling sections
 * Immersive landing pages

### Links

 * [Homepage & Docs](https://fwdapps.net/p/sg)
 * [Demos](https://fwdapps.net/p/sg/#demos)
 * [JavaScript Documentation](https://fwdapps.net/p/sg/javascript-documentation.html)
 * [WordPress Documentation](https://fwdapps.net/p/sg/wordpress-documentation.html)
 * [Support](https://fwdapps.net/contact)
 * [Revolution Lightbox](https://fwdapps.net/p/rl/)

### Shortcode

Basic example:

[fwdsg preset_name=”Grid preset 1″ gallery_name=”test”]

### Development

This plugin’s full source code is publicly available for transparency and verification.

Developed and maintained by [FutureWebDesign](https://fwdapps.net).

 * [Source code & build tools](https://fwdapps.net/d/js/sg.zip) — includes original
   uncompiled files and Vite build configuration.
 * Distributed plugin uses a compiled build generated by Vite for optimal performance.

## Ảnh màn hình

 * [[
 * [[
 * [[
 * [[
 * [[
 * [[
 * [[
 * [[
 * [[

## Cài đặt

 1. Upload the plugin folder to the `/wp-content/plugins/` directory.
 2. Activate the plugin through the ‘Plugins’ menu in WordPress.
 3. Use the provided shortcode in your posts or pages.

## Hỏi đáp

### Does it work with Gutenberg?

Yes. You can use the shortcode in any block or the Classic block.

### Is it mobile-friendly?

Yes. Shader Grid is fully responsive and optimized for touch.

### Can I use it with external media?

Yes, it supports many external media types (YouTube, Vimeo, Google Drive, etc.).

## Đánh giá

Không có đánh giá nào cho plugin này.

## Người đóng góp & Lập trình viên

“Shader Grid” là mã nguồn mở. Những người sau đã đóng góp vào plugin này.

Những người đóng góp

 *   [ FWD ](https://profiles.wordpress.org/futurewebdesign/)

[Dịch “Shader Grid” sang ngôn ngữ của bạn.](https://translate.wordpress.org/projects/wp-plugins/shader-grid)

### Muốn tham gia phát triển?

[Duyệt code](https://plugins.trac.wordpress.org/browser/shader-grid/), check out
[SVN repository](https://plugins.svn.wordpress.org/shader-grid/), hoặc theo dõi 
[nhật ký phát triển](https://plugins.trac.wordpress.org/log/shader-grid/) qua [RSS](https://plugins.trac.wordpress.org/log/shader-grid/?limit=100&mode=stop_on_copy&format=rss).

## Meta

 *  Phiên bản **1.0**
 *  Cập nhật lần cuối **2 tuần trước**
 *  Số lượt cài đặt **10+**
 *  Phiên bản WordPress ** 6.0 hoặc cao hơn **
 *  Đã kiểm tra lên đến **7.0**
 *  Phiên bản PHP ** 8.0 hoặc cao hơn **
 *  Ngôn ngữ
 * [English (US)](https://wordpress.org/plugins/shader-grid/)
 * Thẻ
 * [image gallery](https://vi.wordpress.org/plugins/tags/image-gallery/)[lightbox](https://vi.wordpress.org/plugins/tags/lightbox/)
   [responsive gallery](https://vi.wordpress.org/plugins/tags/responsive-gallery/)
   [video gallery](https://vi.wordpress.org/plugins/tags/video-gallery/)[webgl](https://vi.wordpress.org/plugins/tags/webgl/)
 *  [Nâng cao](https://vi.wordpress.org/plugins/shader-grid/advanced/)

## Đánh giá

Chưa có đánh giá nào được gửi.

[Your review](https://wordpress.org/support/plugin/shader-grid/reviews/#new-post)

[Xem tất cả đánh giá](https://wordpress.org/support/plugin/shader-grid/reviews/)

## Những người đóng góp

 *   [ FWD ](https://profiles.wordpress.org/futurewebdesign/)

## Hỗ trợ

Có điều gì muốn nói? cần giúp đỡ?

 [Xem diễn đàn hỗ trợ](https://wordpress.org/support/plugin/shader-grid/)

## Ủng hộ

Bạn có muốn hỗ trợ vào sự phát triển của plugin này?

 [ Ủng hộ plugin này ](https://fwdapps.net/p/sg)