shaders 2.4.78 → 2.5.80

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 (47) hide show
  1. package/dist/core/index.d.ts +1 -1
  2. package/dist/core/index.d.ts.map +1 -1
  3. package/dist/core/index.js +57 -51
  4. package/dist/core/presetRenderer.d.ts.map +1 -1
  5. package/dist/core/renderer.d.ts +5 -1
  6. package/dist/core/renderer.d.ts.map +1 -1
  7. package/dist/js/codegen.d.ts +1 -0
  8. package/dist/js/codegen.js +1 -0
  9. package/dist/js/createPreview.d.ts +19 -0
  10. package/dist/js/createPreview.d.ts.map +1 -0
  11. package/dist/js/createPreview.js +64 -0
  12. package/dist/js/createShader.d.ts +24 -0
  13. package/dist/js/createShader.d.ts.map +1 -0
  14. package/dist/js/createShader.js +132 -0
  15. package/dist/js/decode.d.ts +7 -0
  16. package/dist/js/decode.d.ts.map +1 -0
  17. package/dist/js/decode.js +22 -0
  18. package/dist/js/index.d.ts +6 -0
  19. package/dist/js/index.d.ts.map +1 -0
  20. package/dist/js/index.js +4 -0
  21. package/dist/js/types.d.ts +23 -0
  22. package/dist/js/types.d.ts.map +1 -0
  23. package/dist/js/utils/generatePresetCode.d.ts +13 -0
  24. package/dist/js/utils/generatePresetCode.d.ts.map +1 -0
  25. package/dist/js/utils/generatePresetCode.js +1248 -0
  26. package/dist/js/utils/generatePresetCode.template.d.ts +13 -0
  27. package/dist/js/utils/generatePresetCode.template.d.ts.map +1 -0
  28. package/dist/react/Shader.js +1 -1
  29. package/dist/react/utils/generatePresetCode.d.ts.map +1 -1
  30. package/dist/react/utils/generatePresetCode.js +42 -6
  31. package/dist/react/utils/generatePresetCode.template.d.ts.map +1 -1
  32. package/dist/solid/engine/Shader.js +1 -1
  33. package/dist/solid/utils/generatePresetCode.d.ts.map +1 -1
  34. package/dist/solid/utils/generatePresetCode.js +48 -4
  35. package/dist/solid/utils/generatePresetCode.template.d.ts.map +1 -1
  36. package/dist/svelte/engine/Preview.svelte.d.ts +11 -25
  37. package/dist/svelte/engine/PreviewRenderComponent.svelte.d.ts +5 -19
  38. package/dist/svelte/{generatePresetCode-Bpe8YcaW.js → generatePresetCode-BN1puRG_.js} +31 -4
  39. package/dist/svelte/index.js +41 -67
  40. package/dist/svelte/source/engine/Preview.svelte +49 -35
  41. package/dist/svelte/source/engine/PreviewRenderComponent.svelte +9 -5
  42. package/dist/svelte/utils/generatePresetCode.js +1 -1
  43. package/dist/vue/Shader.vue_vue_type_script_setup_true_lang.js +1 -1
  44. package/dist/vue/utils/generatePresetCode.d.ts.map +1 -1
  45. package/dist/vue/utils/generatePresetCode.js +45 -8
  46. package/dist/vue/utils/generatePresetCode.template.d.ts.map +1 -1
  47. package/package.json +15 -1
@@ -0,0 +1,1248 @@
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": 1,
576
+ "decay": 3,
577
+ "radius": 1,
578
+ "edges": "stretch"
579
+ },
580
+ "Mirror": {
581
+ "opacity": 1,
582
+ "blendMode": "normal",
583
+ "center": {
584
+ "x": .5,
585
+ "y": .5
586
+ },
587
+ "angle": 0,
588
+ "edges": "mirror"
589
+ },
590
+ "Neon": {
591
+ "opacity": 1,
592
+ "blendMode": "normal",
593
+ "center": {
594
+ "x": .5,
595
+ "y": .5
596
+ },
597
+ "scale": 1,
598
+ "color": "#00ddff",
599
+ "secondaryColor": "#ff00aa",
600
+ "secondaryBlend": .5,
601
+ "glowColor": "#00ddff",
602
+ "tubeThickness": .2,
603
+ "intensity": 1.5,
604
+ "hotCoreIntensity": .6,
605
+ "glowIntensity": .6,
606
+ "glowRadius": .25,
607
+ "lightAngle": 300,
608
+ "specularIntensity": .5,
609
+ "specularSize": .5,
610
+ "cornerSmoothing": .15,
611
+ "flickerSpeed": 0,
612
+ "flickerAmount": .2,
613
+ "flowSpeed": 0,
614
+ "flowAmount": .3,
615
+ "shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
616
+ },
617
+ "Paper": {
618
+ "opacity": 1,
619
+ "blendMode": "normal",
620
+ "roughness": .3,
621
+ "grainScale": 1,
622
+ "displacement": .15,
623
+ "seed": 0
624
+ },
625
+ "Perspective": {
626
+ "opacity": 1,
627
+ "blendMode": "normal",
628
+ "center": {
629
+ "x": .5,
630
+ "y": .5
631
+ },
632
+ "pan": 0,
633
+ "tilt": 0,
634
+ "fov": 60,
635
+ "zoom": 1,
636
+ "offset": {
637
+ "x": .5,
638
+ "y": .5
639
+ },
640
+ "edges": "transparent"
641
+ },
642
+ "Pixelate": {
643
+ "opacity": 1,
644
+ "blendMode": "normal",
645
+ "scale": 50,
646
+ "gap": 0,
647
+ "roundness": 0
648
+ },
649
+ "Plasma": {
650
+ "opacity": 1,
651
+ "blendMode": "normal",
652
+ "density": 2,
653
+ "speed": 2,
654
+ "intensity": 1.5,
655
+ "warp": .4,
656
+ "contrast": 1,
657
+ "balance": 50,
658
+ "colorA": "#7018be",
659
+ "colorB": "#000000",
660
+ "colorSpace": "linear"
661
+ },
662
+ "PolarCoordinates": {
663
+ "opacity": 1,
664
+ "blendMode": "normal",
665
+ "center": {
666
+ "x": .5,
667
+ "y": .5
668
+ },
669
+ "wrap": 1,
670
+ "radius": 1,
671
+ "intensity": 1,
672
+ "edges": "transparent"
673
+ },
674
+ "Polygon": {
675
+ "opacity": 1,
676
+ "blendMode": "normal",
677
+ "color": "#ffffff",
678
+ "center": {
679
+ "x": .5,
680
+ "y": .5
681
+ },
682
+ "radius": .4,
683
+ "sides": 6,
684
+ "rounding": 0,
685
+ "rotation": 0,
686
+ "softness": 0,
687
+ "strokeThickness": 0,
688
+ "strokeColor": "#000000",
689
+ "strokePosition": "center",
690
+ "colorSpace": "linear"
691
+ },
692
+ "Posterize": {
693
+ "opacity": 1,
694
+ "blendMode": "normal",
695
+ "intensity": 5
696
+ },
697
+ "ProgressiveBlur": {
698
+ "opacity": 1,
699
+ "blendMode": "normal",
700
+ "intensity": 50,
701
+ "angle": 0,
702
+ "center": {
703
+ "x": 0,
704
+ "y": .5
705
+ },
706
+ "falloff": 1
707
+ },
708
+ "RadialGradient": {
709
+ "opacity": 1,
710
+ "blendMode": "normal",
711
+ "colorA": "#ff0000",
712
+ "colorB": "#0000ff",
713
+ "center": {
714
+ "x": .5,
715
+ "y": .5
716
+ },
717
+ "radius": 1,
718
+ "colorSpace": "linear"
719
+ },
720
+ "RectangularCoordinates": {
721
+ "opacity": 1,
722
+ "blendMode": "normal",
723
+ "center": {
724
+ "x": .5,
725
+ "y": .5
726
+ },
727
+ "scale": 1,
728
+ "intensity": 1,
729
+ "edges": "transparent"
730
+ },
731
+ "Ring": {
732
+ "opacity": 1,
733
+ "blendMode": "normal",
734
+ "color": "#ffffff",
735
+ "center": {
736
+ "x": .5,
737
+ "y": .5
738
+ },
739
+ "radius": .3,
740
+ "thickness": .07,
741
+ "softness": 0,
742
+ "strokeThickness": 0,
743
+ "strokeColor": "#000000",
744
+ "strokePosition": "center",
745
+ "colorSpace": "linear"
746
+ },
747
+ "Ripples": {
748
+ "opacity": 1,
749
+ "blendMode": "normal",
750
+ "center": {
751
+ "x": .5,
752
+ "y": .5
753
+ },
754
+ "colorA": "#ffffff",
755
+ "colorB": "#000000",
756
+ "speed": 1,
757
+ "frequency": 20,
758
+ "softness": 0,
759
+ "thickness": .5,
760
+ "phase": 0
761
+ },
762
+ "RoundedRect": {
763
+ "opacity": 1,
764
+ "blendMode": "normal",
765
+ "color": "#ffffff",
766
+ "center": {
767
+ "x": .5,
768
+ "y": .5
769
+ },
770
+ "width": .35,
771
+ "height": .25,
772
+ "rounding": .05,
773
+ "rotation": 0,
774
+ "softness": 0,
775
+ "strokeThickness": 0,
776
+ "strokeColor": "#000000",
777
+ "strokePosition": "center",
778
+ "colorSpace": "linear"
779
+ },
780
+ "Saturation": {
781
+ "opacity": 1,
782
+ "blendMode": "normal",
783
+ "intensity": 1
784
+ },
785
+ "Sharpness": {
786
+ "opacity": 1,
787
+ "blendMode": "normal",
788
+ "sharpness": 0
789
+ },
790
+ "Shatter": {
791
+ "opacity": 1,
792
+ "blendMode": "normal",
793
+ "crackWidth": 1,
794
+ "intensity": 4,
795
+ "radius": .4,
796
+ "decay": 1,
797
+ "seed": 2,
798
+ "chromaticSplit": 1,
799
+ "refractionStrength": 5,
800
+ "shardLighting": .1,
801
+ "edges": "mirror"
802
+ },
803
+ "SimplexNoise": {
804
+ "opacity": 1,
805
+ "blendMode": "normal",
806
+ "colorA": "#ffffff",
807
+ "colorB": "#000000",
808
+ "scale": 2,
809
+ "balance": 0,
810
+ "contrast": 0,
811
+ "seed": 0,
812
+ "speed": 1
813
+ },
814
+ "SineWave": {
815
+ "opacity": 1,
816
+ "blendMode": "normal",
817
+ "color": "#ffffff",
818
+ "amplitude": .15,
819
+ "frequency": 1,
820
+ "speed": 1,
821
+ "angle": 0,
822
+ "position": {
823
+ "x": .5,
824
+ "y": .5
825
+ },
826
+ "thickness": .2,
827
+ "softness": .4
828
+ },
829
+ "SolidColor": {
830
+ "opacity": 1,
831
+ "blendMode": "normal",
832
+ "color": "#5b18ca"
833
+ },
834
+ "Spherize": {
835
+ "opacity": 1,
836
+ "blendMode": "normal",
837
+ "radius": 1,
838
+ "depth": 1,
839
+ "center": {
840
+ "x": .5,
841
+ "y": .5
842
+ },
843
+ "lightPosition": {
844
+ "x": .3,
845
+ "y": .3
846
+ },
847
+ "lightIntensity": .5,
848
+ "lightSoftness": .5,
849
+ "lightColor": "#ffffff"
850
+ },
851
+ "Spiral": {
852
+ "opacity": 1,
853
+ "blendMode": "normal",
854
+ "colorA": "#000000",
855
+ "colorB": "#ffffff",
856
+ "strokeWidth": .5,
857
+ "strokeFalloff": 0,
858
+ "softness": 0,
859
+ "speed": 1,
860
+ "center": {
861
+ "x": .5,
862
+ "y": .5
863
+ },
864
+ "scale": 1,
865
+ "colorSpace": "linear"
866
+ },
867
+ "Star": {
868
+ "opacity": 1,
869
+ "blendMode": "normal",
870
+ "color": "#ffffff",
871
+ "center": {
872
+ "x": .5,
873
+ "y": .5
874
+ },
875
+ "radius": .4,
876
+ "sides": 5,
877
+ "innerRatio": .4,
878
+ "rotation": 0,
879
+ "softness": 0,
880
+ "strokeThickness": 0,
881
+ "strokeColor": "#000000",
882
+ "strokePosition": "center",
883
+ "colorSpace": "linear"
884
+ },
885
+ "Strands": {
886
+ "opacity": 1,
887
+ "blendMode": "normal",
888
+ "speed": .5,
889
+ "amplitude": 1,
890
+ "frequency": 1,
891
+ "lineCount": 12,
892
+ "lineWidth": .1,
893
+ "waveColor": "#f1c907",
894
+ "pinEdges": true,
895
+ "start": {
896
+ "x": 0,
897
+ "y": .5
898
+ },
899
+ "end": {
900
+ "x": 1,
901
+ "y": .5
902
+ }
903
+ },
904
+ "Stretch": {
905
+ "opacity": 1,
906
+ "blendMode": "normal",
907
+ "center": {
908
+ "x": .5,
909
+ "y": .5
910
+ },
911
+ "strength": 1,
912
+ "angle": 0,
913
+ "falloff": 0,
914
+ "edges": "stretch"
915
+ },
916
+ "Stripes": {
917
+ "opacity": 1,
918
+ "blendMode": "normal",
919
+ "colorA": "#000000",
920
+ "colorB": "#ffffff",
921
+ "angle": 45,
922
+ "density": 5,
923
+ "balance": .5,
924
+ "softness": 0,
925
+ "speed": .2,
926
+ "offset": 0,
927
+ "colorSpace": "linear"
928
+ },
929
+ "StudioBackground": {
930
+ "opacity": 1,
931
+ "blendMode": "normal",
932
+ "color": "#d8dbec",
933
+ "keyColor": "#d5e4ea",
934
+ "keyIntensity": 40,
935
+ "keySoftness": 50,
936
+ "fillColor": "#d5e4ea",
937
+ "fillIntensity": 10,
938
+ "fillSoftness": 70,
939
+ "fillAngle": 70,
940
+ "backColor": "#c8d4e8",
941
+ "backIntensity": 20,
942
+ "backSoftness": 80,
943
+ "brightness": 20,
944
+ "vignette": 0,
945
+ "center": {
946
+ "x": .5,
947
+ "y": .8
948
+ },
949
+ "lightTarget": 100,
950
+ "wallCurvature": 10,
951
+ "ambientIntensity": 50,
952
+ "ambientSpeed": 2,
953
+ "seed": 0
954
+ },
955
+ "Swirl": {
956
+ "opacity": 1,
957
+ "blendMode": "normal",
958
+ "colorA": "#1275d8",
959
+ "colorB": "#e19136",
960
+ "speed": 1,
961
+ "detail": 1,
962
+ "blend": 50,
963
+ "colorSpace": "linear"
964
+ },
965
+ "TiltShift": {
966
+ "opacity": 1,
967
+ "blendMode": "normal",
968
+ "intensity": 50,
969
+ "width": .3,
970
+ "falloff": .3,
971
+ "angle": 0,
972
+ "center": {
973
+ "x": .5,
974
+ "y": .5
975
+ }
976
+ },
977
+ "Tint": {
978
+ "opacity": 1,
979
+ "blendMode": "normal",
980
+ "color": "#ff8800",
981
+ "amount": .5,
982
+ "preserveLuminosity": true
983
+ },
984
+ "Trapezoid": {
985
+ "opacity": 1,
986
+ "blendMode": "normal",
987
+ "color": "#ffffff",
988
+ "center": {
989
+ "x": .5,
990
+ "y": .5
991
+ },
992
+ "bottomWidth": .35,
993
+ "topWidth": .2,
994
+ "height": .25,
995
+ "rotation": 0,
996
+ "softness": 0,
997
+ "strokeThickness": 0,
998
+ "strokeColor": "#000000",
999
+ "strokePosition": "center",
1000
+ "colorSpace": "linear"
1001
+ },
1002
+ "Tritone": {
1003
+ "opacity": 1,
1004
+ "blendMode": "normal",
1005
+ "colorA": "#ce1bea",
1006
+ "colorB": "#2fff00",
1007
+ "colorC": "#ffff00",
1008
+ "blendMid": .5,
1009
+ "colorSpace": "linear"
1010
+ },
1011
+ "Twirl": {
1012
+ "opacity": 1,
1013
+ "blendMode": "normal",
1014
+ "center": {
1015
+ "x": .5,
1016
+ "y": .5
1017
+ },
1018
+ "intensity": 1,
1019
+ "edges": "stretch"
1020
+ },
1021
+ "Vesica": {
1022
+ "opacity": 1,
1023
+ "blendMode": "normal",
1024
+ "color": "#ffffff",
1025
+ "center": {
1026
+ "x": .5,
1027
+ "y": .5
1028
+ },
1029
+ "radius": .35,
1030
+ "spread": .5,
1031
+ "rotation": 0,
1032
+ "softness": 0,
1033
+ "strokeThickness": 0,
1034
+ "strokeColor": "#000000",
1035
+ "strokePosition": "center",
1036
+ "colorSpace": "linear"
1037
+ },
1038
+ "Vibrance": {
1039
+ "opacity": 1,
1040
+ "blendMode": "normal",
1041
+ "intensity": 0
1042
+ },
1043
+ "VideoTexture": {
1044
+ "opacity": 1,
1045
+ "blendMode": "normal",
1046
+ "url": "https://shaders.com/sample.mp4",
1047
+ "objectFit": "cover",
1048
+ "loop": true
1049
+ },
1050
+ "WaveDistortion": {
1051
+ "opacity": 1,
1052
+ "blendMode": "normal",
1053
+ "strength": .3,
1054
+ "frequency": 1,
1055
+ "speed": 1,
1056
+ "angle": 0,
1057
+ "waveType": "sine",
1058
+ "edges": "stretch"
1059
+ },
1060
+ "WebcamTexture": {
1061
+ "opacity": 1,
1062
+ "blendMode": "normal",
1063
+ "objectFit": "cover",
1064
+ "mirror": true
1065
+ },
1066
+ "ZoomBlur": {
1067
+ "opacity": 1,
1068
+ "blendMode": "normal",
1069
+ "intensity": 30,
1070
+ "center": {
1071
+ "x": .5,
1072
+ "y": .5
1073
+ }
1074
+ }
1075
+ };
1076
+ function escapeString(str) {
1077
+ return str.replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/\n/g, "\\n").replace(/\r/g, "\\r").replace(/\t/g, "\\t");
1078
+ }
1079
+ function formatValue(value, indent) {
1080
+ if (typeof value === "string") {
1081
+ if (value.startsWith("{") && value.endsWith("}")) try {
1082
+ const parsed = JSON.parse(value);
1083
+ if (typeof parsed === "object" && parsed !== null) return formatValue(parsed, indent);
1084
+ } catch {}
1085
+ return `'${escapeString(value)}'`;
1086
+ }
1087
+ if (typeof value === "boolean" || typeof value === "number") return String(value);
1088
+ if (value === null || value === void 0) return String(value);
1089
+ if (Array.isArray(value)) return `[${value.map((v) => formatValue(v, indent + " ")).join(", ")}]`;
1090
+ if (typeof value === "object") {
1091
+ const entries = Object.entries(value);
1092
+ if (entries.length === 0) return "{}";
1093
+ return `{\n${entries.map(([k, v]) => `${indent} ${k}: ${formatValue(v, indent + " ")}`).join(",\n")}\n${indent}}`;
1094
+ }
1095
+ return String(value);
1096
+ }
1097
+ function shouldIncludeProp(key, value, componentType, props) {
1098
+ if (key === "maskType" && value === "alpha") return false;
1099
+ if (key === "shape" && props.shapeSdfUrl) return false;
1100
+ if (key === "transform" && typeof value === "object") {
1101
+ if (Object.keys(DEFAULT_TRANSFORM).every((k) => value[k] === DEFAULT_TRANSFORM[k])) return false;
1102
+ }
1103
+ const componentDefaults = shaderMetadata[componentType] || {};
1104
+ if (componentDefaults.hasOwnProperty(key)) {
1105
+ const defaultValue = componentDefaults[key];
1106
+ if (value != null && defaultValue != null && typeof value === "object" && typeof defaultValue === "object") return JSON.stringify(value) !== JSON.stringify(defaultValue);
1107
+ return value !== defaultValue;
1108
+ }
1109
+ if (key === "opacity" && value === 1) return false;
1110
+ if (key === "blendMode" && value === "normal") return false;
1111
+ return true;
1112
+ }
1113
+ function generateComponentObject(config, allComponents, indent) {
1114
+ const lines = [];
1115
+ lines.push(`${indent}{`);
1116
+ lines.push(`${indent} type: '${config.type}',`);
1117
+ if (config.id) lines.push(`${indent} id: '${config.id}',`);
1118
+ const filteredProps = [];
1119
+ if (config.props) {
1120
+ 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") {
1121
+ const nonDefaultKeys = {};
1122
+ for (const k in value) if (value[k] !== DEFAULT_TRANSFORM[k]) nonDefaultKeys[k] = value[k];
1123
+ if (Object.keys(nonDefaultKeys).length > 0) filteredProps.push([key, nonDefaultKeys]);
1124
+ } else if (typeof value === "object" && value !== null && "x" in value && typeof value.x === "number") {
1125
+ const rounded = { ...value };
1126
+ if (typeof rounded.x === "number") rounded.x = Math.round(rounded.x * 100) / 100;
1127
+ if (typeof rounded.y === "number") rounded.y = Math.round(rounded.y * 100) / 100;
1128
+ filteredProps.push([key, rounded]);
1129
+ } else filteredProps.push([key, value]);
1130
+ }
1131
+ if (filteredProps.length > 0) {
1132
+ lines.push(`${indent} props: {`);
1133
+ for (const [key, value] of filteredProps) lines.push(`${indent} ${key}: ${formatValue(value, indent + " ")},`);
1134
+ lines.push(`${indent} },`);
1135
+ }
1136
+ if (config.children && config.children.length > 0) {
1137
+ lines.push(`${indent} children: [`);
1138
+ for (const child of config.children) lines.push(generateComponentObject(child, allComponents, indent + " ") + ",");
1139
+ lines.push(`${indent} ],`);
1140
+ }
1141
+ lines.push(`${indent}}`);
1142
+ return lines.join("\n");
1143
+ }
1144
+ function generatePresetCode(preset, colorSpace) {
1145
+ const componentsStr = preset.components.map((config) => generateComponentObject(config, preset.components, " ")).join(",\n");
1146
+ const optionsLines = [];
1147
+ if (colorSpace && colorSpace !== "p3-linear") optionsLines.push(` colorSpace: '${colorSpace}',`);
1148
+ return `import { createShader } from 'shaders/js'
1149
+
1150
+ const shader = await createShader(document.getElementById("canvas"), {
1151
+ components: [
1152
+ ${componentsStr}
1153
+ ]
1154
+ }${optionsLines.length > 0 ? `, {\n${optionsLines.join("\n")}\n}` : ""})`;
1155
+ }
1156
+ const availableComponents = [
1157
+ "AngularBlur",
1158
+ "Ascii",
1159
+ "Aurora",
1160
+ "Beam",
1161
+ "Blob",
1162
+ "Blur",
1163
+ "BrightnessContrast",
1164
+ "Bulge",
1165
+ "CRTScreen",
1166
+ "ChannelBlur",
1167
+ "Checkerboard",
1168
+ "ChromaFlow",
1169
+ "ChromaticAberration",
1170
+ "Circle",
1171
+ "ConcentricSpin",
1172
+ "ContourLines",
1173
+ "Crescent",
1174
+ "Cross",
1175
+ "CursorRipples",
1176
+ "CursorTrail",
1177
+ "DiffuseBlur",
1178
+ "Dither",
1179
+ "DotGrid",
1180
+ "Duotone",
1181
+ "Ellipse",
1182
+ "Emboss",
1183
+ "FallingLines",
1184
+ "FilmGrain",
1185
+ "FloatingParticles",
1186
+ "FlowField",
1187
+ "Flower",
1188
+ "Form3D",
1189
+ "Glass",
1190
+ "GlassTiles",
1191
+ "Glitch",
1192
+ "Glow",
1193
+ "Godrays",
1194
+ "Grayscale",
1195
+ "Grid",
1196
+ "GridDistortion",
1197
+ "Group",
1198
+ "Halftone",
1199
+ "HueShift",
1200
+ "ImageTexture",
1201
+ "Invert",
1202
+ "Kaleidoscope",
1203
+ "LensFlare",
1204
+ "LinearBlur",
1205
+ "LinearGradient",
1206
+ "Liquify",
1207
+ "Mirror",
1208
+ "Neon",
1209
+ "Paper",
1210
+ "Perspective",
1211
+ "Pixelate",
1212
+ "Plasma",
1213
+ "PolarCoordinates",
1214
+ "Polygon",
1215
+ "Posterize",
1216
+ "ProgressiveBlur",
1217
+ "RadialGradient",
1218
+ "RectangularCoordinates",
1219
+ "Ring",
1220
+ "Ripples",
1221
+ "RoundedRect",
1222
+ "Saturation",
1223
+ "Sharpness",
1224
+ "Shatter",
1225
+ "SimplexNoise",
1226
+ "SineWave",
1227
+ "SolidColor",
1228
+ "Spherize",
1229
+ "Spiral",
1230
+ "Star",
1231
+ "Strands",
1232
+ "Stretch",
1233
+ "Stripes",
1234
+ "StudioBackground",
1235
+ "Swirl",
1236
+ "TiltShift",
1237
+ "Tint",
1238
+ "Trapezoid",
1239
+ "Tritone",
1240
+ "Twirl",
1241
+ "Vesica",
1242
+ "Vibrance",
1243
+ "VideoTexture",
1244
+ "WaveDistortion",
1245
+ "WebcamTexture",
1246
+ "ZoomBlur"
1247
+ ];
1248
+ export { availableComponents, generatePresetCode };