Tunnel Cube

Immersive 3D tunnel cube animation with geometric depth.

Preview

Download MP4

Installation

Option 1: Using CLI (Recommended)

Install this video background directly using the CLI:

npx shaderz add

Select "Tunnel Cube" from the list. The video will be added to /public/videos/.

Option 2: Manual Installation

Download the video file using the button above
Place it in your /public/videos/ directory
Use it in your components as shown below

Usage

Basic Usage:

<video
  src="/videos/tunnel-cube.mp4"
  autoPlay
  loop
  muted
  playsInline
  className="w-full h-full object-cover"
/>

Hero Section Background Example:

export default function Home() {
  return (
    <section className="relative min-h-screen">
      {/* Video background */}
      <div className="absolute inset-0 -z-10">
        <video
          src="/videos/tunnel-cube.mp4"
          autoPlay
          loop
          muted
          playsInline
          className="w-full h-full object-cover"
        />
      </div>
      
      {/* Your hero content */}
      <div className="relative z-10 flex items-center justify-center min-h-screen">
        <h1 className="text-6xl font-bold text-white">
          Welcome to Your Site
        </h1>
      </div>
    </section>
  );
}

Features

Smooth Playback: Optimized video for seamless looping
Premium Feel: High-quality visual effects
Performance Optimized: Compressed for fast loading
Easy Integration: Simple video HTML element