Shader Viewer Examples

Animated Fragment Shaders

These shaders generate their own patterns and animations without requiring any input image or video.

Plasma Wave

Fractal Spiral

Mandelbrot Zoom

Neon Rings

Kaleidoscope Flow

Hypnotic Vortex

Image Effects

Select Image:

Glitch Effect

Chromatic Aberration

Halftone

Neon Glow

Oil Painting

Pixelation Wave

Rainbow Ripple

Matrix Rain

Grayscale

Sepia

Invert

Vignette

Pixelate

Edge Detection

RGB Split

Hue Rotate

Posterize

Scanlines

Kaleidoscope

Ripple

Swirl

Emboss

Mosaic

Toon Shader

Basic Image Example

<media-shader src="image-url.jpg"></media-shader>

Video Example

<media-shader src="video-url.mp4"></media-shader>

Video Format Examples

MP4 Video (H.264)

<media-shader src="video.mp4"></media-shader>

MP4 Video (Alternative)

<media-shader src="video.mp4"></media-shader>

MP4 Video (4K)

<media-shader src="video.mp4"></media-shader>

Note: Video format support depends on your browser's capabilities. MP4 (H.264) is the most widely supported format across all browsers. For best compatibility, use MP4 format or HLS/DASH streaming.

Interactive Shader Example

Interactive Video Shader Example

// Current shader will be shown here

Video Playback Control Example

Current State: Paused

<media-shader src="video.mp4" playing="true|false"></media-shader>

Interactive Video Uniforms Example

Effect Intensity:

Color Shift:

Distortion:

Time Speed:

Effect Type:

// Current uniforms will be displayed here