shaders 2.2.0 → 2.2.1

package/dist/react/utils/generatePresetCode.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d={AngularBlur:{opacity:1,blendMode:"normal",intensity:20,center:{x:.5,y:.5}},Ascii:{opacity:1,blendMode:"normal",characters:"@%#*+=-:.",cellSize:30,fontFamily:"JetBrains Mono",spacing:1},Blob:{opacity:1,blendMode:"normal",colorA:"#ff6b35",colorB:"#e91e63",size:.5,deformation:.5,softness:.5,highlightIntensity:.5,highlightX:.3,highlightY:-.3,highlightZ:.4,highlightColor:"#ffe11a",speed:.5,seed:1,center:{x:.5,y:.5},colorSpace:"linear"},Blur:{opacity:1,blendMode:"normal",intensity:50},Bulge:{opacity:1,blendMode:"normal",center:{x:.5,y:.5},strength:1,radius:1,falloff:.5,edges:"stretch"},ChannelBlur:{opacity:1,blendMode:"normal",redIntensity:0,greenIntensity:20,blueIntensity:40},Checkerboard:{opacity:1,blendMode:"normal",colorA:"#cccccc",colorB:"#999999",cells:8,softness:0,colorSpace:"linear"},ChromaFlow:{opacity:1,blendMode:"normal",baseColor:"#0066ff",upColor:"#00ff00",downColor:"#ff0000",leftColor:"#0000ff",rightColor:"#ffff00",intensity:1,radius:2,momentum:30},ChromaticAberration:{opacity:1,blendMode:"normal",strength:.2,angle:0,redOffset:-1,greenOffset:0,blueOffset:1},Circle:{opacity:1,blendMode:"normal",color:"#ffffff",radius:1,softness:0,center:{x:.5,y:.5}},CRTScreen:{opacity:1,blendMode:"normal",pixelSize:128,colorShift:1,scanlineIntensity:.3,scanlineFrequency:200,brightness:1.1,contrast:1.2},CursorTrail:{opacity:1,blendMode:"normal",colorA:"#00aaff",colorB:"#ff00aa",radius:.5,length:.5,shrink:1,colorSpace:"linear"},DiffuseBlur:{opacity:1,blendMode:"normal",intensity:30},Dither:{opacity:1,blendMode:"normal",pixelSize:4,threshold:.5,colorA:"transparent",colorB:"#ffffff"},DotGrid:{opacity:1,blendMode:"normal",color:"#ffffff",density:100,dotSize:.3,twinkle:0},Duotone:{opacity:1,blendMode:"normal",colorA:"#ff0000",colorB:"#023af4",blend:.5,colorSpace:"linear"},FilmGrain:{opacity:1,blendMode:"normal",strength:.5},FloatingParticles:{opacity:1,blendMode:"normal",randomness:.25,speed:.25,angle:90,particleSize:1,particleSoftness:0,twinkle:.5,count:5,particleColor:"#ffffff",speedVariance:.3,angleVariance:30,particleDensity:3},GlassTiles:{opacity:1,blendMode:"normal",intensity:1,tileCount:100},Glow:{opacity:1,blendMode:"normal",intensity:1,threshold:.5,size:10},Godrays:{opacity:1,blendMode:"normal",center:{x:0,y:0},density:.3,intensity:.8,spotty:1,speed:.5,rayColor:"#4283fb",backgroundColor:"transparent"},Grid:{opacity:1,blendMode:"normal",color:"#ffffff",cells:10,thickness:1},GridDistortion:{opacity:1,blendMode:"normal",intensity:1,swirl:0,decay:3,radius:1,gridSize:20,edges:"stretch"},Halftone:{opacity:1,blendMode:"normal",frequency:100,angle:45,smoothness:.1},HueShift:{opacity:1,blendMode:"normal",shift:0},ImageTexture:{opacity:1,blendMode:"normal",url:"https://shaders.com/og.png",objectFit:"cover"},LinearBlur:{opacity:1,blendMode:"normal",intensity:30,angle:0},LinearGradient:{opacity:1,blendMode:"normal",colorA:"#1aff00",colorB:"#0000ff",start:{x:0,y:.5},end:{x:1,y:.5},angle:0,edges:"stretch",colorSpace:"linear"},Liquify:{opacity:1,blendMode:"normal",intensity:1,swirl:0,decay:3,radius:1,edges:"stretch"},Pixelate:{opacity:1,blendMode:"normal",scale:50},PolarCoordinates:{opacity:1,blendMode:"normal",center:{x:.5,y:.5},wrap:1,radius:1,intensity:1,edges:"transparent"},Posterize:{opacity:1,blendMode:"normal",intensity:5},ProgressiveBlur:{opacity:1,blendMode:"normal",intensity:50,angle:0,center:{x:0,y:.5},falloff:1},RadialGradient:{opacity:1,blendMode:"normal",colorA:"#ff0000",colorB:"#0000ff",center:{x:.5,y:.5},radius:1,colorSpace:"linear"},Ripples:{opacity:1,blendMode:"normal",center:{x:.5,y:.5},colorA:"#ffffff",colorB:"#000000",speed:1,frequency:20,softness:0,thickness:.5,phase:0},Saturation:{opacity:1,blendMode:"normal",intensity:1},SimplexNoise:{opacity:1,blendMode:"normal",colorA:"#ffffff",colorB:"#000000",scale:2,balance:0,contrast:0,seed:0,speed:1},SineWave:{opacity:1,blendMode:"normal",color:"#ffffff",amplitude:.15,frequency:1,speed:1,angle:0,position:{x:.5,y:.5},thickness:.2,softness:.4},SolidColor:{opacity:1,blendMode:"normal",color:"#5b18ca"},Spiral:{opacity:1,blendMode:"normal",colorA:"#000000",colorB:"#ffffff",strokeWidth:.5,strokeFalloff:0,softness:0,speed:1,center:{x:.5,y:.5},scale:1,colorSpace:"linear"},Strands:{opacity:1,blendMode:"normal",speed:.5,amplitude:1,frequency:1,lineCount:12,lineWidth:.1,waveColor:"#f1c907",pinEdges:!0,start:{x:0,y:.5},end:{x:1,y:.5}},Swirl:{opacity:1,blendMode:"normal",colorA:"#1275d8",colorB:"#e19136",speed:1,detail:1,blend:50,coarseX:50,coarseY:50,mediumX:50,mediumY:50,fineX:50,fineY:50,colorSpace:"linear"},TiltShift:{opacity:1,blendMode:"normal",intensity:50,width:.3,falloff:.3,angle:0,center:{x:.5,y:.5}},Tritone:{opacity:1,blendMode:"normal",colorA:"#ce1bea",colorB:"#2fff00",colorC:"#ffff00",blendMid:.5,colorSpace:"linear"},Twirl:{opacity:1,blendMode:"normal",center:{x:.5,y:.5},intensity:1,edges:"stretch"},Vibrance:{opacity:1,blendMode:"normal",intensity:0},WaveDistortion:{opacity:1,blendMode:"normal",strength:.3,frequency:1,speed:1,angle:0,waveType:"sine",edges:"stretch"},ZoomBlur:{opacity:1,blendMode:"normal",intensity:30,center:{x:.5,y:.5}},Grayscale:{opacity:1,blendMode:"normal"},Group:{opacity:1,blendMode:"normal"},Invert:{opacity:1,blendMode:"normal"}};function f(n,t,i="  "){return Object.entries(n).filter(([e,o])=>{const r=d[t]||{};if(r.hasOwnProperty(e)){const l=r[e];return typeof o=="object"&&typeof l=="object"?JSON.stringify(o)!==JSON.stringify(l):o!==l}return!(e==="opacity"&&o===1||e==="blendMode"&&o==="normal")}).map(([e,o])=>typeof o=="string"?`${e}="${o}"`:typeof o=="object"?`${e}={${JSON.stringify(o)}}`:`${e}={${o}}`).join(`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d={AngularBlur:{opacity:1,blendMode:"normal",intensity:20,center:{x:.5,y:.5}},Ascii:{opacity:1,blendMode:"normal",characters:"@%#*+=-:.",cellSize:30,fontFamily:"JetBrains Mono",spacing:1},Blob:{opacity:1,blendMode:"normal",colorA:"#ff6b35",colorB:"#e91e63",size:.5,deformation:.5,softness:.5,highlightIntensity:.5,highlightX:.3,highlightY:-.3,highlightZ:.4,highlightColor:"#ffe11a",speed:.5,seed:1,center:{x:.5,y:.5},colorSpace:"linear"},Blur:{opacity:1,blendMode:"normal",intensity:50},Bulge:{opacity:1,blendMode:"normal",center:{x:.5,y:.5},strength:1,radius:1,falloff:.5,edges:"stretch"},ChannelBlur:{opacity:1,blendMode:"normal",redIntensity:0,greenIntensity:20,blueIntensity:40},Checkerboard:{opacity:1,blendMode:"normal",colorA:"#cccccc",colorB:"#999999",cells:8,softness:0,colorSpace:"linear"},ChromaFlow:{opacity:1,blendMode:"normal",baseColor:"#0066ff",upColor:"#00ff00",downColor:"#ff0000",leftColor:"#0000ff",rightColor:"#ffff00",intensity:1,radius:2,momentum:30},ChromaticAberration:{opacity:1,blendMode:"normal",strength:.2,angle:0,redOffset:-1,greenOffset:0,blueOffset:1},Circle:{opacity:1,blendMode:"normal",color:"#ffffff",radius:1,softness:0,center:{x:.5,y:.5}},CRTScreen:{opacity:1,blendMode:"normal",pixelSize:128,colorShift:1,scanlineIntensity:.3,scanlineFrequency:200,brightness:1.1,contrast:1.2},CursorTrail:{opacity:1,blendMode:"normal",colorA:"#00aaff",colorB:"#ff00aa",radius:.5,length:.5,shrink:1,colorSpace:"linear"},DiffuseBlur:{opacity:1,blendMode:"normal",intensity:30},Dither:{opacity:1,blendMode:"normal",pixelSize:4,threshold:.5,colorA:"transparent",colorB:"#ffffff"},DotGrid:{opacity:1,blendMode:"normal",color:"#ffffff",density:100,dotSize:.3,twinkle:0},Duotone:{opacity:1,blendMode:"normal",colorA:"#ff0000",colorB:"#023af4",blend:.5,colorSpace:"linear"},FilmGrain:{opacity:1,blendMode:"normal",strength:.5},FloatingParticles:{opacity:1,blendMode:"normal",randomness:.25,speed:.25,angle:90,particleSize:1,particleSoftness:0,twinkle:.5,count:5,particleColor:"#ffffff",speedVariance:.3,angleVariance:30,particleDensity:3},GlassTiles:{opacity:1,blendMode:"normal",intensity:1,tileCount:100},Glow:{opacity:1,blendMode:"normal",intensity:1,threshold:.5,size:10},Godrays:{opacity:1,blendMode:"normal",center:{x:0,y:0},density:.3,intensity:.8,spotty:1,speed:.5,rayColor:"#4283fb",backgroundColor:"transparent"},Grid:{opacity:1,blendMode:"normal",color:"#ffffff",cells:10,thickness:1},GridDistortion:{opacity:1,blendMode:"normal",intensity:1,swirl:0,decay:3,radius:1,gridSize:20,edges:"stretch"},Halftone:{opacity:1,blendMode:"normal",frequency:100,angle:45,smoothness:.1},HueShift:{opacity:1,blendMode:"normal",shift:0},ImageTexture:{opacity:1,blendMode:"normal",url:"https://shaders.com/og.png",objectFit:"cover"},LinearBlur:{opacity:1,blendMode:"normal",intensity:30,angle:0},LinearGradient:{opacity:1,blendMode:"normal",colorA:"#1aff00",colorB:"#0000ff",start:{x:0,y:.5},end:{x:1,y:.5},angle:0,edges:"stretch",colorSpace:"linear"},Liquify:{opacity:1,blendMode:"normal",intensity:1,swirl:0,decay:3,radius:1,edges:"stretch"},Pixelate:{opacity:1,blendMode:"normal",scale:50},PolarCoordinates:{opacity:1,blendMode:"normal",center:{x:.5,y:.5},wrap:1,radius:1,intensity:1,edges:"transparent"},Posterize:{opacity:1,blendMode:"normal",intensity:5},ProgressiveBlur:{opacity:1,blendMode:"normal",intensity:50,angle:0,center:{x:0,y:.5},falloff:1},RadialGradient:{opacity:1,blendMode:"normal",colorA:"#ff0000",colorB:"#0000ff",center:{x:.5,y:.5},radius:1,colorSpace:"linear"},RectangularCoordinates:{opacity:1,blendMode:"normal",center:{x:.5,y:.5},scale:1,intensity:1,edges:"transparent"},Ripples:{opacity:1,blendMode:"normal",center:{x:.5,y:.5},colorA:"#ffffff",colorB:"#000000",speed:1,frequency:20,softness:0,thickness:.5,phase:0},Saturation:{opacity:1,blendMode:"normal",intensity:1},SimplexNoise:{opacity:1,blendMode:"normal",colorA:"#ffffff",colorB:"#000000",scale:2,balance:0,contrast:0,seed:0,speed:1},SineWave:{opacity:1,blendMode:"normal",color:"#ffffff",amplitude:.15,frequency:1,speed:1,angle:0,position:{x:.5,y:.5},thickness:.2,softness:.4},SolidColor:{opacity:1,blendMode:"normal",color:"#5b18ca"},Spiral:{opacity:1,blendMode:"normal",colorA:"#000000",colorB:"#ffffff",strokeWidth:.5,strokeFalloff:0,softness:0,speed:1,center:{x:.5,y:.5},scale:1,colorSpace:"linear"},Strands:{opacity:1,blendMode:"normal",speed:.5,amplitude:1,frequency:1,lineCount:12,lineWidth:.1,waveColor:"#f1c907",pinEdges:!0,start:{x:0,y:.5},end:{x:1,y:.5}},Swirl:{opacity:1,blendMode:"normal",colorA:"#1275d8",colorB:"#e19136",speed:1,detail:1,blend:50,coarseX:50,coarseY:50,mediumX:50,mediumY:50,fineX:50,fineY:50,colorSpace:"linear"},TiltShift:{opacity:1,blendMode:"normal",intensity:50,width:.3,falloff:.3,angle:0,center:{x:.5,y:.5}},Tritone:{opacity:1,blendMode:"normal",colorA:"#ce1bea",colorB:"#2fff00",colorC:"#ffff00",blendMid:.5,colorSpace:"linear"},Twirl:{opacity:1,blendMode:"normal",center:{x:.5,y:.5},intensity:1,edges:"stretch"},Vibrance:{opacity:1,blendMode:"normal",intensity:0},WaveDistortion:{opacity:1,blendMode:"normal",strength:.3,frequency:1,speed:1,angle:0,waveType:"sine",edges:"stretch"},ZoomBlur:{opacity:1,blendMode:"normal",intensity:30,center:{x:.5,y:.5}},Grayscale:{opacity:1,blendMode:"normal"},Group:{opacity:1,blendMode:"normal"},Invert:{opacity:1,blendMode:"normal"}};function f(n,t,i="  "){return Object.entries(n).filter(([e,o])=>{const r=d[t]||{};if(r.hasOwnProperty(e)){const l=r[e];return typeof o=="object"&&typeof l=="object"?JSON.stringify(o)!==JSON.stringify(l):o!==l}return!(e==="opacity"&&o===1||e==="blendMode"&&o==="normal")}).map(([e,o])=>typeof o=="string"?`${e}="${o}"`:typeof o=="object"?`${e}={${JSON.stringify(o)}}`:`${e}={${o}}`).join(`
 `+i+"  ")}function p(n,t){const i=[];function e(o){for(const r of o)i.push(r),r.children&&e(r.children)}return e(t),i.some(o=>o.props?.maskSource===n)}function y(n){const t=(e,o="  ")=>{const r=e.props?f(e.props,e.type,o):"";let l="";e.id&&p(e.id,n.components)&&(l=`id="${e.id}"`);const a=[l,r].filter(Boolean).join(`
 `+o+"  ");if(e.children&&e.children.length>0){const s=e.children.map(c=>t(c,o+"  ")).join(`
 `);return a?`${o}<${e.type}
@@ -10,4 +10,4 @@ ${o}</${e.type}>`}else return a?`${o}<${e.type}
 ${o}  ${a} />`:`${o}<${e.type} />`};return`<Shader>
 ${n.components.map(e=>t(e)).join(`
 `)}
-</Shader>`}const m=["AngularBlur","Ascii","Blob","Blur","Bulge","CRTScreen","ChannelBlur","Checkerboard","ChromaFlow","ChromaticAberration","Circle","CursorTrail","DiffuseBlur","Dither","DotGrid","Duotone","FilmGrain","FloatingParticles","GlassTiles","Glow","Godrays","Grayscale","Grid","GridDistortion","Group","Halftone","HueShift","ImageTexture","Invert","LinearBlur","LinearGradient","Liquify","Pixelate","PolarCoordinates","Posterize","ProgressiveBlur","RadialGradient","Ripples","Saturation","SimplexNoise","SineWave","SolidColor","Spiral","Strands","Swirl","TiltShift","Tritone","Twirl","Vibrance","WaveDistortion","ZoomBlur"];exports.availableComponents=m;exports.generatePresetCode=y;
+</Shader>`}const m=["AngularBlur","Ascii","Blob","Blur","Bulge","CRTScreen","ChannelBlur","Checkerboard","ChromaFlow","ChromaticAberration","Circle","CursorTrail","DiffuseBlur","Dither","DotGrid","Duotone","FilmGrain","FloatingParticles","GlassTiles","Glow","Godrays","Grayscale","Grid","GridDistortion","Group","Halftone","HueShift","ImageTexture","Invert","LinearBlur","LinearGradient","Liquify","Pixelate","PolarCoordinates","Posterize","ProgressiveBlur","RadialGradient","RectangularCoordinates","Ripples","Saturation","SimplexNoise","SineWave","SolidColor","Spiral","Strands","Swirl","TiltShift","Tritone","Twirl","Vibrance","WaveDistortion","ZoomBlur"];exports.availableComponents=m;exports.generatePresetCode=y;

package/dist/react/utils/generatePresetCode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generatePresetCode.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;AA+hBD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CAyC/D;AAGD,eAAO,MAAM,mBAAmB,UAqD/B,CAAA"}
+{"version":3,"file":"generatePresetCode.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;AA0iBD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CAyC/D;AAGD,eAAO,MAAM,mBAAmB,UAsD/B,CAAA"}

package/dist/react/utils/generatePresetCode.js

@@ -310,6 +310,17 @@ const d = {
     radius: 1,
     colorSpace: "linear"
   },
+  RectangularCoordinates: {
+    opacity: 1,
+    blendMode: "normal",
+    center: {
+      x: 0.5,
+      y: 0.5
+    },
+    scale: 1,
+    intensity: 1,
+    edges: "transparent"
+  },
   Ripples: {
     opacity: 1,
     blendMode: "normal",
@@ -565,6 +576,7 @@ const m = [
   "Posterize",
   "ProgressiveBlur",
   "RadialGradient",
+  "RectangularCoordinates",
   "Ripples",
   "Saturation",
   "SimplexNoise",

package/dist/registry.js

@@ -219,6 +219,7 @@ export const shaderRegistry = [
     "definition": {
       "name": "Blob",
       "category": "Organic",
+      "acceptsUVContext": true,
       "props": {
         "colorA": {
           "default": "#ff6b35",
@@ -817,6 +818,7 @@ export const shaderRegistry = [
     "definition": {
       "name": "Checkerboard",
       "category": "Shapes & Masks",
+      "acceptsUVContext": true,
       "props": {
         "colorA": {
           "default": "#cccccc",
@@ -1234,6 +1236,7 @@ export const shaderRegistry = [
     "definition": {
       "name": "Circle",
       "category": "Shapes & Masks",
+      "acceptsUVContext": true,
       "props": {
         "color": {
           "default": "#ffffff",
@@ -1758,6 +1761,7 @@ export const shaderRegistry = [
     "definition": {
       "name": "DotGrid",
       "category": "Shapes & Masks",
+      "acceptsUVContext": true,
       "props": {
         "color": {
           "default": "#ffffff",
@@ -1967,6 +1971,7 @@ export const shaderRegistry = [
       "name": "FilmGrain",
       "category": "Effects",
       "requiresChild": true,
+      "acceptsUVContext": true,
       "props": {
         "strength": {
           "default": 0.5,
@@ -2003,6 +2008,7 @@ export const shaderRegistry = [
       "name": "FloatingParticles",
       "category": "Effects",
       "requiresRTT": false,
+      "acceptsUVContext": true,
       "props": {
         "randomness": {
           "default": 0.25,
@@ -2393,6 +2399,7 @@ export const shaderRegistry = [
       "name": "Godrays",
       "category": "Effects",
       "requiresRTT": false,
+      "acceptsUVContext": true,
       "props": {
         "center": {
           "default": {
@@ -2560,6 +2567,7 @@ export const shaderRegistry = [
     "definition": {
       "name": "Grid",
       "category": "Shapes & Masks",
+      "acceptsUVContext": true,
       "props": {
         "color": {
           "default": "#ffffff",
@@ -2938,6 +2946,7 @@ export const shaderRegistry = [
     "definition": {
       "name": "ImageTexture",
       "category": "Sources",
+      "acceptsUVContext": true,
       "props": {
         "url": {
           "default": "https://shaders.com/og.png",
@@ -3098,6 +3107,7 @@ export const shaderRegistry = [
     "definition": {
       "name": "LinearGradient",
       "category": "Gradients & Colors",
+      "acceptsUVContext": true,
       "props": {
         "colorA": {
           "default": "#1aff00",
@@ -3791,6 +3801,7 @@ export const shaderRegistry = [
     "definition": {
       "name": "RadialGradient",
       "category": "Gradients & Colors",
+      "acceptsUVContext": true,
       "props": {
         "colorA": {
           "default": "#ff0000",
@@ -3917,6 +3928,139 @@ export const shaderRegistry = [
       }
     }
   },
+  {
+    "name": "RectangularCoordinates",
+    "fileName": "RectangularCoordinates",
+    "category": "Distortions",
+    "definition": {
+      "name": "RectangularCoordinates",
+      "category": "Distortions",
+      "requiresRTT": true,
+      "requiresChild": true,
+      "props": {
+        "center": {
+          "default": {
+            "x": 0.5,
+            "y": 0.5
+          },
+          "description": "The center point for rectangular coordinate conversion",
+          "ui": {
+            "type": "position",
+            "label": "Center"
+          }
+        },
+        "scale": {
+          "default": 1,
+          "description": "Scale factor for the rectangular output",
+          "ui": {
+            "type": "range",
+            "min": 0.1,
+            "max": 3,
+            "step": 0.01,
+            "label": "Scale"
+          }
+        },
+        "intensity": {
+          "default": 1,
+          "description": "Blends between original UVs (0) and rectangular coordinates (1)",
+          "ui": {
+            "type": "range",
+            "min": 0,
+            "max": 1,
+            "step": 0.01,
+            "label": "Intensity"
+          }
+        },
+        "edges": {
+          "default": "transparent",
+          "description": "How to handle edges when distortion pushes content out of bounds",
+          "ui": {
+            "type": "select",
+            "options": [
+              {
+                "label": "Stretch",
+                "value": "stretch"
+              },
+              {
+                "label": "Transparent",
+                "value": "transparent"
+              },
+              {
+                "label": "Mirror",
+                "value": "mirror"
+              },
+              {
+                "label": "Wrap",
+                "value": "wrap"
+              }
+            ],
+            "label": "Edges"
+          }
+        }
+      }
+    },
+    "propsMetadata": {
+      "center": {
+        "ui": {
+          "type": "position",
+          "label": "Center"
+        },
+        "default": {
+          "x": 0.5,
+          "y": 0.5
+        },
+        "description": "The center point for rectangular coordinate conversion"
+      },
+      "scale": {
+        "ui": {
+          "type": "range",
+          "min": 0.1,
+          "max": 3,
+          "step": 0.01,
+          "label": "Scale"
+        },
+        "default": 1,
+        "description": "Scale factor for the rectangular output"
+      },
+      "intensity": {
+        "ui": {
+          "type": "range",
+          "min": 0,
+          "max": 1,
+          "step": 0.01,
+          "label": "Intensity"
+        },
+        "default": 1,
+        "description": "Blends between original UVs (0) and rectangular coordinates (1)"
+      },
+      "edges": {
+        "ui": {
+          "type": "select",
+          "options": [
+            {
+              "label": "Stretch",
+              "value": "stretch"
+            },
+            {
+              "label": "Transparent",
+              "value": "transparent"
+            },
+            {
+              "label": "Mirror",
+              "value": "mirror"
+            },
+            {
+              "label": "Wrap",
+              "value": "wrap"
+            }
+          ],
+          "label": "Edges"
+        },
+        "default": "transparent",
+        "description": "How to handle edges when distortion pushes content out of bounds"
+      }
+    }
+  },
   {
     "name": "Ripples",
     "fileName": "Ripples",
@@ -3924,6 +4068,7 @@ export const shaderRegistry = [
     "definition": {
       "name": "Ripples",
       "category": "Effects",
+      "acceptsUVContext": true,
       "props": {
         "center": {
           "default": {
@@ -4137,6 +4282,7 @@ export const shaderRegistry = [
     "definition": {
       "name": "SimplexNoise",
       "category": "Noise",
+      "acceptsUVContext": true,
       "props": {
         "colorA": {
           "default": "#ffffff",
@@ -4292,6 +4438,7 @@ export const shaderRegistry = [
     "definition": {
       "name": "SineWave",
       "category": "Shapes & Masks",
+      "acceptsUVContext": true,
       "props": {
         "color": {
           "default": "#ffffff",
@@ -4475,6 +4622,7 @@ export const shaderRegistry = [
     "definition": {
       "name": "SolidColor",
       "category": "Gradients & Colors",
+      "acceptsUVContext": true,
       "props": {
         "color": {
           "default": "#5b18ca",
@@ -4504,6 +4652,7 @@ export const shaderRegistry = [
     "definition": {
       "name": "Spiral",
       "category": "Shapes & Masks",
+      "acceptsUVContext": true,
       "props": {
         "colorA": {
           "default": "#000000",
@@ -4727,6 +4876,7 @@ export const shaderRegistry = [
       "category": "Generative",
       "requiresRTT": false,
       "requiresChild": false,
+      "acceptsUVContext": true,
       "props": {
         "speed": {
           "default": 0.5,
@@ -4926,6 +5076,7 @@ export const shaderRegistry = [
     "definition": {
       "name": "Swirl",
       "category": "Gradients & Colors",
+      "acceptsUVContext": true,
       "props": {
         "colorA": {
           "default": "#1275d8",

package/dist/svelte/components/RectangularCoordinates.svelte.d.ts

@@ -0,0 +1,19 @@
+import { type BlendMode, type TransformConfig } from 'shaders/core';
+import { type ComponentProps } from 'shaders/core/RectangularCoordinates';
+/**
+ * Define component props including blend mode, opacity, visibility, masking, and transformation
+ */
+interface ExtendedComponentProps extends Partial<ComponentProps> {
+    blendMode?: BlendMode;
+    opacity?: number;
+    visible?: boolean;
+    id?: string;
+    maskSource?: string;
+    maskType?: string;
+    renderOrder?: number;
+    transform?: Partial<TransformConfig>;
+    children?: import('svelte').Snippet;
+}
+declare const RectangularCoordinates: import("svelte").Component<ExtendedComponentProps, {}, "">;
+type RectangularCoordinates = ReturnType<typeof RectangularCoordinates>;
+export default RectangularCoordinates;

package/dist/svelte/index.d.ts

@@ -35,6 +35,7 @@ export { default as PolarCoordinates } from './components/PolarCoordinates.svelt
 export { default as Posterize } from './components/Posterize.svelte';
 export { default as ProgressiveBlur } from './components/ProgressiveBlur.svelte';
 export { default as RadialGradient } from './components/RadialGradient.svelte';
+export { default as RectangularCoordinates } from './components/RectangularCoordinates.svelte';
 export { default as Ripples } from './components/Ripples.svelte';
 export { default as Saturation } from './components/Saturation.svelte';
 export { default as SimplexNoise } from './components/SimplexNoise.svelte';