shaders 2.4.78 → 2.5.81

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 (64) hide show
  1. package/dist/core/Liquify-Cr-1qPxN.js +228 -0
  2. package/dist/core/index.d.ts +1 -1
  3. package/dist/core/index.d.ts.map +1 -1
  4. package/dist/core/index.js +59 -53
  5. package/dist/core/presetRenderer.d.ts.map +1 -1
  6. package/dist/core/registry.js +2 -2
  7. package/dist/core/renderer.d.ts +5 -1
  8. package/dist/core/renderer.d.ts.map +1 -1
  9. package/dist/core/{shaderRegistry-9huRXSRI.js → shaderRegistry-DnmRD6xy.js} +1 -1
  10. package/dist/core/shaders/Liquify/index.d.ts +13 -7
  11. package/dist/core/shaders/Liquify/index.d.ts.map +1 -1
  12. package/dist/core/shaders/Liquify/index.js +1 -1
  13. package/dist/js/codegen.d.ts +1 -0
  14. package/dist/js/codegen.js +1 -0
  15. package/dist/js/createPreview.d.ts +19 -0
  16. package/dist/js/createPreview.d.ts.map +1 -0
  17. package/dist/js/createPreview.js +64 -0
  18. package/dist/js/createShader.d.ts +24 -0
  19. package/dist/js/createShader.d.ts.map +1 -0
  20. package/dist/js/createShader.js +132 -0
  21. package/dist/js/decode.d.ts +7 -0
  22. package/dist/js/decode.d.ts.map +1 -0
  23. package/dist/js/decode.js +22 -0
  24. package/dist/js/index.d.ts +6 -0
  25. package/dist/js/index.d.ts.map +1 -0
  26. package/dist/js/index.js +4 -0
  27. package/dist/js/types.d.ts +23 -0
  28. package/dist/js/types.d.ts.map +1 -0
  29. package/dist/js/utils/generatePresetCode.d.ts +13 -0
  30. package/dist/js/utils/generatePresetCode.d.ts.map +1 -0
  31. package/dist/js/utils/generatePresetCode.js +1249 -0
  32. package/dist/js/utils/generatePresetCode.template.d.ts +13 -0
  33. package/dist/js/utils/generatePresetCode.template.d.ts.map +1 -0
  34. package/dist/react/Shader.js +1 -1
  35. package/dist/react/components/Liquify.d.ts +4 -2
  36. package/dist/react/components/Liquify.d.ts.map +1 -1
  37. package/dist/react/utils/generatePresetCode.d.ts.map +1 -1
  38. package/dist/react/utils/generatePresetCode.js +45 -8
  39. package/dist/react/utils/generatePresetCode.template.d.ts.map +1 -1
  40. package/dist/registry.js +50 -20
  41. package/dist/solid/components/Liquify.d.ts +4 -2
  42. package/dist/solid/components/Liquify.d.ts.map +1 -1
  43. package/dist/solid/engine/Shader.js +1 -1
  44. package/dist/solid/utils/generatePresetCode.d.ts.map +1 -1
  45. package/dist/solid/utils/generatePresetCode.js +51 -6
  46. package/dist/solid/utils/generatePresetCode.template.d.ts.map +1 -1
  47. package/dist/svelte/components/Liquify.svelte.d.ts +2 -1
  48. package/dist/svelte/engine/Preview.svelte.d.ts +11 -25
  49. package/dist/svelte/engine/PreviewRenderComponent.svelte.d.ts +5 -19
  50. package/dist/svelte/{generatePresetCode-Bpe8YcaW.js → generatePresetCode-6ecNqXs9.js} +34 -6
  51. package/dist/svelte/index.js +41 -67
  52. package/dist/svelte/source/components/Liquify.svelte +1 -0
  53. package/dist/svelte/source/engine/Preview.svelte +49 -35
  54. package/dist/svelte/source/engine/PreviewRenderComponent.svelte +9 -5
  55. package/dist/svelte/utils/generatePresetCode.js +1 -1
  56. package/dist/vue/Liquify.vue_vue_type_script_setup_true_lang.js +3 -2
  57. package/dist/vue/Shader.vue_vue_type_script_setup_true_lang.js +1 -1
  58. package/dist/vue/components/Liquify.vue.d.ts +2 -1
  59. package/dist/vue/components/Liquify.vue.d.ts.map +1 -1
  60. package/dist/vue/utils/generatePresetCode.d.ts.map +1 -1
  61. package/dist/vue/utils/generatePresetCode.js +48 -10
  62. package/dist/vue/utils/generatePresetCode.template.d.ts.map +1 -1
  63. package/package.json +15 -1
  64. package/dist/core/Liquify-Cy6ck3_k.js +0 -157
@@ -0,0 +1,1249 @@
1
+ var DEFAULT_TRANSFORM = {
2
+ offsetX: 0,
3
+ offsetY: 0,
4
+ rotation: 0,
5
+ scale: 1,
6
+ anchorX: .5,
7
+ anchorY: .5,
8
+ edges: "transparent"
9
+ };
10
+ var shaderMetadata = {
11
+ "AngularBlur": {
12
+ "opacity": 1,
13
+ "blendMode": "normal",
14
+ "intensity": 20,
15
+ "center": {
16
+ "x": .5,
17
+ "y": .5
18
+ }
19
+ },
20
+ "Ascii": {
21
+ "opacity": 1,
22
+ "blendMode": "normal",
23
+ "characters": "@%#*+=-:.",
24
+ "cellSize": 30,
25
+ "fontFamily": "JetBrains Mono",
26
+ "spacing": 1,
27
+ "gamma": 1,
28
+ "alphaThreshold": 0,
29
+ "preserveAlpha": true
30
+ },
31
+ "Aurora": {
32
+ "opacity": 1,
33
+ "blendMode": "normal",
34
+ "colorA": "#a533f8",
35
+ "colorB": "#22ee88",
36
+ "colorC": "#1694e8",
37
+ "colorSpace": "linear",
38
+ "balance": 50,
39
+ "intensity": 80,
40
+ "curtainCount": 4,
41
+ "speed": 5,
42
+ "waviness": 50,
43
+ "rayDensity": 20,
44
+ "height": 120,
45
+ "center": {
46
+ "x": .5,
47
+ "y": 0
48
+ },
49
+ "seed": 0
50
+ },
51
+ "Beam": {
52
+ "opacity": 1,
53
+ "blendMode": "normal",
54
+ "startPosition": {
55
+ "x": .2,
56
+ "y": .5
57
+ },
58
+ "endPosition": {
59
+ "x": .8,
60
+ "y": .5
61
+ },
62
+ "startThickness": .2,
63
+ "endThickness": .2,
64
+ "startSoftness": .5,
65
+ "endSoftness": .5,
66
+ "insideColor": "#FF0000",
67
+ "outsideColor": "#0000FF",
68
+ "colorSpace": "linear"
69
+ },
70
+ "Blob": {
71
+ "opacity": 1,
72
+ "blendMode": "normal",
73
+ "colorA": "#ff6b35",
74
+ "colorB": "#e91e63",
75
+ "size": .5,
76
+ "deformation": .5,
77
+ "softness": .5,
78
+ "highlightIntensity": .5,
79
+ "highlightX": .3,
80
+ "highlightY": -.3,
81
+ "highlightZ": .4,
82
+ "highlightColor": "#ffe11a",
83
+ "speed": .5,
84
+ "seed": 1,
85
+ "center": {
86
+ "x": .5,
87
+ "y": .5
88
+ },
89
+ "colorSpace": "linear"
90
+ },
91
+ "Blur": {
92
+ "opacity": 1,
93
+ "blendMode": "normal",
94
+ "intensity": 50
95
+ },
96
+ "BrightnessContrast": {
97
+ "opacity": 1,
98
+ "blendMode": "normal",
99
+ "brightness": 0,
100
+ "contrast": 0
101
+ },
102
+ "Bulge": {
103
+ "opacity": 1,
104
+ "blendMode": "normal",
105
+ "center": {
106
+ "x": .5,
107
+ "y": .5
108
+ },
109
+ "strength": 1,
110
+ "radius": 1,
111
+ "falloff": .5,
112
+ "edges": "stretch"
113
+ },
114
+ "ChannelBlur": {
115
+ "opacity": 1,
116
+ "blendMode": "normal",
117
+ "redIntensity": 0,
118
+ "greenIntensity": 20,
119
+ "blueIntensity": 40
120
+ },
121
+ "Checkerboard": {
122
+ "opacity": 1,
123
+ "blendMode": "normal",
124
+ "colorA": "#cccccc",
125
+ "colorB": "#999999",
126
+ "cells": 8,
127
+ "softness": 0,
128
+ "colorSpace": "linear"
129
+ },
130
+ "ChromaFlow": {
131
+ "opacity": 1,
132
+ "blendMode": "normal",
133
+ "baseColor": "#0066ff",
134
+ "upColor": "#00ff00",
135
+ "downColor": "#ff0000",
136
+ "leftColor": "#0000ff",
137
+ "rightColor": "#ffff00",
138
+ "intensity": 1,
139
+ "radius": 3,
140
+ "momentum": 30
141
+ },
142
+ "ChromaticAberration": {
143
+ "opacity": 1,
144
+ "blendMode": "normal",
145
+ "strength": .2,
146
+ "angle": 0,
147
+ "redOffset": -1,
148
+ "greenOffset": 0,
149
+ "blueOffset": 1
150
+ },
151
+ "Circle": {
152
+ "opacity": 1,
153
+ "blendMode": "normal",
154
+ "color": "#ffffff",
155
+ "radius": 1,
156
+ "softness": 0,
157
+ "center": {
158
+ "x": .5,
159
+ "y": .5
160
+ },
161
+ "strokeThickness": 0,
162
+ "strokeColor": "#000000",
163
+ "strokePosition": "center",
164
+ "colorSpace": "linear"
165
+ },
166
+ "ConcentricSpin": {
167
+ "opacity": 1,
168
+ "blendMode": "normal",
169
+ "intensity": 20,
170
+ "rings": 8,
171
+ "smoothness": .03,
172
+ "seed": 0,
173
+ "speed": .1,
174
+ "speedRandomness": .5,
175
+ "edges": "mirror",
176
+ "center": {
177
+ "x": .5,
178
+ "y": .5
179
+ }
180
+ },
181
+ "ContourLines": {
182
+ "opacity": 1,
183
+ "blendMode": "normal",
184
+ "levels": 5,
185
+ "lineWidth": 2,
186
+ "softness": 0,
187
+ "gamma": .5,
188
+ "invert": false,
189
+ "source": "luminance",
190
+ "colorMode": "source",
191
+ "lineColor": "#000000",
192
+ "backgroundColor": "transparent"
193
+ },
194
+ "Crescent": {
195
+ "opacity": 1,
196
+ "blendMode": "normal",
197
+ "color": "#ffffff",
198
+ "center": {
199
+ "x": .5,
200
+ "y": .5
201
+ },
202
+ "radius": .3,
203
+ "innerRatio": .8,
204
+ "offset": .2,
205
+ "rotation": 0,
206
+ "softness": 0,
207
+ "strokeThickness": 0,
208
+ "strokeColor": "#000000",
209
+ "strokePosition": "center",
210
+ "colorSpace": "linear"
211
+ },
212
+ "Cross": {
213
+ "opacity": 1,
214
+ "blendMode": "normal",
215
+ "color": "#ffffff",
216
+ "center": {
217
+ "x": .5,
218
+ "y": .5
219
+ },
220
+ "radius": .35,
221
+ "thickness": .08,
222
+ "rounding": 0,
223
+ "rotation": 0,
224
+ "softness": 0,
225
+ "strokeThickness": 0,
226
+ "strokeColor": "#000000",
227
+ "strokePosition": "center",
228
+ "colorSpace": "linear"
229
+ },
230
+ "CRTScreen": {
231
+ "opacity": 1,
232
+ "blendMode": "normal",
233
+ "pixelSize": 128,
234
+ "colorShift": 1,
235
+ "scanlineIntensity": .3,
236
+ "scanlineFrequency": 200,
237
+ "brightness": 1,
238
+ "contrast": 1,
239
+ "vignetteIntensity": 1,
240
+ "vignetteRadius": .5
241
+ },
242
+ "CursorRipples": {
243
+ "opacity": 1,
244
+ "blendMode": "normal",
245
+ "intensity": 10,
246
+ "decay": 10,
247
+ "radius": .5,
248
+ "chromaticSplit": 1,
249
+ "edges": "stretch"
250
+ },
251
+ "CursorTrail": {
252
+ "opacity": 1,
253
+ "blendMode": "normal",
254
+ "colorA": "#00aaff",
255
+ "colorB": "#ff00aa",
256
+ "radius": .5,
257
+ "length": .5,
258
+ "shrink": 1,
259
+ "colorSpace": "linear"
260
+ },
261
+ "DiffuseBlur": {
262
+ "opacity": 1,
263
+ "blendMode": "normal",
264
+ "intensity": 30,
265
+ "edges": "stretch"
266
+ },
267
+ "Dither": {
268
+ "opacity": 1,
269
+ "blendMode": "normal",
270
+ "pattern": "bayer4",
271
+ "pixelSize": 4,
272
+ "threshold": .5,
273
+ "spread": 1,
274
+ "colorMode": "custom",
275
+ "colorA": "transparent",
276
+ "colorB": "#ffffff"
277
+ },
278
+ "DotGrid": {
279
+ "opacity": 1,
280
+ "blendMode": "normal",
281
+ "color": "#ffffff",
282
+ "density": 30,
283
+ "dotSize": .3,
284
+ "twinkle": 0
285
+ },
286
+ "Duotone": {
287
+ "opacity": 1,
288
+ "blendMode": "normal",
289
+ "colorA": "#ff0000",
290
+ "colorB": "#023af4",
291
+ "blend": .5,
292
+ "colorSpace": "linear"
293
+ },
294
+ "Ellipse": {
295
+ "opacity": 1,
296
+ "blendMode": "normal",
297
+ "color": "#ffffff",
298
+ "center": {
299
+ "x": .5,
300
+ "y": .5
301
+ },
302
+ "radiusX": .35,
303
+ "radiusY": .2,
304
+ "rotation": 0,
305
+ "softness": 0,
306
+ "strokeThickness": 0,
307
+ "strokeColor": "#000000",
308
+ "strokePosition": "center",
309
+ "colorSpace": "linear"
310
+ },
311
+ "Emboss": {
312
+ "opacity": 1,
313
+ "blendMode": "normal",
314
+ "center": {
315
+ "x": .5,
316
+ "y": .5
317
+ },
318
+ "scale": 1,
319
+ "depth": -.5,
320
+ "lightAngle": 260,
321
+ "lightIntensity": .6,
322
+ "shadowIntensity": .3,
323
+ "shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
324
+ },
325
+ "FallingLines": {
326
+ "opacity": 1,
327
+ "blendMode": "normal",
328
+ "colorA": "#ffffff",
329
+ "colorB": "#ffffff00",
330
+ "colorSpace": "linear",
331
+ "angle": 90,
332
+ "speed": .5,
333
+ "speedVariance": .3,
334
+ "density": 15,
335
+ "trailLength": .35,
336
+ "balance": .5,
337
+ "strokeWidth": .15,
338
+ "rounding": 1
339
+ },
340
+ "FilmGrain": {
341
+ "opacity": 1,
342
+ "blendMode": "normal",
343
+ "strength": .5
344
+ },
345
+ "FloatingParticles": {
346
+ "opacity": 1,
347
+ "blendMode": "normal",
348
+ "randomness": .25,
349
+ "speed": .25,
350
+ "angle": 90,
351
+ "particleSize": 1,
352
+ "particleSoftness": 0,
353
+ "twinkle": .5,
354
+ "count": 5,
355
+ "particleColor": "#ffffff",
356
+ "speedVariance": .3,
357
+ "angleVariance": 30,
358
+ "particleDensity": 3
359
+ },
360
+ "Flower": {
361
+ "opacity": 1,
362
+ "blendMode": "normal",
363
+ "color": "#ffffff",
364
+ "center": {
365
+ "x": .5,
366
+ "y": .5
367
+ },
368
+ "radius": .4,
369
+ "sides": 5,
370
+ "innerRatio": .4,
371
+ "rotation": 0,
372
+ "softness": 0,
373
+ "strokeThickness": 0,
374
+ "strokeColor": "#000000",
375
+ "strokePosition": "center",
376
+ "colorSpace": "linear"
377
+ },
378
+ "FlowField": {
379
+ "opacity": 1,
380
+ "blendMode": "normal",
381
+ "strength": .15,
382
+ "detail": 2,
383
+ "speed": 0,
384
+ "evolutionSpeed": 0,
385
+ "edges": "mirror"
386
+ },
387
+ "Form3D": {
388
+ "opacity": 1,
389
+ "blendMode": "normal",
390
+ "shape3d": "{\"type\":\"ribbon\",\"angle\":0,\"twist\":50,\"width\":40,\"thickness\":20,\"seed\":0}",
391
+ "center": {
392
+ "x": .5,
393
+ "y": .5
394
+ },
395
+ "zoom": 50,
396
+ "glossiness": 50,
397
+ "lighting": 50,
398
+ "uvMode": "stretch",
399
+ "speed": 1
400
+ },
401
+ "Glass": {
402
+ "opacity": 1,
403
+ "blendMode": "normal",
404
+ "center": {
405
+ "x": .5,
406
+ "y": .5
407
+ },
408
+ "scale": 1,
409
+ "cutout": false,
410
+ "refraction": 1,
411
+ "edgeSoftness": .1,
412
+ "blur": 0,
413
+ "thickness": .2,
414
+ "aberration": .5,
415
+ "innerZoom": 1,
416
+ "lightAngle": 300,
417
+ "highlight": .05,
418
+ "highlightColor": "#ffffff",
419
+ "highlightSoftness": .5,
420
+ "fresnel": .1,
421
+ "fresnelSoftness": .1,
422
+ "fresnelColor": "#ffffff",
423
+ "tintColor": "#ffffff",
424
+ "tintIntensity": 0,
425
+ "tintPreserveLuminosity": true,
426
+ "shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
427
+ },
428
+ "GlassTiles": {
429
+ "opacity": 1,
430
+ "blendMode": "normal",
431
+ "intensity": 2,
432
+ "tileCount": 20,
433
+ "rotation": 0,
434
+ "roundness": 0
435
+ },
436
+ "Glitch": {
437
+ "opacity": 1,
438
+ "blendMode": "normal",
439
+ "intensity": .5,
440
+ "speed": 1,
441
+ "rgbShift": 5,
442
+ "blockDensity": 10,
443
+ "colorBarIntensity": .2,
444
+ "mirrorAmount": .3,
445
+ "scanlineIntensity": .2
446
+ },
447
+ "Glow": {
448
+ "opacity": 1,
449
+ "blendMode": "normal",
450
+ "intensity": 1,
451
+ "threshold": .5,
452
+ "size": 10
453
+ },
454
+ "Godrays": {
455
+ "opacity": 1,
456
+ "blendMode": "normal",
457
+ "center": {
458
+ "x": 0,
459
+ "y": 0
460
+ },
461
+ "density": .3,
462
+ "intensity": .8,
463
+ "spotty": 1,
464
+ "speed": .5,
465
+ "rayColor": "#4283fb",
466
+ "backgroundColor": "transparent"
467
+ },
468
+ "Grayscale": {
469
+ "opacity": 1,
470
+ "blendMode": "normal"
471
+ },
472
+ "Grid": {
473
+ "opacity": 1,
474
+ "blendMode": "normal",
475
+ "color": "#ffffff",
476
+ "cells": 10,
477
+ "thickness": 1
478
+ },
479
+ "GridDistortion": {
480
+ "opacity": 1,
481
+ "blendMode": "normal",
482
+ "intensity": 1,
483
+ "decay": 3,
484
+ "radius": 1,
485
+ "gridSize": 20,
486
+ "edges": "stretch"
487
+ },
488
+ "Group": {
489
+ "opacity": 1,
490
+ "blendMode": "normal"
491
+ },
492
+ "Halftone": {
493
+ "opacity": 1,
494
+ "blendMode": "normal",
495
+ "frequency": 100,
496
+ "angle": 45,
497
+ "smoothness": .1
498
+ },
499
+ "HueShift": {
500
+ "opacity": 1,
501
+ "blendMode": "normal",
502
+ "shift": 0
503
+ },
504
+ "ImageTexture": {
505
+ "opacity": 1,
506
+ "blendMode": "normal",
507
+ "url": "https://shaders.com/sample.jpg",
508
+ "objectFit": "cover"
509
+ },
510
+ "Invert": {
511
+ "opacity": 1,
512
+ "blendMode": "normal"
513
+ },
514
+ "Kaleidoscope": {
515
+ "opacity": 1,
516
+ "blendMode": "normal",
517
+ "center": {
518
+ "x": .5,
519
+ "y": .5
520
+ },
521
+ "segments": 6,
522
+ "angle": 0,
523
+ "edges": "mirror"
524
+ },
525
+ "LensFlare": {
526
+ "opacity": 1,
527
+ "blendMode": "normal",
528
+ "lightPosition": {
529
+ "x": .3,
530
+ "y": .3
531
+ },
532
+ "intensity": .5,
533
+ "ghostIntensity": .4,
534
+ "ghostSpread": .7,
535
+ "ghostChroma": .3,
536
+ "haloIntensity": .4,
537
+ "haloRadius": .6,
538
+ "haloChroma": .6,
539
+ "haloSoftness": .8,
540
+ "starburstIntensity": .3,
541
+ "starburstPoints": 6,
542
+ "streakIntensity": .15,
543
+ "streakLength": .5,
544
+ "glareIntensity": .2,
545
+ "glareSize": .5,
546
+ "edgeFade": .2,
547
+ "speed": .5
548
+ },
549
+ "LinearBlur": {
550
+ "opacity": 1,
551
+ "blendMode": "normal",
552
+ "intensity": 30,
553
+ "angle": 0
554
+ },
555
+ "LinearGradient": {
556
+ "opacity": 1,
557
+ "blendMode": "normal",
558
+ "colorA": "#1aff00",
559
+ "colorB": "#0000ff",
560
+ "start": {
561
+ "x": 0,
562
+ "y": .5
563
+ },
564
+ "end": {
565
+ "x": 1,
566
+ "y": .5
567
+ },
568
+ "angle": 0,
569
+ "edges": "stretch",
570
+ "colorSpace": "linear"
571
+ },
572
+ "Liquify": {
573
+ "opacity": 1,
574
+ "blendMode": "normal",
575
+ "intensity": 10,
576
+ "stiffness": 3,
577
+ "damping": 3,
578
+ "radius": 1,
579
+ "edges": "stretch"
580
+ },
581
+ "Mirror": {
582
+ "opacity": 1,
583
+ "blendMode": "normal",
584
+ "center": {
585
+ "x": .5,
586
+ "y": .5
587
+ },
588
+ "angle": 0,
589
+ "edges": "mirror"
590
+ },
591
+ "Neon": {
592
+ "opacity": 1,
593
+ "blendMode": "normal",
594
+ "center": {
595
+ "x": .5,
596
+ "y": .5
597
+ },
598
+ "scale": 1,
599
+ "color": "#00ddff",
600
+ "secondaryColor": "#ff00aa",
601
+ "secondaryBlend": .5,
602
+ "glowColor": "#00ddff",
603
+ "tubeThickness": .2,
604
+ "intensity": 1.5,
605
+ "hotCoreIntensity": .6,
606
+ "glowIntensity": .6,
607
+ "glowRadius": .25,
608
+ "lightAngle": 300,
609
+ "specularIntensity": .5,
610
+ "specularSize": .5,
611
+ "cornerSmoothing": .15,
612
+ "flickerSpeed": 0,
613
+ "flickerAmount": .2,
614
+ "flowSpeed": 0,
615
+ "flowAmount": .3,
616
+ "shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
617
+ },
618
+ "Paper": {
619
+ "opacity": 1,
620
+ "blendMode": "normal",
621
+ "roughness": .3,
622
+ "grainScale": 1,
623
+ "displacement": .15,
624
+ "seed": 0
625
+ },
626
+ "Perspective": {
627
+ "opacity": 1,
628
+ "blendMode": "normal",
629
+ "center": {
630
+ "x": .5,
631
+ "y": .5
632
+ },
633
+ "pan": 0,
634
+ "tilt": 0,
635
+ "fov": 60,
636
+ "zoom": 1,
637
+ "offset": {
638
+ "x": .5,
639
+ "y": .5
640
+ },
641
+ "edges": "transparent"
642
+ },
643
+ "Pixelate": {
644
+ "opacity": 1,
645
+ "blendMode": "normal",
646
+ "scale": 50,
647
+ "gap": 0,
648
+ "roundness": 0
649
+ },
650
+ "Plasma": {
651
+ "opacity": 1,
652
+ "blendMode": "normal",
653
+ "density": 2,
654
+ "speed": 2,
655
+ "intensity": 1.5,
656
+ "warp": .4,
657
+ "contrast": 1,
658
+ "balance": 50,
659
+ "colorA": "#7018be",
660
+ "colorB": "#000000",
661
+ "colorSpace": "linear"
662
+ },
663
+ "PolarCoordinates": {
664
+ "opacity": 1,
665
+ "blendMode": "normal",
666
+ "center": {
667
+ "x": .5,
668
+ "y": .5
669
+ },
670
+ "wrap": 1,
671
+ "radius": 1,
672
+ "intensity": 1,
673
+ "edges": "transparent"
674
+ },
675
+ "Polygon": {
676
+ "opacity": 1,
677
+ "blendMode": "normal",
678
+ "color": "#ffffff",
679
+ "center": {
680
+ "x": .5,
681
+ "y": .5
682
+ },
683
+ "radius": .4,
684
+ "sides": 6,
685
+ "rounding": 0,
686
+ "rotation": 0,
687
+ "softness": 0,
688
+ "strokeThickness": 0,
689
+ "strokeColor": "#000000",
690
+ "strokePosition": "center",
691
+ "colorSpace": "linear"
692
+ },
693
+ "Posterize": {
694
+ "opacity": 1,
695
+ "blendMode": "normal",
696
+ "intensity": 5
697
+ },
698
+ "ProgressiveBlur": {
699
+ "opacity": 1,
700
+ "blendMode": "normal",
701
+ "intensity": 50,
702
+ "angle": 0,
703
+ "center": {
704
+ "x": 0,
705
+ "y": .5
706
+ },
707
+ "falloff": 1
708
+ },
709
+ "RadialGradient": {
710
+ "opacity": 1,
711
+ "blendMode": "normal",
712
+ "colorA": "#ff0000",
713
+ "colorB": "#0000ff",
714
+ "center": {
715
+ "x": .5,
716
+ "y": .5
717
+ },
718
+ "radius": 1,
719
+ "colorSpace": "linear"
720
+ },
721
+ "RectangularCoordinates": {
722
+ "opacity": 1,
723
+ "blendMode": "normal",
724
+ "center": {
725
+ "x": .5,
726
+ "y": .5
727
+ },
728
+ "scale": 1,
729
+ "intensity": 1,
730
+ "edges": "transparent"
731
+ },
732
+ "Ring": {
733
+ "opacity": 1,
734
+ "blendMode": "normal",
735
+ "color": "#ffffff",
736
+ "center": {
737
+ "x": .5,
738
+ "y": .5
739
+ },
740
+ "radius": .3,
741
+ "thickness": .07,
742
+ "softness": 0,
743
+ "strokeThickness": 0,
744
+ "strokeColor": "#000000",
745
+ "strokePosition": "center",
746
+ "colorSpace": "linear"
747
+ },
748
+ "Ripples": {
749
+ "opacity": 1,
750
+ "blendMode": "normal",
751
+ "center": {
752
+ "x": .5,
753
+ "y": .5
754
+ },
755
+ "colorA": "#ffffff",
756
+ "colorB": "#000000",
757
+ "speed": 1,
758
+ "frequency": 20,
759
+ "softness": 0,
760
+ "thickness": .5,
761
+ "phase": 0
762
+ },
763
+ "RoundedRect": {
764
+ "opacity": 1,
765
+ "blendMode": "normal",
766
+ "color": "#ffffff",
767
+ "center": {
768
+ "x": .5,
769
+ "y": .5
770
+ },
771
+ "width": .35,
772
+ "height": .25,
773
+ "rounding": .05,
774
+ "rotation": 0,
775
+ "softness": 0,
776
+ "strokeThickness": 0,
777
+ "strokeColor": "#000000",
778
+ "strokePosition": "center",
779
+ "colorSpace": "linear"
780
+ },
781
+ "Saturation": {
782
+ "opacity": 1,
783
+ "blendMode": "normal",
784
+ "intensity": 1
785
+ },
786
+ "Sharpness": {
787
+ "opacity": 1,
788
+ "blendMode": "normal",
789
+ "sharpness": 0
790
+ },
791
+ "Shatter": {
792
+ "opacity": 1,
793
+ "blendMode": "normal",
794
+ "crackWidth": 1,
795
+ "intensity": 4,
796
+ "radius": .4,
797
+ "decay": 1,
798
+ "seed": 2,
799
+ "chromaticSplit": 1,
800
+ "refractionStrength": 5,
801
+ "shardLighting": .1,
802
+ "edges": "mirror"
803
+ },
804
+ "SimplexNoise": {
805
+ "opacity": 1,
806
+ "blendMode": "normal",
807
+ "colorA": "#ffffff",
808
+ "colorB": "#000000",
809
+ "scale": 2,
810
+ "balance": 0,
811
+ "contrast": 0,
812
+ "seed": 0,
813
+ "speed": 1
814
+ },
815
+ "SineWave": {
816
+ "opacity": 1,
817
+ "blendMode": "normal",
818
+ "color": "#ffffff",
819
+ "amplitude": .15,
820
+ "frequency": 1,
821
+ "speed": 1,
822
+ "angle": 0,
823
+ "position": {
824
+ "x": .5,
825
+ "y": .5
826
+ },
827
+ "thickness": .2,
828
+ "softness": .4
829
+ },
830
+ "SolidColor": {
831
+ "opacity": 1,
832
+ "blendMode": "normal",
833
+ "color": "#5b18ca"
834
+ },
835
+ "Spherize": {
836
+ "opacity": 1,
837
+ "blendMode": "normal",
838
+ "radius": 1,
839
+ "depth": 1,
840
+ "center": {
841
+ "x": .5,
842
+ "y": .5
843
+ },
844
+ "lightPosition": {
845
+ "x": .3,
846
+ "y": .3
847
+ },
848
+ "lightIntensity": .5,
849
+ "lightSoftness": .5,
850
+ "lightColor": "#ffffff"
851
+ },
852
+ "Spiral": {
853
+ "opacity": 1,
854
+ "blendMode": "normal",
855
+ "colorA": "#000000",
856
+ "colorB": "#ffffff",
857
+ "strokeWidth": .5,
858
+ "strokeFalloff": 0,
859
+ "softness": 0,
860
+ "speed": 1,
861
+ "center": {
862
+ "x": .5,
863
+ "y": .5
864
+ },
865
+ "scale": 1,
866
+ "colorSpace": "linear"
867
+ },
868
+ "Star": {
869
+ "opacity": 1,
870
+ "blendMode": "normal",
871
+ "color": "#ffffff",
872
+ "center": {
873
+ "x": .5,
874
+ "y": .5
875
+ },
876
+ "radius": .4,
877
+ "sides": 5,
878
+ "innerRatio": .4,
879
+ "rotation": 0,
880
+ "softness": 0,
881
+ "strokeThickness": 0,
882
+ "strokeColor": "#000000",
883
+ "strokePosition": "center",
884
+ "colorSpace": "linear"
885
+ },
886
+ "Strands": {
887
+ "opacity": 1,
888
+ "blendMode": "normal",
889
+ "speed": .5,
890
+ "amplitude": 1,
891
+ "frequency": 1,
892
+ "lineCount": 12,
893
+ "lineWidth": .1,
894
+ "waveColor": "#f1c907",
895
+ "pinEdges": true,
896
+ "start": {
897
+ "x": 0,
898
+ "y": .5
899
+ },
900
+ "end": {
901
+ "x": 1,
902
+ "y": .5
903
+ }
904
+ },
905
+ "Stretch": {
906
+ "opacity": 1,
907
+ "blendMode": "normal",
908
+ "center": {
909
+ "x": .5,
910
+ "y": .5
911
+ },
912
+ "strength": 1,
913
+ "angle": 0,
914
+ "falloff": 0,
915
+ "edges": "stretch"
916
+ },
917
+ "Stripes": {
918
+ "opacity": 1,
919
+ "blendMode": "normal",
920
+ "colorA": "#000000",
921
+ "colorB": "#ffffff",
922
+ "angle": 45,
923
+ "density": 5,
924
+ "balance": .5,
925
+ "softness": 0,
926
+ "speed": .2,
927
+ "offset": 0,
928
+ "colorSpace": "linear"
929
+ },
930
+ "StudioBackground": {
931
+ "opacity": 1,
932
+ "blendMode": "normal",
933
+ "color": "#d8dbec",
934
+ "keyColor": "#d5e4ea",
935
+ "keyIntensity": 40,
936
+ "keySoftness": 50,
937
+ "fillColor": "#d5e4ea",
938
+ "fillIntensity": 10,
939
+ "fillSoftness": 70,
940
+ "fillAngle": 70,
941
+ "backColor": "#c8d4e8",
942
+ "backIntensity": 20,
943
+ "backSoftness": 80,
944
+ "brightness": 20,
945
+ "vignette": 0,
946
+ "center": {
947
+ "x": .5,
948
+ "y": .8
949
+ },
950
+ "lightTarget": 100,
951
+ "wallCurvature": 10,
952
+ "ambientIntensity": 50,
953
+ "ambientSpeed": 2,
954
+ "seed": 0
955
+ },
956
+ "Swirl": {
957
+ "opacity": 1,
958
+ "blendMode": "normal",
959
+ "colorA": "#1275d8",
960
+ "colorB": "#e19136",
961
+ "speed": 1,
962
+ "detail": 1,
963
+ "blend": 50,
964
+ "colorSpace": "linear"
965
+ },
966
+ "TiltShift": {
967
+ "opacity": 1,
968
+ "blendMode": "normal",
969
+ "intensity": 50,
970
+ "width": .3,
971
+ "falloff": .3,
972
+ "angle": 0,
973
+ "center": {
974
+ "x": .5,
975
+ "y": .5
976
+ }
977
+ },
978
+ "Tint": {
979
+ "opacity": 1,
980
+ "blendMode": "normal",
981
+ "color": "#ff8800",
982
+ "amount": .5,
983
+ "preserveLuminosity": true
984
+ },
985
+ "Trapezoid": {
986
+ "opacity": 1,
987
+ "blendMode": "normal",
988
+ "color": "#ffffff",
989
+ "center": {
990
+ "x": .5,
991
+ "y": .5
992
+ },
993
+ "bottomWidth": .35,
994
+ "topWidth": .2,
995
+ "height": .25,
996
+ "rotation": 0,
997
+ "softness": 0,
998
+ "strokeThickness": 0,
999
+ "strokeColor": "#000000",
1000
+ "strokePosition": "center",
1001
+ "colorSpace": "linear"
1002
+ },
1003
+ "Tritone": {
1004
+ "opacity": 1,
1005
+ "blendMode": "normal",
1006
+ "colorA": "#ce1bea",
1007
+ "colorB": "#2fff00",
1008
+ "colorC": "#ffff00",
1009
+ "blendMid": .5,
1010
+ "colorSpace": "linear"
1011
+ },
1012
+ "Twirl": {
1013
+ "opacity": 1,
1014
+ "blendMode": "normal",
1015
+ "center": {
1016
+ "x": .5,
1017
+ "y": .5
1018
+ },
1019
+ "intensity": 1,
1020
+ "edges": "stretch"
1021
+ },
1022
+ "Vesica": {
1023
+ "opacity": 1,
1024
+ "blendMode": "normal",
1025
+ "color": "#ffffff",
1026
+ "center": {
1027
+ "x": .5,
1028
+ "y": .5
1029
+ },
1030
+ "radius": .35,
1031
+ "spread": .5,
1032
+ "rotation": 0,
1033
+ "softness": 0,
1034
+ "strokeThickness": 0,
1035
+ "strokeColor": "#000000",
1036
+ "strokePosition": "center",
1037
+ "colorSpace": "linear"
1038
+ },
1039
+ "Vibrance": {
1040
+ "opacity": 1,
1041
+ "blendMode": "normal",
1042
+ "intensity": 0
1043
+ },
1044
+ "VideoTexture": {
1045
+ "opacity": 1,
1046
+ "blendMode": "normal",
1047
+ "url": "https://shaders.com/sample.mp4",
1048
+ "objectFit": "cover",
1049
+ "loop": true
1050
+ },
1051
+ "WaveDistortion": {
1052
+ "opacity": 1,
1053
+ "blendMode": "normal",
1054
+ "strength": .3,
1055
+ "frequency": 1,
1056
+ "speed": 1,
1057
+ "angle": 0,
1058
+ "waveType": "sine",
1059
+ "edges": "stretch"
1060
+ },
1061
+ "WebcamTexture": {
1062
+ "opacity": 1,
1063
+ "blendMode": "normal",
1064
+ "objectFit": "cover",
1065
+ "mirror": true
1066
+ },
1067
+ "ZoomBlur": {
1068
+ "opacity": 1,
1069
+ "blendMode": "normal",
1070
+ "intensity": 30,
1071
+ "center": {
1072
+ "x": .5,
1073
+ "y": .5
1074
+ }
1075
+ }
1076
+ };
1077
+ function escapeString(str) {
1078
+ return str.replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/\n/g, "\\n").replace(/\r/g, "\\r").replace(/\t/g, "\\t");
1079
+ }
1080
+ function formatValue(value, indent) {
1081
+ if (typeof value === "string") {
1082
+ if (value.startsWith("{") && value.endsWith("}")) try {
1083
+ const parsed = JSON.parse(value);
1084
+ if (typeof parsed === "object" && parsed !== null) return formatValue(parsed, indent);
1085
+ } catch {}
1086
+ return `'${escapeString(value)}'`;
1087
+ }
1088
+ if (typeof value === "boolean" || typeof value === "number") return String(value);
1089
+ if (value === null || value === void 0) return String(value);
1090
+ if (Array.isArray(value)) return `[${value.map((v) => formatValue(v, indent + " ")).join(", ")}]`;
1091
+ if (typeof value === "object") {
1092
+ const entries = Object.entries(value);
1093
+ if (entries.length === 0) return "{}";
1094
+ return `{\n${entries.map(([k, v]) => `${indent} ${k}: ${formatValue(v, indent + " ")}`).join(",\n")}\n${indent}}`;
1095
+ }
1096
+ return String(value);
1097
+ }
1098
+ function shouldIncludeProp(key, value, componentType, props) {
1099
+ if (key === "maskType" && value === "alpha") return false;
1100
+ if (key === "shape" && props.shapeSdfUrl) return false;
1101
+ if (key === "transform" && typeof value === "object") {
1102
+ if (Object.keys(DEFAULT_TRANSFORM).every((k) => value[k] === DEFAULT_TRANSFORM[k])) return false;
1103
+ }
1104
+ const componentDefaults = shaderMetadata[componentType] || {};
1105
+ if (componentDefaults.hasOwnProperty(key)) {
1106
+ const defaultValue = componentDefaults[key];
1107
+ if (value != null && defaultValue != null && typeof value === "object" && typeof defaultValue === "object") return JSON.stringify(value) !== JSON.stringify(defaultValue);
1108
+ return value !== defaultValue;
1109
+ }
1110
+ if (key === "opacity" && value === 1) return false;
1111
+ if (key === "blendMode" && value === "normal") return false;
1112
+ return true;
1113
+ }
1114
+ function generateComponentObject(config, allComponents, indent) {
1115
+ const lines = [];
1116
+ lines.push(`${indent}{`);
1117
+ lines.push(`${indent} type: '${config.type}',`);
1118
+ if (config.id) lines.push(`${indent} id: '${config.id}',`);
1119
+ const filteredProps = [];
1120
+ if (config.props) {
1121
+ for (const [key, value] of Object.entries(config.props).sort(([a], [b]) => a.localeCompare(b))) if (shouldIncludeProp(key, value, config.type, config.props)) if (key === "transform" && typeof value === "object") {
1122
+ const nonDefaultKeys = {};
1123
+ for (const k in value) if (value[k] !== DEFAULT_TRANSFORM[k]) nonDefaultKeys[k] = value[k];
1124
+ if (Object.keys(nonDefaultKeys).length > 0) filteredProps.push([key, nonDefaultKeys]);
1125
+ } else if (typeof value === "object" && value !== null && "x" in value && typeof value.x === "number") {
1126
+ const rounded = { ...value };
1127
+ if (typeof rounded.x === "number") rounded.x = Math.round(rounded.x * 100) / 100;
1128
+ if (typeof rounded.y === "number") rounded.y = Math.round(rounded.y * 100) / 100;
1129
+ filteredProps.push([key, rounded]);
1130
+ } else filteredProps.push([key, value]);
1131
+ }
1132
+ if (filteredProps.length > 0) {
1133
+ lines.push(`${indent} props: {`);
1134
+ for (const [key, value] of filteredProps) lines.push(`${indent} ${key}: ${formatValue(value, indent + " ")},`);
1135
+ lines.push(`${indent} },`);
1136
+ }
1137
+ if (config.children && config.children.length > 0) {
1138
+ lines.push(`${indent} children: [`);
1139
+ for (const child of config.children) lines.push(generateComponentObject(child, allComponents, indent + " ") + ",");
1140
+ lines.push(`${indent} ],`);
1141
+ }
1142
+ lines.push(`${indent}}`);
1143
+ return lines.join("\n");
1144
+ }
1145
+ function generatePresetCode(preset, colorSpace) {
1146
+ const componentsStr = preset.components.map((config) => generateComponentObject(config, preset.components, " ")).join(",\n");
1147
+ const optionsLines = [];
1148
+ if (colorSpace && colorSpace !== "p3-linear") optionsLines.push(` colorSpace: '${colorSpace}',`);
1149
+ return `import { createShader } from 'shaders/js'
1150
+
1151
+ const shader = await createShader(document.getElementById("canvas"), {
1152
+ components: [
1153
+ ${componentsStr}
1154
+ ]
1155
+ }${optionsLines.length > 0 ? `, {\n${optionsLines.join("\n")}\n}` : ""})`;
1156
+ }
1157
+ const availableComponents = [
1158
+ "AngularBlur",
1159
+ "Ascii",
1160
+ "Aurora",
1161
+ "Beam",
1162
+ "Blob",
1163
+ "Blur",
1164
+ "BrightnessContrast",
1165
+ "Bulge",
1166
+ "CRTScreen",
1167
+ "ChannelBlur",
1168
+ "Checkerboard",
1169
+ "ChromaFlow",
1170
+ "ChromaticAberration",
1171
+ "Circle",
1172
+ "ConcentricSpin",
1173
+ "ContourLines",
1174
+ "Crescent",
1175
+ "Cross",
1176
+ "CursorRipples",
1177
+ "CursorTrail",
1178
+ "DiffuseBlur",
1179
+ "Dither",
1180
+ "DotGrid",
1181
+ "Duotone",
1182
+ "Ellipse",
1183
+ "Emboss",
1184
+ "FallingLines",
1185
+ "FilmGrain",
1186
+ "FloatingParticles",
1187
+ "FlowField",
1188
+ "Flower",
1189
+ "Form3D",
1190
+ "Glass",
1191
+ "GlassTiles",
1192
+ "Glitch",
1193
+ "Glow",
1194
+ "Godrays",
1195
+ "Grayscale",
1196
+ "Grid",
1197
+ "GridDistortion",
1198
+ "Group",
1199
+ "Halftone",
1200
+ "HueShift",
1201
+ "ImageTexture",
1202
+ "Invert",
1203
+ "Kaleidoscope",
1204
+ "LensFlare",
1205
+ "LinearBlur",
1206
+ "LinearGradient",
1207
+ "Liquify",
1208
+ "Mirror",
1209
+ "Neon",
1210
+ "Paper",
1211
+ "Perspective",
1212
+ "Pixelate",
1213
+ "Plasma",
1214
+ "PolarCoordinates",
1215
+ "Polygon",
1216
+ "Posterize",
1217
+ "ProgressiveBlur",
1218
+ "RadialGradient",
1219
+ "RectangularCoordinates",
1220
+ "Ring",
1221
+ "Ripples",
1222
+ "RoundedRect",
1223
+ "Saturation",
1224
+ "Sharpness",
1225
+ "Shatter",
1226
+ "SimplexNoise",
1227
+ "SineWave",
1228
+ "SolidColor",
1229
+ "Spherize",
1230
+ "Spiral",
1231
+ "Star",
1232
+ "Strands",
1233
+ "Stretch",
1234
+ "Stripes",
1235
+ "StudioBackground",
1236
+ "Swirl",
1237
+ "TiltShift",
1238
+ "Tint",
1239
+ "Trapezoid",
1240
+ "Tritone",
1241
+ "Twirl",
1242
+ "Vesica",
1243
+ "Vibrance",
1244
+ "VideoTexture",
1245
+ "WaveDistortion",
1246
+ "WebcamTexture",
1247
+ "ZoomBlur"
1248
+ ];
1249
+ export { availableComponents, generatePresetCode };