@paper-design/shaders-react 0.0.35-backbuffer-experiment.2 → 0.0.35-backbuffer-experiment.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. package/dist/color-props-are-equal.d.ts +6 -0
  2. package/dist/color-props-are-equal.js +34 -0
  3. package/dist/color-props-are-equal.js.map +7 -0
  4. package/dist/index.d.ts +59 -0
  5. package/dist/index.js +91 -0
  6. package/dist/index.js.map +7 -0
  7. package/dist/shader-mount.d.ts +26 -0
  8. package/dist/shader-mount.js +126 -0
  9. package/dist/shader-mount.js.map +7 -0
  10. package/dist/shaders/dithering.d.ts +15 -0
  11. package/dist/shaders/dithering.js +170 -0
  12. package/dist/shaders/dithering.js.map +7 -0
  13. package/dist/shaders/dot-grid.d.ts +10 -0
  14. package/dist/shaders/dot-grid.js +230 -0
  15. package/dist/shaders/dot-grid.js.map +7 -0
  16. package/dist/shaders/dot-orbit.d.ts +9 -0
  17. package/dist/shaders/dot-orbit.js +80 -0
  18. package/dist/shaders/dot-orbit.js.map +7 -0
  19. package/dist/shaders/god-rays.d.ts +13 -0
  20. package/dist/shaders/god-rays.js +167 -0
  21. package/dist/shaders/god-rays.js.map +7 -0
  22. package/dist/shaders/grain-gradient.d.ts +16 -0
  23. package/dist/shaders/grain-gradient.js +208 -0
  24. package/dist/shaders/grain-gradient.js.map +7 -0
  25. package/dist/shaders/liquid-metal.d.ts +12 -0
  26. package/dist/shaders/liquid-metal.js +156 -0
  27. package/dist/shaders/liquid-metal.js.map +7 -0
  28. package/dist/shaders/mesh-gradient.d.ts +11 -0
  29. package/dist/shaders/mesh-gradient.js +104 -0
  30. package/dist/shaders/mesh-gradient.js.map +7 -0
  31. package/dist/shaders/metaballs.d.ts +9 -0
  32. package/dist/shaders/metaballs.js +75 -0
  33. package/dist/shaders/metaballs.js.map +7 -0
  34. package/dist/shaders/neuro-noise.d.ts +9 -0
  35. package/dist/shaders/neuro-noise.js +76 -0
  36. package/dist/shaders/neuro-noise.js.map +7 -0
  37. package/dist/shaders/perlin-noise.d.ts +14 -0
  38. package/dist/shaders/perlin-noise.js +183 -0
  39. package/dist/shaders/perlin-noise.js.map +7 -0
  40. package/dist/shaders/pulsing-border.d.ts +11 -0
  41. package/dist/shaders/pulsing-border.js +153 -0
  42. package/dist/shaders/pulsing-border.js.map +7 -0
  43. package/dist/shaders/simplex-noise.d.ts +9 -0
  44. package/dist/shaders/simplex-noise.js +80 -0
  45. package/dist/shaders/simplex-noise.js.map +7 -0
  46. package/dist/shaders/smoke-ring.d.ts +12 -0
  47. package/dist/shaders/smoke-ring.js +134 -0
  48. package/dist/shaders/smoke-ring.js.map +7 -0
  49. package/dist/shaders/spiral.d.ts +15 -0
  50. package/dist/shaders/spiral.js +218 -0
  51. package/dist/shaders/spiral.js.map +7 -0
  52. package/dist/shaders/swirl.d.ts +12 -0
  53. package/dist/shaders/swirl.js +136 -0
  54. package/dist/shaders/swirl.js.map +7 -0
  55. package/dist/shaders/voronoi.d.ts +10 -0
  56. package/dist/shaders/voronoi.js +102 -0
  57. package/dist/shaders/voronoi.js.map +7 -0
  58. package/dist/shaders/warp.d.ts +19 -0
  59. package/dist/shaders/warp.js +294 -0
  60. package/dist/shaders/warp.js.map +7 -0
  61. package/dist/shaders/waves.d.ts +14 -0
  62. package/dist/shaders/waves.js +178 -0
  63. package/dist/shaders/waves.js.map +7 -0
  64. package/dist/use-merge-refs.d.ts +6 -0
  65. package/dist/use-merge-refs.js +48 -0
  66. package/dist/use-merge-refs.js.map +7 -0
  67. package/package.json +3 -3
@@ -0,0 +1,208 @@
1
+ /* * * * * * * * * * * * * * * * * * * * * * * * * * * *
2
+ * Paper Shaders *
3
+ * https://github.com/paper-design/shaders *
4
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
5
+
6
+ import { memo } from "react";
7
+ import { ShaderMount } from "../shader-mount";
8
+ import {
9
+ getShaderColorFromString,
10
+ grainGradientFragmentShader,
11
+ ShaderFitOptions,
12
+ defaultPatternSizing,
13
+ defaultObjectSizing,
14
+ GrainGradientShapes
15
+ } from "@paper-design/shaders";
16
+ import { jsx } from "react/jsx-runtime";
17
+ const defaultPreset = {
18
+ name: "Default",
19
+ params: {
20
+ ...defaultPatternSizing,
21
+ speed: 1,
22
+ frame: 0,
23
+ colorBack: "#000a0f",
24
+ colors: ["#c4730b", "#bdad5f", "#d8ccc7"],
25
+ softness: 0.7,
26
+ intensity: 0.15,
27
+ noise: 0.5,
28
+ shape: "wave"
29
+ }
30
+ };
31
+ const dotsPreset = {
32
+ name: "Dots",
33
+ params: {
34
+ ...defaultPatternSizing,
35
+ scale: 0.6,
36
+ speed: 1,
37
+ frame: 0,
38
+ colorBack: "#0a0000",
39
+ colors: ["#6f0000", "#0080ff", "#f2ebc9"],
40
+ softness: 0.75,
41
+ intensity: 0.15,
42
+ noise: 0.7,
43
+ shape: "dots"
44
+ }
45
+ };
46
+ const truchetPreset = {
47
+ name: "Truchet",
48
+ params: {
49
+ ...defaultPatternSizing,
50
+ speed: 1,
51
+ frame: 0,
52
+ colorBack: "#0a0000",
53
+ colors: ["#6f2200", "#eabb7c", "#39b523"],
54
+ softness: 0,
55
+ intensity: 0.2,
56
+ noise: 1,
57
+ shape: "truchet"
58
+ }
59
+ };
60
+ const cornersPreset = {
61
+ name: "Corners",
62
+ params: {
63
+ ...defaultObjectSizing,
64
+ speed: 1,
65
+ frame: 0,
66
+ colorBack: "#031018",
67
+ colors: ["#00aeff", "#00ffcc", "#ffc800"],
68
+ softness: 0.4,
69
+ intensity: 0.35,
70
+ noise: 0.35,
71
+ shape: "corners"
72
+ }
73
+ };
74
+ const ripplePreset = {
75
+ name: "Ripple",
76
+ params: {
77
+ ...defaultObjectSizing,
78
+ scale: 0.5,
79
+ speed: 1,
80
+ frame: 0,
81
+ colorBack: "#140a00",
82
+ colors: ["#6f2d00", "#88ddae", "#2c0b1d"],
83
+ softness: 0.5,
84
+ intensity: 0.5,
85
+ noise: 0.5,
86
+ shape: "ripple"
87
+ }
88
+ };
89
+ const blobPreset = {
90
+ name: "Blob",
91
+ params: {
92
+ ...defaultObjectSizing,
93
+ scale: 1.3,
94
+ speed: 1,
95
+ frame: 0,
96
+ colorBack: "#0f0e18",
97
+ colors: ["#3e6172", "#a49b74", "#568c50"],
98
+ softness: 0,
99
+ intensity: 0.15,
100
+ noise: 0.5,
101
+ shape: "blob"
102
+ }
103
+ };
104
+ const spherePreset = {
105
+ name: "Sphere",
106
+ params: {
107
+ ...defaultObjectSizing,
108
+ speed: 1,
109
+ frame: 0,
110
+ colorBack: "#000319",
111
+ colors: ["#0059b3", "#37f5f5", "#18c039"],
112
+ softness: 1,
113
+ intensity: 0.15,
114
+ noise: 0.5,
115
+ shape: "sphere"
116
+ }
117
+ };
118
+ const moonPreset = {
119
+ name: "Moon",
120
+ params: {
121
+ ...defaultObjectSizing,
122
+ scale: 0.6,
123
+ speed: 1,
124
+ frame: 0,
125
+ colorBack: "#000000",
126
+ colors: ["#000000", "#28272d", "#ffeccc"],
127
+ softness: 1,
128
+ intensity: 0.56,
129
+ noise: 1,
130
+ shape: "sphere"
131
+ }
132
+ };
133
+ const grainGradientPresets = [
134
+ cornersPreset,
135
+ defaultPreset,
136
+ dotsPreset,
137
+ truchetPreset,
138
+ ripplePreset,
139
+ blobPreset,
140
+ spherePreset,
141
+ moonPreset
142
+ ];
143
+ const GrainGradient = memo(function GrainGradientImpl({
144
+ // Own props
145
+ speed = defaultPreset.params.speed,
146
+ frame = defaultPreset.params.frame,
147
+ colorBack = defaultPreset.params.colorBack,
148
+ colors = defaultPreset.params.colors,
149
+ softness = defaultPreset.params.softness,
150
+ intensity = defaultPreset.params.intensity,
151
+ noise = defaultPreset.params.noise,
152
+ shape = defaultPreset.params.shape,
153
+ // Sizing props
154
+ fit = defaultPreset.params.fit,
155
+ scale = defaultPreset.params.scale,
156
+ rotation = defaultPreset.params.rotation,
157
+ originX = defaultPreset.params.originX,
158
+ originY = defaultPreset.params.originY,
159
+ offsetX = defaultPreset.params.offsetX,
160
+ offsetY = defaultPreset.params.offsetY,
161
+ worldWidth = defaultPreset.params.worldWidth,
162
+ worldHeight = defaultPreset.params.worldHeight,
163
+ ...props
164
+ }) {
165
+ const uniforms = {
166
+ // Own uniforms
167
+ u_colorBack: getShaderColorFromString(colorBack),
168
+ u_colors: colors.map(getShaderColorFromString),
169
+ u_colorsCount: colors.length,
170
+ u_softness: softness,
171
+ u_intensity: intensity,
172
+ u_noise: noise,
173
+ u_shape: GrainGradientShapes[shape],
174
+ // Sizing uniforms
175
+ u_fit: ShaderFitOptions[fit],
176
+ u_scale: scale,
177
+ u_rotation: rotation,
178
+ u_offsetX: offsetX,
179
+ u_offsetY: offsetY,
180
+ u_originX: originX,
181
+ u_originY: originY,
182
+ u_worldWidth: worldWidth,
183
+ u_worldHeight: worldHeight
184
+ };
185
+ return /* @__PURE__ */ jsx(
186
+ ShaderMount,
187
+ {
188
+ ...props,
189
+ speed,
190
+ frame,
191
+ fragmentShader: grainGradientFragmentShader,
192
+ uniforms
193
+ }
194
+ );
195
+ });
196
+ export {
197
+ GrainGradient,
198
+ blobPreset,
199
+ cornersPreset,
200
+ defaultPreset,
201
+ dotsPreset,
202
+ grainGradientPresets,
203
+ moonPreset,
204
+ ripplePreset,
205
+ spherePreset,
206
+ truchetPreset
207
+ };
208
+ //# sourceMappingURL=grain-gradient.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/shaders/grain-gradient.tsx"],
4
+ "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount';\nimport {\n getShaderColorFromString,\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\nexport 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'],\n softness: 0.75,\n intensity: 0.15,\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 cornersPreset: GrainGradientPreset = {\n name: 'Corners',\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 spherePreset: GrainGradientPreset = {\n name: 'Sphere',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colorBack: '#000319',\n colors: ['#0059b3', '#37f5f5', '#18c039'],\n softness: 1,\n intensity: 0.15,\n noise: 0.5,\n shape: 'sphere',\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 cornersPreset,\n defaultPreset,\n dotsPreset,\n truchetPreset,\n ripplePreset,\n blobPreset,\n spherePreset,\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}) {\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\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
+ "names": []
7
+ }
@@ -0,0 +1,12 @@
1
+ import { type ShaderComponentProps } from '../shader-mount';
2
+ import { type LiquidMetalParams, type ShaderPreset } from '@paper-design/shaders';
3
+ export interface LiquidMetalProps extends ShaderComponentProps, LiquidMetalParams {
4
+ }
5
+ type LiquidMetalPreset = ShaderPreset<LiquidMetalParams>;
6
+ export declare const defaultPreset: LiquidMetalPreset;
7
+ export declare const fullScreenPreset: LiquidMetalPreset;
8
+ export declare const spherePreset: LiquidMetalPreset;
9
+ export declare const dropsPreset: LiquidMetalPreset;
10
+ export declare const liquidMetalPresets: LiquidMetalPreset[];
11
+ export declare const LiquidMetal: React.FC<LiquidMetalProps>;
12
+ export {};
@@ -0,0 +1,156 @@
1
+ /* * * * * * * * * * * * * * * * * * * * * * * * * * * *
2
+ * Paper Shaders *
3
+ * https://github.com/paper-design/shaders *
4
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
5
+
6
+ import { memo } from "react";
7
+ import { ShaderMount } from "../shader-mount";
8
+ import { colorPropsAreEqual } from "../color-props-are-equal";
9
+ import {
10
+ liquidMetalFragmentShader,
11
+ ShaderFitOptions,
12
+ defaultObjectSizing,
13
+ getShaderColorFromString,
14
+ LiquidMetalShapes
15
+ } from "@paper-design/shaders";
16
+ import { jsx } from "react/jsx-runtime";
17
+ const defaultPreset = {
18
+ name: "Default",
19
+ params: {
20
+ ...defaultObjectSizing,
21
+ speed: 1,
22
+ frame: 0,
23
+ colorBack: "#ffffff",
24
+ colorTint: "#ffffff",
25
+ softness: 0.3,
26
+ repetition: 3,
27
+ shiftRed: 0.3,
28
+ shiftBlue: 0.3,
29
+ distortion: 0.3,
30
+ contour: 0.88,
31
+ shape: "metaballs"
32
+ }
33
+ };
34
+ const fullScreenPreset = {
35
+ name: "Full Screen",
36
+ params: {
37
+ ...defaultObjectSizing,
38
+ speed: 1,
39
+ frame: 0,
40
+ colorBack: "#111111",
41
+ colorTint: "#ffffff",
42
+ softness: 0.3,
43
+ repetition: 3,
44
+ shiftRed: 0.3,
45
+ shiftBlue: 0.3,
46
+ distortion: 0.07,
47
+ contour: 0,
48
+ shape: "none",
49
+ worldWidth: 0,
50
+ worldHeight: 0
51
+ }
52
+ };
53
+ const spherePreset = {
54
+ name: "Sphere",
55
+ params: {
56
+ ...defaultObjectSizing,
57
+ scale: 0.7,
58
+ speed: 2,
59
+ frame: 0,
60
+ colorBack: "#ffffff",
61
+ colorTint: "#d1e0ff",
62
+ softness: 0.45,
63
+ repetition: 4,
64
+ shiftRed: 1,
65
+ shiftBlue: 0.3,
66
+ distortion: 0.1,
67
+ contour: 0.4,
68
+ shape: "circle"
69
+ }
70
+ };
71
+ const dropsPreset = {
72
+ name: "Drops",
73
+ params: {
74
+ ...defaultObjectSizing,
75
+ scale: 2.2,
76
+ speed: 1,
77
+ frame: 0,
78
+ colorBack: "#00042e",
79
+ colorTint: "#5b4dc7",
80
+ softness: 0.45,
81
+ repetition: 4,
82
+ shiftRed: -0.5,
83
+ shiftBlue: -1,
84
+ distortion: 0.1,
85
+ contour: 1,
86
+ shape: "metaballs"
87
+ }
88
+ };
89
+ const liquidMetalPresets = [defaultPreset, spherePreset, dropsPreset, fullScreenPreset];
90
+ const LiquidMetal = memo(function LiquidMetalImpl({
91
+ // Own props
92
+ colorBack = defaultPreset.params.colorBack,
93
+ colorTint = defaultPreset.params.colorTint,
94
+ speed = defaultPreset.params.speed,
95
+ frame = defaultPreset.params.frame,
96
+ softness = defaultPreset.params.softness,
97
+ repetition = defaultPreset.params.repetition,
98
+ shiftRed = defaultPreset.params.shiftRed,
99
+ shiftBlue = defaultPreset.params.shiftBlue,
100
+ distortion = defaultPreset.params.distortion,
101
+ contour = defaultPreset.params.contour,
102
+ shape = defaultPreset.params.shape,
103
+ // Sizing props
104
+ fit = defaultPreset.params.fit,
105
+ scale = defaultPreset.params.scale,
106
+ rotation = defaultPreset.params.rotation,
107
+ originX = defaultPreset.params.originX,
108
+ originY = defaultPreset.params.originY,
109
+ offsetX = defaultPreset.params.offsetX,
110
+ offsetY = defaultPreset.params.offsetY,
111
+ worldWidth = defaultPreset.params.worldWidth,
112
+ worldHeight = defaultPreset.params.worldHeight,
113
+ ...props
114
+ }) {
115
+ const uniforms = {
116
+ // Own uniforms
117
+ u_colorBack: getShaderColorFromString(colorBack),
118
+ u_colorTint: getShaderColorFromString(colorTint),
119
+ u_softness: softness,
120
+ u_repetition: repetition,
121
+ u_shiftRed: shiftRed,
122
+ u_shiftBlue: shiftBlue,
123
+ u_distortion: distortion,
124
+ u_contour: contour,
125
+ u_shape: LiquidMetalShapes[shape],
126
+ // Sizing uniforms
127
+ u_fit: ShaderFitOptions[fit],
128
+ u_scale: scale,
129
+ u_rotation: rotation,
130
+ u_offsetX: offsetX,
131
+ u_offsetY: offsetY,
132
+ u_originX: originX,
133
+ u_originY: originY,
134
+ u_worldWidth: worldWidth,
135
+ u_worldHeight: worldHeight
136
+ };
137
+ return /* @__PURE__ */ jsx(
138
+ ShaderMount,
139
+ {
140
+ ...props,
141
+ speed,
142
+ frame,
143
+ fragmentShader: liquidMetalFragmentShader,
144
+ uniforms
145
+ }
146
+ );
147
+ }, colorPropsAreEqual);
148
+ export {
149
+ LiquidMetal,
150
+ defaultPreset,
151
+ dropsPreset,
152
+ fullScreenPreset,
153
+ liquidMetalPresets,
154
+ spherePreset
155
+ };
156
+ //# sourceMappingURL=liquid-metal.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/shaders/liquid-metal.tsx"],
4
+ "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount';\nimport { colorPropsAreEqual } from '../color-props-are-equal';\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: '#ffffff',\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: '#111111',\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: '#ffffff',\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
+ "mappings": "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",
6
+ "names": []
7
+ }
@@ -0,0 +1,11 @@
1
+ import { type ShaderComponentProps } from '../shader-mount';
2
+ import { type MeshGradientParams, type ShaderPreset } from '@paper-design/shaders';
3
+ export interface MeshGradientProps extends ShaderComponentProps, MeshGradientParams {
4
+ }
5
+ type MeshGradientPreset = ShaderPreset<MeshGradientParams>;
6
+ export declare const defaultPreset: MeshGradientPreset;
7
+ export declare const purplePreset: MeshGradientPreset;
8
+ export declare const beachPreset: MeshGradientPreset;
9
+ export declare const meshGradientPresets: MeshGradientPreset[];
10
+ export declare const MeshGradient: React.FC<MeshGradientProps>;
11
+ export {};
@@ -0,0 +1,104 @@
1
+ /* * * * * * * * * * * * * * * * * * * * * * * * * * * *
2
+ * Paper Shaders *
3
+ * https://github.com/paper-design/shaders *
4
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
5
+
6
+ import { memo } from "react";
7
+ import { ShaderMount } from "../shader-mount";
8
+ import { colorPropsAreEqual } from "../color-props-are-equal";
9
+ import {
10
+ defaultObjectSizing,
11
+ getShaderColorFromString,
12
+ meshGradientFragmentShader,
13
+ ShaderFitOptions
14
+ } from "@paper-design/shaders";
15
+ import { jsx } from "react/jsx-runtime";
16
+ const defaultPreset = {
17
+ name: "Default",
18
+ params: {
19
+ ...defaultObjectSizing,
20
+ speed: 1,
21
+ frame: 4e4,
22
+ colors: ["#5100ff", "#00ff80", "#ffcc00", "#ea00ff"],
23
+ distortion: 0.8,
24
+ swirl: 0.1
25
+ }
26
+ };
27
+ const purplePreset = {
28
+ name: "Purple",
29
+ params: {
30
+ ...defaultObjectSizing,
31
+ speed: 0.6,
32
+ frame: 100,
33
+ colors: ["#aaa7d7", "#3c2b8e", "#f4eabb", "#c99cd5"],
34
+ distortion: 0.3,
35
+ swirl: 0.5
36
+ }
37
+ };
38
+ const beachPreset = {
39
+ name: "Beach",
40
+ params: {
41
+ ...defaultObjectSizing,
42
+ speed: 0.1,
43
+ frame: 0,
44
+ colors: ["#bcecf6", "#80c3e4", "#f3eccb", "#f3d987"],
45
+ distortion: 0.8,
46
+ swirl: 0.35
47
+ }
48
+ };
49
+ const meshGradientPresets = [defaultPreset, purplePreset, beachPreset];
50
+ const MeshGradient = memo(function MeshGradientImpl({
51
+ // Own props
52
+ speed = defaultPreset.params.speed,
53
+ frame = defaultPreset.params.frame,
54
+ colors = defaultPreset.params.colors,
55
+ distortion = defaultPreset.params.distortion,
56
+ swirl = defaultPreset.params.swirl,
57
+ // Sizing props
58
+ fit = defaultPreset.params.fit,
59
+ rotation = defaultPreset.params.rotation,
60
+ scale = defaultPreset.params.scale,
61
+ originX = defaultPreset.params.originX,
62
+ originY = defaultPreset.params.originY,
63
+ offsetX = defaultPreset.params.offsetX,
64
+ offsetY = defaultPreset.params.offsetY,
65
+ worldWidth = defaultPreset.params.worldWidth,
66
+ worldHeight = defaultPreset.params.worldHeight,
67
+ ...props
68
+ }) {
69
+ const uniforms = {
70
+ // Own uniforms
71
+ u_colors: colors.map(getShaderColorFromString),
72
+ u_colorsCount: colors.length,
73
+ u_distortion: distortion,
74
+ u_swirl: swirl,
75
+ // Sizing uniforms
76
+ u_fit: ShaderFitOptions[fit],
77
+ u_rotation: rotation,
78
+ u_scale: scale,
79
+ u_offsetX: offsetX,
80
+ u_offsetY: offsetY,
81
+ u_originX: originX,
82
+ u_originY: originY,
83
+ u_worldWidth: worldWidth,
84
+ u_worldHeight: worldHeight
85
+ };
86
+ return /* @__PURE__ */ jsx(
87
+ ShaderMount,
88
+ {
89
+ ...props,
90
+ speed,
91
+ frame,
92
+ fragmentShader: meshGradientFragmentShader,
93
+ uniforms
94
+ }
95
+ );
96
+ }, colorPropsAreEqual);
97
+ export {
98
+ MeshGradient,
99
+ beachPreset,
100
+ defaultPreset,
101
+ meshGradientPresets,
102
+ purplePreset
103
+ };
104
+ //# sourceMappingURL=mesh-gradient.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/shaders/mesh-gradient.tsx"],
4
+ "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount';\nimport { colorPropsAreEqual } from '../color-props-are-equal';\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: 40000,\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: 100,\n colors: ['#aaa7d7', '#3c2b8e', '#f4eabb', '#c99cd5'],\n distortion: 0.3,\n swirl: 0.5,\n },\n};\n\nexport const beachPreset: MeshGradientPreset = {\n name: 'Beach',\n params: {\n ...defaultObjectSizing,\n speed: 0.1,\n frame: 0,\n colors: ['#bcecf6', '#80c3e4', '#f3eccb', '#f3d987'],\n distortion: 0.8,\n swirl: 0.35,\n },\n};\n\nexport const meshGradientPresets: MeshGradientPreset[] = [defaultPreset, 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;AAoFH;AA9EG,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,WAAW,WAAW,SAAS;AAAA,IACnD,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,sBAA4C,CAAC,eAAe,cAAc,WAAW;AAE3F,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
+ "names": []
7
+ }
@@ -0,0 +1,9 @@
1
+ import { type ShaderComponentProps } from '../shader-mount';
2
+ import { type MetaballsParams, type ShaderPreset } from '@paper-design/shaders';
3
+ export interface MetaballsProps extends ShaderComponentProps, MetaballsParams {
4
+ }
5
+ type MetaballsPreset = ShaderPreset<MetaballsParams>;
6
+ export declare const defaultPreset: MetaballsPreset;
7
+ export declare const metaballsPresets: MetaballsPreset[];
8
+ export declare const Metaballs: React.FC<MetaballsProps>;
9
+ export {};
@@ -0,0 +1,75 @@
1
+ /* * * * * * * * * * * * * * * * * * * * * * * * * * * *
2
+ * Paper Shaders *
3
+ * https://github.com/paper-design/shaders *
4
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
5
+
6
+ import { memo } from "react";
7
+ import { ShaderMount } from "../shader-mount";
8
+ import { colorPropsAreEqual } from "../color-props-are-equal";
9
+ import {
10
+ defaultObjectSizing,
11
+ getShaderColorFromString,
12
+ metaballsFragmentShader,
13
+ ShaderFitOptions
14
+ } from "@paper-design/shaders";
15
+ import { jsx } from "react/jsx-runtime";
16
+ const defaultPreset = {
17
+ name: "Default",
18
+ params: {
19
+ ...defaultObjectSizing,
20
+ scale: 1,
21
+ speed: 1,
22
+ frame: 0,
23
+ colorBack: "#ffffff",
24
+ colors: ["#b399ff", "#99ffc4", "#ffe699", "#e099ff"],
25
+ count: 7,
26
+ size: 1
27
+ }
28
+ };
29
+ const metaballsPresets = [defaultPreset];
30
+ const Metaballs = memo(function MetaballsImpl({
31
+ // Own props
32
+ speed = defaultPreset.params.speed,
33
+ frame = defaultPreset.params.frame,
34
+ colorBack = defaultPreset.params.colorBack,
35
+ colors = defaultPreset.params.colors,
36
+ size = defaultPreset.params.size,
37
+ count = defaultPreset.params.count,
38
+ // Sizing props
39
+ fit = defaultPreset.params.fit,
40
+ rotation = defaultPreset.params.rotation,
41
+ scale = defaultPreset.params.scale,
42
+ originX = defaultPreset.params.originX,
43
+ originY = defaultPreset.params.originY,
44
+ offsetX = defaultPreset.params.offsetX,
45
+ offsetY = defaultPreset.params.offsetY,
46
+ worldWidth = defaultPreset.params.worldWidth,
47
+ worldHeight = defaultPreset.params.worldHeight,
48
+ ...props
49
+ }) {
50
+ const uniforms = {
51
+ // Own uniforms
52
+ u_colorBack: getShaderColorFromString(colorBack),
53
+ u_colors: colors.map(getShaderColorFromString),
54
+ u_colorsCount: colors.length,
55
+ u_size: size,
56
+ u_count: count,
57
+ // Sizing uniforms
58
+ u_fit: ShaderFitOptions[fit],
59
+ u_rotation: rotation,
60
+ u_scale: scale,
61
+ u_offsetX: offsetX,
62
+ u_offsetY: offsetY,
63
+ u_originX: originX,
64
+ u_originY: originY,
65
+ u_worldWidth: worldWidth,
66
+ u_worldHeight: worldHeight
67
+ };
68
+ return /* @__PURE__ */ jsx(ShaderMount, { ...props, speed, frame, fragmentShader: metaballsFragmentShader, uniforms });
69
+ }, colorPropsAreEqual);
70
+ export {
71
+ Metaballs,
72
+ defaultPreset,
73
+ metaballsPresets
74
+ };
75
+ //# sourceMappingURL=metaballs.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/shaders/metaballs.tsx"],
4
+ "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount';\nimport { colorPropsAreEqual } from '../color-props-are-equal';\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: '#ffffff',\n colors: ['#b399ff', '#99ffc4', '#ffe699', '#e099ff'],\n count: 7,\n size: 1,\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;AAgEH;AA1DG,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,WAAW,SAAS;AAAA,IACnD,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;AAEO,MAAM,mBAAsC,CAAC,aAAa;AAE1D,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
+ "names": []
7
+ }
@@ -0,0 +1,9 @@
1
+ import { type ShaderComponentProps } from '../shader-mount';
2
+ import { type NeuroNoiseParams, type ShaderPreset } from '@paper-design/shaders';
3
+ export interface NeuroNoiseProps extends ShaderComponentProps, NeuroNoiseParams {
4
+ }
5
+ type NeuroNoisePreset = ShaderPreset<NeuroNoiseParams>;
6
+ export declare const defaultPreset: NeuroNoisePreset;
7
+ export declare const neuroNoisePresets: NeuroNoisePreset[];
8
+ export declare const NeuroNoise: React.FC<NeuroNoiseProps>;
9
+ export {};