Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@paper-design/shaders-react
Advanced tools
@paper-design/shaders-react - npm Package Compare versions
Comparing version 0.0.9 to 0.0.10
@@ -1,40 +0,4 @@ | ||
| // Generated by dts-bundle-generator v9.5.1 | ||
| import React$1 from 'react'; | ||
| export interface ShaderMountProps { | ||
| ref?: React$1.RefObject<HTMLCanvasElement>; | ||
| fragmentShader: string; | ||
| style?: React$1.CSSProperties; | ||
| uniforms?: Record<string, number | number[]>; | ||
| webGlContextAttributes?: WebGLContextAttributes; | ||
| animated?: boolean; | ||
| } | ||
| export declare const ShaderMount: React$1.FC<ShaderMountProps>; | ||
| /** Convert color string from HSL, RGB, or hex to 0-to-1-range-RGB array */ | ||
| export declare function getShaderColorFromString(colorString: string): [ | ||
| number, | ||
| number, | ||
| number | ||
| ]; | ||
| export type GrainCloudsUniforms = { | ||
| u_color1: [ | ||
| number, | ||
| number, | ||
| number | ||
| ]; | ||
| u_color2: [ | ||
| number, | ||
| number, | ||
| number | ||
| ]; | ||
| u_noiseScale: number; | ||
| u_noiseSpeed: number; | ||
| u_grainAmount: number; | ||
| }; | ||
| export type GrainCloudsProps = Omit<ShaderMountProps, "fragmentShader"> & { | ||
| uniforms: GrainCloudsUniforms; | ||
| }; | ||
| export declare const GrainClouds: (props: GrainCloudsProps) => JSX.Element; | ||
| export {}; | ||
| export { ShaderMount } from './shader-mount'; | ||
| export { GrainClouds } from './shaders/grain-clouds'; | ||
| export { type GrainCloudsUniforms } from '@paper-design/shaders'; | ||
| export { getShaderColorFromString } from '@paper-design/shaders'; |
@@ -1,80 +0,2 @@ | ||
| import{useEffect as p,useRef as b}from"react";var A=class{canvas;gl;program=null;uniformLocations={};fragmentShader;rafId=null;lastFrameTime=0;totalAnimationTime=0;isAnimated;providedUniforms;hasBeenDisposed=!1;resolutionChanged=!0;constructor(e,t,r={},i,n=!0){this.canvas=e,this.fragmentShader=t,this.providedUniforms=r,this.isAnimated=n;let s=e.getContext("webgl",i);if(!s)throw new Error("WebGL not supported");this.gl=s,this.initWebGL(),this.setupResizeObserver(),this.isAnimated?this.startAnimating():this.render(performance.now())}initWebGL=()=>{let e=R(this.gl,_,this.fragmentShader);e&&(this.program=e,this.setupPositionAttribute(),this.setupUniforms())};setupPositionAttribute=()=>{let e=this.gl.getAttribLocation(this.program,"a_position"),t=this.gl.createBuffer();this.gl.bindBuffer(this.gl.ARRAY_BUFFER,t);let r=[-1,-1,1,-1,-1,1,-1,1,1,-1,1,1];this.gl.bufferData(this.gl.ARRAY_BUFFER,new Float32Array(r),this.gl.STATIC_DRAW),this.gl.enableVertexAttribArray(e),this.gl.vertexAttribPointer(e,2,this.gl.FLOAT,!1,0,0)};setupUniforms=()=>{this.uniformLocations={u_time:this.gl.getUniformLocation(this.program,"u_time"),u_resolution:this.gl.getUniformLocation(this.program,"u_resolution"),...Object.fromEntries(Object.keys(this.providedUniforms).map(e=>[e,this.gl.getUniformLocation(this.program,e)]))}};resizeObserver=null;setupResizeObserver=()=>{this.resizeObserver=new ResizeObserver(()=>this.handleResize()),this.resizeObserver.observe(this.canvas),this.handleResize()};handleResize=()=>{let e=this.canvas.clientWidth,t=this.canvas.clientHeight;(this.canvas.width!==e||this.canvas.height!==t)&&(this.canvas.width=e,this.canvas.height=t,this.resolutionChanged=!0,this.gl.viewport(0,0,this.gl.canvas.width,this.gl.canvas.height),this.render(performance.now()))};render=e=>{if(this.hasBeenDisposed)return;let t=e-this.lastFrameTime;this.lastFrameTime=e,this.isAnimated&&(this.totalAnimationTime+=t),this.gl.useProgram(this.program),this.gl.uniform1f(this.uniformLocations.u_time,this.totalAnimationTime*.001),this.resolutionChanged&&(this.gl.uniform2f(this.uniformLocations.u_resolution,this.gl.canvas.width,this.gl.canvas.height),this.resolutionChanged=!1),this.gl.drawArrays(this.gl.TRIANGLES,0,6),this.isAnimated?this.requestRender():this.rafId=null};requestRender=()=>{this.rafId!==null&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame(this.render)};updateProvidedUniforms=()=>{this.gl.useProgram(this.program),Object.entries(this.providedUniforms).forEach(([e,t])=>{let r=this.uniformLocations[e];if(r)if(Array.isArray(t))switch(t.length){case 2:this.gl.uniform2fv(r,t);break;case 3:this.gl.uniform3fv(r,t);break;case 4:this.gl.uniform4fv(r,t);break;default:t.length===9?this.gl.uniformMatrix3fv(r,!1,t):t.length===16?this.gl.uniformMatrix4fv(r,!1,t):console.warn(`Unsupported uniform array length: ${t.length}`)}else typeof t=="number"?this.gl.uniform1f(r,t):typeof t=="boolean"?this.gl.uniform1i(r,t?1:0):console.warn(`Unsupported uniform type for ${e}: ${typeof t}`)})};startAnimating=()=>{this.isAnimated=!0,this.lastFrameTime=performance.now(),this.rafId=requestAnimationFrame(this.render)};stopAnimating=()=>{this.isAnimated=!1,this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null)};setUniforms=e=>{this.providedUniforms={...this.providedUniforms,...e},this.updateProvidedUniforms(),this.render(performance.now())};dispose=()=>{this.hasBeenDisposed=!0,this.stopAnimating(),this.gl&&this.program&&(this.gl.deleteProgram(this.program),this.program=null,this.gl.bindBuffer(this.gl.ARRAY_BUFFER,null),this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER,null),this.gl.bindRenderbuffer(this.gl.RENDERBUFFER,null),this.gl.bindFramebuffer(this.gl.FRAMEBUFFER,null),this.gl.getError()),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.uniformLocations={}}},_=` | ||
| attribute vec4 a_position; | ||
| void main() { | ||
| gl_Position = a_position; | ||
| } | ||
| `;function x(e,t,r){let i=e.createShader(t);return i?(e.shaderSource(i,r),e.compileShader(i),e.getShaderParameter(i,e.COMPILE_STATUS)?i:(console.error("An error occurred compiling the shaders: "+e.getShaderInfoLog(i)),e.deleteShader(i),null)):null}function R(e,t,r){let i=x(e,e.VERTEX_SHADER,t),n=x(e,e.FRAGMENT_SHADER,r);if(!i||!n)return null;let s=e.createProgram();return s?(e.attachShader(s,i),e.attachShader(s,n),e.linkProgram(s),e.getProgramParameter(s,e.LINK_STATUS)?(e.detachShader(s,i),e.detachShader(s,n),e.deleteShader(i),e.deleteShader(n),s):(console.error("Unable to initialize the shader program: "+e.getProgramInfoLog(s)),e.deleteProgram(s),e.deleteShader(i),e.deleteShader(n),null)):null}function y(e){let t,r,i;if(e.startsWith("#"))[t,r,i]=C(e);else if(e.startsWith("rgb"))[t,r,i]=F(e);else if(e.startsWith("hsl"))[t,r,i]=E(U(e));else return console.error("Unsupported color format"),[0,0,0];return[t,r,i]}function C(e){let t=parseInt(e.slice(1),16),r=(t>>16&255)/255,i=(t>>8&255)/255,n=(t&255)/255;return[r,i,n]}function F(e){let t=e.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);return t?[parseInt(t[1]??"0")/255,parseInt(t[2]??"0")/255,parseInt(t[3]??"0")/255]:[0,0,0]}function U(e){let t=e.match(/^hsl\s*\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*\)$/i);return t?[parseInt(t[1]??"0"),parseInt(t[2]??"0"),parseInt(t[3]??"0")]:[0,0,0]}function E(e){let[t,r,i]=e,n=t/360,s=r/100,a=i/100,o,m,c;if(r===0)o=m=c=a;else{let d=(h,g,l)=>(l<0&&(l+=1),l>1&&(l-=1),l<.16666666666666666?h+(g-h)*6*l:l<.5?g:l<.6666666666666666?h+(g-h)*(.6666666666666666-l)*6:h),u=a<.5?a*(1+s):a+s-a*s,f=2*a-u;o=d(f,u,n+1/3),m=d(f,u,n),c=d(f,u,n-1/3)}return[o,m,c]}var S=` | ||
| precision highp float; | ||
| uniform vec2 u_resolution; | ||
| uniform float u_time; | ||
| uniform vec3 u_color1; | ||
| uniform vec3 u_color2; | ||
| uniform float u_noiseScale; | ||
| uniform float u_noiseSpeed; | ||
| uniform float u_grainAmount; | ||
| // Simplex 2D noise | ||
| vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); } | ||
| float snoise(vec2 v) { | ||
| const vec4 C = vec4(0.211324865405187, 0.366025403784439, | ||
| -0.577350269189626, 0.024390243902439); | ||
| vec2 i = floor(v + dot(v, C.yy)); | ||
| vec2 x0 = v - i + dot(i, C.xx); | ||
| vec2 i1; | ||
| i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0); | ||
| vec4 x12 = x0.xyxy + C.xxzz; | ||
| x12.xy -= i1; | ||
| i = mod(i, 289.0); | ||
| vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0)) | ||
| + i.x + vec3(0.0, i1.x, 1.0)); | ||
| vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), | ||
| dot(x12.zw,x12.zw)), 0.0); | ||
| m = m*m ; | ||
| m = m*m ; | ||
| vec3 x = 2.0 * fract(p * C.www) - 1.0; | ||
| vec3 h = abs(x) - 0.5; | ||
| vec3 ox = floor(x + 0.5); | ||
| vec3 a0 = x - ox; | ||
| m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h); | ||
| vec3 g; | ||
| g.x = a0.x * x0.x + h.x * x0.y; | ||
| g.yz = a0.yz * x12.xz + h.yz * x12.yw; | ||
| return 130.0 * dot(m, g); | ||
| } | ||
| void main() { | ||
| vec2 st = gl_FragCoord.xy / u_resolution.xy; | ||
| // Calculate the aspect ratio of the shader | ||
| float shaderAspect = u_resolution.x / u_resolution.y; | ||
| // Define the aspect ratio of your content (e.g., 1.0 for square) | ||
| float contentAspect = 1.0; | ||
| // Adjust st to maintain content aspect ratio | ||
| if (shaderAspect > contentAspect) { | ||
| float scale = shaderAspect / contentAspect; | ||
| st.x = (st.x - 0.5) * scale + 0.5; | ||
| } else { | ||
| float scale = contentAspect / shaderAspect; | ||
| st.y = (st.y - 0.5) * scale + 0.5; | ||
| } | ||
| // Create blobby texture | ||
| float n = snoise(st * u_noiseScale + u_time * u_noiseSpeed); | ||
| n += 0.5 * snoise(st * u_noiseScale * 2.0 - u_time * u_noiseSpeed * 0.5); | ||
| n += 0.25 * snoise(st * u_noiseScale * 4.0 + u_time * u_noiseSpeed * 0.25); | ||
| n = n * 0.5 + 0.5; | ||
| // Color interpolation | ||
| vec3 color = mix(u_color1, u_color2, n); | ||
| // Add grain | ||
| float grain = fract(sin(dot(st * 1000.0, vec2(12.9898, 78.233))) * 43758.5453); | ||
| color += (grain - 0.5) * u_grainAmount; | ||
| gl_FragColor = vec4(color, 1.0); | ||
| } | ||
| `;import{jsx as w}from"react/jsx-runtime";var v=({ref:e,fragmentShader:t,style:r,uniforms:i={},webGlContextAttributes:n,animated:s=!0})=>{let a=e??b(null),o=b(null);return p(()=>(a.current&&(o.current=new A(a.current,t,i,n,s)),()=>{o.current&&o.current.dispose()}),[t,n]),p(()=>{o.current&&o.current.setUniforms(i)},[i]),p(()=>{o.current&&(s?o.current.startAnimating():o.current.stopAnimating())},[s]),w("canvas",{ref:a,style:r})};import{jsx as P}from"react/jsx-runtime";var L=e=>P(v,{...e,fragmentShader:S});export{L as GrainClouds,v as ShaderMount,y as getShaderColorFromString}; | ||
| import{useEffect as a,useRef as f}from"react";import{ShaderMount as m}from"@paper-design/shaders";import{jsx as d}from"react/jsx-runtime";var s=({ref:e,fragmentShader:u,style:l,uniforms:t={},webGlContextAttributes:i,animated:n=!0})=>{let o=e??f(null),r=f(null);return a(()=>(o.current&&(r.current=new m(o.current,u,t,i,n)),()=>{r.current&&r.current.dispose()}),[u,i]),a(()=>{r.current&&r.current.setUniforms(t)},[t]),a(()=>{r.current&&(n?r.current.startAnimating():r.current.stopAnimating())},[n]),d("canvas",{ref:o,style:l})};import{grainCloudsFragmentShader as p}from"@paper-design/shaders";import{jsx as S}from"react/jsx-runtime";var c=e=>S(s,{...e,fragmentShader:p});import{getShaderColorFromString as F}from"@paper-design/shaders";export{c as GrainClouds,s as ShaderMount,F as getShaderColorFromString}; | ||
| //# sourceMappingURL=index.js.map |
| { | ||
| "name": "@paper-design/shaders-react", | ||
| "version": "0.0.9", | ||
| "version": "0.0.10", | ||
| "license": "MIT", | ||
@@ -9,2 +9,5 @@ "type": "module", | ||
| }, | ||
| "main": "./dist/index.js", | ||
| "module": "./dist/index.js", | ||
| "types": "./dist/index.d.ts", | ||
| "exports": { | ||
@@ -23,3 +26,3 @@ ".": { | ||
| "dependencies": { | ||
| "@paper-design/shaders": "0.0.7", | ||
| "@paper-design/shaders": "workspace:*", | ||
| "react": "^18.3.1" | ||
@@ -26,0 +29,0 @@ }, |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 2 instances in 1 package
Improved metrics
- Number of package files
- increased by33.33%
8
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-80.06%
7341
- Lines of code
- decreased by-79.84%
26
Dependency changes
- Removed@paper-design/shaders@0.0.7(transitive)