@paper-design/shaders-react 0.0.0-canary.a9965bd0 → 0.0.0-canary.b7acb21

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.
@@ -18,123 +18,170 @@ const defaultPreset = {
18
18
  name: "Default",
19
19
  params: {
20
20
  ...defaultObjectSizing,
21
- fit: "cover",
22
- scale: 0.6,
21
+ fit: "contain",
22
+ scale: 0.9,
23
23
  speed: 0,
24
24
  frame: 0,
25
- colorFront: "#9fadbc",
26
- colorBack: "#ffffff",
27
- contrast: 0.3,
25
+ colorBack: "#d3d2ab",
26
+ colorPaper: "#ffffffb5",
27
+ colorShadow: "#b3b3b3",
28
+ blending: 1,
29
+ distortion: 0.75,
30
+ clip: false,
31
+ angle: 300,
32
+ seed: 234,
28
33
  roughness: 0.4,
29
- fiber: 0.3,
30
- fiberSize: 0.2,
31
- crumples: 0.3,
32
- crumpleSize: 0.35,
33
- folds: 0.65,
34
- foldCount: 5,
35
- fade: 0,
36
- drops: 0.2,
37
- seed: 5.8
34
+ roughnessSize: 0.5,
35
+ roughnessRows: 0,
36
+ fiber: 0.4,
37
+ fiberSize: 0.5,
38
+ folds: 0,
39
+ foldSizeX: 0.6,
40
+ foldSizeY: 0.44,
41
+ foldOffsetX: 0,
42
+ foldOffsetY: 0,
43
+ wrinkles: 1,
44
+ wrinkleSize: 0.65,
45
+ crumples: 0,
46
+ crumpleCount: 6,
47
+ drops: 0.5
38
48
  }
39
49
  };
40
- const abstractPreset = {
41
- name: "Abstract",
50
+ const creasedPreset = {
51
+ name: "Creased",
42
52
  params: {
43
53
  ...defaultObjectSizing,
44
- fit: "cover",
54
+ fit: "contain",
55
+ scale: 0.9,
45
56
  speed: 0,
46
57
  frame: 0,
47
- scale: 0.6,
48
- colorFront: "#00eeff",
49
- colorBack: "#ff0a81",
50
- contrast: 0.85,
51
- roughness: 0,
52
- fiber: 0.1,
53
- fiberSize: 0.2,
54
- crumples: 0,
55
- crumpleSize: 0.3,
56
- folds: 1,
57
- foldCount: 3,
58
- fade: 0,
59
- drops: 0.2,
60
- seed: 2.2
58
+ colorBack: "#d3d2ab",
59
+ colorPaper: "#ffffff",
60
+ colorShadow: "#b3b3b3",
61
+ blending: 1,
62
+ distortion: -0.5,
63
+ clip: false,
64
+ angle: 236,
65
+ seed: 185,
66
+ roughness: 0.4,
67
+ roughnessSize: 0.25,
68
+ roughnessRows: 0,
69
+ fiber: 0.4,
70
+ fiberSize: 0.5,
71
+ folds: 0,
72
+ foldSizeX: 0.6,
73
+ foldSizeY: 0.89,
74
+ foldOffsetX: 0.59,
75
+ foldOffsetY: 1,
76
+ wrinkles: 0,
77
+ wrinkleSize: 0.65,
78
+ crumples: 1,
79
+ crumpleCount: 7,
80
+ drops: 0
61
81
  }
62
82
  };
63
- const cardboardPreset = {
64
- name: "Cardboard",
83
+ const spreadPreset = {
84
+ name: "Spread",
65
85
  params: {
66
86
  ...defaultObjectSizing,
67
- fit: "cover",
87
+ fit: "contain",
88
+ scale: 0.9,
68
89
  speed: 0,
69
90
  frame: 0,
70
- scale: 0.6,
71
- colorFront: "#c7b89e",
72
- colorBack: "#999180",
73
- contrast: 0.4,
74
- roughness: 0,
75
- fiber: 0.35,
76
- fiberSize: 0.14,
77
- crumples: 0.7,
78
- crumpleSize: 0.1,
79
- folds: 0,
80
- foldCount: 1,
81
- fade: 0,
82
- drops: 0.1,
83
- seed: 1.6
91
+ colorBack: "#ffffff00",
92
+ colorPaper: "#ffffffb5",
93
+ colorShadow: "#b3b3b3",
94
+ blending: 1,
95
+ distortion: -0.3,
96
+ clip: true,
97
+ angle: 236,
98
+ seed: 613,
99
+ roughness: 0.15,
100
+ roughnessSize: 0.25,
101
+ roughnessRows: 0,
102
+ fiber: 0.5,
103
+ fiberSize: 0.5,
104
+ folds: 1,
105
+ foldSizeX: 0.4,
106
+ foldSizeY: 0.89,
107
+ foldOffsetX: 0,
108
+ foldOffsetY: 0,
109
+ wrinkles: 0,
110
+ wrinkleSize: 0.65,
111
+ crumples: 0,
112
+ crumpleCount: 9,
113
+ drops: 0
84
114
  }
85
115
  };
86
- const detailsPreset = {
87
- name: "Details",
116
+ const flatPreset = {
117
+ name: "Flat",
88
118
  params: {
89
119
  ...defaultObjectSizing,
120
+ fit: "contain",
121
+ scale: 0.9,
90
122
  speed: 0,
91
123
  frame: 0,
92
- fit: "cover",
93
- scale: 3,
94
- colorFront: "#00000000",
95
- colorBack: "#00000000",
96
- contrast: 0,
124
+ colorBack: "#d4cdab",
125
+ colorPaper: "#ffffffa8",
126
+ colorShadow: "#b3b3b3",
127
+ blending: 1,
128
+ distortion: 0,
129
+ clip: false,
130
+ angle: 0,
131
+ seed: 455,
97
132
  roughness: 1,
98
- fiber: 0.27,
99
- fiberSize: 0.22,
100
- crumples: 1,
101
- crumpleSize: 0.5,
102
- folds: 1,
103
- foldCount: 15,
104
- fade: 0,
105
- drops: 0,
106
- seed: 6
133
+ roughnessSize: 0.5,
134
+ roughnessRows: 0.6,
135
+ fiber: 0.7,
136
+ fiberSize: 1,
137
+ folds: 0,
138
+ foldSizeX: 0,
139
+ foldSizeY: 0.44,
140
+ foldOffsetX: 0,
141
+ foldOffsetY: 0,
142
+ wrinkles: 0,
143
+ wrinkleSize: 0,
144
+ crumples: 0,
145
+ crumpleCount: 6,
146
+ drops: 0.2
107
147
  }
108
148
  };
109
149
  const paperTexturePresets = [
110
150
  defaultPreset,
111
- cardboardPreset,
112
- abstractPreset,
113
- detailsPreset
151
+ spreadPreset,
152
+ creasedPreset,
153
+ flatPreset
114
154
  ];
115
155
  const PaperTexture = memo(function PaperTextureImpl({
116
156
  // Own props
117
157
  speed = defaultPreset.params.speed,
118
158
  frame = defaultPreset.params.frame,
119
- colorFront = defaultPreset.params.colorFront,
120
- colorBack = defaultPreset.params.colorBack,
121
159
  image = "",
122
- contrast = defaultPreset.params.contrast,
160
+ colorBack = defaultPreset.params.colorBack,
161
+ colorPaper = defaultPreset.params.colorPaper,
162
+ colorShadow = defaultPreset.params.colorShadow,
163
+ blending = defaultPreset.params.blending,
164
+ distortion = defaultPreset.params.distortion,
165
+ clip = defaultPreset.params.clip,
166
+ angle = defaultPreset.params.angle,
167
+ seed = defaultPreset.params.seed,
123
168
  roughness = defaultPreset.params.roughness,
169
+ roughnessSize = defaultPreset.params.roughnessSize,
170
+ roughnessRows = defaultPreset.params.roughnessRows,
124
171
  fiber = defaultPreset.params.fiber,
125
- crumples = defaultPreset.params.crumples,
126
- folds = defaultPreset.params.folds,
127
- drops = defaultPreset.params.drops,
128
- seed = defaultPreset.params.seed,
129
- // Reworked props
130
172
  fiberScale,
131
173
  fiberSize = fiberScale === void 0 ? defaultPreset.params.fiberSize : 0.2 / fiberScale,
132
- crumplesScale,
133
- crumpleSize = crumplesScale === void 0 ? defaultPreset.params.crumpleSize : 0.2 / crumplesScale,
134
- blur,
135
- fade = blur === void 0 ? defaultPreset.params.fade : blur,
174
+ folds = defaultPreset.params.folds,
175
+ foldSizeX = defaultPreset.params.foldSizeX,
176
+ foldSizeY = defaultPreset.params.foldSizeY,
177
+ foldOffsetX = defaultPreset.params.foldOffsetX,
178
+ foldOffsetY = defaultPreset.params.foldOffsetY,
179
+ wrinkles = defaultPreset.params.wrinkles,
180
+ wrinkleSize = defaultPreset.params.wrinkleSize,
181
+ crumples = defaultPreset.params.crumples,
136
182
  foldsNumber,
137
- foldCount = foldsNumber === void 0 ? defaultPreset.params.foldCount : foldsNumber,
183
+ crumpleCount = foldsNumber === void 0 ? defaultPreset.params.crumpleCount : foldsNumber,
184
+ drops = defaultPreset.params.drops,
138
185
  // Sizing props
139
186
  fit = defaultPreset.params.fit,
140
187
  scale = defaultPreset.params.scale,
@@ -151,19 +198,30 @@ const PaperTexture = memo(function PaperTextureImpl({
151
198
  const uniforms = {
152
199
  // Own uniforms
153
200
  u_image: image,
154
- u_colorFront: getShaderColorFromString(colorFront),
201
+ u_isImage: Boolean(image),
155
202
  u_colorBack: getShaderColorFromString(colorBack),
156
- u_contrast: contrast,
203
+ u_colorPaper: getShaderColorFromString(colorPaper),
204
+ u_colorShadow: getShaderColorFromString(colorShadow),
205
+ u_blending: blending,
206
+ u_distortion: distortion,
207
+ u_clip: clip,
208
+ u_angle: angle,
209
+ u_seed: seed,
157
210
  u_roughness: roughness,
211
+ u_roughnessSize: roughnessSize,
212
+ u_roughnessRows: roughnessRows,
158
213
  u_fiber: fiber,
159
214
  u_fiberSize: fiberSize,
160
- u_crumples: crumples,
161
- u_crumpleSize: crumpleSize,
162
- u_foldCount: foldCount,
163
215
  u_folds: folds,
164
- u_fade: fade,
216
+ u_foldSizeX: foldSizeX,
217
+ u_foldSizeY: foldSizeY,
218
+ u_foldOffsetX: foldOffsetX,
219
+ u_foldOffsetY: foldOffsetY,
220
+ u_wrinkles: wrinkles,
221
+ u_wrinkleSize: wrinkleSize,
222
+ u_crumples: crumples,
223
+ u_crumpleCount: crumpleCount,
165
224
  u_drops: drops,
166
- u_seed: seed,
167
225
  ...noiseTexture,
168
226
  // Sizing uniforms
169
227
  u_fit: ShaderFitOptions[fit],
@@ -190,10 +248,10 @@ const PaperTexture = memo(function PaperTextureImpl({
190
248
  }, colorPropsAreEqual);
191
249
  export {
192
250
  PaperTexture,
193
- abstractPreset,
194
- cardboardPreset,
251
+ creasedPreset,
195
252
  defaultPreset,
196
- detailsPreset,
197
- paperTexturePresets
253
+ flatPreset,
254
+ paperTexturePresets,
255
+ spreadPreset
198
256
  };
199
257
  //# sourceMappingURL=paper-texture.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/shaders/paper-texture.tsx"],
4
- "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n defaultObjectSizing,\n getShaderColorFromString,\n getShaderNoiseTexture,\n paperTextureFragmentShader,\n ShaderFitOptions,\n type ImageShaderPreset,\n type PaperTextureParams,\n type PaperTextureUniforms,\n} from '@paper-design/shaders';\n\nexport interface PaperTextureProps extends ShaderComponentProps, PaperTextureParams {\n /** @deprecated use `fiberSize` instead */\n fiberScale?: number;\n /** @deprecated use `crumpleSize` instead */\n crumplesScale?: number;\n /** @deprecated use `foldCount` instead */\n foldsNumber?: number;\n /** @deprecated use `fade` instead */\n blur?: number;\n}\n\ntype PaperTexturePreset = ImageShaderPreset<PaperTextureParams>;\n\nexport const defaultPreset: PaperTexturePreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n scale: 0.6,\n speed: 0,\n frame: 0,\n colorFront: '#9fadbc',\n colorBack: '#ffffff',\n contrast: 0.3,\n roughness: 0.4,\n fiber: 0.3,\n fiberSize: 0.2,\n crumples: 0.3,\n crumpleSize: 0.35,\n folds: 0.65,\n foldCount: 5,\n fade: 0,\n drops: 0.2,\n seed: 5.8,\n },\n};\n\nexport const abstractPreset: PaperTexturePreset = {\n name: 'Abstract',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n speed: 0,\n frame: 0,\n scale: 0.6,\n colorFront: '#00eeff',\n colorBack: '#ff0a81',\n contrast: 0.85,\n roughness: 0,\n fiber: 0.1,\n fiberSize: 0.2,\n crumples: 0,\n crumpleSize: 0.3,\n folds: 1,\n foldCount: 3,\n fade: 0,\n drops: 0.2,\n seed: 2.2,\n },\n};\n\nexport const cardboardPreset: PaperTexturePreset = {\n name: 'Cardboard',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n speed: 0,\n frame: 0,\n scale: 0.6,\n colorFront: '#c7b89e',\n colorBack: '#999180',\n contrast: 0.4,\n roughness: 0,\n fiber: 0.35,\n fiberSize: 0.14,\n crumples: 0.7,\n crumpleSize: 0.1,\n folds: 0,\n foldCount: 1,\n fade: 0,\n drops: 0.1,\n seed: 1.6,\n },\n};\n\nexport const detailsPreset: PaperTexturePreset = {\n name: 'Details',\n params: {\n ...defaultObjectSizing,\n speed: 0,\n frame: 0,\n fit: 'cover',\n scale: 3,\n colorFront: '#00000000',\n colorBack: '#00000000',\n contrast: 0,\n roughness: 1,\n fiber: 0.27,\n fiberSize: 0.22,\n crumples: 1,\n crumpleSize: 0.5,\n folds: 1,\n foldCount: 15,\n fade: 0,\n drops: 0,\n seed: 6,\n },\n};\n\nexport const paperTexturePresets: PaperTexturePreset[] = [\n defaultPreset,\n cardboardPreset,\n abstractPreset,\n detailsPreset,\n] as const;\n\nexport const PaperTexture: React.FC<PaperTextureProps> = memo(function PaperTextureImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorFront = defaultPreset.params.colorFront,\n colorBack = defaultPreset.params.colorBack,\n image = '',\n contrast = defaultPreset.params.contrast,\n roughness = defaultPreset.params.roughness,\n fiber = defaultPreset.params.fiber,\n crumples = defaultPreset.params.crumples,\n folds = defaultPreset.params.folds,\n drops = defaultPreset.params.drops,\n seed = defaultPreset.params.seed,\n\n // Reworked props\n fiberScale,\n fiberSize = fiberScale === undefined ? defaultPreset.params.fiberSize : 0.2 / fiberScale,\n crumplesScale,\n crumpleSize = crumplesScale === undefined ? defaultPreset.params.crumpleSize : 0.2 / crumplesScale,\n blur,\n fade = blur === undefined ? defaultPreset.params.fade : blur,\n foldsNumber,\n foldCount = foldsNumber === undefined ? defaultPreset.params.foldCount : foldsNumber,\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}: PaperTextureProps) {\n const noiseTexture = typeof window !== 'undefined' && { u_noiseTexture: getShaderNoiseTexture() };\n\n const uniforms = {\n // Own uniforms\n u_image: image,\n u_colorFront: getShaderColorFromString(colorFront),\n u_colorBack: getShaderColorFromString(colorBack),\n u_contrast: contrast,\n u_roughness: roughness,\n u_fiber: fiber,\n u_fiberSize: fiberSize,\n u_crumples: crumples,\n u_crumpleSize: crumpleSize,\n u_foldCount: foldCount,\n u_folds: folds,\n u_fade: fade,\n u_drops: drops,\n u_seed: seed,\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 PaperTextureUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={paperTextureFragmentShader}\n mipmaps={['u_image']}\n uniforms={uniforms}\n />\n );\n}, colorPropsAreEqual);\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n defaultObjectSizing,\n getShaderColorFromString,\n getShaderNoiseTexture,\n paperTextureFragmentShader,\n ShaderFitOptions,\n type ImageShaderPreset,\n type PaperTextureParams,\n type PaperTextureUniforms,\n} from '@paper-design/shaders';\n\nexport interface PaperTextureProps extends ShaderComponentProps, PaperTextureParams {\n /** @deprecated use `fiberSize` instead */\n fiberScale?: number;\n /** @deprecated use `crumpleCount` instead */\n foldsNumber?: number;\n}\n\ntype PaperTexturePreset = ImageShaderPreset<PaperTextureParams>;\n\nexport const defaultPreset: PaperTexturePreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n fit: 'contain',\n scale: 0.9,\n speed: 0,\n frame: 0,\n colorBack: '#d3d2ab',\n colorPaper: '#ffffffb5',\n colorShadow: '#b3b3b3',\n blending: 1,\n distortion: 0.75,\n clip: false,\n angle: 300,\n seed: 234,\n roughness: 0.4,\n roughnessSize: 0.5,\n roughnessRows: 0,\n fiber: 0.4,\n fiberSize: 0.5,\n folds: 0,\n foldSizeX: 0.6,\n foldSizeY: 0.44,\n foldOffsetX: 0,\n foldOffsetY: 0,\n wrinkles: 1,\n wrinkleSize: 0.65,\n crumples: 0,\n crumpleCount: 6,\n drops: 0.5,\n },\n};\n\nexport const creasedPreset: PaperTexturePreset = {\n name: 'Creased',\n params: {\n ...defaultObjectSizing,\n fit: 'contain',\n scale: 0.9,\n speed: 0,\n frame: 0,\n colorBack: '#d3d2ab',\n colorPaper: '#ffffff',\n colorShadow: '#b3b3b3',\n blending: 1,\n distortion: -0.5,\n clip: false,\n angle: 236,\n seed: 185,\n roughness: 0.4,\n roughnessSize: 0.25,\n roughnessRows: 0,\n fiber: 0.4,\n fiberSize: 0.5,\n folds: 0,\n foldSizeX: 0.6,\n foldSizeY: 0.89,\n foldOffsetX: 0.59,\n foldOffsetY: 1,\n wrinkles: 0,\n wrinkleSize: 0.65,\n crumples: 1,\n crumpleCount: 7,\n drops: 0,\n },\n};\n\nexport const spreadPreset: PaperTexturePreset = {\n name: 'Spread',\n params: {\n ...defaultObjectSizing,\n fit: 'contain',\n scale: 0.9,\n speed: 0,\n frame: 0,\n colorBack: '#ffffff00',\n colorPaper: '#ffffffb5',\n colorShadow: '#b3b3b3',\n blending: 1,\n distortion: -0.3,\n clip: true,\n angle: 236,\n seed: 613,\n roughness: 0.15,\n roughnessSize: 0.25,\n roughnessRows: 0,\n fiber: 0.5,\n fiberSize: 0.5,\n folds: 1,\n foldSizeX: 0.4,\n foldSizeY: 0.89,\n foldOffsetX: 0,\n foldOffsetY: 0,\n wrinkles: 0,\n wrinkleSize: 0.65,\n crumples: 0,\n crumpleCount: 9,\n drops: 0,\n },\n};\n\nexport const flatPreset: PaperTexturePreset = {\n name: 'Flat',\n params: {\n ...defaultObjectSizing,\n fit: 'contain',\n scale: 0.9,\n speed: 0,\n frame: 0,\n colorBack: '#d4cdab',\n colorPaper: '#ffffffa8',\n colorShadow: '#b3b3b3',\n blending: 1,\n distortion: 0,\n clip: false,\n angle: 0,\n seed: 455,\n roughness: 1,\n roughnessSize: 0.5,\n roughnessRows: 0.6,\n fiber: 0.7,\n fiberSize: 1,\n folds: 0,\n foldSizeX: 0,\n foldSizeY: 0.44,\n foldOffsetX: 0,\n foldOffsetY: 0,\n wrinkles: 0,\n wrinkleSize: 0,\n crumples: 0,\n crumpleCount: 6,\n drops: 0.2,\n },\n};\n\nexport const paperTexturePresets: PaperTexturePreset[] = [\n defaultPreset,\n spreadPreset,\n creasedPreset,\n flatPreset,\n] as const;\n\nexport const PaperTexture: React.FC<PaperTextureProps> = memo(function PaperTextureImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n image = '',\n colorBack = defaultPreset.params.colorBack,\n colorPaper = defaultPreset.params.colorPaper,\n colorShadow = defaultPreset.params.colorShadow,\n blending = defaultPreset.params.blending,\n distortion = defaultPreset.params.distortion,\n clip = defaultPreset.params.clip,\n angle = defaultPreset.params.angle,\n seed = defaultPreset.params.seed,\n roughness = defaultPreset.params.roughness,\n roughnessSize = defaultPreset.params.roughnessSize,\n roughnessRows = defaultPreset.params.roughnessRows,\n fiber = defaultPreset.params.fiber,\n fiberScale,\n fiberSize = fiberScale === undefined ? defaultPreset.params.fiberSize : 0.2 / fiberScale,\n folds = defaultPreset.params.folds,\n foldSizeX = defaultPreset.params.foldSizeX,\n foldSizeY = defaultPreset.params.foldSizeY,\n foldOffsetX = defaultPreset.params.foldOffsetX,\n foldOffsetY = defaultPreset.params.foldOffsetY,\n wrinkles = defaultPreset.params.wrinkles,\n wrinkleSize = defaultPreset.params.wrinkleSize,\n crumples = defaultPreset.params.crumples,\n foldsNumber,\n crumpleCount = foldsNumber === undefined ? defaultPreset.params.crumpleCount : foldsNumber,\n drops = defaultPreset.params.drops,\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}: PaperTextureProps) {\n const noiseTexture = typeof window !== 'undefined' && { u_noiseTexture: getShaderNoiseTexture() };\n\n const uniforms = {\n // Own uniforms\n u_image: image,\n u_isImage: Boolean(image),\n u_colorBack: getShaderColorFromString(colorBack),\n u_colorPaper: getShaderColorFromString(colorPaper),\n u_colorShadow: getShaderColorFromString(colorShadow),\n u_blending: blending,\n u_distortion: distortion,\n u_clip: clip,\n u_angle: angle,\n u_seed: seed,\n u_roughness: roughness,\n u_roughnessSize: roughnessSize,\n u_roughnessRows: roughnessRows,\n u_fiber: fiber,\n u_fiberSize: fiberSize,\n u_folds: folds,\n u_foldSizeX: foldSizeX,\n u_foldSizeY: foldSizeY,\n u_foldOffsetX: foldOffsetX,\n u_foldOffsetY: foldOffsetY,\n u_wrinkles: wrinkles,\n u_wrinkleSize: wrinkleSize,\n u_crumples: crumples,\n u_crumpleCount: crumpleCount,\n u_drops: drops,\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 PaperTextureUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={paperTextureFragmentShader}\n mipmaps={['u_image']}\n uniforms={uniforms}\n />\n );\n}, colorPropsAreEqual);\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -35,7 +35,7 @@ const defaultPreset = {
35
35
  softness: 0.75,
36
36
  intensity: 0.2,
37
37
  bloom: 0.25,
38
- spots: 5,
38
+ spots: 4,
39
39
  spotSize: 0.5,
40
40
  pulse: 0.25,
41
41
  smoke: 0.3,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/shaders/pulsing-border.tsx"],
4
- "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n defaultObjectSizing,\n getShaderColorFromString,\n getShaderNoiseTexture,\n pulsingBorderFragmentShader,\n ShaderFitOptions,\n type PulsingBorderParams,\n type PulsingBorderUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\nimport { PulsingBorderAspectRatios } from '@paper-design/shaders';\n\nexport interface PulsingBorderProps extends ShaderComponentProps, PulsingBorderParams {}\n\ntype PulsingBorderPreset = ShaderPreset<PulsingBorderParams>;\n\nexport const defaultPreset: PulsingBorderPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n scale: 0.6,\n colorBack: '#000000',\n colors: ['#0dc1fd', '#d915ef', '#ff3f2ecc'],\n roundness: 0.25,\n thickness: 0.1,\n margin: 0,\n marginLeft: 0,\n marginRight: 0,\n marginTop: 0,\n marginBottom: 0,\n aspectRatio: 'auto',\n softness: 0.75,\n intensity: 0.2,\n bloom: 0.25,\n spots: 5,\n spotSize: 0.5,\n pulse: 0.25,\n smoke: 0.3,\n smokeSize: 0.6,\n },\n};\n\nexport const circlePreset: PulsingBorderPreset = {\n name: 'Circle',\n params: {\n ...defaultObjectSizing,\n aspectRatio: 'square',\n scale: 0.6,\n speed: 1,\n frame: 0,\n colorBack: '#000000',\n colors: ['#0dc1fd', '#d915ef', '#ff3f2ecc'],\n roundness: 1,\n margin: 0,\n marginLeft: 0,\n marginRight: 0,\n marginTop: 0,\n marginBottom: 0,\n thickness: 0,\n softness: 0.75,\n intensity: 0.2,\n bloom: 0.45,\n spots: 3,\n spotSize: 0.4,\n pulse: 0.5,\n smoke: 1,\n smokeSize: 0,\n },\n};\n\nexport const northernLightsPreset: PulsingBorderPreset = {\n name: 'Northern lights',\n params: {\n ...defaultObjectSizing,\n speed: 0.18,\n scale: 1.1,\n frame: 0,\n colors: ['#4c4794', '#774a7d', '#12694a', '#0aff78', '#4733cc'],\n colorBack: '#0c182c',\n roundness: 0,\n thickness: 1,\n softness: 1,\n margin: 0,\n marginLeft: 0,\n marginRight: 0,\n marginTop: 0,\n marginBottom: 0,\n aspectRatio: 'auto',\n intensity: 0.1,\n bloom: 0.2,\n spots: 4,\n spotSize: 0.25,\n pulse: 0,\n smoke: 0.32,\n smokeSize: 0.5,\n },\n};\n\nexport const solidLinePreset: PulsingBorderPreset = {\n name: 'Solid line',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colors: ['#81ADEC'],\n colorBack: '#00000000',\n roundness: 0,\n thickness: 0.05,\n margin: 0,\n marginLeft: 0,\n marginRight: 0,\n marginTop: 0,\n marginBottom: 0,\n aspectRatio: 'auto',\n softness: 0.0,\n intensity: 0.0,\n bloom: 0.15,\n spots: 4,\n spotSize: 1,\n pulse: 0,\n smoke: 0,\n smokeSize: 0,\n },\n};\n\nexport const pulsingBorderPresets: PulsingBorderPreset[] = [\n defaultPreset,\n circlePreset,\n northernLightsPreset,\n solidLinePreset,\n];\n\nexport const PulsingBorder: React.FC<PulsingBorderProps> = memo(function PulsingBorderImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colors = defaultPreset.params.colors,\n colorBack = defaultPreset.params.colorBack,\n roundness = defaultPreset.params.roundness,\n thickness = defaultPreset.params.thickness,\n aspectRatio = defaultPreset.params.aspectRatio,\n softness = defaultPreset.params.softness,\n bloom = defaultPreset.params.bloom,\n intensity = defaultPreset.params.intensity,\n spots = defaultPreset.params.spots,\n spotSize = defaultPreset.params.spotSize,\n pulse = defaultPreset.params.pulse,\n smoke = defaultPreset.params.smoke,\n smokeSize = defaultPreset.params.smokeSize,\n margin,\n marginLeft = margin ?? defaultPreset.params.marginLeft,\n marginRight = margin ?? defaultPreset.params.marginRight,\n marginTop = margin ?? defaultPreset.params.marginTop,\n marginBottom = margin ?? defaultPreset.params.marginBottom,\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}: PulsingBorderProps) {\n const uniforms = {\n // Own uniforms\n u_colorBack: getShaderColorFromString(colorBack),\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_roundness: roundness,\n u_thickness: thickness,\n u_marginLeft: marginLeft,\n u_marginRight: marginRight,\n u_marginTop: marginTop,\n u_marginBottom: marginBottom,\n u_aspectRatio: PulsingBorderAspectRatios[aspectRatio],\n u_softness: softness,\n u_intensity: intensity,\n u_bloom: bloom,\n u_spots: spots,\n u_spotSize: spotSize,\n u_pulse: pulse,\n u_smoke: smoke,\n u_smokeSize: smokeSize,\n u_noiseTexture: getShaderNoiseTexture(),\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 PulsingBorderUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={pulsingBorderFragmentShader}\n uniforms={uniforms}\n />\n );\n}, colorPropsAreEqual);\n"],
4
+ "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n defaultObjectSizing,\n getShaderColorFromString,\n getShaderNoiseTexture,\n pulsingBorderFragmentShader,\n ShaderFitOptions,\n type PulsingBorderParams,\n type PulsingBorderUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\nimport { PulsingBorderAspectRatios } from '@paper-design/shaders';\n\nexport interface PulsingBorderProps extends ShaderComponentProps, PulsingBorderParams {}\n\ntype PulsingBorderPreset = ShaderPreset<PulsingBorderParams>;\n\nexport const defaultPreset: PulsingBorderPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n scale: 0.6,\n colorBack: '#000000',\n colors: ['#0dc1fd', '#d915ef', '#ff3f2ecc'],\n roundness: 0.25,\n thickness: 0.1,\n margin: 0,\n marginLeft: 0,\n marginRight: 0,\n marginTop: 0,\n marginBottom: 0,\n aspectRatio: 'auto',\n softness: 0.75,\n intensity: 0.2,\n bloom: 0.25,\n spots: 4,\n spotSize: 0.5,\n pulse: 0.25,\n smoke: 0.3,\n smokeSize: 0.6,\n },\n};\n\nexport const circlePreset: PulsingBorderPreset = {\n name: 'Circle',\n params: {\n ...defaultObjectSizing,\n aspectRatio: 'square',\n scale: 0.6,\n speed: 1,\n frame: 0,\n colorBack: '#000000',\n colors: ['#0dc1fd', '#d915ef', '#ff3f2ecc'],\n roundness: 1,\n margin: 0,\n marginLeft: 0,\n marginRight: 0,\n marginTop: 0,\n marginBottom: 0,\n thickness: 0,\n softness: 0.75,\n intensity: 0.2,\n bloom: 0.45,\n spots: 3,\n spotSize: 0.4,\n pulse: 0.5,\n smoke: 1,\n smokeSize: 0,\n },\n};\n\nexport const northernLightsPreset: PulsingBorderPreset = {\n name: 'Northern lights',\n params: {\n ...defaultObjectSizing,\n speed: 0.18,\n scale: 1.1,\n frame: 0,\n colors: ['#4c4794', '#774a7d', '#12694a', '#0aff78', '#4733cc'],\n colorBack: '#0c182c',\n roundness: 0,\n thickness: 1,\n softness: 1,\n margin: 0,\n marginLeft: 0,\n marginRight: 0,\n marginTop: 0,\n marginBottom: 0,\n aspectRatio: 'auto',\n intensity: 0.1,\n bloom: 0.2,\n spots: 4,\n spotSize: 0.25,\n pulse: 0,\n smoke: 0.32,\n smokeSize: 0.5,\n },\n};\n\nexport const solidLinePreset: PulsingBorderPreset = {\n name: 'Solid line',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colors: ['#81ADEC'],\n colorBack: '#00000000',\n roundness: 0,\n thickness: 0.05,\n margin: 0,\n marginLeft: 0,\n marginRight: 0,\n marginTop: 0,\n marginBottom: 0,\n aspectRatio: 'auto',\n softness: 0.0,\n intensity: 0.0,\n bloom: 0.15,\n spots: 4,\n spotSize: 1,\n pulse: 0,\n smoke: 0,\n smokeSize: 0,\n },\n};\n\nexport const pulsingBorderPresets: PulsingBorderPreset[] = [\n defaultPreset,\n circlePreset,\n northernLightsPreset,\n solidLinePreset,\n];\n\nexport const PulsingBorder: React.FC<PulsingBorderProps> = memo(function PulsingBorderImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colors = defaultPreset.params.colors,\n colorBack = defaultPreset.params.colorBack,\n roundness = defaultPreset.params.roundness,\n thickness = defaultPreset.params.thickness,\n aspectRatio = defaultPreset.params.aspectRatio,\n softness = defaultPreset.params.softness,\n bloom = defaultPreset.params.bloom,\n intensity = defaultPreset.params.intensity,\n spots = defaultPreset.params.spots,\n spotSize = defaultPreset.params.spotSize,\n pulse = defaultPreset.params.pulse,\n smoke = defaultPreset.params.smoke,\n smokeSize = defaultPreset.params.smokeSize,\n margin,\n marginLeft = margin ?? defaultPreset.params.marginLeft,\n marginRight = margin ?? defaultPreset.params.marginRight,\n marginTop = margin ?? defaultPreset.params.marginTop,\n marginBottom = margin ?? defaultPreset.params.marginBottom,\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}: PulsingBorderProps) {\n const uniforms = {\n // Own uniforms\n u_colorBack: getShaderColorFromString(colorBack),\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_roundness: roundness,\n u_thickness: thickness,\n u_marginLeft: marginLeft,\n u_marginRight: marginRight,\n u_marginTop: marginTop,\n u_marginBottom: marginBottom,\n u_aspectRatio: PulsingBorderAspectRatios[aspectRatio],\n u_softness: softness,\n u_intensity: intensity,\n u_bloom: bloom,\n u_spots: spots,\n u_spotSize: spotSize,\n u_pulse: pulse,\n u_smoke: smoke,\n u_smokeSize: smokeSize,\n u_noiseTexture: getShaderNoiseTexture(),\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 PulsingBorderUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={pulsingBorderFragmentShader}\n uniforms={uniforms}\n />\n );\n}, colorPropsAreEqual);\n"],
5
5
  "mappings": "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",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@paper-design/shaders-react",
3
- "version": "0.0.0-canary.a9965bd0",
4
- "license": "SEE LICENSE IN https://github.com/paper-design/shaders/blob/main/LICENSE",
3
+ "version": "0.0.0-canary.b7acb21",
4
+ "license": "Apache-2.0",
5
5
  "type": "module",
6
6
  "sideEffects": false,
7
7
  "publishConfig": {
@@ -18,13 +18,15 @@
18
18
  }
19
19
  },
20
20
  "files": [
21
- "dist"
21
+ "dist",
22
+ "LICENSE",
23
+ "NOTICE"
22
24
  ],
23
25
  "scripts": {
24
26
  "type-check": "tsc --project tsconfig.json"
25
27
  },
26
28
  "dependencies": {
27
- "@paper-design/shaders": "0.0.0-canary.a9965bd0"
29
+ "@paper-design/shaders": "0.0.0-canary.b7acb21"
28
30
  },
29
31
  "devDependencies": {
30
32
  "@types/react": "19.1.0"