shaderz 1.0.0

package/README.md

@@ -0,0 +1,91 @@
+# Shaderz CLI
+
+Add beautiful WebGL shaders to your React/Next.js project with a simple CLI.
+
+## Installation
+
+```bash
+npm install shaderz
+```
+
+Or use with npx (no installation required):
+
+```bash
+npx shaderz add
+```
+
+## Usage
+
+### Interactive Installation
+
+Install shaders interactively by selecting from a list:
+
+```bash
+npx shaderz add
+```
+
+This will:
+1. Show a checkbox list of all available shaders
+2. Let you select multiple shaders with Space
+3. Install selected shaders to `components/shaders/`
+4. Copy video files to `public/videos/` (for video shaders)
+5. Check and remind you to install required dependencies
+6. Show usage examples
+
+## Available Shaders
+
+**WebGL Shaders:**
+- `liquid-orange` - Flowing liquid shader with warm orange tones
+- `ocean-waves` - Dynamic ocean waves shader
+- `neon-fluid` - Vibrant neon fluid shader
+- `gradient-waves` - Smooth gradient waves shader
+- `cosmic-nebula` - Space-themed nebula shader
+- `glossy-ribbon` - Glossy ribbon flow shader
+- `silk-flow` - Smooth silk flow shader
+- `glass-twist` - Glass twist effect shader
+- `plasma` - Classic plasma shader
+
+**Video Background:**
+- `glossy-film` - MP4 video background (copies video to public/videos/)
+
+## Usage in Your Project
+
+After installation:
+
+```tsx
+import LiquidOrangeShader from '@/components/shaders/LiquidOrangeShader';
+
+function App() {
+  return (
+    <div className="relative w-full h-screen">
+      <LiquidOrangeShader />
+      {/* Your content */}
+    </div>
+  );
+}
+```
+
+### Video Background
+
+```tsx
+import VideoBackground from '@/components/shaders/VideoBackground';
+
+function App() {
+  return (
+    <div className="relative w-full h-screen">
+      <VideoBackground src="/videos/glossy-film.mp4" />
+      {/* Your content */}
+    </div>
+  );
+}
+```
+
+## Requirements
+
+- React 18+ or 19+
+- No additional dependencies required (WebGL is built into modern browsers)
+- Video shader requires the video file to be in public/videos/ (automatically handled by CLI)
+
+## License
+
+MIT © harsh and shubham

package/dist/cli.d.ts

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/dist/cli.js

@@ -0,0 +1,208 @@
+#!/usr/bin/env node
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// src/cli.ts
+var import_commander = require("commander");
+var import_prompts = __toESM(require("prompts"));
+var import_chalk = __toESM(require("chalk"));
+var import_ora = __toESM(require("ora"));
+var import_fs_extra = __toESM(require("fs-extra"));
+var import_path = __toESM(require("path"));
+var program = new import_commander.Command();
+var SHADERS = [
+  {
+    name: "liquid-orange",
+    title: "Liquid Orange",
+    description: "Flowing liquid shader with warm orange tones",
+    file: "LiquidOrangeShader"
+  },
+  {
+    name: "ocean-waves",
+    title: "Ocean Waves",
+    description: "Dynamic ocean waves shader",
+    file: "OceanWavesShader"
+  },
+  {
+    name: "neon-fluid",
+    title: "Neon Fluid",
+    description: "Vibrant neon fluid shader",
+    file: "NeonFluidShader"
+  },
+  {
+    name: "gradient-waves",
+    title: "Gradient Waves",
+    description: "Smooth gradient waves shader",
+    file: "GradientWavesShader"
+  },
+  {
+    name: "cosmic-nebula",
+    title: "Cosmic Nebula",
+    description: "Space-themed nebula shader",
+    file: "CosmicNebulaShader"
+  },
+  {
+    name: "glossy-ribbon",
+    title: "Glossy Ribbon",
+    description: "Glossy ribbon flow shader",
+    file: "GlossyRibbonShader"
+  },
+  {
+    name: "silk-flow",
+    title: "Silk Flow",
+    description: "Smooth silk flow shader",
+    file: "SilkFlowShader"
+  },
+  {
+    name: "glass-twist",
+    title: "Glass Twist",
+    description: "Glass twist effect shader",
+    file: "GlassTwistShader"
+  },
+  {
+    name: "plasma",
+    title: "Plasma",
+    description: "Classic plasma shader",
+    file: "PlasmaShader"
+  },
+  {
+    name: "glossy-film",
+    title: "Glossy Film (Video)",
+    description: "MP4 video background shader",
+    file: "VideoBackground",
+    isVideo: true,
+    videoFile: "glossy-film.mp4"
+  }
+];
+async function addShaders() {
+  console.log(import_chalk.default.bold.cyan("\n\u2728 Welcome to Shaderz!\n"));
+  const response = await (0, import_prompts.default)({
+    type: "multiselect",
+    name: "shaders",
+    message: "Select shaders to add to your project:",
+    choices: SHADERS.map((shader) => ({
+      title: `${shader.title} - ${import_chalk.default.gray(shader.description)}`,
+      value: shader.name,
+      selected: false
+    })),
+    hint: "- Space to select. Return to submit"
+  });
+  if (!response.shaders || response.shaders.length === 0) {
+    console.log(import_chalk.default.yellow("No shaders selected. Exiting."));
+    process.exit(0);
+  }
+  const targetDir = process.cwd();
+  const possiblePaths = [
+    "src/components",
+    "app/components",
+    "components"
+  ];
+  let componentsBase = "";
+  for (const possiblePath of possiblePaths) {
+    if (import_fs_extra.default.existsSync(import_path.default.join(targetDir, possiblePath))) {
+      componentsBase = possiblePath;
+      break;
+    }
+  }
+  if (!componentsBase) {
+    if (import_fs_extra.default.existsSync(import_path.default.join(targetDir, "src"))) {
+      componentsBase = "src/components";
+    } else if (import_fs_extra.default.existsSync(import_path.default.join(targetDir, "app"))) {
+      componentsBase = "app/components";
+    } else {
+      componentsBase = "components";
+    }
+    console.log(import_chalk.default.yellow(`
+No components directory found. Will create: ${componentsBase}/shaders/`));
+    const { createDir } = await (0, import_prompts.default)({
+      type: "confirm",
+      name: "createDir",
+      message: "Continue?",
+      initial: true
+    });
+    if (!createDir) {
+      console.log(import_chalk.default.red("Installation cancelled."));
+      process.exit(1);
+    }
+  }
+  const componentsDir = import_path.default.join(targetDir, componentsBase, "shaders");
+  const publicVideosDir = import_path.default.join(targetDir, "public", "videos");
+  const useTypeScript = import_fs_extra.default.existsSync(import_path.default.join(targetDir, "tsconfig.json"));
+  const fileExtension = useTypeScript ? ".tsx" : ".jsx";
+  await import_fs_extra.default.ensureDir(componentsDir);
+  const spinner = (0, import_ora.default)("Installing shaders...").start();
+  try {
+    for (const shaderName of response.shaders) {
+      const shader = SHADERS.find((s) => s.name === shaderName);
+      if (!shader) continue;
+      if (shader.isVideo && shader.videoFile) {
+        await import_fs_extra.default.ensureDir(publicVideosDir);
+        const sourceVideo = import_path.default.join(__dirname, "..", "videos", shader.videoFile);
+        const targetVideo = import_path.default.join(publicVideosDir, shader.videoFile);
+        await import_fs_extra.default.copy(sourceVideo, targetVideo);
+        spinner.succeed(`Added ${import_chalk.default.green(shader.title)} (video copied to public/videos/)`);
+        spinner.start();
+      }
+      const sourceFile = import_path.default.join(__dirname, "..", "shaders", `${shader.file}.tsx`);
+      const targetFile = import_path.default.join(componentsDir, `${shader.file}${fileExtension}`);
+      await import_fs_extra.default.copy(sourceFile, targetFile);
+      spinner.succeed(`Added ${import_chalk.default.green(shader.title)}`);
+      spinner.start();
+    }
+    spinner.stop();
+    console.log(import_chalk.default.bold.green("\n\u2705 Shaders installed successfully!\n"));
+    console.log(import_chalk.default.gray("Location:"), import_chalk.default.cyan(`${componentsBase}/shaders/
+`));
+    console.log(import_chalk.default.bold("Usage:"));
+    response.shaders.forEach((shaderName) => {
+      const shader = SHADERS.find((s) => s.name === shaderName);
+      if (shader) {
+        console.log(import_chalk.default.gray(`  import ${shader.file} from '@/${componentsBase}/shaders/${shader.file}';`));
+        if (shader.isVideo) {
+          console.log(import_chalk.default.gray(`  // Video file: /videos/${shader.videoFile}`));
+        }
+      }
+    });
+    console.log("");
+    const packageJsonPath = import_path.default.join(targetDir, "package.json");
+    if (import_fs_extra.default.existsSync(packageJsonPath)) {
+      const packageJson = await import_fs_extra.default.readJson(packageJsonPath);
+      const hasThree = packageJson.dependencies?.three || packageJson.devDependencies?.three;
+      if (!hasThree) {
+        console.log(import_chalk.default.yellow("\u26A0\uFE0F  Required dependency not found!\n"));
+        console.log(import_chalk.default.gray("Install it with:\n"));
+        console.log(import_chalk.default.cyan("  npm install three @types/three"));
+        console.log(import_chalk.default.gray("  or"));
+        console.log(import_chalk.default.cyan("  pnpm add three @types/three\n"));
+      }
+    }
+  } catch (error) {
+    spinner.fail("Failed to install shaders");
+    console.error(import_chalk.default.red(error));
+    process.exit(1);
+  }
+}
+program.name("shaderz").description("CLI to add beautiful WebGL shaders to your project").version("1.0.0");
+program.command("add").description("Add shaders to your project").action(addShaders);
+program.parse();

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+module.exports = __toCommonJS(index_exports);

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "shaderz",
+  "version": "1.0.0",
+  "description": "CLI tool to add beautiful WebGL shaders to your React/Next.js project",
+  "main": "dist/index.js",
+  "bin": {
+    "shaderz": "dist/cli.js"
+  },
+  "files": [
+    "dist",
+    "shaders",
+    "videos"
+  ],
+  "scripts": {
+    "build": "tsup src/cli.ts src/index.ts --format cjs --dts --shims",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "shaderz",
+    "shader",
+    "webgl",
+    "cli",
+    "components",
+    "react",
+    "nextjs"
+  ],
+  "author": "harsh and shubham",
+  "license": "MIT",
+  "dependencies": {
+    "commander": "^12.0.0",
+    "prompts": "^2.4.2",
+    "chalk": "^4.1.2",
+    "ora": "^5.4.1",
+    "fs-extra": "^11.2.0"
+  },
+  "devDependencies": {
+    "@types/prompts": "^2.4.9",
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^22.10.2",
+    "tsup": "^8.0.0",
+    "typescript": "^5.7.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/harsh-and-shubham/shaderz"
+  },
+  "bugs": {
+    "url": "https://github.com/harsh-and-shubham/shaderz/issues"
+  },
+  "homepage": "https://shaderz.vercel.app"
+}

package/shaders/CosmicNebulaShader.tsx

@@ -0,0 +1,265 @@
+'use client';
+import React, { useRef, useEffect } from 'react';
+
+const CosmicNebulaShader: React.FC = () => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const animationRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const container = containerRef.current;
+    if (!canvas || !container) return;
+
+    const gl = canvas.getContext('webgl2') || canvas.getContext('webgl');
+    if (!gl) return;
+
+    const resizeCanvas = () => {
+      const rect = container.getBoundingClientRect();
+      canvas.width = rect.width;
+      canvas.height = rect.height;
+      gl.viewport(0, 0, canvas.width, canvas.height);
+    };
+
+    resizeCanvas();
+    window.addEventListener('resize', resizeCanvas);
+
+    const vertexShaderSource = `
+      attribute vec2 position;
+      void main() {
+        gl_Position = vec4(position, 0.0, 1.0);
+      }
+    `;
+
+    const fragmentShaderSource = `
+      precision highp float;
+      uniform vec2 resolution;
+      uniform float time;
+
+      // Hash for pseudo-random values
+      float hash(vec3 p) {
+        p = fract(p * 0.3183099 + 0.1);
+        p *= 17.0;
+        return fract(p.x * p.y * p.z * (p.x + p.y + p.z));
+      }
+
+      // 3D noise
+      float noise(vec3 x) {
+        vec3 p = floor(x);
+        vec3 f = fract(x);
+        f = f * f * (3.0 - 2.0 * f);
+        
+        return mix(
+          mix(mix(hash(p), hash(p + vec3(1,0,0)), f.x),
+              mix(hash(p + vec3(0,1,0)), hash(p + vec3(1,1,0)), f.x), f.y),
+          mix(mix(hash(p + vec3(0,0,1)), hash(p + vec3(1,0,1)), f.x),
+              mix(hash(p + vec3(0,1,1)), hash(p + vec3(1,1,1)), f.x), f.y),
+          f.z);
+      }
+
+      // Fractal Brownian Motion for nebula clouds
+      float fbm(vec3 p) {
+        float value = 0.0;
+        float amplitude = 0.5;
+        float frequency = 1.0;
+        
+        for(int i = 0; i < 6; i++) {
+          value += amplitude * noise(p * frequency);
+          frequency *= 2.1;
+          amplitude *= 0.45;
+        }
+        return value;
+      }
+
+      // Domain warping for nebula distortion
+      vec3 domainWarp(vec3 p, float time) {
+        vec3 q = vec3(
+          fbm(p + vec3(0.0, 0.0, time * 0.1)),
+          fbm(p + vec3(5.2, 1.3, time * 0.15)),
+          fbm(p + vec3(1.7, 9.2, time * 0.08))
+        );
+        
+        return p + q * 0.5;
+      }
+
+      // Stars
+      float stars(vec2 p, float count) {
+        vec2 pos = floor(p * count);
+        float star = hash(vec3(pos, 1.0));
+        
+        if(star > 0.98) {
+          vec2 center = (pos + 0.5) / count;
+          float dist = length(p - center);
+          float brightness = hash(vec3(pos, 2.0));
+          float twinkle = sin(time * 2.0 + brightness * 10.0) * 0.5 + 0.5;
+          return (1.0 - smoothstep(0.0, 0.002, dist)) * brightness * twinkle;
+        }
+        return 0.0;
+      }
+
+      void main() {
+        vec2 uv = gl_FragCoord.xy / resolution.xy;
+        vec2 p = (uv - 0.5) * 2.0;
+        p.x *= resolution.x / resolution.y;
+        
+        float t = time * 0.15;
+        
+        // 3D position for nebula
+        vec3 pos = vec3(p * 1.5, t);
+        
+        // Domain warp for swirling nebula
+        vec3 warped = domainWarp(pos, t);
+        
+        // Layered nebula clouds
+        float nebula1 = fbm(warped * 2.0);
+        float nebula2 = fbm(warped * 3.0 + vec3(2.0, 1.0, 0.0));
+        float nebula3 = fbm(warped * 4.0 - vec3(1.0, 2.0, 0.0));
+        
+        // Combine nebula layers
+        float nebulaDensity = nebula1 * 0.6 + nebula2 * 0.3 + nebula3 * 0.1;
+        nebulaDensity = pow(nebulaDensity, 1.5);
+        
+        // Cosmic color palette
+        vec3 deepPurple = vec3(0.15, 0.05, 0.3);
+        vec3 magenta = vec3(0.8, 0.1, 0.6);
+        vec3 pink = vec3(1.0, 0.3, 0.7);
+        vec3 cyan = vec3(0.2, 0.7, 1.0);
+        vec3 violet = vec3(0.5, 0.2, 0.9);
+        
+        // Color mixing based on density and position
+        vec3 nebulaColor = mix(deepPurple, magenta, nebulaDensity);
+        nebulaColor = mix(nebulaColor, pink, nebula2 * 0.7);
+        nebulaColor = mix(nebulaColor, violet, nebula3 * 0.5);
+        
+        // Add cyan highlights in dense areas
+        float highlights = smoothstep(0.6, 0.9, nebulaDensity);
+        nebulaColor = mix(nebulaColor, cyan, highlights * 0.4);
+        
+        // Glow effect
+        float glow = pow(nebulaDensity, 0.8) * 1.5;
+        nebulaColor *= glow;
+        
+        // Add stars
+        float starField = stars(uv, 200.0);
+        starField += stars(uv * 1.5, 300.0) * 0.7;
+        starField += stars(uv * 2.0, 400.0) * 0.5;
+        
+        vec3 starColor = vec3(1.0, 0.95, 0.9) * starField;
+        
+        // Combine nebula and stars
+        vec3 finalColor = nebulaColor + starColor;
+        
+        // Add subtle color shift animation
+        float colorShift = sin(t * 0.5 + length(p)) * 0.5 + 0.5;
+        finalColor += vec3(0.1, 0.0, 0.15) * colorShift * nebulaDensity * 0.3;
+        
+        // Center bright spot
+        float centerGlow = 1.0 - length(p * 0.5);
+        centerGlow = pow(centerGlow, 3.0) * 0.15;
+        finalColor += vec3(0.6, 0.2, 0.8) * centerGlow;
+        
+        // Vignette
+        float vignette = 1.0 - length(uv - 0.5) * 0.7;
+        finalColor *= vignette;
+        
+        gl_FragColor = vec4(finalColor, 1.0);
+      }
+    `;
+
+    const createShader = (gl: WebGLRenderingContext, type: number, source: string) => {
+      const shader = gl.createShader(type);
+      if (!shader) return null;
+      
+      gl.shaderSource(shader, source);
+      gl.compileShader(shader);
+      
+      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        console.error('Shader compile error:', gl.getShaderInfoLog(shader));
+        gl.deleteShader(shader);
+        return null;
+      }
+      
+      return shader;
+    };
+
+    const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
+    const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
+    
+    if (!vertexShader || !fragmentShader) return;
+
+    const program = gl.createProgram();
+    if (!program) return;
+    
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
+    gl.linkProgram(program);
+
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+      console.error('Program link error:', gl.getProgramInfoLog(program));
+      return;
+    }
+
+    const positionBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      new Float32Array([
+        -1, -1,
+         1, -1,
+        -1,  1,
+         1,  1,
+      ]),
+      gl.STATIC_DRAW
+    );
+
+    const positionLocation = gl.getAttribLocation(program, 'position');
+    const resolutionLocation = gl.getUniformLocation(program, 'resolution');
+    const timeLocation = gl.getUniformLocation(program, 'time');
+
+    let startTime = Date.now();
+
+    const render = () => {
+      if (!gl || !canvas) return;
+
+      gl.clearColor(0, 0, 0, 1);
+      gl.clear(gl.COLOR_BUFFER_BIT);
+
+      gl.useProgram(program);
+
+      gl.enableVertexAttribArray(positionLocation);
+      gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+      gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
+
+      gl.uniform2f(resolutionLocation, canvas.width, canvas.height);
+      gl.uniform1f(timeLocation, (Date.now() - startTime) / 1000);
+
+      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+
+      animationRef.current = requestAnimationFrame(render);
+    };
+
+    render();
+
+    return () => {
+      window.removeEventListener('resize', resizeCanvas);
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+      gl.deleteProgram(program);
+      gl.deleteShader(vertexShader);
+      gl.deleteShader(fragmentShader);
+      gl.deleteBuffer(positionBuffer);
+    };
+  }, []);
+
+  return (
+    <div ref={containerRef} className="absolute inset-0 w-full h-full bg-black overflow-hidden">
+      <canvas
+        ref={canvasRef}
+        className="absolute top-0 left-0 w-full h-full"
+      />
+    </div>
+  );
+};
+
+export default CosmicNebulaShader;