Webcam Shader Portal

The WebcamShaderPortal requests camera permissions and immediately processes the video stream through custom GLSL fragment shaders. Perfect for 'Matrix' or 'Glitch' interactive experiences.

Live Preview

Installation

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { WebcamShaderPortal } from "@/components/creative/webcam-shader-portal";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { WebcamShaderPortal } from "@/components/creative/webcam-shader-portal";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <WebcamShaderPortal
        initialVariant{/* value */}
      />
    </div>
  );
}