@paper-design/shaders-react 0.0.29 → 0.0.31

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 +46 -41
  5. package/dist/index.js +61 -1872
  6. package/dist/index.js.map +4 -4
  7. package/dist/shader-mount.d.ts +15 -13
  8. package/dist/shader-mount.js +120 -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 +179 -0
  12. package/dist/shaders/dithering.js.map +7 -0
  13. package/dist/shaders/dot-grid.d.ts +6 -20
  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 +6 -18
  17. package/dist/shaders/dot-orbit.js +77 -0
  18. package/dist/shaders/dot-orbit.js.map +7 -0
  19. package/dist/shaders/god-rays.d.ts +6 -22
  20. package/dist/shaders/god-rays.js +160 -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 +197 -0
  24. package/dist/shaders/grain-gradient.js.map +7 -0
  25. package/dist/shaders/liquid-metal.d.ts +9 -0
  26. package/dist/shaders/liquid-metal.js +87 -0
  27. package/dist/shaders/liquid-metal.js.map +7 -0
  28. package/dist/shaders/mesh-gradient.d.ts +7 -15
  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 +6 -16
  32. package/dist/shaders/metaballs.js +72 -0
  33. package/dist/shaders/metaballs.js.map +7 -0
  34. package/dist/shaders/neuro-noise.d.ts +6 -14
  35. package/dist/shaders/neuro-noise.js +82 -0
  36. package/dist/shaders/neuro-noise.js.map +7 -0
  37. package/dist/shaders/perlin-noise.d.ts +6 -17
  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 +8 -18
  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 +6 -23
  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 +137 -0
  54. package/dist/shaders/swirl.js.map +7 -0
  55. package/dist/shaders/voronoi.d.ts +7 -28
  56. package/dist/shaders/voronoi.js +102 -0
  57. package/dist/shaders/voronoi.js.map +7 -0
  58. package/dist/shaders/warp.d.ts +6 -23
  59. package/dist/shaders/warp.js +290 -0
  60. package/dist/shaders/warp.js.map +7 -0
  61. package/dist/shaders/waves.d.ts +6 -19
  62. package/dist/shaders/waves.js +178 -0
  63. package/dist/shaders/waves.js.map +7 -0
  64. package/dist/use-merge-refs.js +48 -0
  65. package/dist/use-merge-refs.js.map +7 -0
  66. package/package.json +13 -4
  67. package/dist/shaders/stepped-simplex-noise.d.ts +0 -20
@@ -0,0 +1,134 @@
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
+ getShaderNoiseTexture,
13
+ smokeRingFragmentShader,
14
+ ShaderFitOptions
15
+ } from "@paper-design/shaders";
16
+ import { jsx } from "react/jsx-runtime";
17
+ const defaultPreset = {
18
+ name: "Default",
19
+ params: {
20
+ ...defaultObjectSizing,
21
+ speed: 0.4,
22
+ frame: 0,
23
+ colorBack: "hsla(0, 100%, 100%, 1)",
24
+ colors: ["hsla(173, 69%, 25%, 1)", "hsla(256, 85%, 5%, 1)"],
25
+ noiseScale: 5,
26
+ noiseIterations: 10,
27
+ radius: 0.5,
28
+ thickness: 0.25,
29
+ innerShape: 1.2
30
+ }
31
+ };
32
+ const poisonPreset = {
33
+ name: "Poison",
34
+ params: {
35
+ ...defaultObjectSizing,
36
+ speed: 1,
37
+ frame: 0,
38
+ colorBack: "hsla(0, 0%, 0%, 1)",
39
+ colors: ["hsla(61, 100%, 50%, 1)", "hsla(111, 89%, 27%, 1)"],
40
+ noiseScale: 2.2,
41
+ noiseIterations: 10,
42
+ radius: 0.4,
43
+ thickness: 0.2,
44
+ innerShape: 0.6
45
+ }
46
+ };
47
+ const linePreset = {
48
+ name: "Line",
49
+ params: {
50
+ ...defaultObjectSizing,
51
+ frame: 0,
52
+ colorBack: "hsla(0, 0%, 0%, 1)",
53
+ colors: ["hsla(185, 100%, 56%, 1)", "hsla(251, 39%, 45%, 1)"],
54
+ noiseScale: 1.1,
55
+ noiseIterations: 2,
56
+ radius: 0.38,
57
+ thickness: 0.01,
58
+ innerShape: 0.88,
59
+ speed: 4
60
+ }
61
+ };
62
+ const cloudPreset = {
63
+ name: "Cloud",
64
+ params: {
65
+ ...defaultObjectSizing,
66
+ frame: 0,
67
+ colorBack: "hsla(218, 100%, 62%, 1)",
68
+ colors: ["hsla(0, 0%, 100%, 1)"],
69
+ noiseScale: 1.5,
70
+ noiseIterations: 10,
71
+ radius: 0.5,
72
+ thickness: 0.65,
73
+ innerShape: 0.9,
74
+ speed: 0.5
75
+ }
76
+ };
77
+ const smokeRingPresets = [defaultPreset, linePreset, poisonPreset, cloudPreset];
78
+ const SmokeRing = memo(function SmokeRingImpl({
79
+ // Own props
80
+ speed = defaultPreset.params.speed,
81
+ frame = defaultPreset.params.frame,
82
+ colorBack = defaultPreset.params.colorBack,
83
+ colors = defaultPreset.params.colors,
84
+ noiseScale = defaultPreset.params.noiseScale,
85
+ thickness = defaultPreset.params.thickness,
86
+ radius = defaultPreset.params.radius,
87
+ innerShape = defaultPreset.params.innerShape,
88
+ noiseIterations = defaultPreset.params.noiseIterations,
89
+ // Sizing props
90
+ fit = defaultPreset.params.fit,
91
+ scale = defaultPreset.params.scale,
92
+ rotation = defaultPreset.params.rotation,
93
+ originX = defaultPreset.params.originX,
94
+ originY = defaultPreset.params.originY,
95
+ offsetX = defaultPreset.params.offsetX,
96
+ offsetY = defaultPreset.params.offsetY,
97
+ worldWidth = defaultPreset.params.worldWidth,
98
+ worldHeight = defaultPreset.params.worldHeight,
99
+ ...props
100
+ }) {
101
+ const noiseTexture = typeof window !== "undefined" && { u_noiseTexture: getShaderNoiseTexture() };
102
+ const uniforms = {
103
+ // Own uniforms
104
+ u_colorBack: getShaderColorFromString(colorBack),
105
+ u_colors: colors.map(getShaderColorFromString),
106
+ u_colorsCount: colors.length,
107
+ u_noiseScale: noiseScale,
108
+ u_thickness: thickness,
109
+ u_radius: radius,
110
+ u_innerShape: innerShape,
111
+ u_noiseIterations: noiseIterations,
112
+ ...noiseTexture,
113
+ // Sizing uniforms
114
+ u_fit: ShaderFitOptions[fit],
115
+ u_scale: scale,
116
+ u_rotation: rotation,
117
+ u_offsetX: offsetX,
118
+ u_offsetY: offsetY,
119
+ u_originX: originX,
120
+ u_originY: originY,
121
+ u_worldWidth: worldWidth,
122
+ u_worldHeight: worldHeight
123
+ };
124
+ return /* @__PURE__ */ jsx(ShaderMount, { ...props, speed, frame, fragmentShader: smokeRingFragmentShader, uniforms });
125
+ }, colorPropsAreEqual);
126
+ export {
127
+ SmokeRing,
128
+ cloudPreset,
129
+ defaultPreset,
130
+ linePreset,
131
+ poisonPreset,
132
+ smokeRingPresets
133
+ };
134
+ //# sourceMappingURL=smoke-ring.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/shaders/smoke-ring.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 getShaderNoiseTexture,\n smokeRingFragmentShader,\n ShaderFitOptions,\n type ShaderPreset,\n type SmokeRingParams,\n type SmokeRingUniforms,\n} from '@paper-design/shaders';\n\nexport interface SmokeRingProps extends ShaderComponentProps, SmokeRingParams {}\n\ntype SmokeRingPreset = ShaderPreset<SmokeRingParams>;\n\n// Due to Leva controls limitation:\n// 1) keep default colors in HSLA format to keep alpha channel\n// 2) don't use decimal values on HSL values (to avoid button highlight bug)\n\nexport const defaultPreset: SmokeRingPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n speed: 0.4,\n frame: 0,\n colorBack: 'hsla(0, 100%, 100%, 1)',\n colors: ['hsla(173, 69%, 25%, 1)', 'hsla(256, 85%, 5%, 1)'],\n noiseScale: 5,\n noiseIterations: 10,\n radius: 0.5,\n thickness: 0.25,\n innerShape: 1.2,\n },\n};\n\nexport const poisonPreset: SmokeRingPreset = {\n name: 'Poison',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colorBack: 'hsla(0, 0%, 0%, 1)',\n colors: ['hsla(61, 100%, 50%, 1)', 'hsla(111, 89%, 27%, 1)'],\n noiseScale: 2.2,\n noiseIterations: 10,\n radius: 0.4,\n thickness: 0.2,\n innerShape: 0.6,\n },\n};\n\nexport const linePreset: SmokeRingPreset = {\n name: 'Line',\n params: {\n ...defaultObjectSizing,\n frame: 0,\n colorBack: 'hsla(0, 0%, 0%, 1)',\n colors: ['hsla(185, 100%, 56%, 1)', 'hsla(251, 39%, 45%, 1)'],\n noiseScale: 1.1,\n noiseIterations: 2,\n radius: 0.38,\n thickness: 0.01,\n innerShape: 0.88,\n speed: 4,\n },\n};\n\nexport const cloudPreset: SmokeRingPreset = {\n name: 'Cloud',\n params: {\n ...defaultObjectSizing,\n frame: 0,\n colorBack: 'hsla(218, 100%, 62%, 1)',\n colors: ['hsla(0, 0%, 100%, 1)'],\n noiseScale: 1.5,\n noiseIterations: 10,\n radius: 0.5,\n thickness: 0.65,\n innerShape: 0.9,\n speed: 0.5,\n },\n};\n\nexport const smokeRingPresets: SmokeRingPreset[] = [defaultPreset, linePreset, poisonPreset, cloudPreset];\n\nexport const SmokeRing: React.FC<SmokeRingProps> = memo(function SmokeRingImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorBack = defaultPreset.params.colorBack,\n colors = defaultPreset.params.colors,\n noiseScale = defaultPreset.params.noiseScale,\n thickness = defaultPreset.params.thickness,\n radius = defaultPreset.params.radius,\n innerShape = defaultPreset.params.innerShape,\n noiseIterations = defaultPreset.params.noiseIterations,\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}: SmokeRingProps) {\n const noiseTexture = typeof window !== 'undefined' && { u_noiseTexture: getShaderNoiseTexture() };\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_noiseScale: noiseScale,\n u_thickness: thickness,\n u_radius: radius,\n u_innerShape: innerShape,\n u_noiseIterations: noiseIterations,\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 SmokeRingUniforms;\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={smokeRingFragmentShader} uniforms={uniforms} />\n );\n}, colorPropsAreEqual);\n"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }
@@ -1,25 +1,8 @@
1
- import { type GlobalParams, type ShaderMountProps } from '../shader-mount';
2
- export type SpiralParams = {
3
- color1?: string;
4
- color2?: string;
5
- scale?: number;
6
- offsetX?: number;
7
- offsetY?: number;
8
- spiralDensity?: number;
9
- spiralDistortion?: number;
10
- strokeWidth?: number;
11
- strokeTaper?: number;
12
- strokeCap?: number;
13
- noiseFreq?: number;
14
- noisePower?: number;
15
- softness?: number;
16
- } & GlobalParams;
17
- export type SpiralProps = Omit<ShaderMountProps, 'fragmentShader'> & SpiralParams;
18
- type SpiralPreset = {
19
- name: string;
20
- params: Required<SpiralParams>;
21
- style?: React.CSSProperties;
22
- };
1
+ import { type ShaderComponentProps } from '../shader-mount';
2
+ import { type ShaderPreset, type SpiralParams } from '@paper-design/shaders';
3
+ export interface SpiralProps extends ShaderComponentProps, SpiralParams {
4
+ }
5
+ type SpiralPreset = ShaderPreset<SpiralParams>;
23
6
  export declare const defaultPreset: SpiralPreset;
24
7
  export declare const noisyPreset: SpiralPreset;
25
8
  export declare const dropletPreset: SpiralPreset;
@@ -28,5 +11,5 @@ export declare const swirlPreset: SpiralPreset;
28
11
  export declare const hookPreset: SpiralPreset;
29
12
  export declare const vinylPreset: SpiralPreset;
30
13
  export declare const spiralPresets: SpiralPreset[];
31
- export declare const Spiral: ({ color1, color2, scale, offsetX, offsetY, spiralDensity, spiralDistortion, strokeWidth, strokeTaper, strokeCap, noiseFreq, noisePower, softness, ...props }: SpiralProps) => React.ReactElement;
14
+ export declare const Spiral: React.FC<SpiralProps>;
32
15
  export {};
@@ -0,0 +1,218 @@
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
+ ShaderFitOptions,
13
+ spiralFragmentShader
14
+ } from "@paper-design/shaders";
15
+ import { jsx } from "react/jsx-runtime";
16
+ const defaultPreset = {
17
+ name: "Default",
18
+ params: {
19
+ ...defaultPatternSizing,
20
+ color1: "hsla(0, 0%, 98%, 1)",
21
+ color2: "hsla(0, 0%, 50%, 1)",
22
+ density: 0,
23
+ distortion: 0,
24
+ strokeWidth: 0.5,
25
+ strokeTaper: 0,
26
+ strokeCap: 0,
27
+ noiseFrequency: 0,
28
+ noisePower: 0,
29
+ softness: 0.01,
30
+ speed: 1,
31
+ frame: 0
32
+ }
33
+ };
34
+ const noisyPreset = {
35
+ name: "Noisy",
36
+ params: {
37
+ ...defaultPatternSizing,
38
+ color1: "hsla(87, 77%, 53%, 1)",
39
+ color2: "hsla(109, 70%, 31%, 1)",
40
+ scale: 1.3,
41
+ density: 0.5,
42
+ distortion: 0,
43
+ strokeWidth: 0.5,
44
+ strokeTaper: 0,
45
+ strokeCap: 0.5,
46
+ noiseFrequency: 0.1,
47
+ noisePower: 1,
48
+ softness: 0,
49
+ speed: 1,
50
+ frame: 0
51
+ }
52
+ };
53
+ const dropletPreset = {
54
+ name: "Droplet",
55
+ params: {
56
+ ...defaultPatternSizing,
57
+ color1: "hsla(320, 50%, 50%, 1)",
58
+ color2: "hsla(190, 50%, 95%, 1)",
59
+ scale: 0.65,
60
+ density: 0,
61
+ distortion: 0,
62
+ strokeWidth: 0.05,
63
+ strokeTaper: 0,
64
+ strokeCap: 1,
65
+ noiseFrequency: 0,
66
+ noisePower: 0,
67
+ softness: 0,
68
+ speed: 1,
69
+ frame: 0
70
+ }
71
+ };
72
+ const sandPreset = {
73
+ name: "Sand",
74
+ params: {
75
+ ...defaultPatternSizing,
76
+ color1: "hsla(45, 25%, 50%, 1)",
77
+ color2: "hsla(0, 0%, 87%, 1)",
78
+ scale: 3,
79
+ density: 0,
80
+ distortion: 0,
81
+ strokeWidth: 0.15,
82
+ strokeTaper: 0,
83
+ strokeCap: 0,
84
+ noiseFrequency: 30,
85
+ noisePower: 1,
86
+ softness: 0.2,
87
+ speed: 0,
88
+ frame: 0
89
+ }
90
+ };
91
+ const swirlPreset = {
92
+ name: "Swirl",
93
+ params: {
94
+ ...defaultPatternSizing,
95
+ color1: "hsla(160, 50%, 80%, 1)",
96
+ color2: "hsla(220, 50%, 20%, 1)",
97
+ scale: 4,
98
+ density: 0.8,
99
+ distortion: 0,
100
+ strokeWidth: 0.5,
101
+ strokeTaper: 0,
102
+ strokeCap: 0,
103
+ noiseFrequency: 0,
104
+ noisePower: 0,
105
+ softness: 0.5,
106
+ speed: 1,
107
+ frame: 0
108
+ }
109
+ };
110
+ const hookPreset = {
111
+ name: "Hook",
112
+ params: {
113
+ ...defaultPatternSizing,
114
+ color1: "hsla(0, 0%, 0%, 1)",
115
+ color2: "hsla(200, 50%, 70%, 1)",
116
+ scale: 0.8,
117
+ density: 0,
118
+ distortion: 0,
119
+ strokeWidth: 0.5,
120
+ strokeTaper: 0.5,
121
+ strokeCap: 0,
122
+ noiseFrequency: 0,
123
+ noisePower: 0,
124
+ softness: 0.02,
125
+ speed: 3,
126
+ frame: 0
127
+ }
128
+ };
129
+ const vinylPreset = {
130
+ name: "Vinyl",
131
+ params: {
132
+ ...defaultPatternSizing,
133
+ color1: "hsla(0, 0%, 15%, 1)",
134
+ color2: "hsla(320, 5%, 75%, 1)",
135
+ density: 0,
136
+ distortion: 0.3,
137
+ strokeWidth: 0.95,
138
+ strokeTaper: 0,
139
+ strokeCap: 1,
140
+ noiseFrequency: 0,
141
+ noisePower: 0,
142
+ softness: 0.11,
143
+ speed: 1,
144
+ frame: 0
145
+ }
146
+ };
147
+ const spiralPresets = [
148
+ defaultPreset,
149
+ noisyPreset,
150
+ dropletPreset,
151
+ swirlPreset,
152
+ sandPreset,
153
+ hookPreset,
154
+ vinylPreset
155
+ ];
156
+ const Spiral = memo(function SpiralImpl({
157
+ // Own props
158
+ speed = defaultPreset.params.speed,
159
+ frame = defaultPreset.params.frame,
160
+ color1 = defaultPreset.params.color1,
161
+ color2 = defaultPreset.params.color2,
162
+ density = defaultPreset.params.density,
163
+ distortion = defaultPreset.params.distortion,
164
+ strokeWidth = defaultPreset.params.strokeWidth,
165
+ strokeTaper = defaultPreset.params.strokeTaper,
166
+ strokeCap = defaultPreset.params.strokeCap,
167
+ noiseFrequency = defaultPreset.params.noiseFrequency,
168
+ noisePower = defaultPreset.params.noisePower,
169
+ softness = defaultPreset.params.softness,
170
+ // Sizing props
171
+ fit = defaultPreset.params.fit,
172
+ rotation = defaultPreset.params.rotation,
173
+ scale = defaultPreset.params.scale,
174
+ originX = defaultPreset.params.originX,
175
+ originY = defaultPreset.params.originY,
176
+ offsetX = defaultPreset.params.offsetX,
177
+ offsetY = defaultPreset.params.offsetY,
178
+ worldWidth = defaultPreset.params.worldWidth,
179
+ worldHeight = defaultPreset.params.worldHeight,
180
+ ...props
181
+ }) {
182
+ const uniforms = {
183
+ // Own uniforms
184
+ u_color1: getShaderColorFromString(color1),
185
+ u_color2: getShaderColorFromString(color2),
186
+ u_density: density,
187
+ u_distortion: distortion,
188
+ u_strokeWidth: strokeWidth,
189
+ u_strokeTaper: strokeTaper,
190
+ u_strokeCap: strokeCap,
191
+ u_noiseFrequency: noiseFrequency,
192
+ u_noisePower: noisePower,
193
+ u_softness: softness,
194
+ // Sizing uniforms
195
+ u_fit: ShaderFitOptions[fit],
196
+ u_scale: scale,
197
+ u_rotation: rotation,
198
+ u_offsetX: offsetX,
199
+ u_offsetY: offsetY,
200
+ u_originX: originX,
201
+ u_originY: originY,
202
+ u_worldWidth: worldWidth,
203
+ u_worldHeight: worldHeight
204
+ };
205
+ return /* @__PURE__ */ jsx(ShaderMount, { ...props, speed, frame, fragmentShader: spiralFragmentShader, uniforms });
206
+ }, colorPropsAreEqual);
207
+ export {
208
+ Spiral,
209
+ defaultPreset,
210
+ dropletPreset,
211
+ hookPreset,
212
+ noisyPreset,
213
+ sandPreset,
214
+ spiralPresets,
215
+ swirlPreset,
216
+ vinylPreset
217
+ };
218
+ //# sourceMappingURL=spiral.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/shaders/spiral.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 ShaderFitOptions,\n spiralFragmentShader,\n type ShaderPreset,\n type SpiralParams,\n type SpiralUniforms,\n} from '@paper-design/shaders';\n\nexport interface SpiralProps extends ShaderComponentProps, SpiralParams {}\n\ntype SpiralPreset = ShaderPreset<SpiralParams>;\n\n// Due to Leva controls limitation:\n// 1) keep default colors in HSLA format to keep alpha channel\n// 2) don't use decimal values on HSL values (to avoid button highmidIntensity bug)\n\nexport const defaultPreset: SpiralPreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n color1: 'hsla(0, 0%, 98%, 1)',\n color2: 'hsla(0, 0%, 50%, 1)',\n density: 0,\n distortion: 0,\n strokeWidth: 0.5,\n strokeTaper: 0,\n strokeCap: 0,\n noiseFrequency: 0,\n noisePower: 0,\n softness: 0.01,\n speed: 1,\n frame: 0,\n },\n};\n\nexport const noisyPreset: SpiralPreset = {\n name: 'Noisy',\n params: {\n ...defaultPatternSizing,\n color1: 'hsla(87, 77%, 53%, 1)',\n color2: 'hsla(109, 70%, 31%, 1)',\n scale: 1.3,\n density: 0.5,\n distortion: 0,\n strokeWidth: 0.5,\n strokeTaper: 0,\n strokeCap: 0.5,\n noiseFrequency: 0.1,\n noisePower: 1,\n softness: 0,\n speed: 1,\n frame: 0,\n },\n};\n\nexport const dropletPreset: SpiralPreset = {\n name: 'Droplet',\n params: {\n ...defaultPatternSizing,\n color1: 'hsla(320, 50%, 50%, 1)',\n color2: 'hsla(190, 50%, 95%, 1)',\n scale: 0.65,\n density: 0,\n distortion: 0,\n strokeWidth: 0.05,\n strokeTaper: 0,\n strokeCap: 1,\n noiseFrequency: 0,\n noisePower: 0,\n softness: 0,\n speed: 1,\n frame: 0,\n },\n};\n\nexport const sandPreset: SpiralPreset = {\n name: 'Sand',\n params: {\n ...defaultPatternSizing,\n color1: 'hsla(45, 25%, 50%, 1)',\n color2: 'hsla(0, 0%, 87%, 1)',\n scale: 3,\n density: 0,\n distortion: 0,\n strokeWidth: 0.15,\n strokeTaper: 0,\n strokeCap: 0,\n noiseFrequency: 30,\n noisePower: 1,\n softness: 0.2,\n speed: 0,\n frame: 0,\n },\n};\n\nexport const swirlPreset: SpiralPreset = {\n name: 'Swirl',\n params: {\n ...defaultPatternSizing,\n color1: 'hsla(160, 50%, 80%, 1)',\n color2: 'hsla(220, 50%, 20%, 1)',\n scale: 4,\n density: 0.8,\n distortion: 0,\n strokeWidth: 0.5,\n strokeTaper: 0,\n strokeCap: 0,\n noiseFrequency: 0,\n noisePower: 0,\n softness: 0.5,\n speed: 1,\n frame: 0,\n },\n};\n\nexport const hookPreset: SpiralPreset = {\n name: 'Hook',\n params: {\n ...defaultPatternSizing,\n color1: 'hsla(0, 0%, 0%, 1)',\n color2: 'hsla(200, 50%, 70%, 1)',\n scale: 0.8,\n density: 0,\n distortion: 0,\n strokeWidth: 0.5,\n strokeTaper: 0.5,\n strokeCap: 0,\n noiseFrequency: 0,\n noisePower: 0,\n softness: 0.02,\n speed: 3,\n frame: 0,\n },\n};\n\nexport const vinylPreset: SpiralPreset = {\n name: 'Vinyl',\n params: {\n ...defaultPatternSizing,\n color1: 'hsla(0, 0%, 15%, 1)',\n color2: 'hsla(320, 5%, 75%, 1)',\n density: 0,\n distortion: 0.3,\n strokeWidth: 0.95,\n strokeTaper: 0,\n strokeCap: 1,\n noiseFrequency: 0,\n noisePower: 0,\n softness: 0.11,\n speed: 1,\n frame: 0,\n },\n};\n\nexport const spiralPresets: SpiralPreset[] = [\n defaultPreset,\n noisyPreset,\n dropletPreset,\n swirlPreset,\n sandPreset,\n hookPreset,\n vinylPreset,\n];\n\nexport const Spiral: React.FC<SpiralProps> = memo(function SpiralImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n color1 = defaultPreset.params.color1,\n color2 = defaultPreset.params.color2,\n density = defaultPreset.params.density,\n distortion = defaultPreset.params.distortion,\n strokeWidth = defaultPreset.params.strokeWidth,\n strokeTaper = defaultPreset.params.strokeTaper,\n strokeCap = defaultPreset.params.strokeCap,\n noiseFrequency = defaultPreset.params.noiseFrequency,\n noisePower = defaultPreset.params.noisePower,\n softness = defaultPreset.params.softness,\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}: SpiralProps) {\n const uniforms = {\n // Own uniforms\n u_color1: getShaderColorFromString(color1),\n u_color2: getShaderColorFromString(color2),\n u_density: density,\n u_distortion: distortion,\n u_strokeWidth: strokeWidth,\n u_strokeTaper: strokeTaper,\n u_strokeCap: strokeCap,\n u_noiseFrequency: noiseFrequency,\n u_noisePower: noisePower,\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 SpiralUniforms;\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={spiralFragmentShader} uniforms={uniforms} />\n );\n}, colorPropsAreEqual);\n"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }
@@ -0,0 +1,12 @@
1
+ import { type ShaderComponentProps } from '../shader-mount';
2
+ import { type ShaderPreset, type SwirlParams } from '@paper-design/shaders';
3
+ export interface SwirlProps extends ShaderComponentProps, SwirlParams {
4
+ }
5
+ type SwirlPreset = ShaderPreset<SwirlParams>;
6
+ export declare const defaultPreset: SwirlPreset;
7
+ export declare const openingPreset: SwirlPreset;
8
+ export declare const jamesBondPreset: SwirlPreset;
9
+ export declare const candyPreset: SwirlPreset;
10
+ export declare const swirlPresets: SwirlPreset[];
11
+ export declare const Swirl: React.FC<SwirlProps>;
12
+ export {};
@@ -0,0 +1,137 @@
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
+ defaultObjectSizing,
10
+ getShaderColorFromString,
11
+ ShaderFitOptions,
12
+ swirlFragmentShader
13
+ } from "@paper-design/shaders";
14
+ import { colorPropsAreEqual } from "../color-props-are-equal";
15
+ import { jsx } from "react/jsx-runtime";
16
+ const defaultPreset = {
17
+ name: "Default",
18
+ params: {
19
+ ...defaultObjectSizing,
20
+ scale: 2.28,
21
+ offsetX: -0.4,
22
+ offsetY: 0.3,
23
+ speed: 0.32,
24
+ frame: 0,
25
+ colors: ["hsla(0, 29%, 20%, 1)", "hsla(105, 93%, 27%, 1)", "hsla(43, 100%, 76%, 1)", "hsla(351, 100%, 60%, 1)"],
26
+ bandCount: 5,
27
+ twist: 0.11,
28
+ softness: 0.01,
29
+ noiseFrequency: 1.2,
30
+ noisePower: 0.46
31
+ }
32
+ };
33
+ const openingPreset = {
34
+ name: "Opening",
35
+ params: {
36
+ ...defaultObjectSizing,
37
+ offsetX: -0.4,
38
+ offsetY: 0.86,
39
+ speed: 0.6,
40
+ frame: 0,
41
+ colors: [
42
+ "hsla(330, 49%, 36%, 1)",
43
+ "hsla(336, 47%, 50%, 1)",
44
+ "hsla(6, 72%, 66%, 1)",
45
+ "hsla(20, 100%, 68%, 1)",
46
+ "hsla(45, 100%, 68%, 1)",
47
+ "hsla(60, 94%, 75%, 1)"
48
+ ],
49
+ bandCount: 3,
50
+ twist: 0.3,
51
+ softness: 0,
52
+ noiseFrequency: 2,
53
+ noisePower: 0
54
+ }
55
+ };
56
+ const jamesBondPreset = {
57
+ name: "007",
58
+ params: {
59
+ ...defaultObjectSizing,
60
+ speed: 1,
61
+ frame: 0,
62
+ colors: ["hsla(0, 0%, 0%, 1)", "hsla(0, 0%, 18%, 1)", "hsla(0, 0%, 0%, 1)", "hsla(0, 0%, 100%, 1)"],
63
+ bandCount: 4,
64
+ twist: 0.4,
65
+ softness: 0,
66
+ noiseFrequency: 0,
67
+ noisePower: 0
68
+ }
69
+ };
70
+ const candyPreset = {
71
+ name: "Candy",
72
+ params: {
73
+ ...defaultObjectSizing,
74
+ speed: 1,
75
+ frame: 0,
76
+ colors: ["hsla(45, 100%, 70%, 1)", "hsla(200, 80%, 65%, 1)", "hsla(280, 90%, 60%, 1)"],
77
+ bandCount: 2.5,
78
+ twist: 0.2,
79
+ softness: 1,
80
+ noiseFrequency: 0,
81
+ noisePower: 0
82
+ }
83
+ };
84
+ const swirlPresets = [defaultPreset, openingPreset, jamesBondPreset, candyPreset];
85
+ const Swirl = memo(function SwirlImpl({
86
+ // Own props
87
+ speed = defaultPreset.params.speed,
88
+ frame = defaultPreset.params.frame,
89
+ colors = defaultPreset.params.colors,
90
+ bandCount = defaultPreset.params.bandCount,
91
+ twist = defaultPreset.params.twist,
92
+ softness = defaultPreset.params.softness,
93
+ noiseFrequency = defaultPreset.params.noiseFrequency,
94
+ noisePower = defaultPreset.params.noisePower,
95
+ // Sizing props
96
+ fit = defaultPreset.params.fit,
97
+ rotation = defaultPreset.params.rotation,
98
+ scale = defaultPreset.params.scale,
99
+ originX = defaultPreset.params.originX,
100
+ originY = defaultPreset.params.originY,
101
+ offsetX = defaultPreset.params.offsetX,
102
+ offsetY = defaultPreset.params.offsetY,
103
+ worldWidth = defaultPreset.params.worldWidth,
104
+ worldHeight = defaultPreset.params.worldHeight,
105
+ ...props
106
+ }) {
107
+ const uniforms = {
108
+ // Own uniforms
109
+ u_colors: colors.map(getShaderColorFromString),
110
+ u_colorsCount: colors.length,
111
+ u_bandCount: bandCount,
112
+ u_twist: twist,
113
+ u_softness: softness,
114
+ u_noiseFrequency: noiseFrequency,
115
+ u_noisePower: noisePower,
116
+ // Sizing uniforms
117
+ u_fit: ShaderFitOptions[fit],
118
+ u_scale: scale,
119
+ u_rotation: rotation,
120
+ u_offsetX: offsetX,
121
+ u_offsetY: offsetY,
122
+ u_originX: originX,
123
+ u_originY: originY,
124
+ u_worldWidth: worldWidth,
125
+ u_worldHeight: worldHeight
126
+ };
127
+ return /* @__PURE__ */ jsx(ShaderMount, { ...props, speed, frame, fragmentShader: swirlFragmentShader, uniforms });
128
+ }, colorPropsAreEqual);
129
+ export {
130
+ Swirl,
131
+ candyPreset,
132
+ defaultPreset,
133
+ jamesBondPreset,
134
+ openingPreset,
135
+ swirlPresets
136
+ };
137
+ //# sourceMappingURL=swirl.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/shaders/swirl.tsx"],
4
+ "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount';\nimport {\n defaultObjectSizing,\n getShaderColorFromString,\n ShaderFitOptions,\n swirlFragmentShader,\n type ShaderPreset,\n type SwirlParams,\n type SwirlUniforms,\n} from '@paper-design/shaders';\nimport { colorPropsAreEqual } from '../color-props-are-equal';\n\nexport interface SwirlProps extends ShaderComponentProps, SwirlParams {}\n\ntype SwirlPreset = ShaderPreset<SwirlParams>;\n\n// Due to Leva controls limitation:\n// 1) keep default colors in HSLA format to keep alpha channel\n// 2) don't use decimal values on HSL values (to avoid button highmidIntensity bug)\n\nexport const defaultPreset: SwirlPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n scale: 2.28,\n offsetX: -0.4,\n offsetY: 0.3,\n speed: 0.32,\n frame: 0,\n colors: ['hsla(0, 29%, 20%, 1)', 'hsla(105, 93%, 27%, 1)', 'hsla(43, 100%, 76%, 1)', 'hsla(351, 100%, 60%, 1)'],\n bandCount: 5,\n twist: 0.11,\n softness: 0.01,\n noiseFrequency: 1.2,\n noisePower: 0.46,\n },\n};\n\nexport const openingPreset: SwirlPreset = {\n name: 'Opening',\n params: {\n ...defaultObjectSizing,\n offsetX: -0.4,\n offsetY: 0.86,\n speed: 0.6,\n frame: 0,\n colors: [\n 'hsla(330, 49%, 36%, 1)',\n 'hsla(336, 47%, 50%, 1)',\n 'hsla(6, 72%, 66%, 1)',\n 'hsla(20, 100%, 68%, 1)',\n 'hsla(45, 100%, 68%, 1)',\n 'hsla(60, 94%, 75%, 1)',\n ],\n bandCount: 3,\n twist: 0.3,\n softness: 0,\n noiseFrequency: 2,\n noisePower: 0,\n },\n} as const;\n\nexport const jamesBondPreset: SwirlPreset = {\n name: '007',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colors: ['hsla(0, 0%, 0%, 1)', 'hsla(0, 0%, 18%, 1)', 'hsla(0, 0%, 0%, 1)', 'hsla(0, 0%, 100%, 1)'],\n bandCount: 4,\n twist: 0.4,\n softness: 0,\n noiseFrequency: 0,\n noisePower: 0,\n },\n} as const;\n\nexport const candyPreset: SwirlPreset = {\n name: 'Candy',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colors: ['hsla(45, 100%, 70%, 1)', 'hsla(200, 80%, 65%, 1)', 'hsla(280, 90%, 60%, 1)'],\n bandCount: 2.5,\n twist: 0.2,\n softness: 1,\n noiseFrequency: 0,\n noisePower: 0,\n },\n} as const;\n\nexport const swirlPresets: SwirlPreset[] = [defaultPreset, openingPreset, jamesBondPreset, candyPreset];\n\nexport const Swirl: React.FC<SwirlProps> = memo(function SwirlImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colors = defaultPreset.params.colors,\n bandCount = defaultPreset.params.bandCount,\n twist = defaultPreset.params.twist,\n softness = defaultPreset.params.softness,\n noiseFrequency = defaultPreset.params.noiseFrequency,\n noisePower = defaultPreset.params.noisePower,\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}: SwirlProps) {\n const uniforms = {\n // Own uniforms\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_bandCount: bandCount,\n u_twist: twist,\n u_softness: softness,\n u_noiseFrequency: noiseFrequency,\n u_noisePower: noisePower,\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 SwirlUniforms;\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={swirlFragmentShader} uniforms={uniforms} />\n );\n}, colorPropsAreEqual);\n"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }
@@ -1,31 +1,10 @@
1
- import { type GlobalParams, type ShaderMountProps } from '../shader-mount';
2
- export type VoronoiParams = {
3
- scale?: number;
4
- colorCell1?: string;
5
- colorCell2?: string;
6
- colorCell3?: string;
7
- colorMid?: string;
8
- colorGradient?: number;
9
- distance?: number;
10
- edgesSize?: number;
11
- edgesSoftness?: number;
12
- middleSize?: number;
13
- middleSoftness?: number;
14
- } & GlobalParams;
15
- export type VoronoiProps = Omit<ShaderMountProps, 'fragmentShader'> & VoronoiParams;
16
- type VoronoiPreset = {
17
- name: string;
18
- params: Required<VoronoiParams>;
19
- style?: React.CSSProperties;
20
- };
1
+ import { type ShaderComponentProps } from '../shader-mount';
2
+ import { type VoronoiParams, type ShaderPreset } from '@paper-design/shaders';
3
+ export interface VoronoiProps extends ShaderComponentProps, VoronoiParams {
4
+ }
5
+ type VoronoiPreset = ShaderPreset<VoronoiParams>;
21
6
  export declare const defaultPreset: VoronoiPreset;
22
- export declare const classicPreset: VoronoiPreset;
23
- export declare const giraffePreset: VoronoiPreset;
24
- export declare const eyesPreset: VoronoiPreset;
25
- export declare const bubblesPreset: VoronoiPreset;
26
- export declare const cellsPreset: VoronoiPreset;
27
- export declare const glowPreset: VoronoiPreset;
28
- export declare const tilesPreset: VoronoiPreset;
7
+ export declare const shadowPreset: VoronoiPreset;
29
8
  export declare const voronoiPresets: VoronoiPreset[];
30
- export declare const Voronoi: ({ scale, colorCell1, colorCell2, colorCell3, colorMid, colorGradient, distance, edgesSize, edgesSoftness, middleSize, middleSoftness, ...props }: VoronoiProps) => React.ReactElement;
9
+ export declare const Voronoi: React.FC<VoronoiProps>;
31
10
  export {};