shaders 2.5.84 → 2.5.86

package/README.md

@@ -11,7 +11,7 @@
 
 ## Shader Magic for Modern Frontends
 
-Shaders is the component system for creative WebGPU effects in the browser. It's available as component libraries for Vue / Nuxt, React / Next, Svelte & Solid. 
+Shaders is the component system for creative WebGPU effects in the browser. It's available as component libraries for Vue / Nuxt, React / Next, Svelte, Solid and vanilla JS. 
 
 **Learn more and try the Design Editor at https://shaders.com**
 

package/dist/core/Crystal-z-2qqfhQ.js

@@ -0,0 +1,394 @@
+import { a as transformColor, l as transformPosition } from "./transformations-B5lM6fYX.js";
+import { n as createAnalyticSdfSampler, r as createSvgSdfSampler } from "./sdf-CZRX0uur.js";
+import { Fn, atan, clamp, convertToTexture, cos, dot, float, fract, max, min, mix, mx_worley_noise_float, pow, screenUV, sin, smoothstep, sqrt, vec2, vec3, vec4, viewportSize } from "three/tsl";
+var transformBoolean = (value) => value ? 1 : 0;
+var DEFAULT_SHAPE_CONFIG = JSON.stringify({
+	type: "polygonSDF",
+	radius: .35,
+	sides: 10
+});
+var kaleidoFold = (uvX, uvY, sectorAngle) => {
+	const dx = uvX.sub(float(.5));
+	const dy = uvY.sub(float(.5));
+	const r = sqrt(dx.mul(dx).add(dy.mul(dy)));
+	const inSector = fract(atan(dy, dx).add(float(Math.PI)).div(sectorAngle)).mul(sectorAngle);
+	const folded = min(inSector, sectorAngle.sub(inSector));
+	return vec2(r.mul(cos(folded)), r.mul(sin(folded)));
+};
+const componentDefinition = {
+	name: "Crystal",
+	category: "Shape Effects",
+	description: "Diamond-like crystal lens with faceted refraction.",
+	requiresRTT: true,
+	requiresChild: true,
+	props: {
+		center: {
+			default: {
+				x: .5,
+				y: .5
+			},
+			transform: transformPosition,
+			description: "Center position of the crystal shape",
+			ui: {
+				type: "position",
+				label: "Center",
+				group: "Position"
+			}
+		},
+		scale: {
+			default: 1,
+			description: "Scale of the crystal shape (1 = default size)",
+			ui: {
+				type: "range",
+				min: .1,
+				max: 3,
+				step: .05,
+				label: "Scale",
+				group: "Position"
+			}
+		},
+		cutout: {
+			default: false,
+			transform: transformBoolean,
+			description: "Cut out alpha outside the crystal shape",
+			ui: {
+				type: "checkbox",
+				label: "Cutout",
+				group: "Crystal"
+			}
+		},
+		refraction: {
+			default: .5,
+			description: "How strongly the crystal refracts content beneath",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 3,
+				step: .01,
+				label: "Refraction",
+				group: "Crystal"
+			}
+		},
+		dispersion: {
+			default: .5,
+			description: "Prismatic rainbow dispersion — splits light into spectral colors",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 2,
+				step: .01,
+				label: "Dispersion",
+				group: "Crystal"
+			}
+		},
+		facets: {
+			default: 5,
+			description: "Symmetry order — how many times the facet pattern repeats around the center",
+			ui: {
+				type: "range",
+				min: 3,
+				max: 24,
+				step: 1,
+				label: "Facets",
+				group: "Crystal"
+			}
+		},
+		fresnel: {
+			default: .05,
+			description: "Fresnel rim glow intensity around the crystal boundary",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Fresnel",
+				group: "Fresnel"
+			}
+		},
+		fresnelSoftness: {
+			default: 1,
+			description: "Fresnel rim width — higher values spread the glow further inward",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 2,
+				step: .01,
+				label: "Fresnel Softness",
+				group: "Fresnel"
+			}
+		},
+		fresnelColor: {
+			default: "#ffffff",
+			transform: transformColor,
+			description: "Color of the fresnel rim glow",
+			ui: {
+				type: "color",
+				label: "Fresnel Color",
+				group: "Fresnel"
+			}
+		},
+		edgeSoftness: {
+			default: 0,
+			description: "Softness of the crystal boundary edge",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .05,
+				label: "Edge Softness",
+				group: "Crystal"
+			}
+		},
+		innerZoom: {
+			default: 1.5,
+			description: "Magnification of content seen through the crystal",
+			ui: {
+				type: "range",
+				min: .5,
+				max: 3,
+				step: .05,
+				label: "Inner Zoom",
+				group: "Crystal"
+			}
+		},
+		lightAngle: {
+			default: 270,
+			description: "Light direction angle in degrees",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 360,
+				step: 1,
+				label: "Light Angle",
+				group: "Lighting"
+			}
+		},
+		highlights: {
+			default: .5,
+			description: "Additive brightness on light-facing facets — never darkens",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 2,
+				step: .05,
+				label: "Highlights",
+				group: "Lighting"
+			}
+		},
+		shadows: {
+			default: .3,
+			description: "Darkening on shadow-facing facets — never brightens",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .05,
+				label: "Shadows",
+				group: "Lighting"
+			}
+		},
+		brightness: {
+			default: 1.2,
+			description: "Overall crystal brightness — higher values push facets toward brilliant white",
+			ui: {
+				type: "range",
+				min: .5,
+				max: 3,
+				step: .05,
+				label: "Brightness",
+				group: "Lighting"
+			}
+		},
+		tintColor: {
+			default: "#e8e0ff",
+			transform: transformColor,
+			description: "Crystal body tint color",
+			ui: {
+				type: "color",
+				label: "Tint Color",
+				group: "Tint"
+			}
+		},
+		tintIntensity: {
+			default: 0,
+			description: "How much tint color is applied to the crystal interior",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Tint Intensity",
+				group: "Tint"
+			}
+		},
+		tintPreserveLuminosity: {
+			default: true,
+			transform: transformBoolean,
+			description: "Preserve original brightness when tinting",
+			ui: {
+				type: "checkbox",
+				label: "Preserve Luminosity",
+				group: "Tint"
+			}
+		},
+		shape: {
+			default: DEFAULT_SHAPE_CONFIG,
+			description: "Serialized shape configuration (JSON)",
+			ui: {
+				type: "shape",
+				label: "Shape",
+				group: "Shape"
+			}
+		},
+		shapeSdfUrl: {
+			default: "",
+			compileTime: true,
+			description: "URL to a pre-generated SDF .bin file"
+		},
+		shapeType: {
+			default: "",
+			compileTime: true,
+			description: "Active SDF shape type"
+		}
+	},
+	fragmentNode: ({ uniforms, childNode, onCleanup, onBeforeRender }) => {
+		if (!childNode) return vec4(0);
+		const childTexture = convertToTexture(childNode);
+		onCleanup(() => {
+			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
+		});
+		const shapeSdfUrl = uniforms.shapeSdfUrl.uniform.value;
+		const initialConfig = (() => {
+			const val = uniforms.shape.uniform.value;
+			if (typeof val === "object" && val !== null) return val;
+			try {
+				return JSON.parse(val);
+			} catch {
+				return {
+					type: "circleSDF",
+					radius: .35,
+					centerX: .5,
+					centerY: .5
+				};
+			}
+		})();
+		let sdfSampler;
+		if (shapeSdfUrl) sdfSampler = createSvgSdfSampler(shapeSdfUrl, onBeforeRender, onCleanup);
+		else sdfSampler = createAnalyticSdfSampler(uniforms.shapeType.uniform.value || initialConfig.type || "circleSDF", initialConfig, uniforms.shape, onBeforeRender);
+		return Fn(() => {
+			const uv$1 = screenUV;
+			const aspect = viewportSize.x.div(viewportSize.y);
+			const sharp = uniforms.edgeSoftness.uniform.mul(float(.5)).max(float(.001));
+			const pxH = float(1).div(viewportSize.y);
+			const centerPos = vec2(uniforms.center.uniform.x, uniforms.center.uniform.y.oneMinus());
+			const scale = uniforms.scale.uniform;
+			const sdfUV = vec2(uv$1.x.sub(centerPos.x).mul(aspect).div(scale).add(float(.5)), uv$1.y.sub(centerPos.y).div(scale).add(float(.5)));
+			const sdfRaw = sdfSampler(sdfUV).r;
+			const sdf = sdfRaw.div(scale);
+			const EPS = float(.01);
+			const gradX = sdfSampler(sdfUV.add(vec2(EPS, float(0)))).r.sub(sdfRaw).div(EPS);
+			const gradY = sdfSampler(sdfUV.add(vec2(float(0), EPS))).r.sub(sdfRaw).div(EPS);
+			const rb1 = clamp(sdf.negate().div(sharp).mul(float(32)), float(0), float(1));
+			const lightRad = uniforms.lightAngle.uniform.mul(float(Math.PI / 180));
+			const lx = cos(lightRad).add(centerPos.x.sub(float(.5)).mul(float(3)));
+			const ly = sin(lightRad).add(centerPos.y.sub(float(.5)).mul(float(3)));
+			const depthNorm = clamp(sdf.negate().div(float(.15)), float(0), float(1));
+			const edgeRefrStrength = float(1).sub(depthNorm).mul(float(1).sub(depthNorm));
+			const outerWarp = float(1).sub(smoothstep(float(0), float(.03), sdf)).mul(float(.4));
+			const refrScale = uniforms.refraction.uniform.mul(float(.15));
+			const sdfOffX = gradX.negate().mul(refrScale).mul(edgeRefrStrength.add(outerWarp)).div(aspect);
+			const sdfOffY = gradY.negate().mul(refrScale).mul(edgeRefrStrength.add(outerWarp));
+			const highlights = uniforms.highlights.uniform;
+			const shadows = uniforms.shadows.uniform;
+			const sAngle = float(2 * Math.PI).div(uniforms.facets.uniform);
+			const fUv = kaleidoFold(sdfUV.x, sdfUV.y, sAngle);
+			const pdx = sdfUV.x.sub(float(.5));
+			const pdy = sdfUV.y.sub(float(.5));
+			const posBias1 = clamp(pdx.mul(lx).add(pdy.mul(ly)).mul(float(2.5)).add(float(.5)), float(0), float(1));
+			const posBias2 = clamp(pdx.mul(ly.negate()).add(pdy.mul(lx)).mul(float(2.5)).add(float(.5)), float(0), float(1));
+			const crystalRNorm = sqrt(pdx.mul(pdx).add(pdy.mul(pdy))).div(float(.35));
+			const tableMask = float(1).sub(smoothstep(float(.22), float(.32), crystalRNorm));
+			const radialDensity = float(1).add(crystalRNorm.clamp(float(0), float(1)).mul(float(.6)));
+			const vScale1 = uniforms.facets.uniform.mul(float(1.2)).mul(radialDensity);
+			const fUvS1 = fUv.mul(vScale1);
+			const feps = float(.02);
+			const f1center = mx_worley_noise_float(fUvS1, 1);
+			const gx1 = mx_worley_noise_float(fUvS1.add(vec2(feps, float(0))), 1).sub(f1center).div(feps);
+			const gy1 = mx_worley_noise_float(fUvS1.add(vec2(float(0), feps)), 1).sub(f1center).div(feps);
+			const gLen1 = sqrt(gx1.mul(gx1).add(gy1.mul(gy1))).max(float(.001));
+			const nx1 = gx1.div(gLen1);
+			const ny1 = gy1.div(gLen1);
+			const facetVar1 = clamp(nx1.mul(lx).add(ny1.mul(ly)).mul(float(.5)).add(float(.5)), float(0), float(1));
+			const raw1 = pow(posBias1.mul(float(.6)).add(facetVar1.mul(float(.4))), float(2.5));
+			const f1s = uniforms.refraction.uniform.mul(float(.12));
+			const tableSuppress = float(1).sub(tableMask.mul(float(.9)));
+			const f1offX = gx1.mul(f1s).mul(rb1).mul(tableSuppress).div(aspect);
+			const f1offY = gy1.mul(f1s).mul(rb1).mul(tableSuppress);
+			const fUvS2 = fUv.mul(vScale1.mul(float(1.7))).add(vec2(float(3.7), float(1.2)));
+			const c2 = mx_worley_noise_float(fUvS2, 1);
+			const gx2 = mx_worley_noise_float(fUvS2.add(vec2(feps, float(0))), 1).sub(c2).div(feps);
+			const gy2 = mx_worley_noise_float(fUvS2.add(vec2(float(0), feps)), 1).sub(c2).div(feps);
+			const gLen2 = sqrt(gx2.mul(gx2).add(gy2.mul(gy2))).max(float(.001));
+			const nx2 = gx2.div(gLen2);
+			const ny2 = gy2.div(gLen2);
+			const facetVar2 = clamp(nx2.mul(ly.negate()).add(ny2.mul(lx)).mul(float(.5)).add(float(.5)), float(0), float(1));
+			const raw2 = pow(posBias2.mul(float(.5)).add(facetVar2.mul(float(.5))), float(2));
+			const f2s = uniforms.refraction.uniform.mul(float(.07));
+			const f2offX = gx2.mul(f2s).mul(rb1).div(aspect);
+			const f2offY = gy2.mul(f2s).mul(rb1);
+			const totalOffX = sdfOffX.add(f1offX).add(f2offX);
+			const totalOffY = sdfOffY.add(f1offY).add(f2offY);
+			const lensUV = centerPos.add(uv$1.sub(centerPos).div(uniforms.innerZoom.uniform)).add(vec2(totalOffX, totalOffY));
+			const lit1 = clamp(raw1.sub(float(.5)).mul(float(2)), float(0), float(1));
+			const shadow1 = clamp(float(.5).sub(raw1).mul(float(2)), float(0), float(1));
+			const bright1 = float(1).add(lit1.mul(highlights)).sub(shadow1.mul(shadows)).max(float(.02));
+			const lit2 = clamp(raw2.sub(float(.5)).mul(float(2)), float(0), float(1));
+			const shadow2 = clamp(float(.5).sub(raw2).mul(float(2)), float(0), float(1));
+			const bright2 = float(1).add(lit2.mul(highlights.mul(float(.5)))).sub(shadow2.mul(shadows.mul(float(.5))));
+			const combinedBright = bright1.mul(bright2);
+			const chrScale = uniforms.dispersion.uniform.mul(float(.12));
+			const chrOffX = totalOffX.mul(chrScale);
+			const chrOffY = totalOffY.mul(chrScale);
+			const rUV = lensUV.add(vec2(chrOffX, chrOffY));
+			const bUV = lensUV.sub(vec2(chrOffX, chrOffY));
+			const sampledR = childTexture.sample(rUV);
+			const sampledG = childTexture.sample(lensUV);
+			const sampledB = childTexture.sample(bUV);
+			const refracted = vec4(sampledR.r, sampledG.g, sampledB.b, sampledG.a);
+			const refractedRgb = vec3(refracted.r, refracted.g, refracted.b);
+			const brightness = uniforms.brightness.uniform;
+			const edgeDarken = mix(smoothstep(float(.2), float(.8), gLen1), float(1), tableMask).mul(float(.4)).add(float(.6));
+			const tableBoost = tableMask.mul(float(.25));
+			const facetMul = combinedBright.add(tableBoost).mul(edgeDarken).mul(brightness);
+			const litRgb = refractedRgb.mul(facetMul);
+			const flash1 = smoothstep(float(.65), float(1), raw1).mul(brightness);
+			const flash2 = smoothstep(float(.6), float(1), raw2).mul(brightness).mul(float(.4));
+			const flashContrib = flash1.add(flash2).mul(highlights);
+			const tintCol = vec3(uniforms.tintColor.uniform.x, uniforms.tintColor.uniform.y, uniforms.tintColor.uniform.z);
+			const tintAmt = uniforms.tintIntensity.uniform;
+			const lumWeights = vec3(.299, .587, .114);
+			const origLum = dot(litRgb, lumWeights);
+			const tinted = mix(litRgb, tintCol, tintAmt);
+			const tintedLum = dot(tinted, lumWeights);
+			const lumPreserved = tinted.mul(origLum.div(max(tintedLum, float(1e-4))));
+			const crystalRgb = uniforms.tintPreserveLuminosity.uniform.equal(float(1)).select(lumPreserved, tinted).add(vec3(flashContrib));
+			const fresnelWidth = uniforms.fresnelSoftness.uniform.mul(float(.06)).max(float(.001));
+			const fresnelDepth = clamp(sdf.negate().div(fresnelWidth), float(0), float(1));
+			const fresnelRim = float(1).sub(fresnelDepth).mul(float(1).sub(fresnelDepth)).mul(uniforms.fresnel.uniform).mul(rb1);
+			const frCol = uniforms.fresnelColor.uniform;
+			const fresnelContrib = vec3(frCol.x, frCol.y, frCol.z).mul(fresnelRim);
+			const lightFacing = gradX.mul(lx).add(gradY.mul(ly)).mul(float(.5)).add(float(.5));
+			const rb2 = clamp(sdf.sub(pxH).negate().div(sharp).mul(float(16)), float(0), float(1)).sub(clamp(sdf.negate().div(sharp).mul(float(16)), float(0), float(1))).mul(lightFacing).mul(float(.35));
+			const finalRgb = crystalRgb.add(fresnelContrib).add(rb2);
+			const transition = smoothstep(float(0), float(1), rb1);
+			const isCutout = uniforms.cutout.uniform.equal(float(1));
+			const outerUV = uv$1.add(vec2(gradX.negate().mul(refrScale).mul(outerWarp).div(aspect), gradY.negate().mul(refrScale).mul(outerWarp)));
+			const baseColor = childTexture.sample(isCutout.select(uv$1, outerUV));
+			const composited = vec4(mix(baseColor.r, finalRgb.x, transition), mix(baseColor.g, finalRgb.y, transition), mix(baseColor.b, finalRgb.z, transition), mix(baseColor.a, refracted.a, transition));
+			const cutoutAlpha = isCutout.select(transition, float(1));
+			return vec4(composited.r, composited.g, composited.b, composited.a.mul(cutoutAlpha));
+		})();
+	}
+};
+var Crystal_default = componentDefinition;
+export { componentDefinition as n, Crystal_default as t };

package/dist/core/{VideoTexture-Dbsbgb1Y.js → VideoTexture-ChFw0jKS.js}

@@ -1,4 +1,4 @@
-import { t as needsVideoCanvasWorkaround } from "./browser-CqdrcD5J.js";
+import { t as needsVideoCanvasWorkaround } from "./browser-CWKHEzb9.js";
 import { CanvasTexture, SRGBColorSpace, VideoTexture } from "three/webgpu";
 import { float, max, min, or, screenUV, select, step, texture, uniform, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {

package/dist/core/{WebcamTexture-xvb8MuFz.js → WebcamTexture-CF1nwkNG.js}

@@ -1,4 +1,4 @@
-import { t as needsVideoCanvasWorkaround } from "./browser-CqdrcD5J.js";
+import { t as needsVideoCanvasWorkaround } from "./browser-CWKHEzb9.js";
 import { CanvasTexture, SRGBColorSpace, VideoTexture } from "three/webgpu";
 import { float, max, min, or, screenUV, select, step, texture, uniform, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {

package/dist/core/index.js

@@ -22,81 +22,82 @@ import "./sdf-CZRX0uur.js";
 import "./Crescent-DnFexzlT.js";
 import "./Cross-rsVMygBv.js";
 import "./CRTScreen-BZ-sAmPZ.js";
-import "./CursorRipples-BY1iu4MX.js";
-import "./CursorTrail-BzrL2WMh.js";
-import "./DiffuseBlur-Dyd42LXw.js";
-import "./Dither-CTInG_SB.js";
-import "./DotGrid-CsL0dnYB.js";
-import "./Duotone-BbCFLFMK.js";
-import "./Ellipse-CZWtvB3q.js";
-import "./Emboss-DCKgs4_G.js";
-import "./FallingLines-DBNJVWio.js";
-import "./FilmGrain-CSuerGc6.js";
-import "./FloatingParticles-CoBM_CJ8.js";
-import "./Flower-fYEx6ZSB.js";
-import "./FlowField-Bh3-dX6I.js";
-import "./FlowingGradient-DVproCI1.js";
-import "./Form3D-DhezVuyN.js";
-import "./Glass-BioLeiH6.js";
-import "./GlassTiles-ClrOIpCg.js";
-import "./Glitch-DmWytiRl.js";
-import "./Glow-Dm4dfZ_m.js";
-import "./Godrays-CYILZUHg.js";
-import "./Grayscale-CPR_l4G2.js";
-import "./Grid-CCQZ3GhD.js";
-import "./GridDistortion-oGT8NaWa.js";
-import "./Group-CC317vlL.js";
-import "./Halftone-BZk1Hjz_.js";
-import "./HueShift-CuE3YTBE.js";
-import "./ImageTexture-DWUSKXX0.js";
-import "./Invert-C9RiDYP_.js";
-import "./Kaleidoscope-DtVlQWKG.js";
-import "./LensFlare-AVpiDD1O.js";
-import "./LinearBlur-AR65FcZh.js";
-import "./LinearGradient-DXCXjS-K.js";
-import "./Liquify-mhzPd19o.js";
-import "./Mirror-CSc5mJi1.js";
-import "./Neon-uXetpVop.js";
-import "./Paper-DfUka0dt.js";
-import "./Perspective-uPiPmWy_.js";
-import "./Pixelate-DRkAW4Lo.js";
-import "./Plasma-ELzbK-Us.js";
-import "./PolarCoordinates-CalS_TB6.js";
-import "./Polygon-7mzxbJeF.js";
-import "./Posterize-C4vtRmtA.js";
-import "./ProgressiveBlur-CLYhfOvQ.js";
-import "./RadialGradient-DtD8HWdM.js";
-import "./RectangularCoordinates-B96mflF5.js";
-import "./Ring-H6B01ZMz.js";
-import "./Ripples-Cevf-Hvg.js";
-import "./RoundedRect-OszKdYVD.js";
-import "./Saturation-CcDwPh2v.js";
-import "./Sharpness-D_dXfDEo.js";
-import "./Shatter-NfZzVt54.js";
-import "./SimplexNoise-aipzNV5j.js";
-import "./SineWave-CVeYx3n-.js";
-import "./SolidColor-BdbBnLxX.js";
-import "./Spherize-BRGwLGeu.js";
-import "./Spiral-BkTBXb7z.js";
-import "./Star-CyjNgJVp.js";
-import "./Strands-Cjsw-cPu.js";
-import "./Stretch-9cta3Z1W.js";
-import "./Stripes-C0sCGCz_.js";
-import "./StudioBackground-BYv_-8df.js";
-import "./Swirl-DXjIXfy7.js";
-import "./TiltShift-56lcZ4cJ.js";
-import "./Tint-8_WIy9_e.js";
-import "./Trapezoid-SuI0dRgI.js";
-import "./Tritone-nyJyybHI.js";
-import "./Twirl-BzSEz4xK.js";
-import "./Vesica-Cj--pgNW.js";
-import "./Vibrance-BETLN3Ie.js";
-import "./browser-CqdrcD5J.js";
-import "./VideoTexture-Dbsbgb1Y.js";
-import "./WaveDistortion-C-j597Jm.js";
-import "./WebcamTexture-xvb8MuFz.js";
-import "./ZoomBlur-DFw0J9x3.js";
-import { t as getAllShaders } from "./shaderRegistry-ClxU5BC7.js";
+import "./Crystal-z-2qqfhQ.js";
+import "./CursorRipples-CkVMs3DF.js";
+import "./CursorTrail-1D7ymT9O.js";
+import "./DiffuseBlur-BAq1jHVB.js";
+import "./Dither-U_UFB8oZ.js";
+import "./DotGrid-BzAsAVrt.js";
+import "./Duotone-CuIRHH_k.js";
+import "./Ellipse-CJFK20Xl.js";
+import "./Emboss-DWXpvlZO.js";
+import "./FallingLines-BQzBwOy0.js";
+import "./FilmGrain-Birzz05_.js";
+import "./FloatingParticles-shoqY6fm.js";
+import "./Flower-BST3LQVi.js";
+import "./FlowField-CJdtd3Za.js";
+import "./FlowingGradient-Dsuqf7Yn.js";
+import "./Form3D-Czd8VBcU.js";
+import "./Glass-BzMX9lbo.js";
+import "./GlassTiles-CQFngHS9.js";
+import "./Glitch-q3H4XH_K.js";
+import "./Glow-BltxRvyM.js";
+import "./Godrays-YxezlRHu.js";
+import "./Grayscale-D_RwmAV3.js";
+import "./Grid-CV2iJqlk.js";
+import "./GridDistortion-JCuvWcoV.js";
+import "./Group-CeA8FtS3.js";
+import "./Halftone-4oL_AA-D.js";
+import "./HueShift-7Gv8BV4v.js";
+import "./ImageTexture-BaVcRld1.js";
+import "./Invert-D_jzp4D9.js";
+import "./Kaleidoscope-Baz9Fu8k.js";
+import "./LensFlare-Dyv84bAb.js";
+import "./LinearBlur-ZGWbzIt4.js";
+import "./LinearGradient-CZGPiyHq.js";
+import "./Liquify-DrWLq2Kz.js";
+import "./Mirror-C5LuGm-w.js";
+import "./Neon-gsfaMvGq.js";
+import "./Paper-BVuYd7u4.js";
+import "./Perspective-CqV-lhEE.js";
+import "./Pixelate-DrG7QsBR.js";
+import "./Plasma-LpGeN0eG.js";
+import "./PolarCoordinates-CiNUC56M.js";
+import "./Polygon-BeqB8MSz.js";
+import "./Posterize-CGEUVRt_.js";
+import "./ProgressiveBlur-jEam9zrU.js";
+import "./RadialGradient-BMmhr2qB.js";
+import "./RectangularCoordinates-Cj-d2ol3.js";
+import "./Ring-DJl9JUMR.js";
+import "./Ripples-r12S7WG7.js";
+import "./RoundedRect--rHP7xW4.js";
+import "./Saturation-BAORnZso.js";
+import "./Sharpness-CFzYBYlL.js";
+import "./Shatter-avsezFDy.js";
+import "./SimplexNoise-BjoeAe6H.js";
+import "./SineWave-B-2YxAht.js";
+import "./SolidColor-2o0vQu86.js";
+import "./Spherize-DKJKva6y.js";
+import "./Spiral-Dzsm_AJG.js";
+import "./Star-CxI_taxd.js";
+import "./Strands-42wUIQMv.js";
+import "./Stretch-BVPICFxU.js";
+import "./Stripes-DpWPzhd5.js";
+import "./StudioBackground-CxOYZ28g.js";
+import "./Swirl-CaQpQWY2.js";
+import "./TiltShift-yJYvxA1V.js";
+import "./Tint-BR2yMhfB.js";
+import "./Trapezoid-D7qg9Gc5.js";
+import "./Tritone-PTTYWr_w.js";
+import "./Twirl-CE2yzv3_.js";
+import "./Vesica-p8oNtcOH.js";
+import "./Vibrance-CljpZu_J.js";
+import "./browser-CWKHEzb9.js";
+import "./VideoTexture-ChFw0jKS.js";
+import "./WaveDistortion-BSt0JJbk.js";
+import "./WebcamTexture-CF1nwkNG.js";
+import "./ZoomBlur-CAeswzf5.js";
+import { t as getAllShaders } from "./shaderRegistry-76rjKeJu.js";
 import { Material, Mesh, MeshBasicNodeMaterial, OrthographicCamera, PlaneGeometry, SRGBColorSpace, Scene, Vector2, WebGPURenderer } from "three/webgpu";
 import { WebGLRenderer } from "three";
 import { PI, abs, add, atan, clamp, convertToTexture, cos, div, dot, float, fract, max, min, mix, mul, pow, screenUV, sign, sin, smoothstep, sqrt, step, sub, time, uniform, uv, vec2, vec3, vec4 } from "three/tsl";