@paper-design/shaders-react 0.0.15 → 0.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/index.d.ts +26 -6
  2. package/dist/index.js +2 -1
  3. package/dist/index.js.map +4 -4
  4. package/dist/shader-mount.d.ts +3 -1
  5. package/dist/shaders/dots-pattern.d.ts +20 -0
  6. package/dist/shaders/grain-clouds.d.ts +11 -4
  7. package/dist/shaders/mesh-gradient.d.ts +10 -3
  8. package/dist/shaders/neuro-noise.d.ts +16 -0
  9. package/dist/shaders/smoke-ring.d.ts +21 -0
  10. package/dist/shaders/stepped-simplex-noise.d.ts +19 -0
  11. package/package.json +2 -2
package/dist/index.d.ts CHANGED
@@ -1,6 +1,26 @@
1
- export { ShaderMount } from "./shader-mount";
2
- export { GrainClouds } from "./shaders/grain-clouds";
3
- export { type GrainCloudsUniforms } from "@paper-design/shaders";
4
- export { MeshGradient } from "./shaders/mesh-gradient";
5
- export { type MeshGradientUniforms } from "@paper-design/shaders";
6
- export { getShaderColorFromString } from "@paper-design/shaders";
1
+ export { ShaderMount } from './shader-mount';
2
+ export { GrainClouds, grainCloudsPresets } from './shaders/grain-clouds';
3
+ export { type GrainCloudsProps } from './shaders/grain-clouds';
4
+ export { type GrainCloudsParams } from './shaders/grain-clouds';
5
+ export { type GrainCloudsUniforms } from '@paper-design/shaders';
6
+ export { MeshGradient, meshGradientPresets } from './shaders/mesh-gradient';
7
+ export { type MeshGradientProps } from './shaders/mesh-gradient';
8
+ export { type MeshGradientParams } from './shaders/mesh-gradient';
9
+ export { type MeshGradientUniforms } from '@paper-design/shaders';
10
+ export { SmokeRing, smokeRingPresets } from './shaders/smoke-ring';
11
+ export { type SmokeRingProps } from './shaders/smoke-ring';
12
+ export { type SmokeRingParams } from './shaders/smoke-ring';
13
+ export { type SmokeRingUniforms } from '@paper-design/shaders';
14
+ export { NeuroNoise, neuroNoisePresets } from './shaders/neuro-noise';
15
+ export { type NeuroNoiseProps } from './shaders/neuro-noise';
16
+ export { type NeuroNoiseParams } from './shaders/neuro-noise';
17
+ export { type NeuroNoiseUniforms } from '@paper-design/shaders';
18
+ export { DotsOrbit, dotsOrbitPresets } from './shaders/dots-pattern';
19
+ export { type DotsOrbitProps } from './shaders/dots-pattern';
20
+ export { type DotsOrbitParams } from './shaders/dots-pattern';
21
+ export { type DotsOrbitUniforms } from '@paper-design/shaders';
22
+ export { SteppedSimplexNoise, steppedSimplexNoisePresets } from './shaders/stepped-simplex-noise';
23
+ export { type SteppedSimplexNoiseProps } from './shaders/stepped-simplex-noise';
24
+ export { type SteppedSimplexNoiseParams } from './shaders/stepped-simplex-noise';
25
+ export { type SteppedSimplexNoiseUniforms } from '@paper-design/shaders';
26
+ export { getShaderColorFromString } from '@paper-design/shaders';
package/dist/index.js CHANGED
@@ -1,2 +1,3 @@
1
- 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};
1
+ /***** Paper Shaders: https://github.com/paper-design/shaders *****/
2
+ import{useEffect as P,useRef as x}from"react";import{ShaderMount as M}from"@paper-design/shaders";import{jsx as k}from"react/jsx-runtime";var o=({ref:e,fragmentShader:r,style:y,uniforms:d={},webGlContextAttributes:g,speed:S=1})=>{let h=e??x(null),c=x(null);return P(()=>(h.current&&(c.current=new M(h.current,r,d,g,S)),()=>{c.current?.dispose()}),[r,g]),P(()=>{c.current?.setUniforms(d)},[d]),P(()=>{c.current?.setSpeed(S)},[S]),k("canvas",{ref:h,style:y})};import{useMemo as G}from"react";import{getShaderColorFromString as b,grainCloudsFragmentShader as R}from"@paper-design/shaders";import{jsx as F}from"react/jsx-runtime";var m={name:"Default",params:{color1:"hsla(0, 0%, 0%, 1)",color2:"hsla(0, 0%, 100%, 1)",scale:1,grainAmount:.05,speed:.3}},_={name:"Sky",params:{color1:"#73a6ff",color2:"#ffffff",scale:1,grainAmount:0,speed:.3}},C=[m,_],O=e=>{let r=G(()=>({u_color1:b(e.color1,m.params.color1),u_color2:b(e.color2,m.params.color2),u_scale:e.scale??m.params.scale,u_grainAmount:e.grainAmount??m.params.grainAmount}),[e.color1,e.color2,e.scale,e.grainAmount]);return F(o,{...e,fragmentShader:R,uniforms:r})};import{}from"@paper-design/shaders";import{useMemo as D}from"react";import{getShaderColorFromString as p,meshGradientFragmentShader as B}from"@paper-design/shaders";import{jsx as A}from"react/jsx-runtime";var l={name:"Default",params:{color1:"hsla(259, 29%, 73%, 1)",color2:"hsla(263, 57%, 39%, 1)",color3:"hsla(48, 73%, 84%,1)",color4:"hsla(295, 32%, 70%, 1)",speed:.15}},U={name:"Beach",params:{color1:"hsla(186, 81%, 83%, 1)",color2:"hsla(198, 55%, 68%, 1)",color3:"hsla(53, 67%, 88%, 1)",color4:"hsla(45, 93%, 73%, 1)",speed:.1}},z=[l,U],E=e=>{let r=D(()=>({u_color1:p(e.color1,l.params.color1),u_color2:p(e.color2,l.params.color2),u_color3:p(e.color3,l.params.color3),u_color4:p(e.color4,l.params.color4),u_speed:e.speed??l.params.speed}),[e.color1,e.color2,e.color3,e.color4,e.speed]);return A(o,{...e,fragmentShader:B,uniforms:r})};import{}from"@paper-design/shaders";import{useMemo as q}from"react";import{getShaderColorFromString as f,smokeRingFragmentShader as J}from"@paper-design/shaders";import{jsx as w}from"react/jsx-runtime";var a={name:"Default",params:{colorBack:"hsla(208, 54%, 7%, 1)",color1:"hsla(0, 0%, 100%, 1)",color2:"hsla(211, 100%, 64%, 1)",speed:1,noiseScale:1.4,thickness:.33}},X={name:"Cloud",params:{colorBack:"hsla(218, 100%, 62%)",color1:"hsla(0, 0%, 100%)",color2:"hsla(0, 0%, 100%)",speed:1,thickness:.7,noiseScale:1.8}},v={name:"Fire",params:{colorBack:"hsla(20, 100%, 5%)",color1:"hsla(40, 100%, 50%)",color2:"hsla(0, 100%, 50%)",speed:4,thickness:.35,noiseScale:1.4}},L={name:"Electric",params:{colorBack:"hsla(47, 50%, 7%)",color1:"hsla(47, 100%, 64%)",color2:"hsla(47, 100%, 64%)",speed:2.5,thickness:.1,noiseScale:1.8}},H={name:"Poison",params:{colorBack:"hsla(120, 100%, 3%)",color1:"hsla(120, 100%, 3%)",color2:"hsla(120, 100%, 66%)",speed:3,thickness:.6,noiseScale:5}},T=[a,X,v,L,H],V=e=>{let r=q(()=>({u_colorBack:f(e.colorBack,a.params.colorBack),u_color1:f(e.color1,a.params.color1),u_color2:f(e.color2,a.params.color2),u_speed:e.speed??a.params.speed,u_scale:e.noiseScale??a.params.noiseScale,u_thickness:e.thickness??a.params.thickness}),[e.colorBack,e.color1,e.color2,e.speed,e.noiseScale,e.thickness]);return w(o,{...e,fragmentShader:J,uniforms:r})};import{}from"@paper-design/shaders";import{useMemo as W}from"react";import{getShaderColorFromString as N,neuroNoiseFragmentShader as I}from"@paper-design/shaders";import{jsx as Z}from"react/jsx-runtime";var n={name:"Default",params:{colorFront:"hsla(261, 100%, 82%, 1)",colorBack:"hsla(0, 0%, 0%, 1)",scale:.7,speed:1,brightness:1.3}},K={name:"Marble",params:{colorFront:"hsla(230, 24%, 15%, 1)",colorBack:"hsla(0, 0%, 97%, 1)",scale:1.2,speed:0,brightness:1.1}},Q=[n,K],Y=e=>{let r=W(()=>({u_colorFront:N(e.colorFront,n.params.colorFront),u_colorBack:N(e.colorBack,n.params.colorBack),u_scale:e.scale??n.params.scale,u_speed:e.speed??n.params.speed,u_brightness:e.brightness??n.params.brightness}),[e.colorFront,e.colorBack,e.scale,e.speed,e.brightness]);return Z(o,{...e,fragmentShader:I,uniforms:r})};import{}from"@paper-design/shaders";import{useMemo as $}from"react";import{getShaderColorFromString as u,dotsOrbitFragmentShader as j}from"@paper-design/shaders";import{jsx as oe}from"react/jsx-runtime";var s={name:"Default",params:{color1:"hsla(358.2, 66.1%, 48.6%, 1)",color2:"hsla(145.2, 30.1%, 32.5%, 1)",color3:"hsla(39.4, 87.7%, 52.4%, 1)",color4:"hsla(273.5, 29.5%, 34.5%, 1)",dotSize:.15,dotSizeRange:.05,scale:10,speed:3,spreading:.25}},ee=[s],re=e=>{let r=$(()=>({u_color1:u(e.color1,s.params.color1),u_color2:u(e.color2,s.params.color2),u_color3:u(e.color3,s.params.color3),u_color4:u(e.color4,s.params.color4),u_dotSize:e.dotSize??s.params.dotSize,u_dotSizeRange:e.dotSizeRange??s.params.dotSizeRange,u_scale:e.scale??s.params.scale,u_spreading:e.spreading??s.params.spreading}),[e.color1,e.color2,e.color3,e.color4,e.dotSize,e.dotSizeRange,e.scale,e.spreading]);return oe(o,{...e,fragmentShader:j,uniforms:r})};import{}from"@paper-design/shaders";import{useMemo as se}from"react";import{getShaderColorFromString as i,steppedSimplexNoiseFragmentShader as te}from"@paper-design/shaders";import{jsx as ce}from"react/jsx-runtime";var t={name:"Default",params:{color1:"hsla(208.42, 24.68%, 45.29%, 1)",color2:"hsla(94.07, 38.39%, 58.63%, 1)",color3:"hsla(359.02, 93.88%, 61.57%, 1)",color4:"hsla(42.35, 93.41%, 64.31%, 1)",color5:"hsla(0, 0%, 100%, 1)",scale:.5,speed:.15,stepsNumber:13}},ae={name:"Magma",params:{color1:"hsla(0, 100%, 36.47%, 1)",color2:"hsla(0, 95.54%, 43.92%, 1)",color3:"hsla(20.08, 100%, 48.63%, 1)",color4:"hsla(45, 100%, 45.49%, 1)",color5:"hsla(31.87, 100%, 93.73%, 1)",speed:.2,scale:2,stepsNumber:8}},le={name:"Blood cell",params:{color1:"#30132f",color2:"#540332",color3:"#720d32",color4:"#720d32",color5:"#f4807c",scale:.72,speed:.22,stepsNumber:29}},ne={name:"First contact",params:{color1:"#e5bde5",color2:"#150727",color3:"#512a5a",color4:"#deb0b0",color5:"#ffebeb",scale:.62,speed:-.1,stepsNumber:40}},me=[t,ae,le,ne],ie=e=>{let r=se(()=>({u_color1:i(e.color1,t.params.color1),u_color2:i(e.color2,t.params.color2),u_color3:i(e.color3,t.params.color3),u_color4:i(e.color4,t.params.color4),u_color5:i(e.color5,t.params.color5),u_scale:e.scale??t.params.scale,u_speed:e.speed??t.params.speed,u_steps_number:e.stepsNumber??t.params.stepsNumber}),[e.color1,e.color2,e.color3,e.color4,e.color5,e.scale,e.speed,e.stepsNumber]);return ce(o,{...e,fragmentShader:te,uniforms:r})};import{}from"@paper-design/shaders";import{getShaderColorFromString as xr}from"@paper-design/shaders";export{re as DotsOrbit,O as GrainClouds,E as MeshGradient,Y as NeuroNoise,o as ShaderMount,V as SmokeRing,ie as SteppedSimplexNoise,ee as dotsOrbitPresets,xr as getShaderColorFromString,C as grainCloudsPresets,z as meshGradientPresets,Q as neuroNoisePresets,T as smokeRingPresets,me as steppedSimplexNoisePresets};
2
3
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../src/shader-mount.tsx", "../src/shaders/grain-clouds.tsx", "../src/index.ts", "../src/shaders/mesh-gradient.tsx"],
4
- "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"],
5
- "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",
6
- "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"]
3
+ "sources": ["../src/shader-mount.tsx", "../src/shaders/grain-clouds.tsx", "../src/index.ts", "../src/shaders/mesh-gradient.tsx", "../src/shaders/smoke-ring.tsx", "../src/shaders/neuro-noise.tsx", "../src/shaders/dots-pattern.tsx", "../src/shaders/stepped-simplex-noise.tsx"],
4
+ "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 speed?: number;\n}\n\n/** Params that every shader can set as part of their controls */\nexport type GlobalParams = Pick<ShaderMountProps, 'speed'>;\n\nexport const ShaderMount: React.FC<ShaderMountProps> = ({\n ref,\n fragmentShader,\n style,\n uniforms = {},\n webGlContextAttributes,\n speed = 1,\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 speed\n );\n }\n\n return () => {\n shaderMountRef.current?.dispose();\n };\n }, [fragmentShader, webGlContextAttributes]);\n\n useEffect(() => {\n shaderMountRef.current?.setUniforms(uniforms);\n }, [uniforms]);\n\n useEffect(() => {\n shaderMountRef.current?.setSpeed(speed);\n }, [speed]);\n\n return <canvas ref={canvasRef} style={style} />;\n};\n", "import { useMemo } from 'react';\nimport { ShaderMount, type GlobalParams, type ShaderMountProps } from '../shader-mount';\nimport { getShaderColorFromString, grainCloudsFragmentShader, type GrainCloudsUniforms } from '@paper-design/shaders';\n\nexport type GrainCloudsParams = {\n color1?: string;\n color2?: string;\n scale?: number;\n grainAmount?: number;\n} & GlobalParams;\n\nexport type GrainCloudsProps = Omit<ShaderMountProps, 'fragmentShader'> & GrainCloudsParams;\n\ntype GrainCloudsPreset = { name: string; params: Required<GrainCloudsParams> };\n\nexport const defaultPreset: GrainCloudsPreset = {\n name: 'Default',\n params: {\n // Note: Keep default colors in HSLA format so that our Leva controls show a transparency channel (rgba and hex8 do not work)\n color1: 'hsla(0, 0%, 0%, 1)',\n color2: 'hsla(0, 0%, 100%, 1)',\n scale: 1,\n grainAmount: 0.05,\n speed: 0.3,\n },\n};\n\nexport const skyPreset: GrainCloudsPreset = {\n name: 'Sky',\n params: {\n color1: '#73a6ff',\n color2: '#ffffff',\n scale: 1,\n grainAmount: 0,\n speed: 0.3,\n },\n};\n\nexport const grainCloudsPresets: GrainCloudsPreset[] = [defaultPreset, skyPreset];\n\nexport const GrainClouds = (props: GrainCloudsProps): JSX.Element => {\n const uniforms: GrainCloudsUniforms = useMemo(() => {\n return {\n u_color1: getShaderColorFromString(props.color1, defaultPreset.params.color1),\n u_color2: getShaderColorFromString(props.color2, defaultPreset.params.color2),\n u_scale: props.scale ?? defaultPreset.params.scale,\n u_grainAmount: props.grainAmount ?? defaultPreset.params.grainAmount,\n };\n }, [props.color1, props.color2, props.scale, props.grainAmount]);\n\n return <ShaderMount {...props} fragmentShader={grainCloudsFragmentShader} uniforms={uniforms} />;\n};\n", "// ----- ShaderMount ----- //\nexport { ShaderMount } from './shader-mount';\n\n// ----- Fragment shaders ----- //\n\n// Grain clouds\nexport { GrainClouds, grainCloudsPresets } from './shaders/grain-clouds';\nexport { type GrainCloudsProps } from './shaders/grain-clouds';\nexport { type GrainCloudsParams } from './shaders/grain-clouds';\nexport { type GrainCloudsUniforms } from '@paper-design/shaders';\n\n// Mesh gradient\nexport { MeshGradient, meshGradientPresets } from './shaders/mesh-gradient';\nexport { type MeshGradientProps } from './shaders/mesh-gradient';\nexport { type MeshGradientParams } from './shaders/mesh-gradient';\nexport { type MeshGradientUniforms } from '@paper-design/shaders';\n\n// Smoke ring\nexport { SmokeRing, smokeRingPresets } from './shaders/smoke-ring';\nexport { type SmokeRingProps } from './shaders/smoke-ring';\nexport { type SmokeRingParams } from './shaders/smoke-ring';\nexport { type SmokeRingUniforms } from '@paper-design/shaders';\n\n// Neuro noise\nexport { NeuroNoise, neuroNoisePresets } from './shaders/neuro-noise';\nexport { type NeuroNoiseProps } from './shaders/neuro-noise';\nexport { type NeuroNoiseParams } from './shaders/neuro-noise';\nexport { type NeuroNoiseUniforms } from '@paper-design/shaders';\n\n// Animated dots pattern: orbit type of animation\nexport { DotsOrbit, dotsOrbitPresets } from './shaders/dots-pattern';\nexport { type DotsOrbitProps } from './shaders/dots-pattern';\nexport { type DotsOrbitParams } from './shaders/dots-pattern';\nexport { type DotsOrbitUniforms } from '@paper-design/shaders';\n\n// Stepped simplex noise\nexport { SteppedSimplexNoise, steppedSimplexNoisePresets } from './shaders/stepped-simplex-noise';\nexport { type SteppedSimplexNoiseProps } from './shaders/stepped-simplex-noise';\nexport { type SteppedSimplexNoiseParams } from './shaders/stepped-simplex-noise';\nexport { type SteppedSimplexNoiseUniforms } from '@paper-design/shaders';\n\n// ----- Uniform conversion utils ----- //\nexport { getShaderColorFromString } from '@paper-design/shaders';\n", "import { useMemo } from 'react';\nimport { ShaderMount, type GlobalParams, type ShaderMountProps } from '../shader-mount';\nimport { getShaderColorFromString, meshGradientFragmentShader, type MeshGradientUniforms } from '@paper-design/shaders';\n\nexport type MeshGradientParams = {\n color1?: string;\n color2?: string;\n color3?: string;\n color4?: string;\n} & GlobalParams;\n\nexport type MeshGradientProps = Omit<ShaderMountProps, 'fragmentShader'> & MeshGradientParams;\n\ntype MeshGradientPreset = { name: string; params: Required<MeshGradientParams> };\n\nexport const defaultPreset: MeshGradientPreset = {\n name: 'Default',\n params: {\n // Note: Keep default colors in HSLA format so that our Leva controls show a transparency channel (rgba and hex8 do not work)\n color1: 'hsla(259, 29%, 73%, 1)',\n color2: 'hsla(263, 57%, 39%, 1)',\n color3: 'hsla(48, 73%, 84%,1)',\n color4: 'hsla(295, 32%, 70%, 1)',\n speed: 0.15,\n },\n} as const;\n\nexport const beachPreset: MeshGradientPreset = {\n name: 'Beach',\n params: {\n color1: 'hsla(186, 81%, 83%, 1)',\n color2: 'hsla(198, 55%, 68%, 1)',\n color3: 'hsla(53, 67%, 88%, 1)',\n color4: 'hsla(45, 93%, 73%, 1)',\n speed: 0.1,\n },\n};\n\nexport const meshGradientPresets: MeshGradientPreset[] = [defaultPreset, beachPreset];\n\nexport const MeshGradient = (props: MeshGradientProps): JSX.Element => {\n const uniforms: MeshGradientUniforms = useMemo(() => {\n return {\n u_color1: getShaderColorFromString(props.color1, defaultPreset.params.color1),\n u_color2: getShaderColorFromString(props.color2, defaultPreset.params.color2),\n u_color3: getShaderColorFromString(props.color3, defaultPreset.params.color3),\n u_color4: getShaderColorFromString(props.color4, defaultPreset.params.color4),\n u_speed: props.speed ?? defaultPreset.params.speed,\n };\n }, [props.color1, props.color2, props.color3, props.color4, props.speed]);\n\n return <ShaderMount {...props} fragmentShader={meshGradientFragmentShader} uniforms={uniforms} />;\n};\n", "import { useMemo } from 'react';\nimport { ShaderMount, type GlobalParams, type ShaderMountProps } from '../shader-mount';\nimport { getShaderColorFromString, smokeRingFragmentShader, type SmokeRingUniforms } from '@paper-design/shaders';\n\nexport type SmokeRingParams = {\n colorBack?: string;\n color1?: string;\n color2?: string;\n noiseScale?: number;\n thickness?: number;\n} & GlobalParams;\n\nexport type SmokeRingProps = Omit<ShaderMountProps, 'fragmentShader'> & SmokeRingParams;\n\ntype SmokeRingPreset = { name: string; params: Required<SmokeRingParams> };\n\nexport const defaultPreset: SmokeRingPreset = {\n name: 'Default',\n params: {\n // Note: Keep default colors in HSLA format so that our Leva controls show a transparency channel (rgba and hex8 do not work)\n colorBack: 'hsla(208, 54%, 7%, 1)',\n color1: 'hsla(0, 0%, 100%, 1)',\n color2: 'hsla(211, 100%, 64%, 1)',\n speed: 1,\n noiseScale: 1.4,\n thickness: 0.33,\n },\n} as const;\n\nexport const cloudPreset: SmokeRingPreset = {\n name: 'Cloud',\n params: {\n colorBack: 'hsla(218, 100%, 62%)',\n color1: 'hsla(0, 0%, 100%)',\n color2: 'hsla(0, 0%, 100%)',\n speed: 1,\n thickness: 0.7,\n noiseScale: 1.8,\n },\n};\n\nexport const firePreset: SmokeRingPreset = {\n name: 'Fire',\n params: {\n colorBack: 'hsla(20, 100%, 5%)',\n color1: 'hsla(40, 100%, 50%)',\n color2: 'hsla(0, 100%, 50%)',\n speed: 4,\n thickness: 0.35,\n noiseScale: 1.4,\n },\n};\n\nexport const electricPreset: SmokeRingPreset = {\n name: 'Electric',\n params: {\n colorBack: 'hsla(47, 50%, 7%)',\n color1: 'hsla(47, 100%, 64%)',\n color2: 'hsla(47, 100%, 64%)',\n speed: 2.5,\n thickness: 0.1,\n noiseScale: 1.8,\n },\n};\n\nexport const poisonPreset: SmokeRingPreset = {\n name: 'Poison',\n params: {\n colorBack: 'hsla(120, 100%, 3%)',\n color1: 'hsla(120, 100%, 3%)',\n color2: 'hsla(120, 100%, 66%)',\n speed: 3,\n thickness: 0.6,\n noiseScale: 5,\n },\n};\n\nexport const smokeRingPresets: SmokeRingPreset[] = [\n defaultPreset,\n cloudPreset,\n firePreset,\n electricPreset,\n poisonPreset,\n];\n\nexport const SmokeRing = (props: SmokeRingProps): JSX.Element => {\n const uniforms: SmokeRingUniforms = useMemo(() => {\n return {\n u_colorBack: getShaderColorFromString(props.colorBack, defaultPreset.params.colorBack),\n u_color1: getShaderColorFromString(props.color1, defaultPreset.params.color1),\n u_color2: getShaderColorFromString(props.color2, defaultPreset.params.color2),\n u_speed: props.speed ?? defaultPreset.params.speed,\n u_scale: props.noiseScale ?? defaultPreset.params.noiseScale,\n u_thickness: props.thickness ?? defaultPreset.params.thickness,\n };\n }, [props.colorBack, props.color1, props.color2, props.speed, props.noiseScale, props.thickness]);\n\n return <ShaderMount {...props} fragmentShader={smokeRingFragmentShader} uniforms={uniforms} />;\n};\n", "import { useMemo } from 'react';\nimport { ShaderMount, type GlobalParams, type ShaderMountProps } from '../shader-mount';\nimport { getShaderColorFromString, neuroNoiseFragmentShader, type NeuroNoiseUniforms } from '@paper-design/shaders';\n\nexport type NeuroNoiseParams = {\n colorFront?: string;\n colorBack?: string;\n scale?: number;\n brightness?: number;\n} & GlobalParams;\n\nexport type NeuroNoiseProps = Omit<ShaderMountProps, 'fragmentShader'> & NeuroNoiseParams;\n\ntype NeuroNoisePreset = { name: string; params: Required<NeuroNoiseParams> };\n\nexport const defaultPreset: NeuroNoisePreset = {\n name: 'Default',\n params: {\n colorFront: 'hsla(261, 100%, 82%, 1)',\n colorBack: 'hsla(0, 0%, 0%, 1)',\n scale: 0.7,\n speed: 1,\n brightness: 1.3,\n },\n} as const;\n\nconst marblePreset: NeuroNoisePreset = {\n name: 'Marble',\n params: {\n // Note: Keep default colors in HSLA format so that our Leva controls show a transparency channel (rgba and hex8 do not work)\n colorFront: 'hsla(230, 24%, 15%, 1)',\n colorBack: 'hsla(0, 0%, 97%, 1)',\n scale: 1.2,\n speed: 0,\n brightness: 1.1,\n },\n} as const;\n\nexport const neuroNoisePresets: NeuroNoisePreset[] = [defaultPreset, marblePreset] as const;\n\nexport const NeuroNoise = (props: NeuroNoiseProps): JSX.Element => {\n const uniforms: NeuroNoiseUniforms = useMemo(() => {\n return {\n u_colorFront: getShaderColorFromString(props.colorFront, defaultPreset.params.colorFront),\n u_colorBack: getShaderColorFromString(props.colorBack, defaultPreset.params.colorBack),\n u_scale: props.scale ?? defaultPreset.params.scale,\n u_speed: props.speed ?? defaultPreset.params.speed,\n u_brightness: props.brightness ?? defaultPreset.params.brightness,\n };\n }, [props.colorFront, props.colorBack, props.scale, props.speed, props.brightness]);\n\n return <ShaderMount {...props} fragmentShader={neuroNoiseFragmentShader} uniforms={uniforms} />;\n};\n", "import { useMemo } from 'react';\nimport { ShaderMount, type GlobalParams, type ShaderMountProps } from '../shader-mount';\nimport { getShaderColorFromString, dotsOrbitFragmentShader, type DotsOrbitUniforms } from '@paper-design/shaders';\n\nexport type DotsOrbitParams = {\n color1?: string;\n color2?: string;\n color3?: string;\n color4?: string;\n dotSize?: number;\n dotSizeRange?: number;\n scale?: number;\n spreading?: number;\n} & GlobalParams;\n\nexport type DotsOrbitProps = Omit<ShaderMountProps, 'fragmentShader'> & DotsOrbitParams;\n\ntype DotsOrbitPreset = { name: string; params: Required<DotsOrbitParams> };\n\nexport const defaultPreset: DotsOrbitPreset = {\n name: 'Default',\n params: {\n // Note: Keep default colors in HSLA format so that our Leva controls show a transparency channel (rgba and hex8 do not work)\n color1: 'hsla(358.2, 66.1%, 48.6%, 1)',\n color2: 'hsla(145.2, 30.1%, 32.5%, 1)',\n color3: 'hsla(39.4, 87.7%, 52.4%, 1)',\n color4: 'hsla(273.5, 29.5%, 34.5%, 1)',\n dotSize: 0.15,\n dotSizeRange: 0.05,\n scale: 10,\n speed: 3,\n spreading: 0.25,\n },\n} as const;\n\nexport const dotsOrbitPresets: DotsOrbitPreset[] = [defaultPreset];\n\nexport const DotsOrbit = (props: DotsOrbitProps): JSX.Element => {\n const uniforms: DotsOrbitUniforms = useMemo(() => {\n return {\n u_color1: getShaderColorFromString(props.color1, defaultPreset.params.color1),\n u_color2: getShaderColorFromString(props.color2, defaultPreset.params.color2),\n u_color3: getShaderColorFromString(props.color3, defaultPreset.params.color3),\n u_color4: getShaderColorFromString(props.color4, defaultPreset.params.color4),\n u_dotSize: props.dotSize ?? defaultPreset.params.dotSize,\n u_dotSizeRange: props.dotSizeRange ?? defaultPreset.params.dotSizeRange,\n u_scale: props.scale ?? defaultPreset.params.scale,\n u_spreading: props.spreading ?? defaultPreset.params.spreading,\n };\n }, [\n props.color1,\n props.color2,\n props.color3,\n props.color4,\n props.dotSize,\n props.dotSizeRange,\n props.scale,\n props.spreading,\n ]);\n\n return <ShaderMount {...props} fragmentShader={dotsOrbitFragmentShader} uniforms={uniforms} />;\n};\n", "import { useMemo } from 'react';\nimport { ShaderMount, type GlobalParams, type ShaderMountProps } from '../shader-mount';\nimport {\n getShaderColorFromString,\n steppedSimplexNoiseFragmentShader,\n type SteppedSimplexNoiseUniforms,\n} from '@paper-design/shaders';\n\nexport type SteppedSimplexNoiseParams = {\n color1?: string;\n color2?: string;\n color3?: string;\n color4?: string;\n color5?: string;\n scale?: number;\n stepsNumber?: number;\n} & GlobalParams;\n\nexport type SteppedSimplexNoiseProps = Omit<ShaderMountProps, 'fragmentShader'> & SteppedSimplexNoiseParams;\n\ntype SteppedSimplexNoisePreset = { name: string; params: Required<SteppedSimplexNoiseParams> };\n\nexport const defaultPreset: SteppedSimplexNoisePreset = {\n name: 'Default',\n params: {\n // Note: Keep default colors in HSLA format so that our Leva controls show a transparency channel (rgba and hex8 do not work)\n color1: 'hsla(208.42, 24.68%, 45.29%, 1)',\n color2: 'hsla(94.07, 38.39%, 58.63%, 1)',\n color3: 'hsla(359.02, 93.88%, 61.57%, 1)',\n color4: 'hsla(42.35, 93.41%, 64.31%, 1)',\n color5: 'hsla(0, 0%, 100%, 1)',\n scale: 0.5,\n speed: 0.15,\n stepsNumber: 13,\n },\n} as const;\n\nconst magmaPreset: SteppedSimplexNoisePreset = {\n name: 'Magma',\n params: {\n color1: 'hsla(0, 100%, 36.47%, 1)',\n color2: 'hsla(0, 95.54%, 43.92%, 1)',\n color3: 'hsla(20.08, 100%, 48.63%, 1)',\n color4: 'hsla(45, 100%, 45.49%, 1)',\n color5: 'hsla(31.87, 100%, 93.73%, 1)',\n speed: 0.2,\n scale: 2,\n stepsNumber: 8,\n },\n};\n\nconst bloodCellPreset: SteppedSimplexNoisePreset = {\n name: 'Blood cell',\n params: {\n color1: '#30132f',\n color2: '#540332',\n color3: '#720d32',\n color4: '#720d32',\n color5: '#f4807c',\n scale: 0.72,\n speed: 0.22,\n stepsNumber: 29,\n },\n};\n\nconst firstContactPreset: SteppedSimplexNoisePreset = {\n name: 'First contact',\n params: {\n color1: '#e5bde5',\n color2: '#150727',\n color3: '#512a5a',\n color4: '#deb0b0',\n color5: '#ffebeb',\n scale: 0.62,\n speed: -0.1,\n stepsNumber: 40,\n },\n};\n\nexport const steppedSimplexNoisePresets: SteppedSimplexNoisePreset[] = [\n defaultPreset,\n magmaPreset,\n bloodCellPreset,\n firstContactPreset,\n];\n\nexport const SteppedSimplexNoise = (props: SteppedSimplexNoiseProps): JSX.Element => {\n const uniforms: SteppedSimplexNoiseUniforms = useMemo(() => {\n return {\n u_color1: getShaderColorFromString(props.color1, defaultPreset.params.color1),\n u_color2: getShaderColorFromString(props.color2, defaultPreset.params.color2),\n u_color3: getShaderColorFromString(props.color3, defaultPreset.params.color3),\n u_color4: getShaderColorFromString(props.color4, defaultPreset.params.color4),\n u_color5: getShaderColorFromString(props.color5, defaultPreset.params.color5),\n u_scale: props.scale ?? defaultPreset.params.scale,\n u_speed: props.speed ?? defaultPreset.params.speed,\n u_steps_number: props.stepsNumber ?? defaultPreset.params.stepsNumber,\n };\n }, [\n props.color1,\n props.color2,\n props.color3,\n props.color4,\n props.color5,\n props.scale,\n props.speed,\n props.stepsNumber,\n ]);\n\n return <ShaderMount {...props} fragmentShader={steppedSimplexNoiseFragmentShader} uniforms={uniforms} />;\n};\n"],
5
+ "mappings": "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",
6
+ "names": ["useEffect", "useRef", "ShaderMountVanilla", "jsx", "ShaderMount", "ref", "fragmentShader", "style", "uniforms", "webGlContextAttributes", "speed", "canvasRef", "shaderMountRef", "useMemo", "getShaderColorFromString", "grainCloudsFragmentShader", "jsx", "defaultPreset", "skyPreset", "grainCloudsPresets", "GrainClouds", "props", "uniforms", "useMemo", "ShaderMount", "useMemo", "getShaderColorFromString", "meshGradientFragmentShader", "jsx", "defaultPreset", "beachPreset", "meshGradientPresets", "MeshGradient", "props", "uniforms", "useMemo", "ShaderMount", "useMemo", "getShaderColorFromString", "smokeRingFragmentShader", "jsx", "defaultPreset", "cloudPreset", "firePreset", "electricPreset", "poisonPreset", "smokeRingPresets", "SmokeRing", "props", "uniforms", "useMemo", "ShaderMount", "useMemo", "getShaderColorFromString", "neuroNoiseFragmentShader", "jsx", "defaultPreset", "marblePreset", "neuroNoisePresets", "NeuroNoise", "props", "uniforms", "useMemo", "ShaderMount", "useMemo", "getShaderColorFromString", "dotsOrbitFragmentShader", "jsx", "defaultPreset", "dotsOrbitPresets", "DotsOrbit", "props", "uniforms", "useMemo", "ShaderMount", "useMemo", "getShaderColorFromString", "steppedSimplexNoiseFragmentShader", "jsx", "defaultPreset", "magmaPreset", "bloodCellPreset", "firstContactPreset", "steppedSimplexNoisePresets", "SteppedSimplexNoise", "props", "uniforms", "useMemo", "ShaderMount", "getShaderColorFromString"]
7
7
  }
package/dist/shader-mount.d.ts CHANGED
@@ -5,6 +5,8 @@ export interface ShaderMountProps {
5
5
  style?: React.CSSProperties;
6
6
  uniforms?: Record<string, number | number[]>;
7
7
  webGlContextAttributes?: WebGLContextAttributes;
8
- animated?: boolean;
8
+ speed?: number;
9
9
  }
10
+ /** Params that every shader can set as part of their controls */
11
+ export type GlobalParams = Pick<ShaderMountProps, 'speed'>;
10
12
  export declare const ShaderMount: React.FC<ShaderMountProps>;
package/dist/shaders/dots-pattern.d.ts ADDED
@@ -0,0 +1,20 @@
1
+ import { type GlobalParams, type ShaderMountProps } from '../shader-mount';
2
+ export type DotsOrbitParams = {
3
+ color1?: string;
4
+ color2?: string;
5
+ color3?: string;
6
+ color4?: string;
7
+ dotSize?: number;
8
+ dotSizeRange?: number;
9
+ scale?: number;
10
+ spreading?: number;
11
+ } & GlobalParams;
12
+ export type DotsOrbitProps = Omit<ShaderMountProps, 'fragmentShader'> & DotsOrbitParams;
13
+ type DotsOrbitPreset = {
14
+ name: string;
15
+ params: Required<DotsOrbitParams>;
16
+ };
17
+ export declare const defaultPreset: DotsOrbitPreset;
18
+ export declare const dotsOrbitPresets: DotsOrbitPreset[];
19
+ export declare const DotsOrbit: (props: DotsOrbitProps) => JSX.Element;
20
+ export {};
package/dist/shaders/grain-clouds.d.ts CHANGED
@@ -1,10 +1,17 @@
1
- import { type ShaderMountProps } from '../shader-mount';
2
- type GrainCloudsProps = Omit<ShaderMountProps, 'fragmentShader'> & {
1
+ import { type GlobalParams, type ShaderMountProps } from '../shader-mount';
2
+ export type GrainCloudsParams = {
3
3
  color1?: string;
4
4
  color2?: string;
5
- noiseScale?: number;
6
- noiseSpeed?: number;
5
+ scale?: number;
7
6
  grainAmount?: number;
7
+ } & GlobalParams;
8
+ export type GrainCloudsProps = Omit<ShaderMountProps, 'fragmentShader'> & GrainCloudsParams;
9
+ type GrainCloudsPreset = {
10
+ name: string;
11
+ params: Required<GrainCloudsParams>;
8
12
  };
13
+ export declare const defaultPreset: GrainCloudsPreset;
14
+ export declare const skyPreset: GrainCloudsPreset;
15
+ export declare const grainCloudsPresets: GrainCloudsPreset[];
9
16
  export declare const GrainClouds: (props: GrainCloudsProps) => JSX.Element;
10
17
  export {};
package/dist/shaders/mesh-gradient.d.ts CHANGED
@@ -1,10 +1,17 @@
1
- import { type ShaderMountProps } from '../shader-mount';
2
- type MeshGradientProps = Omit<ShaderMountProps, 'fragmentShader'> & {
1
+ import { type GlobalParams, type ShaderMountProps } from '../shader-mount';
2
+ export type MeshGradientParams = {
3
3
  color1?: string;
4
4
  color2?: string;
5
5
  color3?: string;
6
6
  color4?: string;
7
- speed?: number;
7
+ } & GlobalParams;
8
+ export type MeshGradientProps = Omit<ShaderMountProps, 'fragmentShader'> & MeshGradientParams;
9
+ type MeshGradientPreset = {
10
+ name: string;
11
+ params: Required<MeshGradientParams>;
8
12
  };
13
+ export declare const defaultPreset: MeshGradientPreset;
14
+ export declare const beachPreset: MeshGradientPreset;
15
+ export declare const meshGradientPresets: MeshGradientPreset[];
9
16
  export declare const MeshGradient: (props: MeshGradientProps) => JSX.Element;
10
17
  export {};
package/dist/shaders/neuro-noise.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ import { type GlobalParams, type ShaderMountProps } from '../shader-mount';
2
+ export type NeuroNoiseParams = {
3
+ colorFront?: string;
4
+ colorBack?: string;
5
+ scale?: number;
6
+ brightness?: number;
7
+ } & GlobalParams;
8
+ export type NeuroNoiseProps = Omit<ShaderMountProps, 'fragmentShader'> & NeuroNoiseParams;
9
+ type NeuroNoisePreset = {
10
+ name: string;
11
+ params: Required<NeuroNoiseParams>;
12
+ };
13
+ export declare const defaultPreset: NeuroNoisePreset;
14
+ export declare const neuroNoisePresets: NeuroNoisePreset[];
15
+ export declare const NeuroNoise: (props: NeuroNoiseProps) => JSX.Element;
16
+ export {};
package/dist/shaders/smoke-ring.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ import { type GlobalParams, type ShaderMountProps } from '../shader-mount';
2
+ export type SmokeRingParams = {
3
+ colorBack?: string;
4
+ color1?: string;
5
+ color2?: string;
6
+ noiseScale?: number;
7
+ thickness?: number;
8
+ } & GlobalParams;
9
+ export type SmokeRingProps = Omit<ShaderMountProps, 'fragmentShader'> & SmokeRingParams;
10
+ type SmokeRingPreset = {
11
+ name: string;
12
+ params: Required<SmokeRingParams>;
13
+ };
14
+ export declare const defaultPreset: SmokeRingPreset;
15
+ export declare const cloudPreset: SmokeRingPreset;
16
+ export declare const firePreset: SmokeRingPreset;
17
+ export declare const electricPreset: SmokeRingPreset;
18
+ export declare const poisonPreset: SmokeRingPreset;
19
+ export declare const smokeRingPresets: SmokeRingPreset[];
20
+ export declare const SmokeRing: (props: SmokeRingProps) => JSX.Element;
21
+ export {};
package/dist/shaders/stepped-simplex-noise.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ import { type GlobalParams, type ShaderMountProps } from '../shader-mount';
2
+ export type SteppedSimplexNoiseParams = {
3
+ color1?: string;
4
+ color2?: string;
5
+ color3?: string;
6
+ color4?: string;
7
+ color5?: string;
8
+ scale?: number;
9
+ stepsNumber?: number;
10
+ } & GlobalParams;
11
+ export type SteppedSimplexNoiseProps = Omit<ShaderMountProps, 'fragmentShader'> & SteppedSimplexNoiseParams;
12
+ type SteppedSimplexNoisePreset = {
13
+ name: string;
14
+ params: Required<SteppedSimplexNoiseParams>;
15
+ };
16
+ export declare const defaultPreset: SteppedSimplexNoisePreset;
17
+ export declare const steppedSimplexNoisePresets: SteppedSimplexNoisePreset[];
18
+ export declare const SteppedSimplexNoise: (props: SteppedSimplexNoiseProps) => JSX.Element;
19
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@paper-design/shaders-react",
3
- "version": "0.0.15",
3
+ "version": "0.0.17",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "publishConfig": {
@@ -23,7 +23,7 @@
23
23
  "type-check": "tsc --project tsconfig.json"
24
24
  },
25
25
  "dependencies": {
26
- "@paper-design/shaders": "0.0.13",
26
+ "@paper-design/shaders": "0.0.15",
27
27
  "react": ">=18"
28
28
  },
29
29
  "devDependencies": {