@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,102 @@
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
+ defaultPatternSizing,
11
+ getShaderColorFromString,
12
+ getShaderNoiseTexture,
13
+ voronoiFragmentShader,
14
+ ShaderFitOptions
15
+ } from "@paper-design/shaders";
16
+ import { jsx } from "react/jsx-runtime";
17
+ const defaultPreset = {
18
+ name: "Default",
19
+ params: {
20
+ ...defaultPatternSizing,
21
+ speed: 0.5,
22
+ frame: 0,
23
+ colors: ["#e65c1a", "#e6c31a", "#1aace6"],
24
+ stepsPerColor: 1,
25
+ colorGlow: "#5500ff",
26
+ colorGap: "#ffffff",
27
+ distortion: 0.42,
28
+ gap: 0.06,
29
+ glow: 0
30
+ }
31
+ };
32
+ const shadowPreset = {
33
+ name: "Shadow",
34
+ params: {
35
+ ...defaultPatternSizing,
36
+ speed: 0.5,
37
+ frame: 0,
38
+ colors: ["#faf7fe", "#fefdf7", "#fbf7fe"],
39
+ stepsPerColor: 1,
40
+ colorGlow: "#76587a",
41
+ colorGap: "#ffffff",
42
+ distortion: 0.23,
43
+ gap: 0,
44
+ glow: 0.8
45
+ }
46
+ };
47
+ const voronoiPresets = [defaultPreset, shadowPreset];
48
+ const Voronoi = memo(function VoronoiImpl({
49
+ // Own props
50
+ speed = defaultPreset.params.speed,
51
+ frame = defaultPreset.params.frame,
52
+ colors = defaultPreset.params.colors,
53
+ stepsPerColor = defaultPreset.params.stepsPerColor,
54
+ colorGlow = defaultPreset.params.colorGlow,
55
+ colorGap = defaultPreset.params.colorGap,
56
+ distortion = defaultPreset.params.distortion,
57
+ gap = defaultPreset.params.gap,
58
+ glow = defaultPreset.params.glow,
59
+ // Sizing props
60
+ fit = defaultPreset.params.fit,
61
+ scale = defaultPreset.params.scale,
62
+ rotation = defaultPreset.params.rotation,
63
+ originX = defaultPreset.params.originX,
64
+ originY = defaultPreset.params.originY,
65
+ offsetX = defaultPreset.params.offsetX,
66
+ offsetY = defaultPreset.params.offsetY,
67
+ worldWidth = defaultPreset.params.worldWidth,
68
+ worldHeight = defaultPreset.params.worldHeight,
69
+ ...props
70
+ }) {
71
+ const noiseTexture = typeof window !== "undefined" && { u_noiseTexture: getShaderNoiseTexture() };
72
+ const uniforms = {
73
+ // Own uniforms
74
+ u_colors: colors.map(getShaderColorFromString),
75
+ u_colorsCount: colors.length,
76
+ u_stepsPerColor: stepsPerColor,
77
+ u_colorGlow: getShaderColorFromString(colorGlow),
78
+ u_colorGap: getShaderColorFromString(colorGap),
79
+ u_distortion: distortion,
80
+ u_gap: gap,
81
+ u_glow: glow,
82
+ ...noiseTexture,
83
+ // Sizing uniforms
84
+ u_fit: ShaderFitOptions[fit],
85
+ u_scale: scale,
86
+ u_rotation: rotation,
87
+ u_offsetX: offsetX,
88
+ u_offsetY: offsetY,
89
+ u_originX: originX,
90
+ u_originY: originY,
91
+ u_worldWidth: worldWidth,
92
+ u_worldHeight: worldHeight
93
+ };
94
+ return /* @__PURE__ */ jsx(ShaderMount, { ...props, speed, frame, fragmentShader: voronoiFragmentShader, uniforms });
95
+ }, colorPropsAreEqual);
96
+ export {
97
+ Voronoi,
98
+ defaultPreset,
99
+ shadowPreset,
100
+ voronoiPresets
101
+ };
102
+ //# sourceMappingURL=voronoi.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/shaders/voronoi.tsx"],
4
+ "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount';\nimport { colorPropsAreEqual } from '../color-props-are-equal';\nimport {\n defaultPatternSizing,\n getShaderColorFromString,\n getShaderNoiseTexture,\n voronoiFragmentShader,\n ShaderFitOptions,\n type VoronoiParams,\n type VoronoiUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface VoronoiProps extends ShaderComponentProps, VoronoiParams {}\n\ntype VoronoiPreset = ShaderPreset<VoronoiParams>;\n\nexport const defaultPreset: VoronoiPreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n speed: 0.5,\n frame: 0,\n colors: ['#e65c1a', '#e6c31a', '#1aace6'],\n stepsPerColor: 1,\n colorGlow: '#5500ff',\n colorGap: '#ffffff',\n distortion: 0.42,\n gap: 0.06,\n glow: 0,\n },\n};\n\nexport const shadowPreset: VoronoiPreset = {\n name: 'Shadow',\n params: {\n ...defaultPatternSizing,\n speed: 0.5,\n frame: 0,\n colors: ['#faf7fe', '#fefdf7', '#fbf7fe'],\n stepsPerColor: 1,\n colorGlow: '#76587a',\n colorGap: '#ffffff',\n distortion: 0.23,\n gap: 0,\n glow: 0.8,\n },\n};\n\nexport const voronoiPresets: VoronoiPreset[] = [defaultPreset, shadowPreset];\n\nexport const Voronoi: React.FC<VoronoiProps> = memo(function VoronoiImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colors = defaultPreset.params.colors,\n stepsPerColor = defaultPreset.params.stepsPerColor,\n colorGlow = defaultPreset.params.colorGlow,\n colorGap = defaultPreset.params.colorGap,\n distortion = defaultPreset.params.distortion,\n gap = defaultPreset.params.gap,\n glow = defaultPreset.params.glow,\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}: VoronoiProps) {\n const noiseTexture = typeof window !== 'undefined' && { u_noiseTexture: getShaderNoiseTexture() };\n\n const uniforms = {\n // Own uniforms\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_stepsPerColor: stepsPerColor,\n u_colorGlow: getShaderColorFromString(colorGlow),\n u_colorGap: getShaderColorFromString(colorGap),\n u_distortion: distortion,\n u_gap: gap,\n u_glow: glow,\n ...noiseTexture,\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 VoronoiUniforms;\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={voronoiFragmentShader} 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,EACA;AAAA,OAIK;AA2FH;AArFG,MAAM,gBAA+B;AAAA,EAC1C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,IACxC,eAAe;AAAA,IACf,WAAW;AAAA,IACX,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,MAAM;AAAA,EACR;AACF;AAEO,MAAM,eAA8B;AAAA,EACzC,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,IACxC,eAAe;AAAA,IACf,WAAW;AAAA,IACX,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,MAAM;AAAA,EACR;AACF;AAEO,MAAM,iBAAkC,CAAC,eAAe,YAAY;AAEpE,MAAM,UAAkC,KAAK,SAAS,YAAY;AAAA;AAAA,EAEvE,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,SAAS,cAAc,OAAO;AAAA,EAC9B,gBAAgB,cAAc,OAAO;AAAA,EACrC,YAAY,cAAc,OAAO;AAAA,EACjC,WAAW,cAAc,OAAO;AAAA,EAChC,aAAa,cAAc,OAAO;AAAA,EAClC,MAAM,cAAc,OAAO;AAAA,EAC3B,OAAO,cAAc,OAAO;AAAA;AAAA,EAG5B,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,GAAiB;AACf,QAAM,eAAe,OAAO,WAAW,eAAe,EAAE,gBAAgB,sBAAsB,EAAE;AAEhG,QAAM,WAAW;AAAA;AAAA,IAEf,UAAU,OAAO,IAAI,wBAAwB;AAAA,IAC7C,eAAe,OAAO;AAAA,IACtB,iBAAiB;AAAA,IACjB,aAAa,yBAAyB,SAAS;AAAA,IAC/C,YAAY,yBAAyB,QAAQ;AAAA,IAC7C,cAAc;AAAA,IACd,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,GAAG;AAAA;AAAA,IAGH,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,uBAAuB,UAAoB;AAEnH,GAAG,kBAAkB;",
6
+ "names": []
7
+ }
@@ -0,0 +1,19 @@
1
+ import { type ShaderComponentProps } from '../shader-mount';
2
+ import { type WarpParams, type ShaderPreset } from '@paper-design/shaders';
3
+ export interface WarpProps extends ShaderComponentProps, WarpParams {
4
+ }
5
+ type WarpPreset = ShaderPreset<WarpParams>;
6
+ export declare const defaultPreset: WarpPreset;
7
+ export declare const presetAbyss: WarpPreset;
8
+ export declare const presetCauldron: WarpPreset;
9
+ export declare const presetFilteredLight: WarpPreset;
10
+ export declare const presetIceberg: WarpPreset;
11
+ export declare const presetInk: WarpPreset;
12
+ export declare const presetKelp: WarpPreset;
13
+ export declare const presetNectar: WarpPreset;
14
+ export declare const presetPassion: WarpPreset;
15
+ export declare const presetPhantom: WarpPreset;
16
+ export declare const presetSilk: WarpPreset;
17
+ export declare const warpPresets: WarpPreset[];
18
+ export declare const Warp: React.FC<WarpProps>;
19
+ export {};
@@ -0,0 +1,294 @@
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
+ defaultPatternSizing,
11
+ getShaderColorFromString,
12
+ warpFragmentShader,
13
+ ShaderFitOptions,
14
+ WarpPatterns
15
+ } from "@paper-design/shaders";
16
+ import { jsx } from "react/jsx-runtime";
17
+ const defaultPreset = {
18
+ name: "Default",
19
+ params: {
20
+ ...defaultPatternSizing,
21
+ rotation: 0,
22
+ speed: 1,
23
+ frame: 0,
24
+ colors: ["#262626", "#2e383d", "#64a5ce", "#ffffff"],
25
+ proportion: 0.45,
26
+ softness: 1,
27
+ distortion: 0.25,
28
+ swirl: 0.8,
29
+ swirlIterations: 10,
30
+ shapeScale: 0.1,
31
+ shape: "checks"
32
+ }
33
+ };
34
+ const presetAbyss = {
35
+ name: "The Abyss",
36
+ params: {
37
+ ...defaultPatternSizing,
38
+ scale: 3,
39
+ rotation: 2,
40
+ speed: 0.6,
41
+ frame: 0,
42
+ colors: ["#15122e", "#7b89f2", "#ffffff"],
43
+ proportion: 0,
44
+ softness: 1,
45
+ distortion: 0.09,
46
+ swirl: 0.48,
47
+ swirlIterations: 5,
48
+ shapeScale: 0.85,
49
+ shape: "edge"
50
+ }
51
+ };
52
+ const presetCauldron = {
53
+ name: "Cauldron Pot",
54
+ params: {
55
+ ...defaultPatternSizing,
56
+ scale: 0.9,
57
+ rotation: 160,
58
+ speed: 20,
59
+ frame: 0,
60
+ colors: ["#a7e58b", "#324472", "#0a180d"],
61
+ proportion: 0.64,
62
+ softness: 1.5,
63
+ distortion: 0.2,
64
+ swirl: 0.86,
65
+ swirlIterations: 7,
66
+ shapeScale: 0.6,
67
+ shape: "edge"
68
+ }
69
+ };
70
+ const presetFilteredLight = {
71
+ name: "Filtered Light",
72
+ params: {
73
+ ...defaultPatternSizing,
74
+ scale: 0.3,
75
+ rotation: 45,
76
+ speed: 3.2,
77
+ frame: 0,
78
+ colors: ["#171714", "#d4d8be", "#f9f9e0"],
79
+ proportion: 0.4,
80
+ softness: 1,
81
+ distortion: 0.09,
82
+ swirl: 0.1,
83
+ swirlIterations: 0,
84
+ shapeScale: 0.1,
85
+ shape: "stripes"
86
+ }
87
+ };
88
+ const presetIceberg = {
89
+ name: "Iceberg",
90
+ params: {
91
+ ...defaultPatternSizing,
92
+ scale: 0.8,
93
+ rotation: 190,
94
+ offsetX: 0.3,
95
+ speed: 0.5,
96
+ frame: 0,
97
+ colors: ["#ffffff", "#324771", "#0a180d"],
98
+ proportion: 0.3,
99
+ softness: 1.2,
100
+ distortion: 0.2,
101
+ swirl: 0.86,
102
+ swirlIterations: 7,
103
+ shapeScale: 0,
104
+ shape: "checks"
105
+ }
106
+ };
107
+ const presetInk = {
108
+ name: "Live Ink",
109
+ params: {
110
+ ...defaultPatternSizing,
111
+ scale: 1.2,
112
+ rotation: 44,
113
+ offsetY: -0.3,
114
+ speed: 10,
115
+ frame: 0,
116
+ colors: ["#111314", "#9faeab", "#f3fee7", "#f3fee7"],
117
+ proportion: 0.05,
118
+ softness: 0,
119
+ distortion: 0.25,
120
+ swirl: 0.8,
121
+ swirlIterations: 10,
122
+ shapeScale: 0.28,
123
+ shape: "checks"
124
+ }
125
+ };
126
+ const presetKelp = {
127
+ name: "Kelp",
128
+ params: {
129
+ ...defaultPatternSizing,
130
+ scale: 0.65,
131
+ rotation: 50,
132
+ speed: 80,
133
+ frame: 0,
134
+ colors: ["#dbff8f", "#404f3e", "#091316"],
135
+ proportion: 0.67,
136
+ softness: 0.05,
137
+ distortion: 0,
138
+ swirl: 0.15,
139
+ swirlIterations: 0,
140
+ shapeScale: 0.74,
141
+ shape: "stripes"
142
+ }
143
+ };
144
+ const presetNectar = {
145
+ name: "Nectar",
146
+ params: {
147
+ ...defaultPatternSizing,
148
+ scale: 2,
149
+ offsetY: 0.6,
150
+ rotation: 0,
151
+ speed: 30,
152
+ frame: 0,
153
+ colors: ["#151310", "#d3a86b", "#f0edea"],
154
+ proportion: 0.24,
155
+ softness: 1,
156
+ distortion: 0.21,
157
+ swirl: 0.57,
158
+ swirlIterations: 10,
159
+ shapeScale: 0.75,
160
+ shape: "edge"
161
+ }
162
+ };
163
+ const presetPassion = {
164
+ name: "Passion",
165
+ params: {
166
+ ...defaultPatternSizing,
167
+ scale: 2.5,
168
+ rotation: 1.35,
169
+ speed: 15,
170
+ frame: 0,
171
+ colors: ["#3b1515", "#954751", "#ffc085"],
172
+ proportion: 0.5,
173
+ softness: 1,
174
+ distortion: 0.09,
175
+ swirl: 0.9,
176
+ swirlIterations: 6,
177
+ shapeScale: 0.25,
178
+ shape: "checks"
179
+ }
180
+ };
181
+ const presetPhantom = {
182
+ name: "Phantom",
183
+ params: {
184
+ ...defaultPatternSizing,
185
+ scale: 1.2,
186
+ rotation: 180,
187
+ offsetY: -0.2,
188
+ speed: 30,
189
+ frame: 0,
190
+ colors: ["#12112c", "#7b89f2", "#d7dcfb"],
191
+ proportion: 0.5,
192
+ softness: 1,
193
+ distortion: 0.2,
194
+ swirl: 0.3,
195
+ swirlIterations: 7,
196
+ shapeScale: 0.1,
197
+ shape: "checks"
198
+ }
199
+ };
200
+ const presetSilk = {
201
+ name: "Silk",
202
+ params: {
203
+ ...defaultPatternSizing,
204
+ scale: 2,
205
+ rotation: 0,
206
+ speed: 5,
207
+ frame: 0,
208
+ colors: ["#141111", "#665551", "#baaea9"],
209
+ proportion: 0,
210
+ softness: 1,
211
+ distortion: 0.3,
212
+ swirl: 0.6,
213
+ swirlIterations: 11,
214
+ shapeScale: 0.25,
215
+ shape: "stripes"
216
+ }
217
+ };
218
+ const warpPresets = [
219
+ defaultPreset,
220
+ presetAbyss,
221
+ presetCauldron,
222
+ presetFilteredLight,
223
+ presetIceberg,
224
+ presetInk,
225
+ presetKelp,
226
+ presetNectar,
227
+ presetPassion,
228
+ presetPhantom,
229
+ presetSilk
230
+ ];
231
+ const Warp = memo(function WarpImpl({
232
+ // Own props
233
+ speed = defaultPreset.params.speed,
234
+ frame = defaultPreset.params.frame,
235
+ colors = defaultPreset.params.colors,
236
+ proportion = defaultPreset.params.proportion,
237
+ softness = defaultPreset.params.softness,
238
+ distortion = defaultPreset.params.distortion,
239
+ swirl = defaultPreset.params.swirl,
240
+ swirlIterations = defaultPreset.params.swirlIterations,
241
+ shapeScale = defaultPreset.params.shapeScale,
242
+ shape = defaultPreset.params.shape,
243
+ // Sizing props
244
+ fit = defaultPreset.params.fit,
245
+ scale = defaultPreset.params.scale,
246
+ rotation = defaultPreset.params.rotation,
247
+ originX = defaultPreset.params.originX,
248
+ originY = defaultPreset.params.originY,
249
+ offsetX = defaultPreset.params.offsetX,
250
+ offsetY = defaultPreset.params.offsetY,
251
+ worldWidth = defaultPreset.params.worldWidth,
252
+ worldHeight = defaultPreset.params.worldHeight,
253
+ ...props
254
+ }) {
255
+ const uniforms = {
256
+ // Own uniforms
257
+ u_colors: colors.map(getShaderColorFromString),
258
+ u_colorsCount: colors.length,
259
+ u_proportion: proportion,
260
+ u_softness: softness,
261
+ u_distortion: distortion,
262
+ u_swirl: swirl,
263
+ u_swirlIterations: swirlIterations,
264
+ u_shapeScale: shapeScale,
265
+ u_shape: WarpPatterns[shape],
266
+ // Sizing uniforms
267
+ u_scale: scale,
268
+ u_rotation: rotation,
269
+ u_fit: ShaderFitOptions[fit],
270
+ u_offsetX: offsetX,
271
+ u_offsetY: offsetY,
272
+ u_originX: originX,
273
+ u_originY: originY,
274
+ u_worldWidth: worldWidth,
275
+ u_worldHeight: worldHeight
276
+ };
277
+ return /* @__PURE__ */ jsx(ShaderMount, { ...props, speed, frame, fragmentShader: warpFragmentShader, uniforms });
278
+ }, colorPropsAreEqual);
279
+ export {
280
+ Warp,
281
+ defaultPreset,
282
+ presetAbyss,
283
+ presetCauldron,
284
+ presetFilteredLight,
285
+ presetIceberg,
286
+ presetInk,
287
+ presetKelp,
288
+ presetNectar,
289
+ presetPassion,
290
+ presetPhantom,
291
+ presetSilk,
292
+ warpPresets
293
+ };
294
+ //# sourceMappingURL=warp.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/shaders/warp.tsx"],
4
+ "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount';\nimport { colorPropsAreEqual } from '../color-props-are-equal';\nimport {\n defaultPatternSizing,\n getShaderColorFromString,\n warpFragmentShader,\n ShaderFitOptions,\n type WarpParams,\n type WarpUniforms,\n type ShaderPreset,\n WarpPatterns,\n} from '@paper-design/shaders';\n\nexport interface WarpProps extends ShaderComponentProps, WarpParams {}\n\ntype WarpPreset = ShaderPreset<WarpParams>;\n\nexport const defaultPreset: WarpPreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n rotation: 0,\n speed: 1,\n frame: 0,\n colors: ['#262626', '#2e383d', '#64a5ce', '#ffffff'],\n proportion: 0.45,\n softness: 1,\n distortion: 0.25,\n swirl: 0.8,\n swirlIterations: 10,\n shapeScale: 0.1,\n shape: 'checks',\n },\n};\n\nexport const presetAbyss: WarpPreset = {\n name: 'The Abyss',\n params: {\n ...defaultPatternSizing,\n scale: 3,\n rotation: 2,\n speed: 0.6,\n frame: 0,\n colors: ['#15122e', '#7b89f2', '#ffffff'],\n proportion: 0,\n softness: 1,\n distortion: 0.09,\n swirl: 0.48,\n swirlIterations: 5,\n shapeScale: 0.85,\n shape: 'edge',\n },\n};\n\nexport const presetCauldron: WarpPreset = {\n name: 'Cauldron Pot',\n params: {\n ...defaultPatternSizing,\n scale: 0.9,\n rotation: 160,\n speed: 20,\n frame: 0,\n colors: ['#a7e58b', '#324472', '#0a180d'],\n proportion: 0.64,\n softness: 1.5,\n distortion: 0.2,\n swirl: 0.86,\n swirlIterations: 7,\n shapeScale: 0.6,\n shape: 'edge',\n },\n};\n\nexport const presetFilteredLight: WarpPreset = {\n name: 'Filtered Light',\n params: {\n ...defaultPatternSizing,\n scale: 0.3,\n rotation: 45,\n speed: 3.2,\n frame: 0,\n colors: ['#171714', '#d4d8be', '#f9f9e0'],\n proportion: 0.4,\n softness: 1,\n distortion: 0.09,\n swirl: 0.1,\n swirlIterations: 0,\n shapeScale: 0.1,\n shape: 'stripes',\n },\n};\n\nexport const presetIceberg: WarpPreset = {\n name: 'Iceberg',\n params: {\n ...defaultPatternSizing,\n scale: 0.8,\n rotation: 190,\n offsetX: 0.3,\n speed: 0.5,\n frame: 0,\n colors: ['#ffffff', '#324771', '#0a180d'],\n proportion: 0.3,\n softness: 1.2,\n distortion: 0.2,\n swirl: 0.86,\n swirlIterations: 7,\n shapeScale: 0,\n shape: 'checks',\n },\n};\n\nexport const presetInk: WarpPreset = {\n name: 'Live Ink',\n params: {\n ...defaultPatternSizing,\n scale: 1.2,\n rotation: 44,\n offsetY: -0.3,\n speed: 10,\n frame: 0,\n colors: ['#111314', '#9faeab', '#f3fee7', '#f3fee7'],\n proportion: 0.05,\n softness: 0,\n distortion: 0.25,\n swirl: 0.8,\n swirlIterations: 10,\n shapeScale: 0.28,\n shape: 'checks',\n },\n};\n\nexport const presetKelp: WarpPreset = {\n name: 'Kelp',\n params: {\n ...defaultPatternSizing,\n scale: 0.65,\n rotation: 50,\n speed: 80,\n frame: 0,\n colors: ['#dbff8f', '#404f3e', '#091316'],\n proportion: 0.67,\n softness: 0.05,\n distortion: 0,\n swirl: 0.15,\n swirlIterations: 0,\n shapeScale: 0.74,\n shape: 'stripes',\n },\n};\n\nexport const presetNectar: WarpPreset = {\n name: 'Nectar',\n params: {\n ...defaultPatternSizing,\n scale: 2,\n offsetY: 0.6,\n rotation: 0,\n speed: 30,\n frame: 0,\n colors: ['#151310', '#d3a86b', '#f0edea'],\n proportion: 0.24,\n softness: 1,\n distortion: 0.21,\n swirl: 0.57,\n swirlIterations: 10,\n shapeScale: 0.75,\n shape: 'edge',\n },\n};\n\nexport const presetPassion: WarpPreset = {\n name: 'Passion',\n params: {\n ...defaultPatternSizing,\n scale: 2.5,\n rotation: 1.35,\n speed: 15,\n frame: 0,\n colors: ['#3b1515', '#954751', '#ffc085'],\n proportion: 0.5,\n softness: 1,\n distortion: 0.09,\n swirl: 0.9,\n swirlIterations: 6,\n shapeScale: 0.25,\n shape: 'checks',\n },\n};\n\nexport const presetPhantom: WarpPreset = {\n name: 'Phantom',\n params: {\n ...defaultPatternSizing,\n scale: 1.2,\n rotation: 180,\n offsetY: -0.2,\n speed: 30,\n frame: 0,\n colors: ['#12112c', '#7b89f2', '#d7dcfb'],\n proportion: 0.5,\n softness: 1,\n distortion: 0.2,\n swirl: 0.3,\n swirlIterations: 7,\n shapeScale: 0.1,\n shape: 'checks',\n },\n};\n\nexport const presetSilk: WarpPreset = {\n name: 'Silk',\n params: {\n ...defaultPatternSizing,\n scale: 2,\n rotation: 0,\n speed: 5,\n frame: 0,\n colors: ['#141111', '#665551', '#baaea9'],\n proportion: 0,\n softness: 1,\n distortion: 0.3,\n swirl: 0.6,\n swirlIterations: 11,\n shapeScale: 0.25,\n shape: 'stripes',\n },\n};\n\nexport const warpPresets: WarpPreset[] = [\n defaultPreset,\n presetAbyss,\n presetCauldron,\n presetFilteredLight,\n presetIceberg,\n presetInk,\n presetKelp,\n presetNectar,\n presetPassion,\n presetPhantom,\n presetSilk,\n];\n\nexport const Warp: React.FC<WarpProps> = memo(function WarpImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colors = defaultPreset.params.colors,\n proportion = defaultPreset.params.proportion,\n softness = defaultPreset.params.softness,\n distortion = defaultPreset.params.distortion,\n swirl = defaultPreset.params.swirl,\n swirlIterations = defaultPreset.params.swirlIterations,\n shapeScale = defaultPreset.params.shapeScale,\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}: WarpProps) {\n const uniforms = {\n // Own uniforms\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_proportion: proportion,\n u_softness: softness,\n u_distortion: distortion,\n u_swirl: swirl,\n u_swirlIterations: swirlIterations,\n u_shapeScale: shapeScale,\n u_shape: WarpPatterns[shape],\n\n // Sizing uniforms\n u_scale: scale,\n u_rotation: rotation,\n u_fit: ShaderFitOptions[fit],\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 WarpUniforms;\n\n return <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={warpFragmentShader} uniforms={uniforms} />;\n}, colorPropsAreEqual);\n"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }
@@ -0,0 +1,14 @@
1
+ import { type ShaderComponentProps } from '../shader-mount';
2
+ import { type WavesParams, type ShaderPreset } from '@paper-design/shaders';
3
+ export interface WavesProps extends ShaderComponentProps, WavesParams {
4
+ }
5
+ type WavesPreset = ShaderPreset<WavesParams>;
6
+ export declare const defaultPreset: WavesPreset;
7
+ export declare const spikesPreset: WavesPreset;
8
+ export declare const groovyPreset: WavesPreset;
9
+ export declare const tangledUpPreset: WavesPreset;
10
+ export declare const zigZagPreset: WavesPreset;
11
+ export declare const waveRidePreset: WavesPreset;
12
+ export declare const wavesPresets: WavesPreset[];
13
+ export declare const Waves: React.FC<WavesProps>;
14
+ export {};
@@ -0,0 +1,178 @@
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
+ defaultPatternSizing,
11
+ getShaderColorFromString,
12
+ wavesFragmentShader,
13
+ ShaderFitOptions
14
+ } from "@paper-design/shaders";
15
+ import { jsx } from "react/jsx-runtime";
16
+ const defaultPreset = {
17
+ name: "Default",
18
+ params: {
19
+ ...defaultPatternSizing,
20
+ scale: 1.6,
21
+ rotation: 0,
22
+ colorFront: "#ffffff",
23
+ colorBack: "#102c70",
24
+ shape: 0,
25
+ frequency: 0.5,
26
+ amplitude: 0.6,
27
+ spacing: 0.65,
28
+ proportion: 0.15,
29
+ softness: 0
30
+ }
31
+ };
32
+ const spikesPreset = {
33
+ name: "Spikes",
34
+ params: {
35
+ ...defaultPatternSizing,
36
+ scale: 1 / 2.3,
37
+ rotation: 0,
38
+ colorFront: "#fdffe6",
39
+ colorBack: "#34123b",
40
+ shape: 0,
41
+ frequency: 0.5,
42
+ amplitude: 0.9,
43
+ spacing: 0.37,
44
+ proportion: 0.93,
45
+ softness: 0.15
46
+ }
47
+ };
48
+ const groovyPreset = {
49
+ name: "Groovy",
50
+ params: {
51
+ ...defaultPatternSizing,
52
+ scale: 1 / 0.5,
53
+ rotation: 1,
54
+ colorFront: "#fcfcee",
55
+ colorBack: "#ff896b",
56
+ shape: 2.37,
57
+ frequency: 0.2,
58
+ amplitude: 0.67,
59
+ spacing: 1.17,
60
+ proportion: 0.57,
61
+ softness: 0
62
+ }
63
+ };
64
+ const tangledUpPreset = {
65
+ name: "Tangled up",
66
+ params: {
67
+ ...defaultPatternSizing,
68
+ scale: 1 / 3.04,
69
+ rotation: 1,
70
+ colorFront: "#133a41",
71
+ colorBack: "#c2d8b6",
72
+ shape: 3,
73
+ frequency: 0.44,
74
+ amplitude: 0.57,
75
+ spacing: 1.05,
76
+ proportion: 0.97,
77
+ softness: 0
78
+ }
79
+ };
80
+ const zigZagPreset = {
81
+ name: "Zig zag",
82
+ params: {
83
+ ...defaultPatternSizing,
84
+ scale: 1 / 2.7,
85
+ rotation: 1,
86
+ colorFront: "#000000",
87
+ colorBack: "#e6e6e6",
88
+ shape: 0,
89
+ frequency: 0.6,
90
+ amplitude: 0.8,
91
+ spacing: 0.5,
92
+ proportion: 1,
93
+ softness: 0.5
94
+ }
95
+ };
96
+ const waveRidePreset = {
97
+ name: "Ride the wave",
98
+ params: {
99
+ ...defaultPatternSizing,
100
+ scale: 1 / 0.84,
101
+ rotation: 0,
102
+ colorFront: "#fdffe6",
103
+ colorBack: "#1f1f1f",
104
+ shape: 2.23,
105
+ frequency: 0.1,
106
+ amplitude: 0.6,
107
+ spacing: 0.41,
108
+ proportion: 0.99,
109
+ softness: 0
110
+ }
111
+ };
112
+ const wavesPresets = [
113
+ defaultPreset,
114
+ spikesPreset,
115
+ groovyPreset,
116
+ tangledUpPreset,
117
+ zigZagPreset,
118
+ waveRidePreset
119
+ ];
120
+ const Waves = memo(function WavesImpl({
121
+ // Own props
122
+ colorFront = defaultPreset.params.colorFront,
123
+ colorBack = defaultPreset.params.colorBack,
124
+ shape = defaultPreset.params.shape,
125
+ frequency = defaultPreset.params.frequency,
126
+ amplitude = defaultPreset.params.amplitude,
127
+ spacing = defaultPreset.params.spacing,
128
+ proportion = defaultPreset.params.proportion,
129
+ softness = defaultPreset.params.softness,
130
+ // Sizing props
131
+ fit = defaultPreset.params.fit,
132
+ scale = defaultPreset.params.scale,
133
+ rotation = defaultPreset.params.rotation,
134
+ offsetX = defaultPreset.params.offsetX,
135
+ offsetY = defaultPreset.params.offsetY,
136
+ originX = defaultPreset.params.originX,
137
+ originY = defaultPreset.params.originY,
138
+ worldWidth = defaultPreset.params.worldWidth,
139
+ worldHeight = defaultPreset.params.worldHeight,
140
+ // Other props
141
+ maxPixelCount = 6016 * 3384,
142
+ // Higher max resolution for this shader
143
+ ...props
144
+ }) {
145
+ const uniforms = {
146
+ // Own uniforms
147
+ u_colorFront: getShaderColorFromString(colorFront),
148
+ u_colorBack: getShaderColorFromString(colorBack),
149
+ u_shape: shape,
150
+ u_frequency: frequency,
151
+ u_amplitude: amplitude,
152
+ u_spacing: spacing,
153
+ u_proportion: proportion,
154
+ u_softness: softness,
155
+ // Sizing uniforms
156
+ u_fit: ShaderFitOptions[fit],
157
+ u_scale: scale,
158
+ u_rotation: rotation,
159
+ u_offsetX: offsetX,
160
+ u_offsetY: offsetY,
161
+ u_originX: originX,
162
+ u_originY: originY,
163
+ u_worldWidth: worldWidth,
164
+ u_worldHeight: worldHeight
165
+ };
166
+ return /* @__PURE__ */ jsx(ShaderMount, { ...props, fragmentShader: wavesFragmentShader, uniforms });
167
+ }, colorPropsAreEqual);
168
+ export {
169
+ Waves,
170
+ defaultPreset,
171
+ groovyPreset,
172
+ spikesPreset,
173
+ tangledUpPreset,
174
+ waveRidePreset,
175
+ wavesPresets,
176
+ zigZagPreset
177
+ };
178
+ //# sourceMappingURL=waves.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/shaders/waves.tsx"],
4
+ "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount';\nimport { colorPropsAreEqual } from '../color-props-are-equal';\nimport {\n defaultPatternSizing,\n getShaderColorFromString,\n wavesFragmentShader,\n ShaderFitOptions,\n type WavesParams,\n type WavesUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface WavesProps extends ShaderComponentProps, WavesParams {}\n\ntype WavesPreset = ShaderPreset<WavesParams>;\n\nexport const defaultPreset: WavesPreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n scale: 1.6,\n rotation: 0,\n colorFront: '#ffffff',\n colorBack: '#102c70',\n shape: 0,\n frequency: 0.5,\n amplitude: 0.6,\n spacing: 0.65,\n proportion: 0.15,\n softness: 0,\n },\n};\n\nexport const spikesPreset: WavesPreset = {\n name: 'Spikes',\n params: {\n ...defaultPatternSizing,\n scale: 1 / 2.3,\n rotation: 0,\n colorFront: '#fdffe6',\n colorBack: '#34123b',\n shape: 0,\n frequency: 0.5,\n amplitude: 0.9,\n spacing: 0.37,\n proportion: 0.93,\n softness: 0.15,\n },\n};\n\nexport const groovyPreset: WavesPreset = {\n name: 'Groovy',\n params: {\n ...defaultPatternSizing,\n scale: 1 / 0.5,\n rotation: 1,\n colorFront: '#fcfcee',\n colorBack: '#ff896b',\n shape: 2.37,\n frequency: 0.2,\n amplitude: 0.67,\n spacing: 1.17,\n proportion: 0.57,\n softness: 0,\n },\n};\n\nexport const tangledUpPreset: WavesPreset = {\n name: 'Tangled up',\n params: {\n ...defaultPatternSizing,\n scale: 1 / 3.04,\n rotation: 1,\n colorFront: '#133a41',\n colorBack: '#c2d8b6',\n shape: 3,\n frequency: 0.44,\n amplitude: 0.57,\n spacing: 1.05,\n proportion: 0.97,\n softness: 0,\n },\n};\n\nexport const zigZagPreset: WavesPreset = {\n name: 'Zig zag',\n params: {\n ...defaultPatternSizing,\n scale: 1 / 2.7,\n rotation: 1,\n colorFront: '#000000',\n colorBack: '#e6e6e6',\n shape: 0,\n frequency: 0.6,\n amplitude: 0.8,\n spacing: 0.5,\n proportion: 1,\n softness: 0.5,\n },\n};\n\nexport const waveRidePreset: WavesPreset = {\n name: 'Ride the wave',\n params: {\n ...defaultPatternSizing,\n scale: 1 / 0.84,\n rotation: 0,\n colorFront: '#fdffe6',\n colorBack: '#1f1f1f',\n shape: 2.23,\n frequency: 0.1,\n amplitude: 0.6,\n spacing: 0.41,\n proportion: 0.99,\n softness: 0,\n },\n};\n\nexport const wavesPresets: WavesPreset[] = [\n defaultPreset,\n spikesPreset,\n groovyPreset,\n tangledUpPreset,\n zigZagPreset,\n waveRidePreset,\n];\n\nexport const Waves: React.FC<WavesProps> = memo(function WavesImpl({\n // Own props\n colorFront = defaultPreset.params.colorFront,\n colorBack = defaultPreset.params.colorBack,\n shape = defaultPreset.params.shape,\n frequency = defaultPreset.params.frequency,\n amplitude = defaultPreset.params.amplitude,\n spacing = defaultPreset.params.spacing,\n proportion = defaultPreset.params.proportion,\n softness = defaultPreset.params.softness,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n scale = defaultPreset.params.scale,\n rotation = defaultPreset.params.rotation,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n worldWidth = defaultPreset.params.worldWidth,\n worldHeight = defaultPreset.params.worldHeight,\n\n // Other props\n maxPixelCount = 6016 * 3384, // Higher max resolution for this shader\n ...props\n}: WavesProps) {\n const uniforms = {\n // Own uniforms\n u_colorFront: getShaderColorFromString(colorFront),\n u_colorBack: getShaderColorFromString(colorBack),\n u_shape: shape,\n u_frequency: frequency,\n u_amplitude: amplitude,\n u_spacing: spacing,\n u_proportion: proportion,\n u_softness: softness,\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 WavesUniforms;\n\n return <ShaderMount {...props} fragmentShader={wavesFragmentShader} uniforms={uniforms} />;\n}, colorPropsAreEqual);\n"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }
@@ -0,0 +1,6 @@
1
+ import * as React from 'react';
2
+ /**
3
+ * Merges an array of refs into a single memoized callback ref or `null`.
4
+ * @see https://floating-ui.com/docs/react-utils#usemergerefs
5
+ */
6
+ export declare function useMergeRefs<Instance>(refs: Array<React.Ref<Instance> | undefined>): null | React.Ref<Instance>;