shaderz 1.0.0

package/shaders/VideoBackground.tsx

@@ -0,0 +1,37 @@
+'use client';
+import React, { useRef, useEffect } from 'react';
+
+interface VideoBackgroundProps {
+  src: string;
+  className?: string;
+}
+
+const VideoBackground: React.FC<VideoBackgroundProps> = ({ src, className = '' }) => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    const video = videoRef.current;
+    if (video) {
+      video.play().catch((error) => {
+        console.log('Autoplay prevented:', error);
+      });
+    }
+  }, [src]);
+
+  return (
+    <video
+      ref={videoRef}
+      autoPlay
+      loop
+      muted
+      playsInline
+      className={`absolute inset-0 w-full h-full object-cover ${className}`}
+      style={{ zIndex: -1 }}
+    >
+      <source src={src} type="video/mp4" />
+      Your browser does not support the video tag.
+    </video>
+  );
+};
+
+export default VideoBackground;