BLOKS Plugins / Shader Display

BLOKS Shader Display

Add animated GLSL shader backgrounds, custom shader libraries, and realtime visual effects to WordPress using a simple shortcode.

WordPress WebGL Custom Shader Uploads Auto Preview Generation 🔥 Version 1.2.0
Live Demo

Realtime shader visuals, directly inside WordPress

BLOKS Shader Display renders animated GLSL shaders on your WordPress pages with responsive WebGL rendering, quality controls, speed settings, and mobile-friendly lazy loading.

Shader display unavailable.
Version 1.2.0

Upload your own shaders directly from WordPress

Version 1.2.0 transforms BLOKS Shader Display from a simple shader viewer into a shader management system with custom GLSL uploads, automatic preview generation, and improved compatibility with BLOKS Shader Viewer-style shaders.

Custom GLSL Uploads

Upload your own .glsl files directly from the WordPress admin. Custom shaders are stored safely in the uploads directory and remain available after plugin updates.

Generate Preview Images

Create visual previews for uploaded shaders with a single click. BLOKS Shader Display renders the shader and automatically saves a PNG thumbnail for the visual picker.

Viewer Compatibility

Many shaders created for BLOKS Shader Viewer now work inside Shader Display thanks to built-in compatibility support for common uniforms and controls.

What It Does

Animated visual backgrounds without custom JavaScript

Add motion, depth, atmosphere, and creative visual effects to hero sections, landing pages, portfolios, music sites, artist websites, agencies, and experimental layouts.

Simple Shortcodes

Add shaders anywhere WordPress supports shortcodes. Choose a shader, set the height, adjust speed, and publish.

Visual Shader Picker

Select shaders visually from the settings page using generated previews instead of memorizing file names.

Performance Controls

Use low, medium, or high quality rendering to balance visual polish with practical performance across devices.

Why Shaders?

A smarter alternative to heavy video backgrounds

Shader visuals are generated in realtime by the browser, which means you can create continuous animated effects without uploading large video files.

Realtime Motion

Shaders generate animation live in the browser instead of looping a fixed video clip.

No Video Files

Create rich animated backgrounds without relying on large MP4 files or external video embeds.

Responsive by Design

Shader displays adapt to your layout and can be tuned with height, quality, speed, and interaction settings.

New in 1.2.0

Build your own shader library

Upload custom GLSL shaders, generate preview thumbnails, organize your collection visually, and deploy realtime graphics across your WordPress site without touching code.

Upload

Add custom .glsl files from the plugin settings page.

Preview

Generate PNG previews automatically from the rendered shader.

Display

Use uploaded shaders with the same shortcode system as bundled shaders.

Included Shaders

Starter visuals included with version 1.2.0

BLOKS Shader Display includes a polished starter library designed to make your pages feel alive immediately. The included shaders are just the beginning — version 1.2.0 also allows you to upload and manage your own GLSL shader collection directly from WordPress.

Ocean

A calm animated blue wave shader with soft motion and atmospheric depth.

Shader display unavailable.

Plasma

A colorful animated plasma effect for energetic landing pages, music sites, and creative experiments.

Shader display unavailable.

Aurora

A glowing aurora-style shader inspired by atmospheric light, gradients, and soft realtime motion.

Shader display unavailable.
Shortcode Examples

Copy, paste, customize

Use the default settings:

    
Shader display unavailable.

Choose a specific shader:

    
Shader display unavailable.

Use an uploaded custom shader:

    
Shader display unavailable.

Set height, speed, quality, and interaction:

    
Shader display unavailable.
Built for WordPress Designers

Lightweight, focused, and ready to install

BLOKS Shader Display is a streamlined version of the internal BLOKS Shader Viewer, focused specifically on designers and WordPress site builders who want beautiful animated visuals without needing the full BLOKS platform.

Included in 1.2.0

Built-in shaders, shortcode support, visual shader picker, custom shader uploads, automatic preview generation, responsive rendering, quality controls, speed settings, mouse interaction, and mobile-friendly lazy loading.

Clean Plugin Behavior

Includes a settings page, plugin action links, documentation links, and a clean uninstall file to remove plugin settings when deleted.

Built by BLOKS

Powered by technology developed for the BLOKS creative coding platform, refined for practical WordPress use.

Get BLOKS Shader Display

Add realtime shader visuals to WordPress

Version 1.2.0 introduces custom shader uploads, automatic preview generation, shader library management, shortcode support, performance controls, responsive rendering, and improved compatibility with BLOKS Shader Viewer-style shaders.

Version 1.2.0 $19.00 WordPress Plugin

Need help? Visit the documentation or contact BLOKS support after purchase.

Explore More

Part of the BLOKS plugin ecosystem

BLOKS plugins bring creative coding, realtime graphics, and interactive visual technology to modern WordPress websites.

Scroll to top