media-shader v1.0.2

Media Shader

A powerful web component for applying WebGL shader effects to images and videos. This component makes it easy to add real-time shader effects to your media elements with minimal setup.

🎮 Live Demo & Documentation

Features

• 🎨 Custom WebGL shader support
• 🖼️ Apply shaders to images and videos
• 🎮 Interactive mouse controls
• ⚡ Efficient rendering with WebGL
• 📱 Responsive design
• 🔄 Real-time updates
• 🎯 Lazy loading support
• ♿ Accessibility features

Installation

npm install media-shader

Usage

Import the Component

import "media-shader";

Basic Example

<!-- Apply default shader to an image -->
<media-shader src="path/to/your/image.jpg" width="400" height="300">
</media-shader>

<!-- Apply default shader to a video -->
<media-shader
  src="path/to/your/video.mp4"
  width="640"
  height="360"
  playing="true"
>
</media-shader>

Custom Shader Example

<media-shader
  src="path/to/your/media.jpg"
  fragment-shader="
    precision highp float;
    uniform sampler2D uTexture;
    uniform vec2 uResolution;
    uniform float uTime;
    varying vec2 vTexCoord;

    void main() {
      vec2 uv = vTexCoord;
      vec4 color = texture2D(uTexture, uv);
      // Add a simple wave effect
      color.rgb *= 0.8 + 0.2 * sin(uTime + uv.x * 10.0);
      gl_FragColor = color;
    }
  "
>
</media-shader>

Custom Uniforms Example

<media-shader
  src="path/to/your/media.jpg"
  uniforms='{"intensity": 1.0, "color": [1.0, 0.0, 0.0]}'
>
</media-shader>

API Reference

Attributes

Built-in Uniforms

The following uniforms are automatically available in your shaders:

Events

The component inherits standard HTMLElement events and adds:

• play - Fired when video playback starts
• pause - Fired when video playback pauses
• loadeddata - Fired when media data is loaded

Performance Considerations

• The component uses requestVideoFrameCallback (with fallback to requestAnimationFrame) for optimal video performance
• Texture updates are synchronized with video frames
• The component supports lazy loading for better page performance
• WebGL context is managed efficiently with proper cleanup

Browser Support

Supports all modern browsers with WebGL2 capability. Requires the following features:

• Custom Elements v1
• WebGL2
• ES6 Modules

License

MIT License - See LICENSE file for details

Author

Created by Rogie King