shaderz

Shaderz ✨

Add beautiful WebGL & video background shaders to your React/Next.js project with a simple CLI.

26 shaders — 16 WebGL + 10 video backgrounds. Zero config.

Installation

npm install shaderz

Or use directly with npx (no installation required):

npx shaderz add

Usage

Add shaders to your project

npx shaderz add

This will:

• Show a list of all 26 available shaders
• Let you select multiple shaders with Space
• Install shader components to components/shaders/
• Copy video files to public/videos/ (for video shaders)
• Remind you to install required dependencies

Use as a full-screen background

import LiquidOrangeShader from '@/components/shaders/LiquidOrangeShader';

export default function HeroSection() {
  return (
    <div className="relative w-full h-screen overflow-hidden">
      {/* Shader background */}
      <div className="absolute inset-0 z-0">
        <LiquidOrangeShader />
      </div>

      {/* Your content on top */}
      <div className="relative z-10 flex items-center justify-center h-full">
        <h1 className="text-6xl font-bold text-white">Hello World</h1>
      </div>
    </div>
  );
}

Use as a contained element

import PlasmaShader from '@/components/shaders/PlasmaShader';

function App() {
  return (
    <div style={{ width: '100%', height: '500px' }}>
      <PlasmaShader />
    </div>
  );
}

Available Shaders

WebGL Shaders (16)

Shader	Description
liquid-orange	Flowing liquid with warm orange tones
ocean-waves	Dynamic ocean waves
neon-fluid	Vibrant neon fluid
gradient-waves	Smooth gradient waves
cosmic-nebula	Space-themed nebula
silk-flow	Smooth silk flow
plasma	Classic plasma effect
plasma-v2	Enhanced plasma with more colors
dark-veil	Mysterious blue/purple gradient
liquid-motion	Advanced fluid simulation
frothy-galaxy	Galactic frothy effect
dark-cloudy	Atmospheric dark cloudy
electric-storm	Dramatic electric lightning
floating-lines	Floating geometric lines
gradient-blinds	Venetian blinds effect
lightening	Lightning bolt effects

Video Shaders (10)

Shader	Description
glossy-film	Smooth glossy film with reflections
nova-silk	Silky smooth nova with flowing gradients
abstract-render	Stunning 3D abstract art render
cosmic-flow	Mesmerizing cosmic flow animation
liquid-colors	Vibrant liquid colors with smooth transitions
neon-swirl	Vibrant neon swirling patterns
sci-fi-corridor	Futuristic sci-fi corridor
tunnel-cube	Hypnotic tunnel made of cubes
vj-spiral	VJ-style spiral with psychedelic colors
wavy-abstract	Wavy abstract patterns

Video shaders automatically copy the .mp4 file to your public/videos/ folder.

Requirements

• React 18+ or 19+
• WebGL shaders: npm install three @types/three @react-three/fiber
• Gradient Blinds: npm install ogl
• Video shaders: No extra dependencies (uses native <video> element)

Links

• 🌐 Live Demo & Docs
• 📦 npm
• 🐙 GitHub

License

MIT © harsh and shubham