@paper-design/shaders-react 0.0.43 → 0.0.45
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/README.md +18 -5
- package/dist/index.d.ts +7 -1
- package/dist/index.js +12 -1
- package/dist/index.js.map +2 -2
- package/dist/shader-mount.d.ts +7 -2
- package/dist/shader-mount.js.map +2 -2
- package/dist/shaders/color-panels.d.ts +3 -0
- package/dist/shaders/color-panels.js +73 -2
- package/dist/shaders/color-panels.js.map +2 -2
- package/dist/shaders/dithering.d.ts +0 -1
- package/dist/shaders/dithering.js +3 -17
- package/dist/shaders/dithering.js.map +2 -2
- package/dist/shaders/dot-grid.d.ts +0 -1
- package/dist/shaders/dot-grid.js +2 -93
- package/dist/shaders/dot-grid.js.map +2 -2
- package/dist/shaders/dot-orbit.d.ts +3 -0
- package/dist/shaders/dot-orbit.js +50 -2
- package/dist/shaders/dot-orbit.js.map +2 -2
- package/dist/shaders/god-rays.d.ts +0 -1
- package/dist/shaders/god-rays.js +6 -25
- package/dist/shaders/god-rays.js.map +2 -2
- package/dist/shaders/grain-gradient.d.ts +1 -2
- package/dist/shaders/grain-gradient.js +7 -23
- package/dist/shaders/grain-gradient.js.map +2 -2
- package/dist/shaders/liquid-metal.js +3 -3
- package/dist/shaders/liquid-metal.js.map +1 -1
- package/dist/shaders/mesh-gradient.d.ts +1 -0
- package/dist/shaders/mesh-gradient.js +20 -7
- package/dist/shaders/mesh-gradient.js.map +2 -2
- package/dist/shaders/metaballs.d.ts +3 -0
- package/dist/shaders/metaballs.js +46 -2
- package/dist/shaders/metaballs.js.map +2 -2
- package/dist/shaders/neuro-noise.d.ts +3 -0
- package/dist/shaders/neuro-noise.js +53 -3
- package/dist/shaders/neuro-noise.js.map +2 -2
- package/dist/shaders/perlin-noise.d.ts +0 -2
- package/dist/shaders/perlin-noise.js +2 -43
- package/dist/shaders/perlin-noise.js.map +2 -2
- package/dist/shaders/pulsing-border.d.ts +2 -1
- package/dist/shaders/pulsing-border.js +70 -42
- package/dist/shaders/pulsing-border.js.map +2 -2
- package/dist/shaders/simplex-noise.d.ts +3 -0
- package/dist/shaders/simplex-noise.js +47 -3
- package/dist/shaders/simplex-noise.js.map +2 -2
- package/dist/shaders/smoke-ring.js +4 -4
- package/dist/shaders/smoke-ring.js.map +2 -2
- package/dist/shaders/spiral.d.ts +0 -3
- package/dist/shaders/spiral.js +26 -93
- package/dist/shaders/spiral.js.map +2 -2
- package/dist/shaders/static-mesh-gradient.d.ts +12 -0
- package/dist/shaders/static-mesh-gradient.js +157 -0
- package/dist/shaders/static-mesh-gradient.js.map +7 -0
- package/dist/shaders/static-radial-gradient.d.ts +12 -0
- package/dist/shaders/static-radial-gradient.js +178 -0
- package/dist/shaders/static-radial-gradient.js.map +7 -0
- package/dist/shaders/swirl.js +17 -17
- package/dist/shaders/swirl.js.map +2 -2
- package/dist/shaders/voronoi.d.ts +2 -0
- package/dist/shaders/voronoi.js +37 -4
- package/dist/shaders/voronoi.js.map +2 -2
- package/dist/shaders/warp.d.ts +0 -5
- package/dist/shaders/warp.js +6 -108
- package/dist/shaders/warp.js.map +2 -2
- package/dist/shaders/waves.js +3 -3
- package/dist/shaders/waves.js.map +1 -1
- package/package.json +2 -2
|
@@ -27,7 +27,52 @@ const defaultPreset = {
|
|
|
27
27
|
stepsPerColor: 2
|
|
28
28
|
}
|
|
29
29
|
};
|
|
30
|
-
const
|
|
30
|
+
const shinePreset = {
|
|
31
|
+
name: "Shine",
|
|
32
|
+
params: {
|
|
33
|
+
...defaultPatternSizing,
|
|
34
|
+
speed: 0.1,
|
|
35
|
+
frame: 0,
|
|
36
|
+
colors: ["#ffffff", "#006aff", "#fff675"],
|
|
37
|
+
colorBack: "#000000",
|
|
38
|
+
stepsPerColor: 4,
|
|
39
|
+
size: 0.3,
|
|
40
|
+
sizeRange: 0.2,
|
|
41
|
+
spreading: 1,
|
|
42
|
+
scale: 0.4
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
const bubblesPreset = {
|
|
46
|
+
name: "Bubbles",
|
|
47
|
+
params: {
|
|
48
|
+
...defaultPatternSizing,
|
|
49
|
+
speed: 0.4,
|
|
50
|
+
frame: 0,
|
|
51
|
+
colors: ["#29b9e0"],
|
|
52
|
+
colorBack: "#009494",
|
|
53
|
+
stepsPerColor: 2,
|
|
54
|
+
size: 0.9,
|
|
55
|
+
sizeRange: 0.7,
|
|
56
|
+
spreading: 1,
|
|
57
|
+
scale: 1.64
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
const hallucinatoryPreset = {
|
|
61
|
+
name: "Hallucinatory",
|
|
62
|
+
params: {
|
|
63
|
+
...defaultPatternSizing,
|
|
64
|
+
speed: 5,
|
|
65
|
+
frame: 0,
|
|
66
|
+
colors: ["#000000"],
|
|
67
|
+
colorBack: "#ffe500",
|
|
68
|
+
stepsPerColor: 2,
|
|
69
|
+
size: 0.65,
|
|
70
|
+
sizeRange: 0,
|
|
71
|
+
spreading: 0.3,
|
|
72
|
+
scale: 0.5
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
const dotOrbitPresets = [defaultPreset, bubblesPreset, shinePreset, hallucinatoryPreset];
|
|
31
76
|
const DotOrbit = memo(function DotOrbitImpl({
|
|
32
77
|
// Own props
|
|
33
78
|
speed = defaultPreset.params.speed,
|
|
@@ -74,7 +119,10 @@ const DotOrbit = memo(function DotOrbitImpl({
|
|
|
74
119
|
}, colorPropsAreEqual);
|
|
75
120
|
export {
|
|
76
121
|
DotOrbit,
|
|
122
|
+
bubblesPreset,
|
|
77
123
|
defaultPreset,
|
|
78
|
-
dotOrbitPresets
|
|
124
|
+
dotOrbitPresets,
|
|
125
|
+
hallucinatoryPreset,
|
|
126
|
+
shinePreset
|
|
79
127
|
};
|
|
80
128
|
//# sourceMappingURL=dot-orbit.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/dot-orbit.tsx"],
|
|
4
|
-
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n getShaderColorFromString,\n dotOrbitFragmentShader,\n ShaderFitOptions,\n type DotOrbitParams,\n type DotOrbitUniforms,\n type ShaderPreset,\n defaultPatternSizing,\n} from '@paper-design/shaders';\n\nexport interface DotOrbitProps extends ShaderComponentProps, DotOrbitParams {}\n\ntype DotOrbitPreset = ShaderPreset<DotOrbitParams>;\n\nexport const defaultPreset: DotOrbitPreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n speed: 2,\n frame: 0,\n colorBack: '#000000',\n colors: ['#D2822D', '#0C3D80', '#B41A57', '#37A166'],\n size: 0.9,\n sizeRange: 0,\n spreading: 1,\n stepsPerColor: 2,\n },\n};\n\nexport const dotOrbitPresets: DotOrbitPreset[] = [defaultPreset];\n\nexport const DotOrbit: React.FC<DotOrbitProps> = memo(function DotOrbitImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorBack = defaultPreset.params.colorBack,\n colors = defaultPreset.params.colors,\n size = defaultPreset.params.size,\n sizeRange = defaultPreset.params.sizeRange,\n spreading = defaultPreset.params.spreading,\n stepsPerColor = defaultPreset.params.stepsPerColor,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n scale = defaultPreset.params.scale,\n rotation = defaultPreset.params.rotation,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n worldWidth = defaultPreset.params.worldWidth,\n worldHeight = defaultPreset.params.worldHeight,\n ...props\n}: DotOrbitProps) {\n const uniforms = {\n // Own uniforms\n u_colorBack: getShaderColorFromString(colorBack),\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_size: size,\n u_sizeRange: sizeRange,\n u_spreading: spreading,\n u_stepsPerColor: stepsPerColor,\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_scale: scale,\n u_rotation: rotation,\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_worldWidth: worldWidth,\n u_worldHeight: worldHeight,\n } satisfies DotOrbitUniforms;\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={dotOrbitFragmentShader} uniforms={uniforms} />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAIA;AAAA,OACK;
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n getShaderColorFromString,\n dotOrbitFragmentShader,\n ShaderFitOptions,\n type DotOrbitParams,\n type DotOrbitUniforms,\n type ShaderPreset,\n defaultPatternSizing,\n} from '@paper-design/shaders';\n\nexport interface DotOrbitProps extends ShaderComponentProps, DotOrbitParams {}\n\ntype DotOrbitPreset = ShaderPreset<DotOrbitParams>;\n\nexport const defaultPreset: DotOrbitPreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n speed: 2,\n frame: 0,\n colorBack: '#000000',\n colors: ['#D2822D', '#0C3D80', '#B41A57', '#37A166'],\n size: 0.9,\n sizeRange: 0,\n spreading: 1,\n stepsPerColor: 2,\n },\n};\n\nexport const shinePreset: DotOrbitPreset = {\n name: 'Shine',\n params: {\n ...defaultPatternSizing,\n speed: 0.1,\n frame: 0,\n colors: ['#ffffff', '#006aff', '#fff675'],\n colorBack: '#000000',\n stepsPerColor: 4,\n size: 0.3,\n sizeRange: 0.2,\n spreading: 1,\n scale: 0.4,\n },\n};\n\nexport const bubblesPreset: DotOrbitPreset = {\n name: 'Bubbles',\n params: {\n ...defaultPatternSizing,\n speed: 0.4,\n frame: 0,\n colors: ['#29b9e0'],\n colorBack: '#009494',\n stepsPerColor: 2,\n size: 0.9,\n sizeRange: 0.7,\n spreading: 1.0,\n scale: 1.64,\n },\n};\n\nexport const hallucinatoryPreset: DotOrbitPreset = {\n name: 'Hallucinatory',\n params: {\n ...defaultPatternSizing,\n speed: 5,\n frame: 0,\n colors: ['#000000'],\n colorBack: '#ffe500',\n stepsPerColor: 2,\n size: 0.65,\n sizeRange: 0,\n spreading: 0.3,\n scale: 0.5,\n },\n};\n\nexport const dotOrbitPresets: DotOrbitPreset[] = [defaultPreset, bubblesPreset, shinePreset, hallucinatoryPreset];\n\nexport const DotOrbit: React.FC<DotOrbitProps> = memo(function DotOrbitImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorBack = defaultPreset.params.colorBack,\n colors = defaultPreset.params.colors,\n size = defaultPreset.params.size,\n sizeRange = defaultPreset.params.sizeRange,\n spreading = defaultPreset.params.spreading,\n stepsPerColor = defaultPreset.params.stepsPerColor,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n scale = defaultPreset.params.scale,\n rotation = defaultPreset.params.rotation,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n worldWidth = defaultPreset.params.worldWidth,\n worldHeight = defaultPreset.params.worldHeight,\n ...props\n}: DotOrbitProps) {\n const uniforms = {\n // Own uniforms\n u_colorBack: getShaderColorFromString(colorBack),\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_size: size,\n u_sizeRange: sizeRange,\n u_spreading: spreading,\n u_stepsPerColor: stepsPerColor,\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_scale: scale,\n u_rotation: rotation,\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_worldWidth: worldWidth,\n u_worldHeight: worldHeight,\n } satisfies DotOrbitUniforms;\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={dotOrbitFragmentShader} uniforms={uniforms} />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
+
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAIA;AAAA,OACK;AAqHH;AA/GG,MAAM,gBAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,QAAQ,CAAC,WAAW,WAAW,WAAW,SAAS;AAAA,IACnD,MAAM;AAAA,IACN,WAAW;AAAA,IACX,WAAW;AAAA,IACX,eAAe;AAAA,EACjB;AACF;AAEO,MAAM,cAA8B;AAAA,EACzC,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,IACxC,WAAW;AAAA,IACX,eAAe;AAAA,IACf,MAAM;AAAA,IACN,WAAW;AAAA,IACX,WAAW;AAAA,IACX,OAAO;AAAA,EACT;AACF;AAEO,MAAM,gBAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,SAAS;AAAA,IAClB,WAAW;AAAA,IACX,eAAe;AAAA,IACf,MAAM;AAAA,IACN,WAAW;AAAA,IACX,WAAW;AAAA,IACX,OAAO;AAAA,EACT;AACF;AAEO,MAAM,sBAAsC;AAAA,EACjD,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,SAAS;AAAA,IAClB,WAAW;AAAA,IACX,eAAe;AAAA,IACf,MAAM;AAAA,IACN,WAAW;AAAA,IACX,WAAW;AAAA,IACX,OAAO;AAAA,EACT;AACF;AAEO,MAAM,kBAAoC,CAAC,eAAe,eAAe,aAAa,mBAAmB;AAEzG,MAAM,WAAoC,KAAK,SAAS,aAAa;AAAA;AAAA,EAE1E,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,YAAY,cAAc,OAAO;AAAA,EACjC,SAAS,cAAc,OAAO;AAAA,EAC9B,OAAO,cAAc,OAAO;AAAA,EAC5B,YAAY,cAAc,OAAO;AAAA,EACjC,YAAY,cAAc,OAAO;AAAA,EACjC,gBAAgB,cAAc,OAAO;AAAA;AAAA,EAGrC,MAAM,cAAc,OAAO;AAAA,EAC3B,QAAQ,cAAc,OAAO;AAAA,EAC7B,WAAW,cAAc,OAAO;AAAA,EAChC,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,aAAa,cAAc,OAAO;AAAA,EAClC,cAAc,cAAc,OAAO;AAAA,EACnC,GAAG;AACL,GAAkB;AAChB,QAAM,WAAW;AAAA;AAAA,IAEf,aAAa,yBAAyB,SAAS;AAAA,IAC/C,UAAU,OAAO,IAAI,wBAAwB;AAAA,IAC7C,eAAe,OAAO;AAAA,IACtB,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,aAAa;AAAA,IACb,iBAAiB;AAAA;AAAA,IAGjB,OAAO,iBAAiB,GAAG;AAAA,IAC3B,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,cAAc;AAAA,IACd,eAAe;AAAA,EACjB;AAEA,SACE,oBAAC,eAAa,GAAG,OAAO,OAAc,OAAc,gBAAgB,wBAAwB,UAAoB;AAEpH,GAAG,kBAAkB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,7 +4,6 @@ export interface GodRaysProps extends ShaderComponentProps, GodRaysParams {
|
|
|
4
4
|
}
|
|
5
5
|
type GodRaysPreset = ShaderPreset<GodRaysParams>;
|
|
6
6
|
export declare const defaultPreset: GodRaysPreset;
|
|
7
|
-
export declare const auroraPreset: GodRaysPreset;
|
|
8
7
|
export declare const warpPreset: GodRaysPreset;
|
|
9
8
|
export declare const linearPreset: GodRaysPreset;
|
|
10
9
|
export declare const etherPreset: GodRaysPreset;
|
package/dist/shaders/god-rays.js
CHANGED
|
@@ -32,24 +32,6 @@ const defaultPreset = {
|
|
|
32
32
|
frame: 0
|
|
33
33
|
}
|
|
34
34
|
};
|
|
35
|
-
const auroraPreset = {
|
|
36
|
-
name: "Aurora",
|
|
37
|
-
params: {
|
|
38
|
-
...defaultObjectSizing,
|
|
39
|
-
offsetY: 1,
|
|
40
|
-
colorBack: "#404040",
|
|
41
|
-
colorBloom: "#ff8888",
|
|
42
|
-
colors: ["#666eff", "#66ff99", "#66d9ff"],
|
|
43
|
-
density: 0.5,
|
|
44
|
-
spotty: 0.9,
|
|
45
|
-
midIntensity: 0.8,
|
|
46
|
-
midSize: 0.2,
|
|
47
|
-
intensity: 0.5,
|
|
48
|
-
bloom: 1,
|
|
49
|
-
speed: 0.5,
|
|
50
|
-
frame: 0
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
35
|
const warpPreset = {
|
|
54
36
|
name: "Warp",
|
|
55
37
|
params: {
|
|
@@ -59,8 +41,8 @@ const warpPreset = {
|
|
|
59
41
|
colors: ["#ff00c4", "#ff8c00", "#ffffff"],
|
|
60
42
|
density: 0.45,
|
|
61
43
|
spotty: 0.15,
|
|
62
|
-
midIntensity: 0,
|
|
63
|
-
midSize: 0,
|
|
44
|
+
midIntensity: 0.4,
|
|
45
|
+
midSize: 0.33,
|
|
64
46
|
intensity: 0.79,
|
|
65
47
|
bloom: 0.4,
|
|
66
48
|
speed: 2,
|
|
@@ -72,7 +54,7 @@ const linearPreset = {
|
|
|
72
54
|
params: {
|
|
73
55
|
...defaultObjectSizing,
|
|
74
56
|
offsetX: 0.2,
|
|
75
|
-
offsetY: -0.
|
|
57
|
+
offsetY: -0.8,
|
|
76
58
|
colorBack: "#000000",
|
|
77
59
|
colorBloom: "#eeeeee",
|
|
78
60
|
colors: ["#ffffff1f", "#ffffff3d", "#ffffff29"],
|
|
@@ -94,17 +76,17 @@ const etherPreset = {
|
|
|
94
76
|
colorBack: "#090f1d",
|
|
95
77
|
colorBloom: "#ffffff",
|
|
96
78
|
colors: ["#148effa6", "#c4dffebe", "#232a47"],
|
|
97
|
-
density: 0.
|
|
79
|
+
density: 0.03,
|
|
98
80
|
spotty: 0.77,
|
|
99
81
|
midSize: 0.1,
|
|
100
|
-
midIntensity: 0.
|
|
82
|
+
midIntensity: 0.6,
|
|
101
83
|
intensity: 0.6,
|
|
102
84
|
bloom: 0.6,
|
|
103
85
|
speed: 1,
|
|
104
86
|
frame: 0
|
|
105
87
|
}
|
|
106
88
|
};
|
|
107
|
-
const godRaysPresets = [defaultPreset,
|
|
89
|
+
const godRaysPresets = [defaultPreset, warpPreset, linearPreset, etherPreset];
|
|
108
90
|
const GodRays = memo(function GodRaysImpl({
|
|
109
91
|
// Own props
|
|
110
92
|
speed = defaultPreset.params.speed,
|
|
@@ -157,7 +139,6 @@ const GodRays = memo(function GodRaysImpl({
|
|
|
157
139
|
}, colorPropsAreEqual);
|
|
158
140
|
export {
|
|
159
141
|
GodRays,
|
|
160
|
-
auroraPreset,
|
|
161
142
|
defaultPreset,
|
|
162
143
|
etherPreset,
|
|
163
144
|
godRaysPresets,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/god-rays.tsx"],
|
|
4
|
-
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n defaultObjectSizing,\n getShaderColorFromString,\n godRaysFragmentShader,\n ShaderFitOptions,\n type GodRaysParams,\n type GodRaysUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface GodRaysProps extends ShaderComponentProps, GodRaysParams {}\n\ntype GodRaysPreset = ShaderPreset<GodRaysParams>;\n\nexport const defaultPreset: GodRaysPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n offsetX: -0.4,\n offsetY: -0.4,\n colorBack: '#002238',\n colorBloom: '#555522',\n colors: ['#ffcd66', '#ffb899', '#a8fffb'],\n density: 0.55,\n spotty: 0.28,\n midIntensity: 1,\n midSize: 0.4,\n intensity: 0.3,\n bloom: 0,\n speed: 1,\n frame: 0,\n },\n};\n\nexport const
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n defaultObjectSizing,\n getShaderColorFromString,\n godRaysFragmentShader,\n ShaderFitOptions,\n type GodRaysParams,\n type GodRaysUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface GodRaysProps extends ShaderComponentProps, GodRaysParams {}\n\ntype GodRaysPreset = ShaderPreset<GodRaysParams>;\n\nexport const defaultPreset: GodRaysPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n offsetX: -0.4,\n offsetY: -0.4,\n colorBack: '#002238',\n colorBloom: '#555522',\n colors: ['#ffcd66', '#ffb899', '#a8fffb'],\n density: 0.55,\n spotty: 0.28,\n midIntensity: 1,\n midSize: 0.4,\n intensity: 0.3,\n bloom: 0,\n speed: 1,\n frame: 0,\n },\n};\n\nexport const warpPreset: GodRaysPreset = {\n name: 'Warp',\n params: {\n ...defaultObjectSizing,\n colorBack: '#000000',\n colorBloom: '#222288',\n colors: ['#ff00c4', '#ff8c00', '#ffffff'],\n density: 0.45,\n spotty: 0.15,\n midIntensity: 0.4,\n midSize: 0.33,\n intensity: 0.79,\n bloom: 0.4,\n speed: 2,\n frame: 0,\n },\n};\n\nexport const linearPreset: GodRaysPreset = {\n name: 'Linear',\n params: {\n ...defaultObjectSizing,\n offsetX: 0.2,\n offsetY: -0.8,\n colorBack: '#000000',\n colorBloom: '#eeeeee',\n colors: ['#ffffff1f', '#ffffff3d', '#ffffff29'],\n density: 0.41,\n spotty: 0.25,\n midSize: 0.1,\n midIntensity: 0.75,\n intensity: 0.79,\n bloom: 1,\n speed: 0.5,\n frame: 0,\n },\n};\n\nexport const etherPreset: GodRaysPreset = {\n name: 'Ether',\n params: {\n ...defaultObjectSizing,\n offsetX: -0.6,\n colorBack: '#090f1d',\n colorBloom: '#ffffff',\n colors: ['#148effa6', '#c4dffebe', '#232a47'],\n density: 0.03,\n spotty: 0.77,\n midSize: 0.1,\n midIntensity: 0.6,\n intensity: 0.6,\n bloom: 0.6,\n speed: 1,\n frame: 0,\n },\n};\n\nexport const godRaysPresets: GodRaysPreset[] = [defaultPreset, warpPreset, linearPreset, etherPreset];\n\nexport const GodRays: React.FC<GodRaysProps> = memo(function GodRaysImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorBloom = defaultPreset.params.colorBloom,\n colorBack = defaultPreset.params.colorBack,\n colors = defaultPreset.params.colors,\n density = defaultPreset.params.density,\n spotty = defaultPreset.params.spotty,\n midIntensity = defaultPreset.params.midIntensity,\n midSize = defaultPreset.params.midSize,\n intensity = defaultPreset.params.intensity,\n bloom = defaultPreset.params.bloom,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n scale = defaultPreset.params.scale,\n rotation = defaultPreset.params.rotation,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n worldWidth = defaultPreset.params.worldWidth,\n worldHeight = defaultPreset.params.worldHeight,\n ...props\n}: GodRaysProps) {\n const uniforms = {\n // Own uniforms\n u_colorBloom: getShaderColorFromString(colorBloom),\n u_colorBack: getShaderColorFromString(colorBack),\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_density: density,\n u_spotty: spotty,\n u_midIntensity: midIntensity,\n u_midSize: midSize,\n u_intensity: intensity,\n u_bloom: bloom,\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_scale: scale,\n u_rotation: rotation,\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_worldWidth: worldWidth,\n u_worldHeight: worldHeight,\n } satisfies GodRaysUniforms;\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={godRaysFragmentShader} uniforms={uniforms} />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,10 +3,9 @@ import { type GrainGradientParams, type ShaderPreset } from '@paper-design/shade
|
|
|
3
3
|
export interface GrainGradientProps extends ShaderComponentProps, GrainGradientParams {
|
|
4
4
|
}
|
|
5
5
|
type GrainGradientPreset = ShaderPreset<GrainGradientParams>;
|
|
6
|
-
export declare const defaultPreset: GrainGradientPreset;
|
|
7
6
|
export declare const dotsPreset: GrainGradientPreset;
|
|
8
7
|
export declare const truchetPreset: GrainGradientPreset;
|
|
9
|
-
export declare const
|
|
8
|
+
export declare const defaultPreset: GrainGradientPreset;
|
|
10
9
|
export declare const ripplePreset: GrainGradientPreset;
|
|
11
10
|
export declare const blobPreset: GrainGradientPreset;
|
|
12
11
|
export declare const moonPreset: GrainGradientPreset;
|
|
@@ -15,20 +15,6 @@ import {
|
|
|
15
15
|
GrainGradientShapes
|
|
16
16
|
} from "@paper-design/shaders";
|
|
17
17
|
import { jsx } from "react/jsx-runtime";
|
|
18
|
-
const defaultPreset = {
|
|
19
|
-
name: "Default",
|
|
20
|
-
params: {
|
|
21
|
-
...defaultPatternSizing,
|
|
22
|
-
speed: 1,
|
|
23
|
-
frame: 0,
|
|
24
|
-
colorBack: "#000a0f",
|
|
25
|
-
colors: ["#c4730b", "#bdad5f", "#d8ccc7"],
|
|
26
|
-
softness: 0.7,
|
|
27
|
-
intensity: 0.15,
|
|
28
|
-
noise: 0.5,
|
|
29
|
-
shape: "wave"
|
|
30
|
-
}
|
|
31
|
-
};
|
|
32
18
|
const dotsPreset = {
|
|
33
19
|
name: "Dots",
|
|
34
20
|
params: {
|
|
@@ -37,9 +23,9 @@ const dotsPreset = {
|
|
|
37
23
|
speed: 1,
|
|
38
24
|
frame: 0,
|
|
39
25
|
colorBack: "#0a0000",
|
|
40
|
-
colors: ["#6f0000", "#0080ff", "#f2ebc9"],
|
|
41
|
-
softness:
|
|
42
|
-
intensity:
|
|
26
|
+
colors: ["#6f0000", "#0080ff", "#f2ebc9", "#33cc33"],
|
|
27
|
+
softness: 1,
|
|
28
|
+
intensity: 1,
|
|
43
29
|
noise: 0.7,
|
|
44
30
|
shape: "dots"
|
|
45
31
|
}
|
|
@@ -58,8 +44,8 @@ const truchetPreset = {
|
|
|
58
44
|
shape: "truchet"
|
|
59
45
|
}
|
|
60
46
|
};
|
|
61
|
-
const
|
|
62
|
-
name: "
|
|
47
|
+
const defaultPreset = {
|
|
48
|
+
name: "Default",
|
|
63
49
|
params: {
|
|
64
50
|
...defaultObjectSizing,
|
|
65
51
|
speed: 1,
|
|
@@ -118,8 +104,8 @@ const moonPreset = {
|
|
|
118
104
|
}
|
|
119
105
|
};
|
|
120
106
|
const grainGradientPresets = [
|
|
121
|
-
cornersPreset,
|
|
122
107
|
defaultPreset,
|
|
108
|
+
// cornersPreset,
|
|
123
109
|
dotsPreset,
|
|
124
110
|
truchetPreset,
|
|
125
111
|
ripplePreset,
|
|
@@ -148,7 +134,6 @@ const GrainGradient = memo(function GrainGradientImpl({
|
|
|
148
134
|
worldHeight = defaultPreset.params.worldHeight,
|
|
149
135
|
...props
|
|
150
136
|
}) {
|
|
151
|
-
const noiseTexture = typeof window !== "undefined" && { u_noiseTexture: getShaderNoiseTexture() };
|
|
152
137
|
const uniforms = {
|
|
153
138
|
// Own uniforms
|
|
154
139
|
u_colorBack: getShaderColorFromString(colorBack),
|
|
@@ -158,7 +143,7 @@ const GrainGradient = memo(function GrainGradientImpl({
|
|
|
158
143
|
u_intensity: intensity,
|
|
159
144
|
u_noise: noise,
|
|
160
145
|
u_shape: GrainGradientShapes[shape],
|
|
161
|
-
|
|
146
|
+
u_noiseTexture: getShaderNoiseTexture(),
|
|
162
147
|
// Sizing uniforms
|
|
163
148
|
u_fit: ShaderFitOptions[fit],
|
|
164
149
|
u_scale: scale,
|
|
@@ -184,7 +169,6 @@ const GrainGradient = memo(function GrainGradientImpl({
|
|
|
184
169
|
export {
|
|
185
170
|
GrainGradient,
|
|
186
171
|
blobPreset,
|
|
187
|
-
cornersPreset,
|
|
188
172
|
defaultPreset,
|
|
189
173
|
dotsPreset,
|
|
190
174
|
grainGradientPresets,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/grain-gradient.tsx"],
|
|
4
|
-
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n getShaderColorFromString,\n getShaderNoiseTexture,\n grainGradientFragmentShader,\n ShaderFitOptions,\n type GrainGradientUniforms,\n type GrainGradientParams,\n type ShaderPreset,\n defaultPatternSizing,\n defaultObjectSizing,\n GrainGradientShapes,\n} from '@paper-design/shaders';\n\nexport interface GrainGradientProps extends ShaderComponentProps, GrainGradientParams {}\n\ntype GrainGradientPreset = ShaderPreset<GrainGradientParams>;\n\
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAIA;AAAA,EACA;AAAA,EACA;AAAA,OACK;
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n getShaderColorFromString,\n getShaderNoiseTexture,\n grainGradientFragmentShader,\n ShaderFitOptions,\n type GrainGradientUniforms,\n type GrainGradientParams,\n type ShaderPreset,\n defaultPatternSizing,\n defaultObjectSizing,\n GrainGradientShapes,\n} from '@paper-design/shaders';\n\nexport interface GrainGradientProps extends ShaderComponentProps, GrainGradientParams {}\n\ntype GrainGradientPreset = ShaderPreset<GrainGradientParams>;\n\n// export const defaultPreset: GrainGradientPreset = {\n// name: 'Default',\n// params: {\n// ...defaultPatternSizing,\n// speed: 1,\n// frame: 0,\n// colorBack: '#000a0f',\n// colors: ['#c4730b', '#bdad5f', '#d8ccc7'],\n// softness: 0.7,\n// intensity: 0.15,\n// noise: 0.5,\n// shape: 'wave',\n// },\n// };\n\nexport const dotsPreset: GrainGradientPreset = {\n name: 'Dots',\n params: {\n ...defaultPatternSizing,\n scale: 0.6,\n speed: 1,\n frame: 0,\n colorBack: '#0a0000',\n colors: ['#6f0000', '#0080ff', '#f2ebc9', '#33cc33'],\n softness: 1,\n intensity: 1,\n noise: 0.7,\n shape: 'dots',\n },\n};\n\nexport const truchetPreset: GrainGradientPreset = {\n name: 'Truchet',\n params: {\n ...defaultPatternSizing,\n speed: 1,\n frame: 0,\n colorBack: '#0a0000',\n colors: ['#6f2200', '#eabb7c', '#39b523'],\n softness: 0,\n intensity: 0.2,\n noise: 1,\n shape: 'truchet',\n },\n};\n\nexport const defaultPreset: GrainGradientPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colorBack: '#031018',\n colors: ['#00aeff', '#00ffcc', '#ffc800'],\n softness: 0.4,\n intensity: 0.35,\n noise: 0.35,\n shape: 'corners',\n },\n};\n\nexport const ripplePreset: GrainGradientPreset = {\n name: 'Ripple',\n params: {\n ...defaultObjectSizing,\n scale: 0.5,\n speed: 1,\n frame: 0,\n colorBack: '#140a00',\n colors: ['#6f2d00', '#88ddae', '#2c0b1d'],\n softness: 0.5,\n intensity: 0.5,\n noise: 0.5,\n shape: 'ripple',\n },\n};\n\nexport const blobPreset: GrainGradientPreset = {\n name: 'Blob',\n params: {\n ...defaultObjectSizing,\n scale: 1.3,\n speed: 1,\n frame: 0,\n colorBack: '#0f0e18',\n colors: ['#3e6172', '#a49b74', '#568c50'],\n softness: 0,\n intensity: 0.15,\n noise: 0.5,\n shape: 'blob',\n },\n};\n\nexport const moonPreset: GrainGradientPreset = {\n name: 'Moon',\n params: {\n ...defaultObjectSizing,\n scale: 0.6,\n speed: 1,\n frame: 0,\n colorBack: '#000000',\n colors: ['#000000', '#28272d', '#ffeccc'],\n softness: 1,\n intensity: 0.56,\n noise: 1,\n shape: 'sphere',\n },\n};\n\nexport const grainGradientPresets: GrainGradientPreset[] = [\n defaultPreset,\n // cornersPreset,\n dotsPreset,\n truchetPreset,\n ripplePreset,\n blobPreset,\n moonPreset,\n];\n\nexport const GrainGradient: React.FC<GrainGradientProps> = memo(function GrainGradientImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorBack = defaultPreset.params.colorBack,\n colors = defaultPreset.params.colors,\n softness = defaultPreset.params.softness,\n intensity = defaultPreset.params.intensity,\n noise = defaultPreset.params.noise,\n shape = defaultPreset.params.shape,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n scale = defaultPreset.params.scale,\n rotation = defaultPreset.params.rotation,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n worldWidth = defaultPreset.params.worldWidth,\n worldHeight = defaultPreset.params.worldHeight,\n ...props\n}: GrainGradientProps) {\n const uniforms = {\n // Own uniforms\n u_colorBack: getShaderColorFromString(colorBack),\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_softness: softness,\n u_intensity: intensity,\n u_noise: noise,\n u_shape: GrainGradientShapes[shape],\n u_noiseTexture: getShaderNoiseTexture(),\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_scale: scale,\n u_rotation: rotation,\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_worldWidth: worldWidth,\n u_worldHeight: worldHeight,\n } satisfies GrainGradientUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={grainGradientFragmentShader}\n uniforms={uniforms}\n />\n );\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -20,7 +20,7 @@ const defaultPreset = {
|
|
|
20
20
|
...defaultObjectSizing,
|
|
21
21
|
speed: 1,
|
|
22
22
|
frame: 0,
|
|
23
|
-
colorBack: "#
|
|
23
|
+
colorBack: "#ffffff00",
|
|
24
24
|
colorTint: "#ffffff",
|
|
25
25
|
softness: 0.3,
|
|
26
26
|
repetition: 3,
|
|
@@ -37,7 +37,7 @@ const fullScreenPreset = {
|
|
|
37
37
|
...defaultObjectSizing,
|
|
38
38
|
speed: 1,
|
|
39
39
|
frame: 0,
|
|
40
|
-
colorBack: "#
|
|
40
|
+
colorBack: "#ffffff00",
|
|
41
41
|
colorTint: "#ffffff",
|
|
42
42
|
softness: 0.3,
|
|
43
43
|
repetition: 3,
|
|
@@ -57,7 +57,7 @@ const spherePreset = {
|
|
|
57
57
|
scale: 0.7,
|
|
58
58
|
speed: 2,
|
|
59
59
|
frame: 0,
|
|
60
|
-
colorBack: "#
|
|
60
|
+
colorBack: "#ffffff00",
|
|
61
61
|
colorTint: "#d1e0ff",
|
|
62
62
|
softness: 0.45,
|
|
63
63
|
repetition: 4,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/liquid-metal.tsx"],
|
|
4
|
-
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n liquidMetalFragmentShader,\n ShaderFitOptions,\n type LiquidMetalUniforms,\n type LiquidMetalParams,\n type ShaderPreset,\n defaultObjectSizing,\n getShaderColorFromString,\n LiquidMetalShapes,\n} from '@paper-design/shaders';\n\nexport interface LiquidMetalProps extends ShaderComponentProps, LiquidMetalParams {}\n\ntype LiquidMetalPreset = ShaderPreset<LiquidMetalParams>;\n\nexport const defaultPreset: LiquidMetalPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colorBack: '#
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n liquidMetalFragmentShader,\n ShaderFitOptions,\n type LiquidMetalUniforms,\n type LiquidMetalParams,\n type ShaderPreset,\n defaultObjectSizing,\n getShaderColorFromString,\n LiquidMetalShapes,\n} from '@paper-design/shaders';\n\nexport interface LiquidMetalProps extends ShaderComponentProps, LiquidMetalParams {}\n\ntype LiquidMetalPreset = ShaderPreset<LiquidMetalParams>;\n\nexport const defaultPreset: LiquidMetalPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colorBack: '#ffffff00',\n colorTint: '#ffffff',\n softness: 0.3,\n repetition: 3,\n shiftRed: 0.3,\n shiftBlue: 0.3,\n distortion: 0.3,\n contour: 0.88,\n shape: 'metaballs',\n },\n};\n\nexport const fullScreenPreset: LiquidMetalPreset = {\n name: 'Full Screen',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colorBack: '#ffffff00',\n colorTint: '#ffffff',\n softness: 0.3,\n repetition: 3,\n shiftRed: 0.3,\n shiftBlue: 0.3,\n distortion: 0.07,\n contour: 0,\n shape: 'none',\n worldWidth: 0,\n worldHeight: 0,\n },\n};\n\nexport const spherePreset: LiquidMetalPreset = {\n name: 'Sphere',\n params: {\n ...defaultObjectSizing,\n scale: 0.7,\n speed: 2,\n frame: 0,\n colorBack: '#ffffff00',\n colorTint: '#d1e0ff',\n softness: 0.45,\n repetition: 4,\n shiftRed: 1,\n shiftBlue: 0.3,\n distortion: 0.1,\n contour: 0.4,\n shape: 'circle',\n },\n};\n\nexport const dropsPreset: LiquidMetalPreset = {\n name: 'Drops',\n params: {\n ...defaultObjectSizing,\n scale: 2.2,\n speed: 1,\n frame: 0,\n colorBack: '#00042e',\n colorTint: '#5b4dc7',\n softness: 0.45,\n repetition: 4,\n shiftRed: -0.5,\n shiftBlue: -1,\n distortion: 0.1,\n contour: 1,\n shape: 'metaballs',\n },\n};\n\nexport const liquidMetalPresets: LiquidMetalPreset[] = [defaultPreset, spherePreset, dropsPreset, fullScreenPreset];\n\nexport const LiquidMetal: React.FC<LiquidMetalProps> = memo(function LiquidMetalImpl({\n // Own props\n colorBack = defaultPreset.params.colorBack,\n colorTint = defaultPreset.params.colorTint,\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n softness = defaultPreset.params.softness,\n repetition = defaultPreset.params.repetition,\n shiftRed = defaultPreset.params.shiftRed,\n shiftBlue = defaultPreset.params.shiftBlue,\n distortion = defaultPreset.params.distortion,\n contour = defaultPreset.params.contour,\n shape = defaultPreset.params.shape,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n scale = defaultPreset.params.scale,\n rotation = defaultPreset.params.rotation,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n worldWidth = defaultPreset.params.worldWidth,\n worldHeight = defaultPreset.params.worldHeight,\n ...props\n}: LiquidMetalProps) {\n const uniforms = {\n // Own uniforms\n u_colorBack: getShaderColorFromString(colorBack),\n u_colorTint: getShaderColorFromString(colorTint),\n\n u_softness: softness,\n u_repetition: repetition,\n u_shiftRed: shiftRed,\n u_shiftBlue: shiftBlue,\n u_distortion: distortion,\n u_contour: contour,\n u_shape: LiquidMetalShapes[shape],\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_scale: scale,\n u_rotation: rotation,\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_worldWidth: worldWidth,\n u_worldHeight: worldHeight,\n } satisfies LiquidMetalUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={liquidMetalFragmentShader}\n uniforms={uniforms}\n />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -6,6 +6,7 @@ type MeshGradientPreset = ShaderPreset<MeshGradientParams>;
|
|
|
6
6
|
export declare const defaultPreset: MeshGradientPreset;
|
|
7
7
|
export declare const purplePreset: MeshGradientPreset;
|
|
8
8
|
export declare const beachPreset: MeshGradientPreset;
|
|
9
|
+
export declare const inkPreset: MeshGradientPreset;
|
|
9
10
|
export declare const meshGradientPresets: MeshGradientPreset[];
|
|
10
11
|
export declare const MeshGradient: React.FC<MeshGradientProps>;
|
|
11
12
|
export {};
|
|
@@ -18,7 +18,7 @@ const defaultPreset = {
|
|
|
18
18
|
params: {
|
|
19
19
|
...defaultObjectSizing,
|
|
20
20
|
speed: 1,
|
|
21
|
-
frame:
|
|
21
|
+
frame: 0,
|
|
22
22
|
colors: ["#5100ff", "#00ff80", "#ffcc00", "#ea00ff"],
|
|
23
23
|
distortion: 0.8,
|
|
24
24
|
swirl: 0.1
|
|
@@ -29,10 +29,10 @@ const purplePreset = {
|
|
|
29
29
|
params: {
|
|
30
30
|
...defaultObjectSizing,
|
|
31
31
|
speed: 0.6,
|
|
32
|
-
frame:
|
|
33
|
-
colors: ["#aaa7d7", "#3c2b8e"
|
|
34
|
-
distortion:
|
|
35
|
-
swirl:
|
|
32
|
+
frame: 0,
|
|
33
|
+
colors: ["#aaa7d7", "#3c2b8e"],
|
|
34
|
+
distortion: 1,
|
|
35
|
+
swirl: 1
|
|
36
36
|
}
|
|
37
37
|
};
|
|
38
38
|
const beachPreset = {
|
|
@@ -41,12 +41,24 @@ const beachPreset = {
|
|
|
41
41
|
...defaultObjectSizing,
|
|
42
42
|
speed: 0.1,
|
|
43
43
|
frame: 0,
|
|
44
|
-
colors: ["#bcecf6", "#
|
|
44
|
+
colors: ["#bcecf6", "#00aaff", "#00f7ff", "#ffd447"],
|
|
45
45
|
distortion: 0.8,
|
|
46
46
|
swirl: 0.35
|
|
47
47
|
}
|
|
48
48
|
};
|
|
49
|
-
const
|
|
49
|
+
const inkPreset = {
|
|
50
|
+
name: "Ink",
|
|
51
|
+
params: {
|
|
52
|
+
...defaultObjectSizing,
|
|
53
|
+
speed: 1,
|
|
54
|
+
frame: 0,
|
|
55
|
+
colors: ["#ffffff", "#000000"],
|
|
56
|
+
distortion: 1,
|
|
57
|
+
swirl: 0.2,
|
|
58
|
+
rotation: 90
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
const meshGradientPresets = [defaultPreset, inkPreset, purplePreset, beachPreset];
|
|
50
62
|
const MeshGradient = memo(function MeshGradientImpl({
|
|
51
63
|
// Own props
|
|
52
64
|
speed = defaultPreset.params.speed,
|
|
@@ -98,6 +110,7 @@ export {
|
|
|
98
110
|
MeshGradient,
|
|
99
111
|
beachPreset,
|
|
100
112
|
defaultPreset,
|
|
113
|
+
inkPreset,
|
|
101
114
|
meshGradientPresets,
|
|
102
115
|
purplePreset
|
|
103
116
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/mesh-gradient.tsx"],
|
|
4
|
-
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n defaultObjectSizing,\n getShaderColorFromString,\n meshGradientFragmentShader,\n ShaderFitOptions,\n type MeshGradientParams,\n type MeshGradientUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface MeshGradientProps extends ShaderComponentProps, MeshGradientParams {}\n\ntype MeshGradientPreset = ShaderPreset<MeshGradientParams>;\n\nexport const defaultPreset: MeshGradientPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame:
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n defaultObjectSizing,\n getShaderColorFromString,\n meshGradientFragmentShader,\n ShaderFitOptions,\n type MeshGradientParams,\n type MeshGradientUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface MeshGradientProps extends ShaderComponentProps, MeshGradientParams {}\n\ntype MeshGradientPreset = ShaderPreset<MeshGradientParams>;\n\nexport const defaultPreset: MeshGradientPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colors: ['#5100ff', '#00ff80', '#ffcc00', '#ea00ff'],\n distortion: 0.8,\n swirl: 0.1,\n },\n};\n\nexport const purplePreset: MeshGradientPreset = {\n name: 'Purple',\n params: {\n ...defaultObjectSizing,\n speed: 0.6,\n frame: 0,\n colors: ['#aaa7d7', '#3c2b8e'],\n distortion: 1,\n swirl: 1,\n },\n};\n\nexport const beachPreset: MeshGradientPreset = {\n name: 'Beach',\n params: {\n ...defaultObjectSizing,\n speed: 0.1,\n frame: 0,\n colors: ['#bcecf6', '#00aaff', '#00f7ff', '#ffd447'],\n distortion: 0.8,\n swirl: 0.35,\n },\n};\n\nexport const inkPreset: MeshGradientPreset = {\n name: 'Ink',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colors: ['#ffffff', '#000000'],\n distortion: 1,\n swirl: 0.2,\n rotation: 90,\n },\n};\n\nexport const meshGradientPresets: MeshGradientPreset[] = [defaultPreset, inkPreset, purplePreset, beachPreset];\n\nexport const MeshGradient: React.FC<MeshGradientProps> = memo(function MeshGradientImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colors = defaultPreset.params.colors,\n distortion = defaultPreset.params.distortion,\n swirl = defaultPreset.params.swirl,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n rotation = defaultPreset.params.rotation,\n scale = defaultPreset.params.scale,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n worldWidth = defaultPreset.params.worldWidth,\n worldHeight = defaultPreset.params.worldHeight,\n ...props\n}: MeshGradientProps) {\n const uniforms = {\n // Own uniforms\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_distortion: distortion,\n u_swirl: swirl,\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_rotation: rotation,\n u_scale: scale,\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_worldWidth: worldWidth,\n u_worldHeight: worldHeight,\n } satisfies MeshGradientUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={meshGradientFragmentShader}\n uniforms={uniforms}\n />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
+
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAiGH;AA3FG,MAAM,gBAAoC;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,WAAW,WAAW,WAAW,SAAS;AAAA,IACnD,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AACF;AAEO,MAAM,eAAmC;AAAA,EAC9C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,WAAW,SAAS;AAAA,IAC7B,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AACF;AAEO,MAAM,cAAkC;AAAA,EAC7C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,WAAW,WAAW,WAAW,SAAS;AAAA,IACnD,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AACF;AAEO,MAAM,YAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,WAAW,SAAS;AAAA,IAC7B,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,UAAU;AAAA,EACZ;AACF;AAEO,MAAM,sBAA4C,CAAC,eAAe,WAAW,cAAc,WAAW;AAEtG,MAAM,eAA4C,KAAK,SAAS,iBAAiB;AAAA;AAAA,EAEtF,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,SAAS,cAAc,OAAO;AAAA,EAC9B,aAAa,cAAc,OAAO;AAAA,EAClC,QAAQ,cAAc,OAAO;AAAA;AAAA,EAG7B,MAAM,cAAc,OAAO;AAAA,EAC3B,WAAW,cAAc,OAAO;AAAA,EAChC,QAAQ,cAAc,OAAO;AAAA,EAC7B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,aAAa,cAAc,OAAO;AAAA,EAClC,cAAc,cAAc,OAAO;AAAA,EACnC,GAAG;AACL,GAAsB;AACpB,QAAM,WAAW;AAAA;AAAA,IAEf,UAAU,OAAO,IAAI,wBAAwB;AAAA,IAC7C,eAAe,OAAO;AAAA,IACtB,cAAc;AAAA,IACd,SAAS;AAAA;AAAA,IAGT,OAAO,iBAAiB,GAAG;AAAA,IAC3B,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,cAAc;AAAA,IACd,eAAe;AAAA,EACjB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB;AAAA;AAAA,EACF;AAEJ,GAAG,kBAAkB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,6 +4,9 @@ export interface MetaballsProps extends ShaderComponentProps, MetaballsParams {
|
|
|
4
4
|
}
|
|
5
5
|
type MetaballsPreset = ShaderPreset<MetaballsParams>;
|
|
6
6
|
export declare const defaultPreset: MetaballsPreset;
|
|
7
|
+
export declare const inkDropsPreset: MetaballsPreset;
|
|
8
|
+
export declare const backgroundPreset: MetaballsPreset;
|
|
9
|
+
export declare const metallicPreset: MetaballsPreset;
|
|
7
10
|
export declare const metaballsPresets: MetaballsPreset[];
|
|
8
11
|
export declare const Metaballs: React.FC<MetaballsProps>;
|
|
9
12
|
export {};
|
|
@@ -26,7 +26,48 @@ const defaultPreset = {
|
|
|
26
26
|
size: 0.75
|
|
27
27
|
}
|
|
28
28
|
};
|
|
29
|
-
const
|
|
29
|
+
const inkDropsPreset = {
|
|
30
|
+
name: "Ink Drops",
|
|
31
|
+
params: {
|
|
32
|
+
...defaultObjectSizing,
|
|
33
|
+
scale: 1,
|
|
34
|
+
speed: 2,
|
|
35
|
+
frame: 0,
|
|
36
|
+
colorBack: "#ffffff00",
|
|
37
|
+
colors: ["#000000"],
|
|
38
|
+
count: 18,
|
|
39
|
+
size: 0.1
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
const backgroundPreset = {
|
|
43
|
+
name: "Background",
|
|
44
|
+
params: {
|
|
45
|
+
...defaultObjectSizing,
|
|
46
|
+
speed: 0.5,
|
|
47
|
+
frame: 0,
|
|
48
|
+
colors: ["#ae00ff", "#00ff95", "#ffc105"],
|
|
49
|
+
colorBack: "#2a273f",
|
|
50
|
+
count: 13,
|
|
51
|
+
size: 0.81,
|
|
52
|
+
scale: 4,
|
|
53
|
+
rotation: 0,
|
|
54
|
+
offsetX: -0.3
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
const metallicPreset = {
|
|
58
|
+
name: "Metallic",
|
|
59
|
+
params: {
|
|
60
|
+
...defaultObjectSizing,
|
|
61
|
+
speed: 2,
|
|
62
|
+
frame: 0,
|
|
63
|
+
colors: ["#000000bb", "#00000000", "#33ffaa54"],
|
|
64
|
+
colorBack: "#003e6b",
|
|
65
|
+
count: 10,
|
|
66
|
+
size: 0.81,
|
|
67
|
+
scale: 1.7
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
const metaballsPresets = [defaultPreset, inkDropsPreset, metallicPreset, backgroundPreset];
|
|
30
71
|
const Metaballs = memo(function MetaballsImpl({
|
|
31
72
|
// Own props
|
|
32
73
|
speed = defaultPreset.params.speed,
|
|
@@ -69,7 +110,10 @@ const Metaballs = memo(function MetaballsImpl({
|
|
|
69
110
|
}, colorPropsAreEqual);
|
|
70
111
|
export {
|
|
71
112
|
Metaballs,
|
|
113
|
+
backgroundPreset,
|
|
72
114
|
defaultPreset,
|
|
73
|
-
|
|
115
|
+
inkDropsPreset,
|
|
116
|
+
metaballsPresets,
|
|
117
|
+
metallicPreset
|
|
74
118
|
};
|
|
75
119
|
//# sourceMappingURL=metaballs.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/metaballs.tsx"],
|
|
4
|
-
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n defaultObjectSizing,\n getShaderColorFromString,\n metaballsFragmentShader,\n ShaderFitOptions,\n type MetaballsParams,\n type MetaballsUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface MetaballsProps extends ShaderComponentProps, MetaballsParams {}\n\ntype MetaballsPreset = ShaderPreset<MetaballsParams>;\n\nexport const defaultPreset: MetaballsPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n scale: 1,\n speed: 1,\n frame: 0,\n colorBack: '#103086',\n colors: ['#FFC802', '#FF5601', '#FFC206'],\n count: 7,\n size: 0.75,\n },\n};\n\nexport const metaballsPresets: MetaballsPreset[] = [defaultPreset];\n\nexport const Metaballs: React.FC<MetaballsProps> = memo(function MetaballsImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorBack = defaultPreset.params.colorBack,\n colors = defaultPreset.params.colors,\n size = defaultPreset.params.size,\n count = defaultPreset.params.count,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n rotation = defaultPreset.params.rotation,\n scale = defaultPreset.params.scale,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n worldWidth = defaultPreset.params.worldWidth,\n worldHeight = defaultPreset.params.worldHeight,\n ...props\n}: MetaballsProps) {\n const uniforms = {\n // Own uniforms\n u_colorBack: getShaderColorFromString(colorBack),\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_size: size,\n u_count: count,\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_rotation: rotation,\n u_scale: scale,\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_worldWidth: worldWidth,\n u_worldHeight: worldHeight,\n } satisfies MetaballsUniforms;\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={metaballsFragmentShader} uniforms={uniforms} />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n defaultObjectSizing,\n getShaderColorFromString,\n metaballsFragmentShader,\n ShaderFitOptions,\n type MetaballsParams,\n type MetaballsUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface MetaballsProps extends ShaderComponentProps, MetaballsParams {}\n\ntype MetaballsPreset = ShaderPreset<MetaballsParams>;\n\nexport const defaultPreset: MetaballsPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n scale: 1,\n speed: 1,\n frame: 0,\n colorBack: '#103086',\n colors: ['#FFC802', '#FF5601', '#FFC206'],\n count: 7,\n size: 0.75,\n },\n};\n\nexport const inkDropsPreset: MetaballsPreset = {\n name: 'Ink Drops',\n params: {\n ...defaultObjectSizing,\n scale: 1,\n speed: 2,\n frame: 0,\n colorBack: '#ffffff00',\n colors: ['#000000'],\n count: 18,\n size: 0.1,\n },\n};\n\nexport const backgroundPreset: MetaballsPreset = {\n name: 'Background',\n params: {\n ...defaultObjectSizing,\n speed: 0.5,\n frame: 0,\n colors: ['#ae00ff', '#00ff95', '#ffc105'],\n colorBack: '#2a273f',\n count: 13,\n size: 0.81,\n scale: 4.0,\n rotation: 0,\n offsetX: -0.3,\n },\n};\n\nexport const metallicPreset: MetaballsPreset = {\n name: 'Metallic',\n params: {\n ...defaultObjectSizing,\n speed: 2.0,\n frame: 0,\n colors: ['#000000bb', '#00000000', '#33ffaa54'],\n colorBack: '#003e6b',\n count: 10,\n size: 0.81,\n scale: 1.7,\n },\n};\n\nexport const metaballsPresets: MetaballsPreset[] = [defaultPreset, inkDropsPreset, metallicPreset, backgroundPreset];\n\nexport const Metaballs: React.FC<MetaballsProps> = memo(function MetaballsImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorBack = defaultPreset.params.colorBack,\n colors = defaultPreset.params.colors,\n size = defaultPreset.params.size,\n count = defaultPreset.params.count,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n rotation = defaultPreset.params.rotation,\n scale = defaultPreset.params.scale,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n worldWidth = defaultPreset.params.worldWidth,\n worldHeight = defaultPreset.params.worldHeight,\n ...props\n}: MetaballsProps) {\n const uniforms = {\n // Own uniforms\n u_colorBack: getShaderColorFromString(colorBack),\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_size: size,\n u_count: count,\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_rotation: rotation,\n u_scale: scale,\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_worldWidth: worldWidth,\n u_worldHeight: worldHeight,\n } satisfies MetaballsUniforms;\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={metaballsFragmentShader} uniforms={uniforms} />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
+
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AA4GH;AAtGG,MAAM,gBAAiC;AAAA,EAC5C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,IACxC,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;AAEO,MAAM,iBAAkC;AAAA,EAC7C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,QAAQ,CAAC,SAAS;AAAA,IAClB,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;AAEO,MAAM,mBAAoC;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,IACxC,WAAW;AAAA,IACX,OAAO;AAAA,IACP,MAAM;AAAA,IACN,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,EACX;AACF;AAEO,MAAM,iBAAkC;AAAA,EAC7C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,aAAa,aAAa,WAAW;AAAA,IAC9C,WAAW;AAAA,IACX,OAAO;AAAA,IACP,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AACF;AAEO,MAAM,mBAAsC,CAAC,eAAe,gBAAgB,gBAAgB,gBAAgB;AAE5G,MAAM,YAAsC,KAAK,SAAS,cAAc;AAAA;AAAA,EAE7E,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,YAAY,cAAc,OAAO;AAAA,EACjC,SAAS,cAAc,OAAO;AAAA,EAC9B,OAAO,cAAc,OAAO;AAAA,EAC5B,QAAQ,cAAc,OAAO;AAAA;AAAA,EAG7B,MAAM,cAAc,OAAO;AAAA,EAC3B,WAAW,cAAc,OAAO;AAAA,EAChC,QAAQ,cAAc,OAAO;AAAA,EAC7B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,aAAa,cAAc,OAAO;AAAA,EAClC,cAAc,cAAc,OAAO;AAAA,EACnC,GAAG;AACL,GAAmB;AACjB,QAAM,WAAW;AAAA;AAAA,IAEf,aAAa,yBAAyB,SAAS;AAAA,IAC/C,UAAU,OAAO,IAAI,wBAAwB;AAAA,IAC7C,eAAe,OAAO;AAAA,IACtB,QAAQ;AAAA,IACR,SAAS;AAAA;AAAA,IAGT,OAAO,iBAAiB,GAAG;AAAA,IAC3B,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,cAAc;AAAA,IACd,eAAe;AAAA,EACjB;AAEA,SACE,oBAAC,eAAa,GAAG,OAAO,OAAc,OAAc,gBAAgB,yBAAyB,UAAoB;AAErH,GAAG,kBAAkB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,6 +4,9 @@ export interface NeuroNoiseProps extends ShaderComponentProps, NeuroNoiseParams
|
|
|
4
4
|
}
|
|
5
5
|
type NeuroNoisePreset = ShaderPreset<NeuroNoiseParams>;
|
|
6
6
|
export declare const defaultPreset: NeuroNoisePreset;
|
|
7
|
+
export declare const sensationPreset: NeuroNoisePreset;
|
|
8
|
+
export declare const bloodstreamPreset: NeuroNoisePreset;
|
|
9
|
+
export declare const ghostPreset: NeuroNoisePreset;
|
|
7
10
|
export declare const neuroNoisePresets: NeuroNoisePreset[];
|
|
8
11
|
export declare const NeuroNoise: React.FC<NeuroNoiseProps>;
|
|
9
12
|
export {};
|