shaderz 1.0.0 → 1.0.1

package/dist/cli.js

@@ -62,30 +62,43 @@ var SHADERS = [
     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: "plasma-v2",
+    title: "Plasma V2",
+    description: "Enhanced plasma shader with more colors",
+    file: "PlasmaV2Shader"
+  },
+  {
+    name: "dark-veil",
+    title: "Dark Veil",
+    description: "Mysterious dark veil with blue/purple gradient",
+    file: "DarkVeilShader"
+  },
+  {
+    name: "liquid-motion",
+    title: "Liquid Motion",
+    description: "Advanced fluid simulation with Three.js",
+    file: "LiquidMotionShader",
+    hasCss: true
+  },
+  {
+    name: "frothy-galaxy",
+    title: "Frothy Galaxy",
+    description: "Galactic frothy effect shader",
+    file: "FrothyGalaxyShader"
+  },
   {
     name: "glossy-film",
     title: "Glossy Film (Video)",
@@ -93,6 +106,14 @@ var SHADERS = [
     file: "VideoBackground",
     isVideo: true,
     videoFile: "glossy-film.mp4"
+  },
+  {
+    name: "nova-silk",
+    title: "Nova Silk (Video)",
+    description: "Elegant flowing silk video background",
+    file: "VideoBackground",
+    isVideo: true,
+    videoFile: "nova-silk.mp4"
   }
 ];
 async function addShaders() {
@@ -167,7 +188,14 @@ No components directory found. Will create: ${componentsBase}/shaders/`));
       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)}`);
+      if (shader.hasCss) {
+        const sourceCss = import_path.default.join(__dirname, "..", "shaders", "LiqMotion.css");
+        const targetCss = import_path.default.join(componentsDir, "LiqMotion.css");
+        await import_fs_extra.default.copy(sourceCss, targetCss);
+        spinner.succeed(`Added ${import_chalk.default.green(shader.title)} (with CSS file)`);
+      } else {
+        spinner.succeed(`Added ${import_chalk.default.green(shader.title)}`);
+      }
       spinner.start();
     }
     spinner.stop();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shaderz",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "CLI tool to add beautiful WebGL shaders to your React/Next.js project",
   "main": "dist/index.js",
   "bin": {
@@ -48,4 +48,4 @@
     "url": "https://github.com/harsh-and-shubham/shaderz/issues"
   },
   "homepage": "https://shaderz.vercel.app"
-}
+}

package/shaders/DarkVeilShader.tsx

@@ -0,0 +1,337 @@
+'use client';
+import { useEffect, useRef, useCallback } from 'react';
+
+function DarkVeil() {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const glRef = useRef<WebGLRenderingContext | null>(null);
+    const programRef = useRef<WebGLProgram | null>(null);
+    const animationRef = useRef<number | null>(null);
+    const isContextLostRef = useRef(false);
+
+    const createRenderer = useCallback(() => {
+        const canvas = canvasRef.current;
+        if (!canvas) return null;
+
+        const gl = canvas.getContext('webgl', {
+            preserveDrawingBuffer: true,
+            powerPreference: 'high-performance',
+            failIfMajorPerformanceCaveat: false,
+        });
+
+        if (!gl) {
+            console.error('WebGL not supported');
+            return null;
+        }
+
+        return gl;
+    }, []);
+
+    const compileShaderProgram = useCallback((gl: WebGLRenderingContext) => {
+        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;
+
+      // Organic procedural pattern generation
+      float seedPoint(vec2 p) {
+        return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
+      }
+      
+      float organicBlend(vec2 p) {
+        vec2 i = floor(p);
+        vec2 f = fract(p);
+        f = f * f * (3.0 - 2.0 * f);
+        
+        float a = seedPoint(i);
+        float b = seedPoint(i + vec2(1.0, 0.0));
+        float c = seedPoint(i + vec2(0.0, 1.0));
+        float d = seedPoint(i + vec2(1.0, 1.0));
+        
+        return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
+      }
+
+      void main() {
+        vec2 uv = gl_FragCoord.xy / resolution.xy;
+        vec2 center = uv - 0.5;
+        center.x *= resolution.x / resolution.y;
+        
+        // Floating movement - smooth and organic
+        float floatX = sin(time * 0.3) * 0.15 + cos(time * 0.2) * 0.1;
+        float floatY = cos(time * 0.25) * 0.12 + sin(time * 0.35) * 0.08;
+        center -= vec2(floatX, floatY);
+        
+        // Distance from center
+        float dist = length(center);
+        
+        // Smooth noise-based distortion (no sharp angles)
+        float n1 = organicBlend(center * 3.0 + time * 0.2) * 0.1;
+        float n2 = organicBlend(center * 5.0 - time * 0.15) * 0.05;
+        dist += n1 + n2;
+        
+        // Very soft gradient falloff - blurred edges
+        float gradient = 1.0 - smoothstep(0.0, 0.8, dist);
+        gradient = pow(gradient, 0.8); // Softer power for blur effect
+        
+        // Smooth the center completely - no sharp point
+        float centerBlur = smoothstep(0.0, 0.15, dist);
+        gradient *= centerBlur * 0.5 + 0.5;
+        
+        // Blue to Purple gradient based on smooth organicBlend
+        vec3 blue = vec3(0.2, 0.4, 0.9);
+        vec3 purple = vec3(0.6, 0.2, 0.8);
+        vec3 magenta = vec3(0.8, 0.1, 0.6);
+        
+        // Smooth color mixing based on organicBlend (not angle)
+        float colorVariation = organicBlend(center * 2.0 + time * 0.1);
+        float colorVariation2 = organicBlend(center * 1.5 - time * 0.08);
+        
+        vec3 gradientColor = mix(blue, purple, colorVariation);
+        gradientColor = mix(gradientColor, magenta, colorVariation2 * 0.4);
+        
+        // Apply gradient strength
+        vec3 col = gradientColor * gradient;
+        
+        // Soft outer glow
+        float glow = 1.0 - smoothstep(0.0, 1.2, dist);
+        glow = pow(glow, 2.5) * 0.2;
+        col += gradientColor * glow;
+        
+        // Pure black background
+        gl_FragColor = vec4(col, 1.0);
+      }
+    `;
+
+        const buildGLShader = (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 = buildGLShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
+        const fragmentShader = buildGLShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
+
+        if (!vertexShader || !fragmentShader) return null;
+
+        const program = gl.createProgram();
+        if (!program) return null;
+
+        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 null;
+        }
+
+        return program;
+    }, []);
+
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+
+        let gl = createRenderer();
+        if (!gl) return;
+
+        glRef.current = gl;
+
+        const updateCanvasSize = () => {
+            if (!canvas || !gl || isContextLostRef.current) return;
+            const parent = canvas.parentElement;
+            if (parent) {
+                canvas.width = parent.clientWidth;
+                canvas.height = parent.clientHeight;
+            } else {
+                canvas.width = window.innerWidth;
+                canvas.height = window.innerHeight;
+            }
+            gl.viewport(0, 0, canvas.width, canvas.height);
+        };
+
+        updateCanvasSize();
+        window.addEventListener('resize', updateCanvasSize);
+
+        let program = compileShaderProgram(gl);
+        if (!program) return;
+
+        programRef.current = program;
+
+        const positionBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+        const positions = new Float32Array([
+            -1, -1,
+            1, -1,
+            -1, 1,
+            1, 1
+        ]);
+        gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
+
+        let positionLocation = gl.getAttribLocation(program, 'position');
+        let resolutionLocation = gl.getUniformLocation(program, 'resolution');
+        let timeLocation = gl.getUniformLocation(program, 'time');
+
+        const startTime = performance.now();
+
+        const drawFrame = () => {
+            if (isContextLostRef.current || !gl || !program) {
+                animationRef.current = requestAnimationFrame(drawFrame);
+                return;
+            }
+
+            const elapsedTime = (performance.now() - startTime) * 0.001;
+
+            gl.clearColor(0.0, 0.0, 0.0, 1.0); // Pure black
+            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, elapsedTime);
+
+            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+
+            animationRef.current = requestAnimationFrame(drawFrame);
+        };
+
+        const onContextLost = (event: Event) => {
+            event.preventDefault();
+            isContextLostRef.current = true;
+        };
+
+        const onContextRestored = () => {
+            isContextLostRef.current = false;
+            gl = createRenderer();
+            if (!gl) return;
+            glRef.current = gl;
+            updateCanvasSize();
+            program = compileShaderProgram(gl);
+            if (!program) return;
+            programRef.current = program;
+
+            const newBuffer = gl.createBuffer();
+            gl.bindBuffer(gl.ARRAY_BUFFER, newBuffer);
+            gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
+
+            positionLocation = gl.getAttribLocation(program, 'position');
+            resolutionLocation = gl.getUniformLocation(program, 'resolution');
+            timeLocation = gl.getUniformLocation(program, 'time');
+        };
+
+        const onVisibilityChange = () => {
+            if (document.visibilityState === 'visible' && !isContextLostRef.current) {
+                updateCanvasSize();
+            }
+        };
+
+        canvas.addEventListener('webglcontextlost', onContextLost);
+        canvas.addEventListener('webglcontextrestored', onContextRestored);
+        document.addEventListener('visibilitychange', onVisibilityChange);
+
+        animationRef.current = requestAnimationFrame(drawFrame);
+
+        return () => {
+            window.removeEventListener('resize', updateCanvasSize);
+            canvas.removeEventListener('webglcontextlost', onContextLost);
+            canvas.removeEventListener('webglcontextrestored', onContextRestored);
+            document.removeEventListener('visibilitychange', onVisibilityChange);
+            if (animationRef.current) {
+                cancelAnimationFrame(animationRef.current);
+            }
+        };
+    }, [createRenderer, compileShaderProgram]);
+
+    return (
+        <div 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 pointer-events-none"
+            />
+        </div>
+    );
+}
+
+// Export the fragment shader for ShaderPreview compatibility
+export const fragment = `
+precision highp float;
+uniform vec2 resolution;
+uniform float time;
+
+float seedPoint(vec2 p) {
+  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
+}
+
+float organicBlend(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  f = f * f * (3.0 - 2.0 * f);
+  
+  float a = seedPoint(i);
+  float b = seedPoint(i + vec2(1.0, 0.0));
+  float c = seedPoint(i + vec2(0.0, 1.0));
+  float d = seedPoint(i + vec2(1.0, 1.0));
+  
+  return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
+}
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / resolution.xy;
+  vec2 center = uv - 0.5;
+  center.x *= resolution.x / resolution.y;
+  
+  float floatX = sin(time * 0.3) * 0.15 + cos(time * 0.2) * 0.1;
+  float floatY = cos(time * 0.25) * 0.12 + sin(time * 0.35) * 0.08;
+  center -= vec2(floatX, floatY);
+  
+  float dist = length(center);
+  
+  float n1 = organicBlend(center * 3.0 + time * 0.2) * 0.1;
+  float n2 = organicBlend(center * 5.0 - time * 0.15) * 0.05;
+  dist += n1 + n2;
+  
+  float gradient = 1.0 - smoothstep(0.0, 0.8, dist);
+  gradient = pow(gradient, 0.8);
+  
+  float centerBlur = smoothstep(0.0, 0.15, dist);
+  gradient *= centerBlur * 0.5 + 0.5;
+  
+  vec3 blue = vec3(0.2, 0.4, 0.9);
+  vec3 purple = vec3(0.6, 0.2, 0.8);
+  vec3 magenta = vec3(0.8, 0.1, 0.6);
+  
+  float colorVariation = organicBlend(center * 2.0 + time * 0.1);
+  float colorVariation2 = organicBlend(center * 1.5 - time * 0.08);
+  
+  vec3 gradientColor = mix(blue, purple, colorVariation);
+  gradientColor = mix(gradientColor, magenta, colorVariation2 * 0.4);
+  
+  vec3 col = gradientColor * gradient;
+  
+  float glow = 1.0 - smoothstep(0.0, 1.2, dist);
+  glow = pow(glow, 2.5) * 0.2;
+  col += gradientColor * glow;
+  
+  gl_FragColor = vec4(col, 1.0);
+}
+`;
+
+export default DarkVeil;

package/shaders/FrothyGalaxyShader.tsx

@@ -0,0 +1,216 @@
+'use client';
+import React, { useRef, useEffect } from 'react';
+
+const FrothyGalaxyShader: 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;
+
+      float hash(vec2 p) {
+        p = fract(p * vec2(123.34, 456.21));
+        p += dot(p, p + 45.32);
+        return fract(p.x * p.y);
+      }
+
+      float noise(vec2 p) {
+        vec2 i = floor(p);
+        vec2 f = fract(p);
+        f = f * f * (3.0 - 2.0 * f);
+        
+        float a = hash(i);
+        float b = hash(i + vec2(1.0, 0.0));
+        float c = hash(i + vec2(0.0, 1.0));
+        float d = hash(i + vec2(1.0, 1.0));
+        
+        return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
+      }
+
+      float fbm(vec2 p) {
+        float value = 0.0;
+        float amplitude = 0.5;
+        float frequency = 1.0;
+        
+        for(int i = 0; i < 5; i++) {
+          value += amplitude * noise(p * frequency);
+          frequency *= 2.0;
+          amplitude *= 0.5;
+        }
+        return value;
+      }
+
+      void main() {
+        vec2 uv = gl_FragCoord.xy / resolution.xy;
+        vec2 p = (uv - 0.5) * 2.0;
+        p.x *= resolution.x / resolution.y;
+        
+        // Smooth flowing waves
+        float wave1 = sin(p.x * 2.0 + time * 0.5) * 0.3;
+        float wave2 = sin(p.x * 1.5 - p.y * 0.8 + time * 0.4) * 0.2;
+        float wave3 = sin(p.x * 3.0 + p.y * 1.5 + time * 0.6) * 0.15;
+        float waves = wave1 + wave2 + wave3;
+        
+        // Add noise detail
+        waves += fbm(p * 2.0 + vec2(time * 0.1, 0.0)) * 0.2;
+        
+        // Normalized wave height
+        float h = waves * 0.5 + 0.5;
+        
+        // Beautiful gradient colors
+        vec3 color1 = vec3(0.1, 0.3, 0.6);   // Deep blue
+        vec3 color2 = vec3(0.2, 0.5, 0.8);   // Medium blue
+        vec3 color3 = vec3(0.4, 0.7, 0.9);   // Light blue
+        vec3 color4 = vec3(0.6, 0.85, 0.95); // Pale blue
+        
+        // Smooth color transitions
+        vec3 color;
+        if (h < 0.33) {
+          color = mix(color1, color2, h * 3.0);
+        } else if (h < 0.66) {
+          color = mix(color2, color3, (h - 0.33) * 3.0);
+        } else {
+          color = mix(color3, color4, (h - 0.66) * 3.0);
+        }
+        
+        // Add shimmer
+        float shimmer = fbm(p * 6.0 + vec2(time * 0.3, time * 0.2));
+        shimmer = pow(shimmer, 2.0) * 0.3;
+        color += vec3(shimmer);
+        
+        // Depth fade
+        color = mix(color, color1 * 0.8, (1.0 - uv.y) * 0.4);
+        
+        // Subtle vignette
+        float dist = length(uv - 0.5);
+        color *= 1.0 - dist * 0.3;
+        
+        gl_FragColor = vec4(color, 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 FrothyGalaxyShader;

package/shaders/LiqMotion.css

@@ -0,0 +1,13 @@
+.liquid-ether-container {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.liquid-ether-container canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}