@paper-design/shaders-react 0.0.16 → 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.
- package/dist/index.d.ts +18 -3
- package/dist/index.js +1 -1
- package/dist/index.js.map +4 -4
- package/dist/shader-mount.d.ts +3 -1
- package/dist/shaders/dots-pattern.d.ts +20 -0
- package/dist/shaders/grain-clouds.d.ts +12 -12
- package/dist/shaders/mesh-gradient.d.ts +11 -11
- package/dist/shaders/neuro-noise.d.ts +10 -11
- package/dist/shaders/smoke-ring.d.ts +21 -0
- package/dist/shaders/stepped-simplex-noise.d.ts +19 -0
- package/package.json +2 -2
package/dist/index.d.ts
CHANGED
|
@@ -1,11 +1,26 @@
|
|
|
1
1
|
export { ShaderMount } from './shader-mount';
|
|
2
|
-
export { GrainClouds,
|
|
2
|
+
export { GrainClouds, grainCloudsPresets } from './shaders/grain-clouds';
|
|
3
3
|
export { type GrainCloudsProps } from './shaders/grain-clouds';
|
|
4
|
+
export { type GrainCloudsParams } from './shaders/grain-clouds';
|
|
4
5
|
export { type GrainCloudsUniforms } from '@paper-design/shaders';
|
|
5
|
-
export { MeshGradient,
|
|
6
|
+
export { MeshGradient, meshGradientPresets } from './shaders/mesh-gradient';
|
|
6
7
|
export { type MeshGradientProps } from './shaders/mesh-gradient';
|
|
8
|
+
export { type MeshGradientParams } from './shaders/mesh-gradient';
|
|
7
9
|
export { type MeshGradientUniforms } from '@paper-design/shaders';
|
|
8
|
-
export {
|
|
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';
|
|
9
15
|
export { type NeuroNoiseProps } from './shaders/neuro-noise';
|
|
16
|
+
export { type NeuroNoiseParams } from './shaders/neuro-noise';
|
|
10
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';
|
|
11
26
|
export { getShaderColorFromString } from '@paper-design/shaders';
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/***** Paper Shaders: https://github.com/paper-design/shaders *****/
|
|
2
|
-
import{useEffect as
|
|
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};
|
|
3
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", "../src/shaders/neuro-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 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\nexport type GrainCloudsProps = Omit<ShaderMountProps, 'fragmentShader'> & {\n color1?: string;\n color2?: string;\n noiseScale?: number;\n noiseSpeed?: number;\n grainAmount?: number;\n};\n\n/** Some default values for the shader props */\nexport const grainCloudsDefaults = {\n color1: '#000000',\n color2: '#ffffff',\n noiseScale: 1,\n noiseSpeed: 0.3,\n grainAmount: 0.05,\n} as const;\n\nexport const GrainClouds = (props: GrainCloudsProps): JSX.Element => {\n const uniforms: GrainCloudsUniforms = useMemo(() => {\n return {\n u_color1: getShaderColorFromString(props.color1, grainCloudsDefaults.color1),\n u_color2: getShaderColorFromString(props.color2, grainCloudsDefaults.color2),\n u_noiseScale: props.noiseScale ?? grainCloudsDefaults.noiseScale,\n u_noiseSpeed: props.noiseSpeed ?? grainCloudsDefaults.noiseSpeed,\n u_grainAmount: props.grainAmount ?? grainCloudsDefaults.grainAmount,\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 ----- //\n\n// Grain clouds\nexport { GrainClouds, grainCloudsDefaults } from './shaders/grain-clouds';\nexport { type GrainCloudsProps } from './shaders/grain-clouds';\nexport { type GrainCloudsUniforms } from '@paper-design/shaders';\n\n// Mesh gradient\nexport { MeshGradient, meshGradientDefaults } from './shaders/mesh-gradient';\nexport { type MeshGradientProps } from './shaders/mesh-gradient';\nexport { type MeshGradientUniforms } from '@paper-design/shaders';\n\n// Neuro noise\nexport { NeuroNoise, neuroNoiseDefaults } from './shaders/neuro-noise';\nexport { type NeuroNoiseProps } from './shaders/neuro-noise';\nexport { type NeuroNoiseUniforms } 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\nexport type MeshGradientProps = Omit<ShaderMountProps, 'fragmentShader'> & {\n color1?: string;\n color2?: string;\n color3?: string;\n color4?: string;\n speed?: number;\n};\n\n/** Some default values for the shader props */\nexport const meshGradientDefaults = {\n color1: '#6a5496',\n color2: '#9b8ab8',\n color3: '#f5d03b',\n color4: '#e48b97',\n speed: 0.1,\n} as const;\n\nexport const MeshGradient = (props: MeshGradientProps): JSX.Element => {\n const uniforms: MeshGradientUniforms = useMemo(() => {\n return {\n u_color1: getShaderColorFromString(props.color1, meshGradientDefaults.color1),\n u_color2: getShaderColorFromString(props.color2, meshGradientDefaults.color2),\n u_color3: getShaderColorFromString(props.color3, meshGradientDefaults.color3),\n u_color4: getShaderColorFromString(props.color4, meshGradientDefaults.color4),\n u_speed: props.speed ?? meshGradientDefaults.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 ShaderMountProps } from '../shader-mount';\nimport { getShaderColorFromString, neuroNoiseFragmentShader, type NeuroNoiseUniforms } from '@paper-design/shaders';\n\nexport type NeuroNoiseProps = Omit<ShaderMountProps, 'fragmentShader'> & {\n colorFront?: string;\n colorBack?: string;\n scale?: number;\n speed?: number;\n brightness?: number;\n};\n\n/** Some default values for the shader props */\nexport const neuroNoiseDefaults = {\n colorFront: '#c3a3ff',\n colorBack: '#000000',\n scale: 1,\n speed: 1,\n brightness: 1.3,\n} as const;\n\nexport const NeuroNoise = (props: NeuroNoiseProps): JSX.Element => {\n const uniforms: NeuroNoiseUniforms = useMemo(() => {\n return {\n u_colorFront: getShaderColorFromString(props.colorFront, neuroNoiseDefaults.colorFront),\n u_colorBack: getShaderColorFromString(props.colorBack, neuroNoiseDefaults.colorBack),\n u_scale: props.scale ?? neuroNoiseDefaults.scale,\n u_speed: props.speed ?? neuroNoiseDefaults.speed,\n u_brightness: props.brightness ?? neuroNoiseDefaults.brightness,\n };\n }, [props.colorFront, props.colorBack, props.scale, props.speed, props.brightness]);\n\n return <ShaderMount {...props} fragmentShader={neuroNoiseFragmentShader} uniforms={uniforms} />;\n};\n"],
|
|
5
|
-
"mappings": ";AAAA,OAAgB,aAAAA,EAAW,UAAAC,MAAc,QACzC,OAAS,eAAeC,MAA0B,
|
|
6
|
-
"names": ["useEffect", "useRef", "ShaderMountVanilla", "jsx", "ShaderMount", "ref", "fragmentShader", "style", "uniforms", "webGlContextAttributes", "
|
|
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
|
-
|
|
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>;
|
|
@@ -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 {};
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import { type ShaderMountProps } from '../shader-mount';
|
|
2
|
-
export type
|
|
1
|
+
import { type GlobalParams, type ShaderMountProps } from '../shader-mount';
|
|
2
|
+
export type GrainCloudsParams = {
|
|
3
3
|
color1?: string;
|
|
4
4
|
color2?: string;
|
|
5
|
-
|
|
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
|
};
|
|
9
|
-
|
|
10
|
-
export declare const
|
|
11
|
-
|
|
12
|
-
readonly color2: "#ffffff";
|
|
13
|
-
readonly noiseScale: 1;
|
|
14
|
-
readonly noiseSpeed: 0.3;
|
|
15
|
-
readonly grainAmount: 0.05;
|
|
16
|
-
};
|
|
13
|
+
export declare const defaultPreset: GrainCloudsPreset;
|
|
14
|
+
export declare const skyPreset: GrainCloudsPreset;
|
|
15
|
+
export declare const grainCloudsPresets: GrainCloudsPreset[];
|
|
17
16
|
export declare const GrainClouds: (props: GrainCloudsProps) => JSX.Element;
|
|
17
|
+
export {};
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import { type ShaderMountProps } from '../shader-mount';
|
|
2
|
-
export type
|
|
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
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
readonly color2: "#9b8ab8";
|
|
13
|
-
readonly color3: "#f5d03b";
|
|
14
|
-
readonly color4: "#e48b97";
|
|
15
|
-
readonly speed: 0.1;
|
|
7
|
+
} & GlobalParams;
|
|
8
|
+
export type MeshGradientProps = Omit<ShaderMountProps, 'fragmentShader'> & MeshGradientParams;
|
|
9
|
+
type MeshGradientPreset = {
|
|
10
|
+
name: string;
|
|
11
|
+
params: Required<MeshGradientParams>;
|
|
16
12
|
};
|
|
13
|
+
export declare const defaultPreset: MeshGradientPreset;
|
|
14
|
+
export declare const beachPreset: MeshGradientPreset;
|
|
15
|
+
export declare const meshGradientPresets: MeshGradientPreset[];
|
|
17
16
|
export declare const MeshGradient: (props: MeshGradientProps) => JSX.Element;
|
|
17
|
+
export {};
|
|
@@ -1,17 +1,16 @@
|
|
|
1
|
-
import { type ShaderMountProps } from '../shader-mount';
|
|
2
|
-
export type
|
|
1
|
+
import { type GlobalParams, type ShaderMountProps } from '../shader-mount';
|
|
2
|
+
export type NeuroNoiseParams = {
|
|
3
3
|
colorFront?: string;
|
|
4
4
|
colorBack?: string;
|
|
5
5
|
scale?: number;
|
|
6
|
-
speed?: number;
|
|
7
6
|
brightness?: number;
|
|
7
|
+
} & GlobalParams;
|
|
8
|
+
export type NeuroNoiseProps = Omit<ShaderMountProps, 'fragmentShader'> & NeuroNoiseParams;
|
|
9
|
+
type NeuroNoisePreset = {
|
|
10
|
+
name: string;
|
|
11
|
+
params: Required<NeuroNoiseParams>;
|
|
8
12
|
};
|
|
9
|
-
|
|
10
|
-
export declare const
|
|
11
|
-
readonly colorFront: "#c3a3ff";
|
|
12
|
-
readonly colorBack: "#000000";
|
|
13
|
-
readonly scale: 1;
|
|
14
|
-
readonly speed: 1;
|
|
15
|
-
readonly brightness: 1.3;
|
|
16
|
-
};
|
|
13
|
+
export declare const defaultPreset: NeuroNoisePreset;
|
|
14
|
+
export declare const neuroNoisePresets: NeuroNoisePreset[];
|
|
17
15
|
export declare const NeuroNoise: (props: NeuroNoiseProps) => JSX.Element;
|
|
16
|
+
export {};
|
|
@@ -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 {};
|
|
@@ -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.
|
|
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.
|
|
26
|
+
"@paper-design/shaders": "0.0.15",
|
|
27
27
|
"react": ">=18"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|