@paper-design/shaders-react 0.0.13 → 0.0.14

package/dist/index.d.ts

@@ -1,4 +1,6 @@
-export { ShaderMount } from './shader-mount';
-export { GrainClouds } from './shaders/grain-clouds';
-export { type GrainCloudsUniforms } from '@paper-design/shaders';
-export { getShaderColorFromString } from '@paper-design/shaders';
+export { ShaderMount } from "./shader-mount";
+export { GrainClouds } from "./shaders/grain-clouds";
+export { type GrainCloudsUniforms } from "@paper-design/shaders";
+export { MeshGradient } from "./shaders/mesh-gradient";
+export { type MeshGradientUniforms } from "@paper-design/shaders";
+export { getShaderColorFromString } from "@paper-design/shaders";

package/dist/index.js

@@ -1,2 +1,2 @@
-import{useEffect as a,useRef as l}from"react";import{ShaderMount as f}from"@paper-design/shaders";import{jsx as d}from"react/jsx-runtime";var i=({ref:r,fragmentShader:n,style:c,uniforms:o={},webGlContextAttributes:s,animated:t=!0})=>{let u=r??l(null),e=l(null);return a(()=>(u.current&&(e.current=new f(u.current,n,o,s,t)),()=>{e.current&&e.current.dispose()}),[n,s]),a(()=>{e.current&&e.current.setUniforms(o)},[o]),a(()=>{e.current&&(t?e.current.startAnimating():e.current.stopAnimating())},[t]),d("canvas",{ref:u,style:c})};import{useMemo as S}from"react";import{getShaderColorFromString as m,grainCloudsFragmentShader as g}from"@paper-design/shaders";import{jsx as C}from"react/jsx-runtime";var h=r=>{let n=S(()=>({u_color1:m(r.color1)??[0,0,0],u_color2:m(r.color2)??[255,255,255],u_noiseScale:r.noiseScale??1,u_noiseSpeed:r.noiseSpeed??.3,u_grainAmount:r.grainAmount??.05}),[r.color1,r.color2,r.noiseScale,r.noiseSpeed,r.grainAmount]);return C(i,{...r,fragmentShader:g,uniforms:n})};import{}from"@paper-design/shaders";import{getShaderColorFromString as H}from"@paper-design/shaders";export{h as GrainClouds,i as ShaderMount,H as getShaderColorFromString};
+import{useEffect as s,useRef as l}from"react";import{ShaderMount as f}from"@paper-design/shaders";import{jsx as S}from"react/jsx-runtime";var n=({ref:r,fragmentShader:o,style:d,uniforms:a={},webGlContextAttributes:m,animated:i=!0})=>{let u=r??l(null),e=l(null);return s(()=>(u.current&&(e.current=new f(u.current,o,a,m,i)),()=>{e.current&&e.current.dispose()}),[o,m]),s(()=>{e.current&&e.current.setUniforms(a)},[a]),s(()=>{e.current&&(i?e.current.startAnimating():e.current.stopAnimating())},[i]),S("canvas",{ref:u,style:d})};import{useMemo as h}from"react";import{getShaderColorFromString as c,grainCloudsFragmentShader as g}from"@paper-design/shaders";import{jsx as C}from"react/jsx-runtime";var M=r=>{let o=h(()=>({u_color1:c(r.color1,[0,0,0]),u_color2:c(r.color2,[255,255,255]),u_noiseScale:r.noiseScale??1,u_noiseSpeed:r.noiseSpeed??.3,u_grainAmount:r.grainAmount??.05}),[r.color1,r.color2,r.noiseScale,r.noiseSpeed,r.grainAmount]);return C(n,{...r,fragmentShader:g,uniforms:o})};import{}from"@paper-design/shaders";import{useMemo as G}from"react";import{getShaderColorFromString as t,meshGradientFragmentShader as P}from"@paper-design/shaders";import{jsx as y}from"react/jsx-runtime";var b=r=>{let o=G(()=>({u_color1:t(r.color1,[.957,.804,.623]),u_color2:t(r.color2,[.192,.384,.933]),u_color3:t(r.color3,[.91,.51,.8]),u_color4:t(r.color4,[.35,.71,.953]),u_speed:r.speed??.1}),[r.color1,r.color2,r.color3,r.color4,r.speed]);return y(n,{...r,fragmentShader:P,uniforms:o})};import{}from"@paper-design/shaders";import{getShaderColorFromString as D}from"@paper-design/shaders";export{M as GrainClouds,b as MeshGradient,n as ShaderMount,D as getShaderColorFromString};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/shader-mount.tsx", "../src/shaders/grain-clouds.tsx", "../src/index.ts"],
-  "sourcesContent": ["import React, { useEffect, useRef } from 'react';\nimport { ShaderMount as ShaderMountVanilla } from '@paper-design/shaders';\n\nexport interface ShaderMountProps {\n  ref?: React.RefObject<HTMLCanvasElement>;\n  fragmentShader: string;\n  style?: React.CSSProperties;\n  uniforms?: Record<string, number | number[]>;\n  webGlContextAttributes?: WebGLContextAttributes;\n  animated?: boolean;\n}\n\nexport const ShaderMount: React.FC<ShaderMountProps> = ({\n  ref,\n  fragmentShader,\n  style,\n  uniforms = {},\n  webGlContextAttributes,\n  animated = true,\n}) => {\n  const canvasRef = ref ?? useRef<HTMLCanvasElement>(null);\n  const shaderMountRef = useRef<ShaderMountVanilla | null>(null);\n\n  useEffect(() => {\n    if (canvasRef.current) {\n      shaderMountRef.current = new ShaderMountVanilla(\n        canvasRef.current,\n        fragmentShader,\n        uniforms,\n        webGlContextAttributes,\n        animated\n      );\n    }\n\n    return () => {\n      if (shaderMountRef.current) {\n        shaderMountRef.current.dispose();\n      }\n    };\n  }, [fragmentShader, webGlContextAttributes]);\n\n  useEffect(() => {\n    if (shaderMountRef.current) {\n      shaderMountRef.current.setUniforms(uniforms);\n    }\n  }, [uniforms]);\n\n  useEffect(() => {\n    if (shaderMountRef.current) {\n      if (animated) {\n        shaderMountRef.current.startAnimating();\n      } else {\n        shaderMountRef.current.stopAnimating();\n      }\n    }\n  }, [animated]);\n\n  return <canvas ref={canvasRef} style={style} />;\n};\n", "import { useMemo } from 'react';\nimport { ShaderMount, type ShaderMountProps } from '../shader-mount';\nimport {\n  getShaderColorFromString,\n  grainCloudsFragmentShader,\n  type GrainCloudsUniforms,\n} from '@paper-design/shaders';\n\ntype GrainCloudsProps = Omit<ShaderMountProps, 'fragmentShader'> & {\n  color1: string;\n  color2: string;\n  noiseScale: number;\n  noiseSpeed: number;\n  grainAmount: number;\n};\n\nexport const GrainClouds = (props: GrainCloudsProps): JSX.Element => {\n  const uniforms: GrainCloudsUniforms = useMemo(() => {\n    return {\n      u_color1: getShaderColorFromString(props.color1) ?? [0, 0, 0],\n      u_color2: getShaderColorFromString(props.color2) ?? [255, 255, 255],\n      u_noiseScale: props.noiseScale ?? 1,\n      u_noiseSpeed: props.noiseSpeed ?? 0.3,\n      u_grainAmount: props.grainAmount ?? 0.05,\n    };\n  }, [\n    props.color1,\n    props.color2,\n    props.noiseScale,\n    props.noiseSpeed,\n    props.grainAmount,\n  ]);\n\n  return (\n    <ShaderMount\n      {...props}\n      fragmentShader={grainCloudsFragmentShader}\n      uniforms={uniforms}\n    />\n  );\n};\n", "// ----- ShaderMount ----- //\nexport { ShaderMount } from './shader-mount';\n\n// ----- Fragment shaders ----- //\nexport { GrainClouds } from './shaders/grain-clouds';\nexport { type GrainCloudsUniforms } from '@paper-design/shaders';\n\n// ----- Uniform conversion utils ----- //\nexport { getShaderColorFromString } from '@paper-design/shaders';\n"],
-  "mappings": "AAAA,OAAgB,aAAAA,EAAW,UAAAC,MAAc,QACzC,OAAS,eAAeC,MAA0B,wBAwDzC,cAAAC,MAAA,oBA7CF,IAAMC,EAA0C,CAAC,CACtD,IAAAC,EACA,eAAAC,EACA,MAAAC,EACA,SAAAC,EAAW,CAAC,EACZ,uBAAAC,EACA,SAAAC,EAAW,EACb,IAAM,CACJ,IAAMC,EAAYN,GAAOJ,EAA0B,IAAI,EACjDW,EAAiBX,EAAkC,IAAI,EAE7D,OAAAD,EAAU,KACJW,EAAU,UACZC,EAAe,QAAU,IAAIV,EAC3BS,EAAU,QACVL,EACAE,EACAC,EACAC,CACF,GAGK,IAAM,CACPE,EAAe,SACjBA,EAAe,QAAQ,QAAQ,CAEnC,GACC,CAACN,EAAgBG,CAAsB,CAAC,EAE3CT,EAAU,IAAM,CACVY,EAAe,SACjBA,EAAe,QAAQ,YAAYJ,CAAQ,CAE/C,EAAG,CAACA,CAAQ,CAAC,EAEbR,EAAU,IAAM,CACVY,EAAe,UACbF,EACFE,EAAe,QAAQ,eAAe,EAEtCA,EAAe,QAAQ,cAAc,EAG3C,EAAG,CAACF,CAAQ,CAAC,EAENP,EAAC,UAAO,IAAKQ,EAAW,MAAOJ,EAAO,CAC/C,EC1DA,OAAS,WAAAM,MAAe,QAExB,OACE,4BAAAC,EACA,6BAAAC,MAEK,wBA4BH,cAAAC,MAAA,oBAlBG,IAAMC,EAAeC,GAAyC,CACnE,IAAMC,EAAgCC,EAAQ,KACrC,CACL,SAAUN,EAAyBI,EAAM,MAAM,GAAK,CAAC,EAAG,EAAG,CAAC,EAC5D,SAAUJ,EAAyBI,EAAM,MAAM,GAAK,CAAC,IAAK,IAAK,GAAG,EAClE,aAAcA,EAAM,YAAc,EAClC,aAAcA,EAAM,YAAc,GAClC,cAAeA,EAAM,aAAe,GACtC,GACC,CACDA,EAAM,OACNA,EAAM,OACNA,EAAM,WACNA,EAAM,WACNA,EAAM,WACR,CAAC,EAED,OACEF,EAACK,EAAA,CACE,GAAGH,EACJ,eAAgBH,EAChB,SAAUI,EACZ,CAEJ,ECnCA,YAAyC,wBAGzC,OAAS,4BAAAG,MAAgC",
-  "names": ["useEffect", "useRef", "ShaderMountVanilla", "jsx", "ShaderMount", "ref", "fragmentShader", "style", "uniforms", "webGlContextAttributes", "animated", "canvasRef", "shaderMountRef", "useMemo", "getShaderColorFromString", "grainCloudsFragmentShader", "jsx", "GrainClouds", "props", "uniforms", "useMemo", "ShaderMount", "getShaderColorFromString"]
+  "sources": ["../src/shader-mount.tsx", "../src/shaders/grain-clouds.tsx", "../src/index.ts", "../src/shaders/mesh-gradient.tsx"],
+  "sourcesContent": ["import React, { useEffect, useRef } from 'react';\nimport { ShaderMount as ShaderMountVanilla } from '@paper-design/shaders';\n\nexport interface ShaderMountProps {\n  ref?: React.RefObject<HTMLCanvasElement>;\n  fragmentShader: string;\n  style?: React.CSSProperties;\n  uniforms?: Record<string, number | number[]>;\n  webGlContextAttributes?: WebGLContextAttributes;\n  animated?: boolean;\n}\n\nexport const ShaderMount: React.FC<ShaderMountProps> = ({\n  ref,\n  fragmentShader,\n  style,\n  uniforms = {},\n  webGlContextAttributes,\n  animated = true,\n}) => {\n  const canvasRef = ref ?? useRef<HTMLCanvasElement>(null);\n  const shaderMountRef = useRef<ShaderMountVanilla | null>(null);\n\n  useEffect(() => {\n    if (canvasRef.current) {\n      shaderMountRef.current = new ShaderMountVanilla(\n        canvasRef.current,\n        fragmentShader,\n        uniforms,\n        webGlContextAttributes,\n        animated\n      );\n    }\n\n    return () => {\n      if (shaderMountRef.current) {\n        shaderMountRef.current.dispose();\n      }\n    };\n  }, [fragmentShader, webGlContextAttributes]);\n\n  useEffect(() => {\n    if (shaderMountRef.current) {\n      shaderMountRef.current.setUniforms(uniforms);\n    }\n  }, [uniforms]);\n\n  useEffect(() => {\n    if (shaderMountRef.current) {\n      if (animated) {\n        shaderMountRef.current.startAnimating();\n      } else {\n        shaderMountRef.current.stopAnimating();\n      }\n    }\n  }, [animated]);\n\n  return <canvas ref={canvasRef} style={style} />;\n};\n", "import { useMemo } from 'react';\nimport { ShaderMount, type ShaderMountProps } from '../shader-mount';\nimport { getShaderColorFromString, grainCloudsFragmentShader, type GrainCloudsUniforms } from '@paper-design/shaders';\n\ntype GrainCloudsProps = Omit<ShaderMountProps, 'fragmentShader'> & {\n  color1?: string;\n  color2?: string;\n  noiseScale?: number;\n  noiseSpeed?: number;\n  grainAmount?: number;\n};\n\nexport const GrainClouds = (props: GrainCloudsProps): JSX.Element => {\n  const uniforms: GrainCloudsUniforms = useMemo(() => {\n    return {\n      u_color1: getShaderColorFromString(props.color1, [0, 0, 0]),\n      u_color2: getShaderColorFromString(props.color2, [255, 255, 255]),\n      u_noiseScale: props.noiseScale ?? 1,\n      u_noiseSpeed: props.noiseSpeed ?? 0.3,\n      u_grainAmount: props.grainAmount ?? 0.05,\n    };\n  }, [props.color1, props.color2, props.noiseScale, props.noiseSpeed, props.grainAmount]);\n\n  return <ShaderMount {...props} fragmentShader={grainCloudsFragmentShader} uniforms={uniforms} />;\n};\n", "// ----- ShaderMount ----- //\nexport { ShaderMount } from \"./shader-mount\";\n\n// ----- Fragment shaders ----- //\nexport { GrainClouds } from \"./shaders/grain-clouds\";\nexport { type GrainCloudsUniforms } from \"@paper-design/shaders\";\nexport { MeshGradient } from \"./shaders/mesh-gradient\";\nexport { type MeshGradientUniforms } from \"@paper-design/shaders\";\n\n// ----- Uniform conversion utils ----- //\nexport { getShaderColorFromString } from \"@paper-design/shaders\";\n", "import { useMemo } from 'react';\nimport { ShaderMount, type ShaderMountProps } from '../shader-mount';\nimport { getShaderColorFromString, meshGradientFragmentShader, type MeshGradientUniforms } from '@paper-design/shaders';\n\ntype MeshGradientProps = Omit<ShaderMountProps, 'fragmentShader'> & {\n  color1?: string;\n  color2?: string;\n  color3?: string;\n  color4?: string;\n  speed?: number;\n};\n\nexport const MeshGradient = (props: MeshGradientProps): JSX.Element => {\n  const uniforms: MeshGradientUniforms = useMemo(() => {\n    return {\n      u_color1: getShaderColorFromString(props.color1, [0.957, 0.804, 0.623]),\n      u_color2: getShaderColorFromString(props.color2, [0.192, 0.384, 0.933]),\n      u_color3: getShaderColorFromString(props.color3, [0.91, 0.51, 0.8]),\n      u_color4: getShaderColorFromString(props.color4, [0.35, 0.71, 0.953]),\n      u_speed: props.speed ?? 0.1,\n    };\n  }, [props.color1, props.color2, props.color3, props.color4, props.speed]);\n\n  return <ShaderMount {...props} fragmentShader={meshGradientFragmentShader} uniforms={uniforms} />;\n};\n"],
+  "mappings": "AAAA,OAAgB,aAAAA,EAAW,UAAAC,MAAc,QACzC,OAAS,eAAeC,MAA0B,wBAwDzC,cAAAC,MAAA,oBA7CF,IAAMC,EAA0C,CAAC,CACtD,IAAAC,EACA,eAAAC,EACA,MAAAC,EACA,SAAAC,EAAW,CAAC,EACZ,uBAAAC,EACA,SAAAC,EAAW,EACb,IAAM,CACJ,IAAMC,EAAYN,GAAOJ,EAA0B,IAAI,EACjDW,EAAiBX,EAAkC,IAAI,EAE7D,OAAAD,EAAU,KACJW,EAAU,UACZC,EAAe,QAAU,IAAIV,EAC3BS,EAAU,QACVL,EACAE,EACAC,EACAC,CACF,GAGK,IAAM,CACPE,EAAe,SACjBA,EAAe,QAAQ,QAAQ,CAEnC,GACC,CAACN,EAAgBG,CAAsB,CAAC,EAE3CT,EAAU,IAAM,CACVY,EAAe,SACjBA,EAAe,QAAQ,YAAYJ,CAAQ,CAE/C,EAAG,CAACA,CAAQ,CAAC,EAEbR,EAAU,IAAM,CACVY,EAAe,UACbF,EACFE,EAAe,QAAQ,eAAe,EAEtCA,EAAe,QAAQ,cAAc,EAG3C,EAAG,CAACF,CAAQ,CAAC,EAENP,EAAC,UAAO,IAAKQ,EAAW,MAAOJ,EAAO,CAC/C,EC1DA,OAAS,WAAAM,MAAe,QAExB,OAAS,4BAAAC,EAA0B,6BAAAC,MAA2D,wBAqBrF,cAAAC,MAAA,oBAXF,IAAMC,EAAeC,GAAyC,CACnE,IAAMC,EAAgCC,EAAQ,KACrC,CACL,SAAUN,EAAyBI,EAAM,OAAQ,CAAC,EAAG,EAAG,CAAC,CAAC,EAC1D,SAAUJ,EAAyBI,EAAM,OAAQ,CAAC,IAAK,IAAK,GAAG,CAAC,EAChE,aAAcA,EAAM,YAAc,EAClC,aAAcA,EAAM,YAAc,GAClC,cAAeA,EAAM,aAAe,GACtC,GACC,CAACA,EAAM,OAAQA,EAAM,OAAQA,EAAM,WAAYA,EAAM,WAAYA,EAAM,WAAW,CAAC,EAEtF,OAAOF,EAACK,EAAA,CAAa,GAAGH,EAAO,eAAgBH,EAA2B,SAAUI,EAAU,CAChG,ECnBA,YAAyC,wBCLzC,OAAS,WAAAG,MAAe,QAExB,OAAS,4BAAAC,EAA0B,8BAAAC,MAA6D,wBAqBvF,cAAAC,MAAA,oBAXF,IAAMC,EAAgBC,GAA0C,CACrE,IAAMC,EAAiCC,EAAQ,KACtC,CACL,SAAUN,EAAyBI,EAAM,OAAQ,CAAC,KAAO,KAAO,IAAK,CAAC,EACtE,SAAUJ,EAAyBI,EAAM,OAAQ,CAAC,KAAO,KAAO,IAAK,CAAC,EACtE,SAAUJ,EAAyBI,EAAM,OAAQ,CAAC,IAAM,IAAM,EAAG,CAAC,EAClE,SAAUJ,EAAyBI,EAAM,OAAQ,CAAC,IAAM,IAAM,IAAK,CAAC,EACpE,QAASA,EAAM,OAAS,EAC1B,GACC,CAACA,EAAM,OAAQA,EAAM,OAAQA,EAAM,OAAQA,EAAM,OAAQA,EAAM,KAAK,CAAC,EAExE,OAAOF,EAACK,EAAA,CAAa,GAAGH,EAAO,eAAgBH,EAA4B,SAAUI,EAAU,CACjG,EDjBA,YAA0C,wBAG1C,OAAS,4BAAAG,MAAgC",
+  "names": ["useEffect", "useRef", "ShaderMountVanilla", "jsx", "ShaderMount", "ref", "fragmentShader", "style", "uniforms", "webGlContextAttributes", "animated", "canvasRef", "shaderMountRef", "useMemo", "getShaderColorFromString", "grainCloudsFragmentShader", "jsx", "GrainClouds", "props", "uniforms", "useMemo", "ShaderMount", "useMemo", "getShaderColorFromString", "meshGradientFragmentShader", "jsx", "MeshGradient", "props", "uniforms", "useMemo", "ShaderMount", "getShaderColorFromString"]
 }

package/dist/shaders/grain-clouds.d.ts

@@ -1,10 +1,10 @@
 import { type ShaderMountProps } from '../shader-mount';
 type GrainCloudsProps = Omit<ShaderMountProps, 'fragmentShader'> & {
-    color1: string;
-    color2: string;
-    noiseScale: number;
-    noiseSpeed: number;
-    grainAmount: number;
+    color1?: string;
+    color2?: string;
+    noiseScale?: number;
+    noiseSpeed?: number;
+    grainAmount?: number;
 };
 export declare const GrainClouds: (props: GrainCloudsProps) => JSX.Element;
 export {};

package/dist/shaders/mesh-gradient.d.ts

@@ -0,0 +1,10 @@
+import { type ShaderMountProps } from '../shader-mount';
+type MeshGradientProps = Omit<ShaderMountProps, 'fragmentShader'> & {
+    color1?: string;
+    color2?: string;
+    color3?: string;
+    color4?: string;
+    speed?: number;
+};
+export declare const MeshGradient: (props: MeshGradientProps) => JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paper-design/shaders-react",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -12,6 +12,7 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
       "default": "./dist/index.js"
     }
   },