Video Backgrounds

High-quality, seamless looping video backgrounds for your React applications.

Video Backgrounds

Create stunning visual experiences with our collection of optimized video backgrounds. These use high-quality video loops to provide premium visuals with minimal performance overhead.

Each video has a Download button - click it to get the MP4 file directly!

Available Videos

Abstract Render

Preview

Download MP4

Installation

Option 1: Using CLI (Recommended)

Install this video background directly using the CLI:

npx shaderz add

Select "Abstract Render" 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/abstract-render.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/abstract-render.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

Cosmic Flow

Preview

Download MP4

Installation

Option 1: Using CLI (Recommended)

Install this video background directly using the CLI:

npx shaderz add

Select "Cosmic Flow" 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/cosmic-flow.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/cosmic-flow.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

Liquid Colors

Preview

Download MP4

Installation

Option 1: Using CLI (Recommended)

Install this video background directly using the CLI:

npx shaderz add

Select "Liquid Colors" 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/liquid-colors.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/liquid-colors.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

Neon Swirl

Preview

Download MP4

Installation

Option 1: Using CLI (Recommended)

Install this video background directly using the CLI:

npx shaderz add

Select "Neon Swirl" 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/neon-swirl.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/neon-swirl.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

Sci-Fi Corridor

Preview

Download MP4

Installation

Option 1: Using CLI (Recommended)

Install this video background directly using the CLI:

npx shaderz add

Select "Sci-Fi Corridor" 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/sci-fi-corridor.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/sci-fi-corridor.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

Tunnel Cube

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

VJ Spiral

Preview

Download MP4

Installation

Option 1: Using CLI (Recommended)

Install this video background directly using the CLI:

npx shaderz add

Select "VJ Spiral" 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/vj-spiral.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/vj-spiral.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

Wavy Abstract

Preview

Download MP4

Installation

Option 1: Using CLI (Recommended)

Install this video background directly using the CLI:

npx shaderz add

Select "Wavy Abstract" 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/wavy-abstract.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/wavy-abstract.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

Usage

After downloading the video, place it in your /public/videos/ folder and use it like this:

export default function HeroSection() {
  return (
    <section className="relative min-h-screen">
      {/* Video background */}
      <div className="absolute inset-0 -z-10">
        <video
          src="/videos/cosmic-flow.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>
  );
}

Using CLI

Or add via CLI which will copy the video to your public folder automatically:

npx shaderz add cosmic-flow