shaders 2.2.40 → 2.2.42

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 (77) hide show
  1. package/dist/core/Shatter-COjV2jLy.js +299 -0
  2. package/dist/core/Stripes-BbNFX05u.js +127 -0
  3. package/dist/core/index.js +41 -37
  4. package/dist/core/shaderRegistry.d.ts.map +1 -1
  5. package/dist/core/shaders/Shatter/index.d.ts +70 -0
  6. package/dist/core/shaders/Shatter/index.d.ts.map +1 -0
  7. package/dist/core/shaders/Shatter/index.js +4 -0
  8. package/dist/core/shaders/SimplexNoise/index.js +1 -1
  9. package/dist/core/shaders/SineWave/index.js +1 -1
  10. package/dist/core/shaders/SolidColor/index.js +1 -1
  11. package/dist/core/shaders/Spherize/index.js +1 -1
  12. package/dist/core/shaders/Spiral/index.js +1 -1
  13. package/dist/core/shaders/Strands/index.js +1 -1
  14. package/dist/core/shaders/Stretch/index.js +1 -1
  15. package/dist/core/shaders/Stripes/index.d.ts +71 -0
  16. package/dist/core/shaders/Stripes/index.d.ts.map +1 -0
  17. package/dist/core/shaders/Stripes/index.js +5 -0
  18. package/dist/core/shaders/Swirl/index.js +1 -1
  19. package/dist/core/shaders/TiltShift/index.js +1 -1
  20. package/dist/core/shaders/Tint/index.js +1 -1
  21. package/dist/core/shaders/Tritone/index.js +1 -1
  22. package/dist/core/shaders/Twirl/index.js +1 -1
  23. package/dist/core/shaders/Vibrance/index.js +1 -1
  24. package/dist/core/shaders/WaveDistortion/index.js +1 -1
  25. package/dist/core/shaders/ZoomBlur/index.js +1 -1
  26. package/dist/react/components/Shatter.d.ts +31 -0
  27. package/dist/react/components/Shatter.d.ts.map +1 -0
  28. package/dist/react/components/Stripes.d.ts +31 -0
  29. package/dist/react/components/Stripes.d.ts.map +1 -0
  30. package/dist/react/{generatePresetCode-BCeSxN_V.js → generatePresetCode-BrkW1bEe.js} +28 -0
  31. package/dist/react/index.d.ts +2 -0
  32. package/dist/react/index.d.ts.map +1 -1
  33. package/dist/react/index.js +702 -424
  34. package/dist/react/utils/generatePresetCode.d.ts.map +1 -1
  35. package/dist/react/utils/generatePresetCode.js +1 -1
  36. package/dist/registry.js +469 -0
  37. package/dist/solid/components/Shatter.d.ts +28 -0
  38. package/dist/solid/components/Shatter.d.ts.map +1 -0
  39. package/dist/solid/components/Stripes.d.ts +28 -0
  40. package/dist/solid/components/Stripes.d.ts.map +1 -0
  41. package/dist/solid/index.d.ts +2 -0
  42. package/dist/solid/index.d.ts.map +1 -1
  43. package/dist/solid/index.js +645 -361
  44. package/dist/solid/utils/generatePresetCode.d.ts.map +1 -1
  45. package/dist/solid/utils/generatePresetCode.js +28 -0
  46. package/dist/svelte/components/Shatter.svelte.d.ts +19 -0
  47. package/dist/svelte/components/Stripes.svelte.d.ts +19 -0
  48. package/dist/svelte/{generatePresetCode-BFY8wlyB.js → generatePresetCode-bx7z5wvC.js} +28 -0
  49. package/dist/svelte/index.d.ts +2 -0
  50. package/dist/svelte/index.js +254 -32
  51. package/dist/svelte/utils/generatePresetCode.js +1 -1
  52. package/dist/vue/components/Shatter.vue.d.ts +57 -0
  53. package/dist/vue/components/Shatter.vue.d.ts.map +1 -0
  54. package/dist/vue/components/Stripes.vue.d.ts +57 -0
  55. package/dist/vue/components/Stripes.vue.d.ts.map +1 -0
  56. package/dist/vue/{generatePresetCode-D3MinGC_.js → generatePresetCode-_7ZzqQPH.js} +28 -0
  57. package/dist/vue/index.d.ts +2 -0
  58. package/dist/vue/index.d.ts.map +1 -1
  59. package/dist/vue/index.js +379 -121
  60. package/dist/vue/utils/generatePresetCode.d.ts.map +1 -1
  61. package/dist/vue/utils/generatePresetCode.js +1 -1
  62. package/package.json +17 -1
  63. /package/dist/core/{SimplexNoise-CMMeggo6.js → SimplexNoise-Ce79jgYM.js} +0 -0
  64. /package/dist/core/{SineWave-DVVLqHPw.js → SineWave-Cv2gOU8a.js} +0 -0
  65. /package/dist/core/{SolidColor-zYROg_aE.js → SolidColor-DFkDBFq3.js} +0 -0
  66. /package/dist/core/{Spherize-tsKMpSaS.js → Spherize-R-s4pX9t.js} +0 -0
  67. /package/dist/core/{Spiral-DDyVSeG_.js → Spiral-W4dALX1z.js} +0 -0
  68. /package/dist/core/{Strands-B9vY4uA7.js → Strands-DtN5POfO.js} +0 -0
  69. /package/dist/core/{Stretch-BhHjbcqd.js → Stretch-BzvP_hdu.js} +0 -0
  70. /package/dist/core/{Swirl-DoCDBZad.js → Swirl-CfsYsr4X.js} +0 -0
  71. /package/dist/core/{TiltShift-BYQjUHpn.js → TiltShift-B6gbm7Z8.js} +0 -0
  72. /package/dist/core/{Tint-BUFsUBqI.js → Tint-CpnitsHw.js} +0 -0
  73. /package/dist/core/{Tritone-DS1QbB-T.js → Tritone-DzvSKVfR.js} +0 -0
  74. /package/dist/core/{Twirl-w3PgFOlA.js → Twirl-BXH4uAd6.js} +0 -0
  75. /package/dist/core/{Vibrance--gtdjy4j.js → Vibrance-ByN9bRgU.js} +0 -0
  76. /package/dist/core/{WaveDistortion-BfhB1rjJ.js → WaveDistortion-BA1PyqYH.js} +0 -0
  77. /package/dist/core/{ZoomBlur-DxUocLAG.js → ZoomBlur-CTrw7HxX.js} +0 -0
@@ -0,0 +1,299 @@
1
+ import { t as applyEdgeHandling } from "./edges-Bd7GP4s2.js";
2
+ import { o as transformEdges } from "./transformations-YbhRK-rd.js";
3
+ import { DataTexture, FloatType, LinearFilter, RGBAFormat } from "three";
4
+ import { convertToTexture, float, screenUV, smoothstep, texture, vec2, vec4 } from "three/tsl";
5
+ var seededRandom = (seed) => {
6
+ const x = Math.sin(seed) * 1e4;
7
+ return x - Math.floor(x);
8
+ };
9
+ const componentDefinition = {
10
+ name: "Shatter",
11
+ category: "Interactive",
12
+ description: "Broken glass effect with tectonic plate displacement",
13
+ requiresRTT: true,
14
+ requiresChild: true,
15
+ props: {
16
+ crackWidth: {
17
+ default: 1,
18
+ description: "Thickness of crack lines",
19
+ ui: {
20
+ type: "range",
21
+ min: .5,
22
+ max: 5,
23
+ step: .1,
24
+ label: "Crack Width"
25
+ }
26
+ },
27
+ intensity: {
28
+ default: 4,
29
+ description: "How much shards shift",
30
+ ui: {
31
+ type: "range",
32
+ min: 0,
33
+ max: 20,
34
+ step: 1,
35
+ label: "Intensity"
36
+ }
37
+ },
38
+ radius: {
39
+ default: .4,
40
+ description: "Cursor influence radius",
41
+ ui: {
42
+ type: "range",
43
+ min: .1,
44
+ max: 1,
45
+ step: .1,
46
+ label: "Radius"
47
+ }
48
+ },
49
+ decay: {
50
+ default: 1,
51
+ description: "How fast shards return to rest",
52
+ ui: {
53
+ type: "range",
54
+ min: .1,
55
+ max: 10,
56
+ step: .1,
57
+ label: "Decay"
58
+ }
59
+ },
60
+ seed: {
61
+ default: 2,
62
+ description: "Random seed for pattern",
63
+ ui: {
64
+ type: "range",
65
+ min: 0,
66
+ max: 50,
67
+ step: 1,
68
+ label: "Seed"
69
+ }
70
+ },
71
+ chromaticSplit: {
72
+ default: 1,
73
+ description: "RGB separation for prismatic glass effect",
74
+ ui: {
75
+ type: "range",
76
+ min: 0,
77
+ max: 5,
78
+ step: .1,
79
+ label: "Chromatic Split"
80
+ }
81
+ },
82
+ refractionStrength: {
83
+ default: 5,
84
+ description: "How much cracks bend/distort the underlying image",
85
+ ui: {
86
+ type: "range",
87
+ min: 0,
88
+ max: 10,
89
+ step: .1,
90
+ label: "Refraction"
91
+ }
92
+ },
93
+ shardLighting: {
94
+ default: .1,
95
+ description: "Subtle lighting on tilted shards for 3D depth",
96
+ ui: {
97
+ type: "range",
98
+ min: 0,
99
+ max: .5,
100
+ step: .1,
101
+ label: "Shard Lighting"
102
+ }
103
+ },
104
+ edges: {
105
+ default: "mirror",
106
+ description: "How to handle edges when displacement pushes content out of bounds",
107
+ transform: transformEdges,
108
+ ui: {
109
+ type: "select",
110
+ options: [
111
+ {
112
+ label: "Stretch",
113
+ value: "stretch"
114
+ },
115
+ {
116
+ label: "Transparent",
117
+ value: "transparent"
118
+ },
119
+ {
120
+ label: "Mirror",
121
+ value: "mirror"
122
+ },
123
+ {
124
+ label: "Wrap",
125
+ value: "wrap"
126
+ }
127
+ ],
128
+ label: "Edges"
129
+ }
130
+ }
131
+ },
132
+ fragmentNode: ({ uniforms, onBeforeRender, childNode, onCleanup }) => {
133
+ const SHARD_COUNT = 16;
134
+ const FRICTION = 1;
135
+ const cellData = new Float32Array(SHARD_COUNT * 4);
136
+ const cellTexture = new DataTexture(cellData, 4, 4, RGBAFormat, FloatType);
137
+ cellTexture.magFilter = LinearFilter;
138
+ cellTexture.minFilter = LinearFilter;
139
+ const displacementData = new Float32Array(SHARD_COUNT * 4);
140
+ const displacementTexture = new DataTexture(displacementData, 4, 4, RGBAFormat, FloatType);
141
+ displacementTexture.magFilter = LinearFilter;
142
+ displacementTexture.minFilter = LinearFilter;
143
+ const generateCells = (seed) => {
144
+ for (let i = 0; i < SHARD_COUNT; i++) {
145
+ cellData[i * 4] = seededRandom(seed + i * 2);
146
+ cellData[i * 4 + 1] = seededRandom(seed + i * 2 + 1);
147
+ cellData[i * 4 + 2] = seededRandom(seed + i * 3);
148
+ cellData[i * 4 + 3] = seededRandom(seed + i * 3 + 1);
149
+ }
150
+ cellTexture.needsUpdate = true;
151
+ };
152
+ let currentSeed = uniforms.seed.uniform.value;
153
+ generateCells(currentSeed);
154
+ displacementData.fill(0);
155
+ displacementTexture.needsUpdate = true;
156
+ let prevX = .5;
157
+ let prevY = .5;
158
+ let lastTime = Date.now();
159
+ onBeforeRender(({ pointer }) => {
160
+ const currentTime = Date.now();
161
+ const dt = Math.min((currentTime - lastTime) / 1e3, .016);
162
+ lastTime = currentTime;
163
+ const newSeed = uniforms.seed.uniform.value;
164
+ if (newSeed !== currentSeed) {
165
+ currentSeed = newSeed;
166
+ generateCells(currentSeed);
167
+ displacementData.fill(0);
168
+ }
169
+ const intensity = uniforms.intensity.uniform.value;
170
+ const radius = uniforms.radius.uniform.value;
171
+ const decay = uniforms.decay.uniform.value;
172
+ const friction = FRICTION;
173
+ let velX = dt > 0 ? (pointer.x - prevX) / dt : 0;
174
+ let velY = dt > 0 ? (pointer.y - prevY) / dt : 0;
175
+ let speed = Math.sqrt(velX * velX + velY * velY);
176
+ const maxVelocity = 5 + intensity * 2;
177
+ if (speed > maxVelocity) {
178
+ const scale = maxVelocity / speed;
179
+ velX *= scale;
180
+ velY *= scale;
181
+ speed = maxVelocity;
182
+ }
183
+ for (let i = 0; i < SHARD_COUNT; i++) {
184
+ const cellX = cellData[i * 4];
185
+ const cellY = cellData[i * 4 + 1];
186
+ const randomDirX = cellData[i * 4 + 2] - .5;
187
+ const randomDirY = cellData[i * 4 + 3] - .5;
188
+ const dx = cellX - pointer.x;
189
+ const dy = cellY - pointer.y;
190
+ const dist = Math.sqrt(dx * dx + dy * dy);
191
+ let currentDx = displacementData[i * 4];
192
+ let currentDy = displacementData[i * 4 + 1];
193
+ const decayTime = Math.max(.01, decay);
194
+ const decayFactor = Math.exp(-dt / decayTime);
195
+ currentDx *= decayFactor;
196
+ currentDy *= decayFactor;
197
+ let velocityDx = 0;
198
+ let velocityDy = 0;
199
+ if (dist < radius && speed > .01) {
200
+ const influence = Math.max(0, 1 - dist / radius);
201
+ const influenceCurve = influence * influence;
202
+ const pushForce = influenceCurve * speed * intensity * dt * .5;
203
+ velocityDx = velX * pushForce;
204
+ velocityDy = velY * pushForce;
205
+ const jitterForce = influenceCurve * speed * intensity * dt * .1;
206
+ velocityDx += randomDirX * jitterForce;
207
+ velocityDy += randomDirY * jitterForce;
208
+ }
209
+ const lerpFactor = Math.min(1, friction * dt);
210
+ displacementData[i * 4] = currentDx + velocityDx * lerpFactor;
211
+ displacementData[i * 4 + 1] = currentDy + velocityDy * lerpFactor;
212
+ displacementData[i * 4 + 2] = 0;
213
+ displacementData[i * 4 + 3] = 0;
214
+ }
215
+ displacementTexture.needsUpdate = true;
216
+ prevX = pointer.x;
217
+ prevY = pointer.y;
218
+ });
219
+ onCleanup(() => {
220
+ cellTexture.dispose();
221
+ displacementTexture.dispose();
222
+ });
223
+ if (!childNode) return vec4(0, 0, 0, 0);
224
+ const childTexture = convertToTexture(childNode);
225
+ onCleanup(() => {
226
+ if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
227
+ });
228
+ const cellField = texture(cellTexture);
229
+ const dispField = texture(displacementTexture);
230
+ const cells = [];
231
+ for (let i = 0; i < SHARD_COUNT; i++) {
232
+ const u = (i % 4 + .5) / 4;
233
+ const v = (Math.floor(i / 4) + .5) / 4;
234
+ const cellPos = cellField.sample(vec2(u, v)).xy;
235
+ const dist = screenUV.sub(cellPos).length();
236
+ cells.push({
237
+ dist,
238
+ index: float(i)
239
+ });
240
+ }
241
+ let minDist1 = cells[0].dist;
242
+ let minDist2 = float(1e3);
243
+ let nearestIdx = cells[0].index;
244
+ for (let i = 1; i < SHARD_COUNT; i++) {
245
+ const dist = cells[i].dist;
246
+ const isNewNearest = dist.lessThan(minDist1);
247
+ const isNewSecond = dist.lessThan(minDist2).and(isNewNearest.not());
248
+ const nextMin2 = isNewNearest.select(minDist1, isNewSecond.select(dist, minDist2));
249
+ const nextMin1 = isNewNearest.select(dist, minDist1);
250
+ const nextIdx = isNewNearest.select(cells[i].index, nearestIdx);
251
+ minDist2 = nextMin2;
252
+ minDist1 = nextMin1;
253
+ nearestIdx = nextIdx;
254
+ }
255
+ const dispU = nearestIdx.mod(float(4)).add(.5).div(4);
256
+ const dispV = nearestIdx.div(float(4)).floor().add(.5).div(4);
257
+ const displacement = dispField.sample(vec2(dispU, dispV)).xy;
258
+ const displacementMag = displacement.length();
259
+ const edgeDiff = minDist2.sub(minDist1);
260
+ const crackThreshold = uniforms.crackWidth.uniform.mul(.005);
261
+ const baseCrackIntensity = float(1).sub(smoothstep(float(0), crackThreshold, edgeDiff));
262
+ const displacementFactor = smoothstep(float(0), float(.01), displacementMag);
263
+ const crackIntensity = baseCrackIntensity.mul(displacementFactor);
264
+ const nearestCellU = nearestIdx.mod(float(4)).add(.5).div(4);
265
+ const nearestCellV = nearestIdx.div(float(4)).floor().add(.5).div(4);
266
+ const nearestCellPos = cellField.sample(vec2(nearestCellU, nearestCellV)).xy;
267
+ const toNearest = screenUV.sub(nearestCellPos).normalize();
268
+ const edgeNormal = vec2(toNearest.y.negate(), toNearest.x);
269
+ const displacedUV = screenUV.sub(displacement);
270
+ const refractionOffset = edgeNormal.mul(uniforms.refractionStrength.uniform).mul(.01);
271
+ const chromaticOffset = uniforms.chromaticSplit.uniform.mul(.005);
272
+ const rOffset = refractionOffset.add(edgeNormal.mul(chromaticOffset));
273
+ const gOffset = refractionOffset;
274
+ const bOffset = refractionOffset.sub(edgeNormal.mul(chromaticOffset));
275
+ const rUV = displacedUV.add(rOffset.mul(crackIntensity));
276
+ const gUV = displacedUV.add(gOffset.mul(crackIntensity));
277
+ const bUV = displacedUV.add(bOffset.mul(crackIntensity));
278
+ const rSample = childTexture.sample(rUV);
279
+ const gSample = childTexture.sample(gUV);
280
+ const bSample = childTexture.sample(bUV);
281
+ const rFinal = applyEdgeHandling(rUV, rSample, childTexture, uniforms.edges.uniform);
282
+ const gFinal = applyEdgeHandling(gUV, gSample, childTexture, uniforms.edges.uniform);
283
+ const bFinal = applyEdgeHandling(bUV, bSample, childTexture, uniforms.edges.uniform);
284
+ const refractedColor = vec4(rFinal.r, gFinal.g, bFinal.b, gFinal.a);
285
+ const normalColor = applyEdgeHandling(displacedUV, childTexture.sample(displacedUV), childTexture, uniforms.edges.uniform);
286
+ let shadedRGB = normalColor.rgb.mul(float(1).sub(crackIntensity)).add(refractedColor.rgb.mul(crackIntensity));
287
+ const displacementLength = displacement.length();
288
+ const tiltX = displacement.x.div(displacementLength.add(.001));
289
+ const tiltY = displacement.y.div(displacementLength.add(.001));
290
+ const lightDir3D = vec2(.3, .6).normalize();
291
+ const normalDot = tiltX.mul(lightDir3D.x).add(tiltY.mul(lightDir3D.y));
292
+ const lightingFactor = float(1).add(normalDot.mul(uniforms.shardLighting.uniform));
293
+ const lightingIntensity = smoothstep(float(0), float(.02), displacementLength);
294
+ const finalLighting = float(1).add(lightingFactor.sub(1).mul(lightingIntensity));
295
+ return vec4(shadedRGB.mul(finalLighting), normalColor.a);
296
+ }
297
+ };
298
+ var Shatter_default = componentDefinition;
299
+ export { componentDefinition as n, Shatter_default as t };
@@ -0,0 +1,127 @@
1
+ import { i as transformColorSpace, n as transformAngle, r as transformColor, t as colorSpaceOptions } from "./transformations-YbhRK-rd.js";
2
+ import { t as createAnimatedTime } from "./time-BZqyVJXt.js";
3
+ import { t as mixColors } from "./colorMixing-CZPFmiT4.js";
4
+ import { cos, fract, fwidth, screenUV, sin, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
5
+ const componentDefinition = {
6
+ name: "Stripes",
7
+ category: "Base Layers",
8
+ description: "Alternating colored stripes with animation",
9
+ props: {
10
+ colorA: {
11
+ default: "#000000",
12
+ transform: transformColor,
13
+ description: "First stripe color",
14
+ ui: {
15
+ type: "color",
16
+ label: "Color A"
17
+ }
18
+ },
19
+ colorB: {
20
+ default: "#ffffff",
21
+ transform: transformColor,
22
+ description: "Second stripe color",
23
+ ui: {
24
+ type: "color",
25
+ label: "Color B"
26
+ }
27
+ },
28
+ angle: {
29
+ default: 45,
30
+ transform: transformAngle,
31
+ description: "Angle of stripes in degrees",
32
+ ui: {
33
+ type: "range",
34
+ min: -180,
35
+ max: 180,
36
+ step: 1,
37
+ label: "Angle"
38
+ }
39
+ },
40
+ density: {
41
+ default: 5,
42
+ description: "Number of stripe pairs visible",
43
+ ui: {
44
+ type: "range",
45
+ min: 1,
46
+ max: 30,
47
+ step: 1,
48
+ label: "Density"
49
+ }
50
+ },
51
+ balance: {
52
+ default: .5,
53
+ description: "Ratio of the two colors",
54
+ ui: {
55
+ type: "range",
56
+ min: .01,
57
+ max: .99,
58
+ step: .01,
59
+ label: "Balance"
60
+ }
61
+ },
62
+ softness: {
63
+ default: 0,
64
+ description: "Edge softness",
65
+ ui: {
66
+ type: "range",
67
+ min: 0,
68
+ max: 1,
69
+ step: .01,
70
+ label: "Softness"
71
+ }
72
+ },
73
+ speed: {
74
+ default: .2,
75
+ description: "Animation speed",
76
+ ui: {
77
+ type: "range",
78
+ min: -1,
79
+ max: 1,
80
+ step: .1,
81
+ label: "Speed"
82
+ }
83
+ },
84
+ offset: {
85
+ default: 0,
86
+ description: "Phase offset for pattern positioning",
87
+ ui: {
88
+ type: "range",
89
+ min: 0,
90
+ max: 1,
91
+ step: .01,
92
+ label: "Offset"
93
+ }
94
+ },
95
+ colorSpace: {
96
+ default: "linear",
97
+ transform: transformColorSpace,
98
+ description: "Color space for interpolation",
99
+ ui: {
100
+ type: "select",
101
+ options: colorSpaceOptions,
102
+ label: "Color Space"
103
+ }
104
+ }
105
+ },
106
+ fragmentNode: (params) => {
107
+ const { uniforms } = params;
108
+ const uv$1 = screenUV;
109
+ const aspect = viewportSize.x.div(viewportSize.y);
110
+ const aspectCorrectedUV = vec2(uv$1.x.mul(aspect), uv$1.y);
111
+ const angleRad = uniforms.angle.uniform.mul(.0174533);
112
+ const cosA = cos(angleRad);
113
+ const sinA = sin(angleRad);
114
+ const rotatedCoord = aspectCorrectedUV.x.mul(cosA).add(aspectCorrectedUV.y.mul(sinA));
115
+ const t = createAnimatedTime(params, uniforms.speed);
116
+ const pattern = rotatedCoord.mul(uniforms.density.uniform).add(t).add(uniforms.offset.uniform);
117
+ const stripe = fract(pattern);
118
+ const fw = fwidth(pattern);
119
+ const balance = uniforms.balance.uniform;
120
+ const soft = uniforms.softness.uniform;
121
+ const mask = smoothstep(balance.sub(soft).sub(fw), balance.add(soft).add(fw), stripe);
122
+ const mixedColor = mixColors(uniforms.colorA.uniform, uniforms.colorB.uniform, mask, uniforms.colorSpace.uniform);
123
+ return vec4(mixedColor.rgb, mixedColor.a);
124
+ }
125
+ };
126
+ var Stripes_default = componentDefinition;
127
+ export { componentDefinition as n, Stripes_default as t };
@@ -46,21 +46,23 @@ import { n as componentDefinition$40 } from "./RectangularCoordinates-CiW3J4UT.j
46
46
  import { n as componentDefinition$41 } from "./Ripples-DKBIp3Qq.js";
47
47
  import { n as componentDefinition$42 } from "./Saturation-DVVlpikK.js";
48
48
  import { n as componentDefinition$43 } from "./Sharpness-cw57bW0s.js";
49
- import { n as componentDefinition$44 } from "./SimplexNoise-CMMeggo6.js";
50
- import { n as componentDefinition$45 } from "./SineWave-DVVLqHPw.js";
51
- import { n as componentDefinition$46 } from "./SolidColor-zYROg_aE.js";
52
- import { n as componentDefinition$47 } from "./Spherize-tsKMpSaS.js";
53
- import { n as componentDefinition$48 } from "./Spiral-DDyVSeG_.js";
54
- import { n as componentDefinition$49 } from "./Strands-B9vY4uA7.js";
55
- import { n as componentDefinition$50 } from "./Stretch-BhHjbcqd.js";
56
- import { n as componentDefinition$51 } from "./Swirl-DoCDBZad.js";
57
- import { n as componentDefinition$52 } from "./TiltShift-BYQjUHpn.js";
58
- import { n as componentDefinition$53 } from "./Tint-BUFsUBqI.js";
59
- import { n as componentDefinition$54 } from "./Tritone-DS1QbB-T.js";
60
- import { n as componentDefinition$55 } from "./Twirl-w3PgFOlA.js";
61
- import { n as componentDefinition$56 } from "./Vibrance--gtdjy4j.js";
62
- import { n as componentDefinition$57 } from "./WaveDistortion-BfhB1rjJ.js";
63
- import { n as componentDefinition$58 } from "./ZoomBlur-DxUocLAG.js";
49
+ import { n as componentDefinition$44 } from "./Shatter-COjV2jLy.js";
50
+ import { n as componentDefinition$45 } from "./SimplexNoise-Ce79jgYM.js";
51
+ import { n as componentDefinition$46 } from "./SineWave-Cv2gOU8a.js";
52
+ import { n as componentDefinition$47 } from "./SolidColor-DFkDBFq3.js";
53
+ import { n as componentDefinition$48 } from "./Spherize-R-s4pX9t.js";
54
+ import { n as componentDefinition$49 } from "./Spiral-W4dALX1z.js";
55
+ import { n as componentDefinition$50 } from "./Strands-DtN5POfO.js";
56
+ import { n as componentDefinition$51 } from "./Stretch-BzvP_hdu.js";
57
+ import { n as componentDefinition$52 } from "./Stripes-BbNFX05u.js";
58
+ import { n as componentDefinition$53 } from "./Swirl-CfsYsr4X.js";
59
+ import { n as componentDefinition$54 } from "./TiltShift-B6gbm7Z8.js";
60
+ import { n as componentDefinition$55 } from "./Tint-CpnitsHw.js";
61
+ import { n as componentDefinition$56 } from "./Tritone-DzvSKVfR.js";
62
+ import { n as componentDefinition$57 } from "./Twirl-BXH4uAd6.js";
63
+ import { n as componentDefinition$58 } from "./Vibrance-ByN9bRgU.js";
64
+ import { n as componentDefinition$59 } from "./WaveDistortion-BA1PyqYH.js";
65
+ import { n as componentDefinition$60 } from "./ZoomBlur-CTrw7HxX.js";
64
66
  import { Material, Mesh, MeshBasicNodeMaterial, OrthographicCamera, PlaneGeometry, SRGBColorSpace, Scene, WebGPURenderer } from "three/webgpu";
65
67
  import { WebGLRenderer } from "three";
66
68
  import { PI, abs, add, atan, convertToTexture, cos, div, dot, float, fract, max, min, mix, mul, pow, screenUV, sin, smoothstep, sqrt, step, sub, time, uniform, uv, vec2, vec3, vec4 } from "three/tsl";
@@ -1087,7 +1089,7 @@ function shaderRenderer() {
1087
1089
  }
1088
1090
  }
1089
1091
  };
1090
- const registerNode = (id, fragmentNodeFunc, parentId, metadata, uniforms = {}, componentDefinition$59) => {
1092
+ const registerNode = (id, fragmentNodeFunc, parentId, metadata, uniforms = {}, componentDefinition$61) => {
1091
1093
  if (fragmentNodeFunc === null) {
1092
1094
  const queueIndex = pendingRegistrationQueue.findIndex((item) => item.id === id);
1093
1095
  if (queueIndex !== -1) {
@@ -1105,7 +1107,7 @@ function shaderRenderer() {
1105
1107
  parentId,
1106
1108
  metadata,
1107
1109
  uniforms,
1108
- componentDefinition: componentDefinition$59
1110
+ componentDefinition: componentDefinition$61
1109
1111
  };
1110
1112
  else pendingRegistrationQueue.push({
1111
1113
  id,
@@ -1113,7 +1115,7 @@ function shaderRenderer() {
1113
1115
  parentId,
1114
1116
  metadata,
1115
1117
  uniforms,
1116
- componentDefinition: componentDefinition$59
1118
+ componentDefinition: componentDefinition$61
1117
1119
  });
1118
1120
  return;
1119
1121
  }
@@ -1146,11 +1148,11 @@ function shaderRenderer() {
1146
1148
  }
1147
1149
  const nodeInfo = {
1148
1150
  id,
1149
- componentName: componentDefinition$59?.name || "Unknown",
1151
+ componentName: componentDefinition$61?.name || "Unknown",
1150
1152
  fragmentNodeFunc,
1151
1153
  parentId,
1152
- requiresRTT: componentDefinition$59?.requiresRTT || false,
1153
- requiresChild: componentDefinition$59?.requiresChild || false,
1154
+ requiresRTT: componentDefinition$61?.requiresRTT || false,
1155
+ requiresChild: componentDefinition$61?.requiresChild || false,
1154
1156
  opacityUniform,
1155
1157
  metadata: {
1156
1158
  blendMode: metadata?.blendMode || "normal",
@@ -1466,7 +1468,7 @@ function shaderRenderer() {
1466
1468
  if (pendingRegistrationQueue.length === 0) return;
1467
1469
  const queue = [...pendingRegistrationQueue];
1468
1470
  pendingRegistrationQueue = [];
1469
- for (const { id, fragmentNodeFunc, parentId, metadata, uniforms, componentDefinition: componentDefinition$59 } of queue) if (fragmentNodeFunc) registerNode(id, fragmentNodeFunc, parentId, metadata, uniforms, componentDefinition$59);
1471
+ for (const { id, fragmentNodeFunc, parentId, metadata, uniforms, componentDefinition: componentDefinition$61 } of queue) if (fragmentNodeFunc) registerNode(id, fragmentNodeFunc, parentId, metadata, uniforms, componentDefinition$61);
1470
1472
  };
1471
1473
  const initialize = async ({ canvas, enablePerformanceTracking: enableTracking = false }) => {
1472
1474
  if (isInitialized || isInitializing) return;
@@ -1805,21 +1807,23 @@ var createShaderRegistry = () => {
1805
1807
  Ripples: componentDefinition$41,
1806
1808
  Saturation: componentDefinition$42,
1807
1809
  Sharpness: componentDefinition$43,
1808
- SimplexNoise: componentDefinition$44,
1809
- SineWave: componentDefinition$45,
1810
- SolidColor: componentDefinition$46,
1811
- Spherize: componentDefinition$47,
1812
- Spiral: componentDefinition$48,
1813
- Strands: componentDefinition$49,
1814
- Stretch: componentDefinition$50,
1815
- Swirl: componentDefinition$51,
1816
- TiltShift: componentDefinition$52,
1817
- Tint: componentDefinition$53,
1818
- Tritone: componentDefinition$54,
1819
- Twirl: componentDefinition$55,
1820
- Vibrance: componentDefinition$56,
1821
- WaveDistortion: componentDefinition$57,
1822
- ZoomBlur: componentDefinition$58
1810
+ Shatter: componentDefinition$44,
1811
+ SimplexNoise: componentDefinition$45,
1812
+ SineWave: componentDefinition$46,
1813
+ SolidColor: componentDefinition$47,
1814
+ Spherize: componentDefinition$48,
1815
+ Spiral: componentDefinition$49,
1816
+ Strands: componentDefinition$50,
1817
+ Stretch: componentDefinition$51,
1818
+ Stripes: componentDefinition$52,
1819
+ Swirl: componentDefinition$53,
1820
+ TiltShift: componentDefinition$54,
1821
+ Tint: componentDefinition$55,
1822
+ Tritone: componentDefinition$56,
1823
+ Twirl: componentDefinition$57,
1824
+ Vibrance: componentDefinition$58,
1825
+ WaveDistortion: componentDefinition$59,
1826
+ ZoomBlur: componentDefinition$60
1823
1827
  };
1824
1828
  Object.entries(shaderDefinitions).forEach(([fileName, def]) => {
1825
1829
  const propsMetadata = {};
@@ -1 +1 @@
1
- {"version":3,"file":"shaderRegistry.d.ts","sourceRoot":"","sources":["../src/shaderRegistry.ts"],"names":[],"mappings":"AA8DA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAElD,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,UAAU,EAAE,mBAAmB,CAAC,GAAG,CAAC,CAAA;IACpC,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE;QAC5B,EAAE,CAAC,EAAE,GAAG,CAAA;QACR,OAAO,CAAC,EAAE,GAAG,CAAA;QACb,WAAW,CAAC,EAAE,MAAM,CAAA;KACrB,CAAC,CAAA;CACH;AA+FD,eAAO,MAAM,cAAc,qCAAyB,CAAA;AAGpD,wBAAgB,aAAa,IAAI,mBAAmB,EAAE,CAErD;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,mBAAmB,GAAG,SAAS,CAE7E;AAED,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,MAAM,GAAG,mBAAmB,EAAE,CAE5E;AAED,wBAAgB,mBAAmB,IAAI,MAAM,EAAE,CAG9C"}
1
+ {"version":3,"file":"shaderRegistry.d.ts","sourceRoot":"","sources":["../src/shaderRegistry.ts"],"names":[],"mappings":"AAgEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAElD,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,UAAU,EAAE,mBAAmB,CAAC,GAAG,CAAC,CAAA;IACpC,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE;QAC5B,EAAE,CAAC,EAAE,GAAG,CAAA;QACR,OAAO,CAAC,EAAE,GAAG,CAAA;QACb,WAAW,CAAC,EAAE,MAAM,CAAA;KACrB,CAAC,CAAA;CACH;AAiGD,eAAO,MAAM,cAAc,qCAAyB,CAAA;AAGpD,wBAAgB,aAAa,IAAI,mBAAmB,EAAE,CAErD;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,mBAAmB,GAAG,SAAS,CAE7E;AAED,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,MAAM,GAAG,mBAAmB,EAAE,CAE5E;AAED,wBAAgB,mBAAmB,IAAI,MAAM,EAAE,CAG9C"}
@@ -0,0 +1,70 @@
1
+ import { ComponentDefinition } from '../../types';
2
+
3
+ export interface ComponentProps {
4
+ /**
5
+ * Thickness of crack lines
6
+ *
7
+ * Accepts a number between 0.5 and 5.
8
+ * @default 1
9
+ */
10
+ crackWidth: number;
11
+ /**
12
+ * How much shards shift
13
+ *
14
+ * Accepts a number between 0 and 20.
15
+ * @default 4
16
+ */
17
+ intensity: number;
18
+ /**
19
+ * Cursor influence radius
20
+ *
21
+ * Accepts a number between 0.1 and 1.
22
+ * @default 0.4
23
+ */
24
+ radius: number;
25
+ /**
26
+ * How fast shards return to rest
27
+ *
28
+ * Accepts a number between 0.1 and 10.
29
+ * @default 1
30
+ */
31
+ decay: number;
32
+ /**
33
+ * Random seed for pattern
34
+ *
35
+ * Accepts a number between 0 and 50.
36
+ * @default 2
37
+ */
38
+ seed: number;
39
+ /**
40
+ * RGB separation for prismatic glass effect
41
+ *
42
+ * Accepts a number between 0 and 5.
43
+ * @default 1
44
+ */
45
+ chromaticSplit: number;
46
+ /**
47
+ * How much cracks bend/distort the underlying image
48
+ *
49
+ * Accepts a number between 0 and 10.
50
+ * @default 5
51
+ */
52
+ refractionStrength: number;
53
+ /**
54
+ * Subtle lighting on tilted shards for 3D depth
55
+ *
56
+ * Accepts a number between 0 and 0.5.
57
+ * @default 0.1
58
+ */
59
+ shardLighting: number;
60
+ /**
61
+ * How to handle edges when displacement pushes content out of bounds
62
+ *
63
+ * Accepts one of: `"stretch"`, `"transparent"`, `"mirror"`, `"wrap"`.
64
+ * @default "mirror"
65
+ */
66
+ edges: string;
67
+ }
68
+ export declare const componentDefinition: ComponentDefinition<ComponentProps>;
69
+ export default componentDefinition;
70
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shaders/Shatter/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,mBAAmB,EAAqB,MAAM,iBAAiB,CAAA;AAQvE,MAAM,WAAW,cAAc;IAC3B,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,cAAc,EAAE,MAAM,CAAA;IACtB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,aAAa,EAAE,MAAM,CAAA;IACrB,KAAK,EAAE,MAAM,CAAA;CAChB;AAQD,eAAO,MAAM,mBAAmB,EAAE,mBAAmB,CAAC,cAAc,CAqXnE,CAAA;AAED,eAAe,mBAAmB,CAAA"}
@@ -0,0 +1,4 @@
1
+ import "../../edges-Bd7GP4s2.js";
2
+ import "../../transformations-YbhRK-rd.js";
3
+ import { n as componentDefinition, t as Shatter_default } from "../../Shatter-COjV2jLy.js";
4
+ export { componentDefinition, Shatter_default as default };
@@ -1,5 +1,5 @@
1
1
  import "../../transformations-YbhRK-rd.js";
2
2
  import "../../time-BZqyVJXt.js";
3
3
  import "../../colorMixing-CZPFmiT4.js";
4
- import { n as componentDefinition, t as SimplexNoise_default } from "../../SimplexNoise-CMMeggo6.js";
4
+ import { n as componentDefinition, t as SimplexNoise_default } from "../../SimplexNoise-Ce79jgYM.js";
5
5
  export { componentDefinition, SimplexNoise_default as default };
@@ -1,4 +1,4 @@
1
1
  import "../../transformations-YbhRK-rd.js";
2
2
  import "../../time-BZqyVJXt.js";
3
- import { n as componentDefinition, t as SineWave_default } from "../../SineWave-DVVLqHPw.js";
3
+ import { n as componentDefinition, t as SineWave_default } from "../../SineWave-Cv2gOU8a.js";
4
4
  export { componentDefinition, SineWave_default as default };
@@ -1,3 +1,3 @@
1
1
  import "../../transformations-YbhRK-rd.js";
2
- import { n as componentDefinition, t as SolidColor_default } from "../../SolidColor-zYROg_aE.js";
2
+ import { n as componentDefinition, t as SolidColor_default } from "../../SolidColor-DFkDBFq3.js";
3
3
  export { componentDefinition, SolidColor_default as default };
@@ -1,3 +1,3 @@
1
1
  import "../../transformations-YbhRK-rd.js";
2
- import { n as componentDefinition, t as Spherize_default } from "../../Spherize-tsKMpSaS.js";
2
+ import { n as componentDefinition, t as Spherize_default } from "../../Spherize-R-s4pX9t.js";
3
3
  export { componentDefinition, Spherize_default as default };
@@ -1,5 +1,5 @@
1
1
  import "../../transformations-YbhRK-rd.js";
2
2
  import "../../time-BZqyVJXt.js";
3
3
  import "../../colorMixing-CZPFmiT4.js";
4
- import { n as componentDefinition, t as Spiral_default } from "../../Spiral-DDyVSeG_.js";
4
+ import { n as componentDefinition, t as Spiral_default } from "../../Spiral-W4dALX1z.js";
5
5
  export { componentDefinition, Spiral_default as default };
@@ -1,4 +1,4 @@
1
1
  import "../../transformations-YbhRK-rd.js";
2
2
  import "../../time-BZqyVJXt.js";
3
- import { n as componentDefinition, t as Strands_default } from "../../Strands-B9vY4uA7.js";
3
+ import { n as componentDefinition, t as Strands_default } from "../../Strands-DtN5POfO.js";
4
4
  export { componentDefinition, Strands_default as default };