@toriistudio/shader-ui 0.0.12 → 0.1.0
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.
- package/dist/index.d.mts +13 -1
- package/dist/index.d.ts +13 -1
- package/dist/index.js +60 -0
- package/dist/index.mjs +59 -0
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -344,4 +344,16 @@ type DitherStreamPathDrawerProps = {
|
|
|
344
344
|
};
|
|
345
345
|
declare function DitherStreamPathDrawer({ enabled, beamColor, backgroundImageSrc, backgroundImageScale, onCommit, onCancel, }: DitherStreamPathDrawerProps): react_jsx_runtime.JSX.Element | null;
|
|
346
346
|
|
|
347
|
-
|
|
347
|
+
type IyoVADCanvasProps = {
|
|
348
|
+
color?: string;
|
|
349
|
+
scale?: number;
|
|
350
|
+
reverseGradient?: boolean;
|
|
351
|
+
centerFadeStrength?: number;
|
|
352
|
+
verticalFade?: number;
|
|
353
|
+
finalMix?: number;
|
|
354
|
+
width?: string | number;
|
|
355
|
+
height?: string | number;
|
|
356
|
+
} & Omit<ComponentProps<"div">, "ref" | "children" | "color" | "width" | "height">;
|
|
357
|
+
declare function IyoVADCanvas({ color, scale, reverseGradient, centerFadeStrength, verticalFade, finalMix, width, height, ...divProps }: IyoVADCanvasProps): react_jsx_runtime.JSX.Element;
|
|
358
|
+
|
|
359
|
+
export { AnimatedDrawingSVG, type CombineShaderMode, DitherPulseRing, DitherStream, DitherStreamPathDrawer, EFECTO_ASCII_COMPONENT_DEFAULTS, EFECTO_ASCII_POST_PROCESSING_DEFAULTS, Efecto, type EfectoAsciiColorPalette, type EfectoAsciiStyle, type PublicPostProcessingSettings as EfectoPublicAsciiPostProcessingSettings, FractalFlower, IyoVADCanvas, type IyoVADCanvasProps, MenuGlitch, type MenuGlitchUniforms, OranoParticles, type OranoParticlesUniforms, RippleWave, ShaderArt, type ShaderArtUniforms, Snow, WANDY_HAND_DEFAULTS, WandyHand };
|
package/dist/index.d.ts
CHANGED
|
@@ -344,4 +344,16 @@ type DitherStreamPathDrawerProps = {
|
|
|
344
344
|
};
|
|
345
345
|
declare function DitherStreamPathDrawer({ enabled, beamColor, backgroundImageSrc, backgroundImageScale, onCommit, onCancel, }: DitherStreamPathDrawerProps): react_jsx_runtime.JSX.Element | null;
|
|
346
346
|
|
|
347
|
-
|
|
347
|
+
type IyoVADCanvasProps = {
|
|
348
|
+
color?: string;
|
|
349
|
+
scale?: number;
|
|
350
|
+
reverseGradient?: boolean;
|
|
351
|
+
centerFadeStrength?: number;
|
|
352
|
+
verticalFade?: number;
|
|
353
|
+
finalMix?: number;
|
|
354
|
+
width?: string | number;
|
|
355
|
+
height?: string | number;
|
|
356
|
+
} & Omit<ComponentProps<"div">, "ref" | "children" | "color" | "width" | "height">;
|
|
357
|
+
declare function IyoVADCanvas({ color, scale, reverseGradient, centerFadeStrength, verticalFade, finalMix, width, height, ...divProps }: IyoVADCanvasProps): react_jsx_runtime.JSX.Element;
|
|
358
|
+
|
|
359
|
+
export { AnimatedDrawingSVG, type CombineShaderMode, DitherPulseRing, DitherStream, DitherStreamPathDrawer, EFECTO_ASCII_COMPONENT_DEFAULTS, EFECTO_ASCII_POST_PROCESSING_DEFAULTS, Efecto, type EfectoAsciiColorPalette, type EfectoAsciiStyle, type PublicPostProcessingSettings as EfectoPublicAsciiPostProcessingSettings, FractalFlower, IyoVADCanvas, type IyoVADCanvasProps, MenuGlitch, type MenuGlitchUniforms, OranoParticles, type OranoParticlesUniforms, RippleWave, ShaderArt, type ShaderArtUniforms, Snow, WANDY_HAND_DEFAULTS, WandyHand };
|
package/dist/index.js
CHANGED
|
@@ -38,6 +38,7 @@ __export(src_exports, {
|
|
|
38
38
|
EFECTO_ASCII_POST_PROCESSING_DEFAULTS: () => EFECTO_ASCII_POST_PROCESSING_DEFAULTS,
|
|
39
39
|
Efecto: () => Efecto,
|
|
40
40
|
FractalFlower: () => FractalFlower,
|
|
41
|
+
IyoVADCanvas: () => IyoVADCanvas,
|
|
41
42
|
MenuGlitch: () => MenuGlitch,
|
|
42
43
|
OranoParticles: () => OranoParticles,
|
|
43
44
|
RippleWave: () => RippleWave,
|
|
@@ -6042,6 +6043,64 @@ function DitherStreamPathDrawer({
|
|
|
6042
6043
|
}
|
|
6043
6044
|
);
|
|
6044
6045
|
}
|
|
6046
|
+
|
|
6047
|
+
// src/components/IyoVADCanvas.tsx
|
|
6048
|
+
var import_react29 = require("react");
|
|
6049
|
+
var THREE26 = __toESM(require("three"));
|
|
6050
|
+
|
|
6051
|
+
// src/shaders/iyo-vad-canvas/fragment.glsl
|
|
6052
|
+
var fragment_default21 = "precision highp float;\n\nin vec2 vUv;\nout vec4 FragColor;\n\nuniform float uTime;\nuniform vec3 uColor;\nuniform vec4 uPattern;\nuniform bool uReverseGradient;\nuniform float uCenterFadeStrength;\nuniform float uVerticalFade;\nuniform float uFinalMix;\n\n#define PI 3.14159265358979323846\n\nconst float FREQUENCY = 35.0;\nconst float LINE_WIDTH = .1;\nconst float NOISE_INTENSITY = 0.2;\nconst float TIME_MULTIPLIER = 2.0;\nconst float CENTER_FADE = 0.6;\nconst float TIME_DISTURBANCE = .3;\n\nfloat hash21(vec2 p){\n p = fract(p*vec2(123.34, 345.45));\n p += dot(p, p + 34.345);\n return fract(p.x*p.y);\n}\n\nfloat band(float v, float w){\n return 1.0 - smoothstep(0.0, w, abs(v));\n}\n\nfloat circularPattern(vec2 uv, float time, float scale, float rotation) {\n float r = length(uv);\n float angle = atan(uv.y, uv.x) + rotation;\n float phase = scale * r - time;\n return sin(phase);\n}\n\nfloat squarePattern(vec2 uv, float time, float scale, float rotation) {\n float cos_r = cos(rotation);\n float sin_r = sin(rotation);\n vec2 rotated = vec2(uv.x * cos_r - uv.y * sin_r, uv.x * sin_r + uv.y * cos_r);\n float phase = scale * (abs(rotated.x) + abs(rotated.y)) - time;\n return sin(phase);\n}\n\nfloat spiralPattern(vec2 uv, float time, float scale, float rotation) {\n float r = length(uv);\n float angle = atan(uv.y, uv.x) + rotation;\n float phase = scale * (r + angle * 2.0) - time;\n return sin(phase);\n}\n\nfloat gridPattern(vec2 uv, float time, float scale, float rotation) {\n float cos_r = cos(rotation);\n float sin_r = sin(rotation);\n vec2 rotated = vec2(uv.x * cos_r - uv.y * sin_r, uv.x * sin_r + uv.y * cos_r);\n float phase_x = scale * rotated.x - time;\n float phase_y = scale * rotated.y - time;\n return sin(phase_x) * sin(phase_y);\n}\n\nfloat radialPattern(vec2 uv, float time, float scale, float rotation) {\n float r = length(uv);\n float angle = atan(uv.y, uv.x) + rotation;\n float phase = scale * angle * 8.0 - time;\n return sin(phase);\n}\n\nfloat wavePattern(vec2 uv, float time, float scale, float rotation) {\n float cos_r = cos(rotation);\n float sin_r = sin(rotation);\n vec2 rotated = vec2(uv.x * cos_r - uv.y * sin_r, uv.x * sin_r + uv.y * cos_r);\n float phase = scale * rotated.y - time;\n return sin(phase);\n}\n\nfloat diamondPattern(vec2 uv, float time, float scale, float rotation) {\n float cos_r = cos(rotation);\n float sin_r = sin(rotation);\n vec2 rotated = vec2(uv.x * cos_r - uv.y * sin_r, uv.x * sin_r + uv.y * cos_r);\n float diamondDist = max(abs(rotated.x), abs(rotated.y));\n float phase = scale * diamondDist - time;\n return sin(phase);\n}\n\nfloat hexagonPattern(vec2 uv, float time, float scale, float rotation) {\n float cos_r = cos(rotation);\n float sin_r = sin(rotation);\n vec2 rotated = vec2(uv.x * cos_r - uv.y * sin_r, uv.x * sin_r + uv.y * cos_r);\n vec2 hexUV = abs(rotated);\n float hexDist = max(hexUV.x * 0.866025 + hexUV.y * 0.5, hexUV.y);\n float phase = scale * hexDist - time;\n return sin(phase);\n}\n\nfloat getPattern(vec2 uv, float time, float patternType, float scale, float rotation) {\n if (patternType < 0.5) { return circularPattern(uv, time, scale, rotation); }\n else if (patternType < 1.5) { return squarePattern(uv, time, scale, rotation); }\n else if (patternType < 2.5) { return spiralPattern(uv, time, scale, rotation); }\n else if (patternType < 3.5) { return gridPattern(uv, time, scale, rotation); }\n else if (patternType < 4.5) { return radialPattern(uv, time, scale, rotation); }\n else if (patternType < 5.5) { return wavePattern(uv, time, scale, rotation); }\n else if (patternType < 6.5) { return diamondPattern(uv, time, scale, rotation); }\n else { return hexagonPattern(uv, time, scale, rotation); }\n}\n\nvoid main() {\n vec2 uv = (vUv - 0.5) * 2.0;\n float baseTime = uTime * TIME_MULTIPLIER;\n float timeOscillation = sin(uTime * 0.3) * 0.5 + sin(uTime * 0.7) * 0.3;\n float timeNoise = hash21(vec2(uTime * 0.1, 0.0)) * 0.4 - 0.2;\n float t = baseTime + (timeOscillation + timeNoise) * TIME_DISTURBANCE;\n float w = max(0.001, LINE_WIDTH);\n float r = length(uv);\n float patternScale = FREQUENCY * uPattern.z;\n float patternTime = t;\n float patternRotation = uPattern.w;\n float field = getPattern(uv, patternTime, uPattern.x, patternScale, patternRotation);\n float jSeed = hash21(uv * 50.0) * 6.28318530718;\n float staticJ = (hash21(uv * 50.0) - 0.5) * 0.008;\n float oscJ = sin(uTime * 42.0 + jSeed) * 0.004;\n float particleJitter = staticJ + oscJ;\n vec2 jitteredUV = uv + vec2(particleJitter);\n float jitteredField = getPattern(jitteredUV, patternTime, uPattern.x, patternScale, patternRotation);\n field = mix(field, jitteredField, uPattern.y * 0.3);\n float localPhase = 0.06 * sin(12.0 * uTime + hash21(uv * 30.0) * 6.28318530718);\n field += localPhase * uPattern.y;\n if (uPattern.x < 1.5 || uPattern.x > 4.5) {\n vec2 corners[4];\n corners[0] = vec2( 1.10, 1.10);\n corners[1] = vec2(-1.10, 1.10);\n corners[2] = vec2(-1.10, -1.10);\n corners[3] = vec2( 1.10, -1.10);\n for (int i = 0; i < 4; i++) {\n vec2 cornerUV = uv - corners[i];\n float cjSeed = hash21((uv + corners[i]) * 40.0 + float(i)) * 6.28318530718;\n float cStatic = (hash21((uv + corners[i]) * 40.0 + float(i)) - 0.5) * 0.008;\n float cOsc = sin(uTime * 38.0 + cjSeed) * 0.0038;\n float cJ = cStatic + cOsc;\n float cr = length(cornerUV);\n vec2 cDir = (cr > 0.0) ? cornerUV / cr : vec2(0.0);\n vec2 cJitteredUV = cornerUV + cDir * cJ;\n float cornerField = getPattern(cJitteredUV, patternTime + localPhase * 0.9,\n uPattern.x, patternScale * 0.8, patternRotation);\n field += 0.4 * cornerField * uPattern.y;\n }\n }\n float lines = band(field, w);\n float glowLines = band(field, w * 3.0);\n float vign = smoothstep(1.5, 0.2, r);\n float centerFadeBase = uReverseGradient\n ? (1.0 - smoothstep(0.0, CENTER_FADE, r))\n : smoothstep(0.0, CENTER_FADE, r);\n float centerFade = mix(1.0, centerFadeBase, uCenterFadeStrength);\n float verticalDistance = abs(uv.y);\n float verticalFade = 1.0 - smoothstep(0.0, uVerticalFade, verticalDistance);\n float lineIntensity = clamp(lines * vign * centerFade * verticalFade, 0.0, 1.0);\n float tremor = 1.0 + 0.05 * sin(2.0*PI*60.0*uTime + hash21(gl_FragCoord.xy)*6.28318530718);\n lineIntensity *= tremor;\n float grainMask = smoothstep(0.2, 1.0, lineIntensity);\n float rnd = hash21(gl_FragCoord.xy + vec2(uTime * 123.4, uTime * 57.3));\n float grain = 1.0 + (rnd - 0.5) * 1.15;\n lineIntensity = clamp(lineIntensity * mix(1.0, grain, grainMask * NOISE_INTENSITY), 0.0, 1.0);\n float haloNoise = hash21(uv * 30.0 + uTime);\n float halo = pow(glowLines * 0.6 * vign * centerFade * verticalFade * (0.95 + 0.05*haloNoise), 1.8);\n float dots = step(0.999, hash21(gl_FragCoord.xy * 0.5 + uTime));\n float intensity = min(1.0, lineIntensity + halo + dots * 0.08);\n vec3 baseColor = uColor;\n vec3 backgroundColor = vec3(16.0/255.0);\n vec3 col = mix(backgroundColor, baseColor, intensity * uFinalMix);\n FragColor = vec4(col, 1.0);\n}\n";
|
|
6053
|
+
|
|
6054
|
+
// src/shaders/iyo-vad-canvas/vertex.glsl
|
|
6055
|
+
var vertex_default20 = "out vec2 vUv;\n\nvoid main() {\n vUv = uv;\n gl_Position = vec4(position, 1.0);\n}\n";
|
|
6056
|
+
|
|
6057
|
+
// src/components/IyoVADCanvas.tsx
|
|
6058
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
6059
|
+
function IyoVADCanvas({
|
|
6060
|
+
color,
|
|
6061
|
+
scale = 1,
|
|
6062
|
+
reverseGradient = true,
|
|
6063
|
+
centerFadeStrength = 0,
|
|
6064
|
+
verticalFade = 2,
|
|
6065
|
+
finalMix = 0.85,
|
|
6066
|
+
width,
|
|
6067
|
+
height,
|
|
6068
|
+
...divProps
|
|
6069
|
+
}) {
|
|
6070
|
+
const uniforms = (0, import_react29.useMemo)(
|
|
6071
|
+
() => ({
|
|
6072
|
+
uTime: { value: 0 },
|
|
6073
|
+
uPattern: { value: new THREE26.Vector4(1, 1, scale, 0) },
|
|
6074
|
+
uColor: {
|
|
6075
|
+
value: color ? new THREE26.Color(color) : new THREE26.Color(0, 0, 0)
|
|
6076
|
+
},
|
|
6077
|
+
uReverseGradient: { value: reverseGradient },
|
|
6078
|
+
uCenterFadeStrength: { value: centerFadeStrength },
|
|
6079
|
+
uVerticalFade: { value: verticalFade },
|
|
6080
|
+
uFinalMix: { value: finalMix }
|
|
6081
|
+
}),
|
|
6082
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
6083
|
+
[]
|
|
6084
|
+
);
|
|
6085
|
+
uniforms.uColor.value.set(color ?? "#000000");
|
|
6086
|
+
uniforms.uPattern.value.z = scale;
|
|
6087
|
+
uniforms.uReverseGradient.value = reverseGradient;
|
|
6088
|
+
uniforms.uCenterFadeStrength.value = centerFadeStrength;
|
|
6089
|
+
uniforms.uVerticalFade.value = verticalFade;
|
|
6090
|
+
uniforms.uFinalMix.value = finalMix;
|
|
6091
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
6092
|
+
ShaderPass,
|
|
6093
|
+
{
|
|
6094
|
+
vertexShader: vertex_default20,
|
|
6095
|
+
fragmentShader: fragment_default21,
|
|
6096
|
+
uniforms,
|
|
6097
|
+
timeUniform: "uTime",
|
|
6098
|
+
width,
|
|
6099
|
+
height,
|
|
6100
|
+
...divProps
|
|
6101
|
+
}
|
|
6102
|
+
);
|
|
6103
|
+
}
|
|
6045
6104
|
// Annotate the CommonJS export names for ESM import in node:
|
|
6046
6105
|
0 && (module.exports = {
|
|
6047
6106
|
AnimatedDrawingSVG,
|
|
@@ -6052,6 +6111,7 @@ function DitherStreamPathDrawer({
|
|
|
6052
6111
|
EFECTO_ASCII_POST_PROCESSING_DEFAULTS,
|
|
6053
6112
|
Efecto,
|
|
6054
6113
|
FractalFlower,
|
|
6114
|
+
IyoVADCanvas,
|
|
6055
6115
|
MenuGlitch,
|
|
6056
6116
|
OranoParticles,
|
|
6057
6117
|
RippleWave,
|
package/dist/index.mjs
CHANGED
|
@@ -6032,6 +6032,64 @@ function DitherStreamPathDrawer({
|
|
|
6032
6032
|
}
|
|
6033
6033
|
);
|
|
6034
6034
|
}
|
|
6035
|
+
|
|
6036
|
+
// src/components/IyoVADCanvas.tsx
|
|
6037
|
+
import { useMemo as useMemo20 } from "react";
|
|
6038
|
+
import * as THREE26 from "three";
|
|
6039
|
+
|
|
6040
|
+
// src/shaders/iyo-vad-canvas/fragment.glsl
|
|
6041
|
+
var fragment_default21 = "precision highp float;\n\nin vec2 vUv;\nout vec4 FragColor;\n\nuniform float uTime;\nuniform vec3 uColor;\nuniform vec4 uPattern;\nuniform bool uReverseGradient;\nuniform float uCenterFadeStrength;\nuniform float uVerticalFade;\nuniform float uFinalMix;\n\n#define PI 3.14159265358979323846\n\nconst float FREQUENCY = 35.0;\nconst float LINE_WIDTH = .1;\nconst float NOISE_INTENSITY = 0.2;\nconst float TIME_MULTIPLIER = 2.0;\nconst float CENTER_FADE = 0.6;\nconst float TIME_DISTURBANCE = .3;\n\nfloat hash21(vec2 p){\n p = fract(p*vec2(123.34, 345.45));\n p += dot(p, p + 34.345);\n return fract(p.x*p.y);\n}\n\nfloat band(float v, float w){\n return 1.0 - smoothstep(0.0, w, abs(v));\n}\n\nfloat circularPattern(vec2 uv, float time, float scale, float rotation) {\n float r = length(uv);\n float angle = atan(uv.y, uv.x) + rotation;\n float phase = scale * r - time;\n return sin(phase);\n}\n\nfloat squarePattern(vec2 uv, float time, float scale, float rotation) {\n float cos_r = cos(rotation);\n float sin_r = sin(rotation);\n vec2 rotated = vec2(uv.x * cos_r - uv.y * sin_r, uv.x * sin_r + uv.y * cos_r);\n float phase = scale * (abs(rotated.x) + abs(rotated.y)) - time;\n return sin(phase);\n}\n\nfloat spiralPattern(vec2 uv, float time, float scale, float rotation) {\n float r = length(uv);\n float angle = atan(uv.y, uv.x) + rotation;\n float phase = scale * (r + angle * 2.0) - time;\n return sin(phase);\n}\n\nfloat gridPattern(vec2 uv, float time, float scale, float rotation) {\n float cos_r = cos(rotation);\n float sin_r = sin(rotation);\n vec2 rotated = vec2(uv.x * cos_r - uv.y * sin_r, uv.x * sin_r + uv.y * cos_r);\n float phase_x = scale * rotated.x - time;\n float phase_y = scale * rotated.y - time;\n return sin(phase_x) * sin(phase_y);\n}\n\nfloat radialPattern(vec2 uv, float time, float scale, float rotation) {\n float r = length(uv);\n float angle = atan(uv.y, uv.x) + rotation;\n float phase = scale * angle * 8.0 - time;\n return sin(phase);\n}\n\nfloat wavePattern(vec2 uv, float time, float scale, float rotation) {\n float cos_r = cos(rotation);\n float sin_r = sin(rotation);\n vec2 rotated = vec2(uv.x * cos_r - uv.y * sin_r, uv.x * sin_r + uv.y * cos_r);\n float phase = scale * rotated.y - time;\n return sin(phase);\n}\n\nfloat diamondPattern(vec2 uv, float time, float scale, float rotation) {\n float cos_r = cos(rotation);\n float sin_r = sin(rotation);\n vec2 rotated = vec2(uv.x * cos_r - uv.y * sin_r, uv.x * sin_r + uv.y * cos_r);\n float diamondDist = max(abs(rotated.x), abs(rotated.y));\n float phase = scale * diamondDist - time;\n return sin(phase);\n}\n\nfloat hexagonPattern(vec2 uv, float time, float scale, float rotation) {\n float cos_r = cos(rotation);\n float sin_r = sin(rotation);\n vec2 rotated = vec2(uv.x * cos_r - uv.y * sin_r, uv.x * sin_r + uv.y * cos_r);\n vec2 hexUV = abs(rotated);\n float hexDist = max(hexUV.x * 0.866025 + hexUV.y * 0.5, hexUV.y);\n float phase = scale * hexDist - time;\n return sin(phase);\n}\n\nfloat getPattern(vec2 uv, float time, float patternType, float scale, float rotation) {\n if (patternType < 0.5) { return circularPattern(uv, time, scale, rotation); }\n else if (patternType < 1.5) { return squarePattern(uv, time, scale, rotation); }\n else if (patternType < 2.5) { return spiralPattern(uv, time, scale, rotation); }\n else if (patternType < 3.5) { return gridPattern(uv, time, scale, rotation); }\n else if (patternType < 4.5) { return radialPattern(uv, time, scale, rotation); }\n else if (patternType < 5.5) { return wavePattern(uv, time, scale, rotation); }\n else if (patternType < 6.5) { return diamondPattern(uv, time, scale, rotation); }\n else { return hexagonPattern(uv, time, scale, rotation); }\n}\n\nvoid main() {\n vec2 uv = (vUv - 0.5) * 2.0;\n float baseTime = uTime * TIME_MULTIPLIER;\n float timeOscillation = sin(uTime * 0.3) * 0.5 + sin(uTime * 0.7) * 0.3;\n float timeNoise = hash21(vec2(uTime * 0.1, 0.0)) * 0.4 - 0.2;\n float t = baseTime + (timeOscillation + timeNoise) * TIME_DISTURBANCE;\n float w = max(0.001, LINE_WIDTH);\n float r = length(uv);\n float patternScale = FREQUENCY * uPattern.z;\n float patternTime = t;\n float patternRotation = uPattern.w;\n float field = getPattern(uv, patternTime, uPattern.x, patternScale, patternRotation);\n float jSeed = hash21(uv * 50.0) * 6.28318530718;\n float staticJ = (hash21(uv * 50.0) - 0.5) * 0.008;\n float oscJ = sin(uTime * 42.0 + jSeed) * 0.004;\n float particleJitter = staticJ + oscJ;\n vec2 jitteredUV = uv + vec2(particleJitter);\n float jitteredField = getPattern(jitteredUV, patternTime, uPattern.x, patternScale, patternRotation);\n field = mix(field, jitteredField, uPattern.y * 0.3);\n float localPhase = 0.06 * sin(12.0 * uTime + hash21(uv * 30.0) * 6.28318530718);\n field += localPhase * uPattern.y;\n if (uPattern.x < 1.5 || uPattern.x > 4.5) {\n vec2 corners[4];\n corners[0] = vec2( 1.10, 1.10);\n corners[1] = vec2(-1.10, 1.10);\n corners[2] = vec2(-1.10, -1.10);\n corners[3] = vec2( 1.10, -1.10);\n for (int i = 0; i < 4; i++) {\n vec2 cornerUV = uv - corners[i];\n float cjSeed = hash21((uv + corners[i]) * 40.0 + float(i)) * 6.28318530718;\n float cStatic = (hash21((uv + corners[i]) * 40.0 + float(i)) - 0.5) * 0.008;\n float cOsc = sin(uTime * 38.0 + cjSeed) * 0.0038;\n float cJ = cStatic + cOsc;\n float cr = length(cornerUV);\n vec2 cDir = (cr > 0.0) ? cornerUV / cr : vec2(0.0);\n vec2 cJitteredUV = cornerUV + cDir * cJ;\n float cornerField = getPattern(cJitteredUV, patternTime + localPhase * 0.9,\n uPattern.x, patternScale * 0.8, patternRotation);\n field += 0.4 * cornerField * uPattern.y;\n }\n }\n float lines = band(field, w);\n float glowLines = band(field, w * 3.0);\n float vign = smoothstep(1.5, 0.2, r);\n float centerFadeBase = uReverseGradient\n ? (1.0 - smoothstep(0.0, CENTER_FADE, r))\n : smoothstep(0.0, CENTER_FADE, r);\n float centerFade = mix(1.0, centerFadeBase, uCenterFadeStrength);\n float verticalDistance = abs(uv.y);\n float verticalFade = 1.0 - smoothstep(0.0, uVerticalFade, verticalDistance);\n float lineIntensity = clamp(lines * vign * centerFade * verticalFade, 0.0, 1.0);\n float tremor = 1.0 + 0.05 * sin(2.0*PI*60.0*uTime + hash21(gl_FragCoord.xy)*6.28318530718);\n lineIntensity *= tremor;\n float grainMask = smoothstep(0.2, 1.0, lineIntensity);\n float rnd = hash21(gl_FragCoord.xy + vec2(uTime * 123.4, uTime * 57.3));\n float grain = 1.0 + (rnd - 0.5) * 1.15;\n lineIntensity = clamp(lineIntensity * mix(1.0, grain, grainMask * NOISE_INTENSITY), 0.0, 1.0);\n float haloNoise = hash21(uv * 30.0 + uTime);\n float halo = pow(glowLines * 0.6 * vign * centerFade * verticalFade * (0.95 + 0.05*haloNoise), 1.8);\n float dots = step(0.999, hash21(gl_FragCoord.xy * 0.5 + uTime));\n float intensity = min(1.0, lineIntensity + halo + dots * 0.08);\n vec3 baseColor = uColor;\n vec3 backgroundColor = vec3(16.0/255.0);\n vec3 col = mix(backgroundColor, baseColor, intensity * uFinalMix);\n FragColor = vec4(col, 1.0);\n}\n";
|
|
6042
|
+
|
|
6043
|
+
// src/shaders/iyo-vad-canvas/vertex.glsl
|
|
6044
|
+
var vertex_default20 = "out vec2 vUv;\n\nvoid main() {\n vUv = uv;\n gl_Position = vec4(position, 1.0);\n}\n";
|
|
6045
|
+
|
|
6046
|
+
// src/components/IyoVADCanvas.tsx
|
|
6047
|
+
import { jsx as jsx30 } from "react/jsx-runtime";
|
|
6048
|
+
function IyoVADCanvas({
|
|
6049
|
+
color,
|
|
6050
|
+
scale = 1,
|
|
6051
|
+
reverseGradient = true,
|
|
6052
|
+
centerFadeStrength = 0,
|
|
6053
|
+
verticalFade = 2,
|
|
6054
|
+
finalMix = 0.85,
|
|
6055
|
+
width,
|
|
6056
|
+
height,
|
|
6057
|
+
...divProps
|
|
6058
|
+
}) {
|
|
6059
|
+
const uniforms = useMemo20(
|
|
6060
|
+
() => ({
|
|
6061
|
+
uTime: { value: 0 },
|
|
6062
|
+
uPattern: { value: new THREE26.Vector4(1, 1, scale, 0) },
|
|
6063
|
+
uColor: {
|
|
6064
|
+
value: color ? new THREE26.Color(color) : new THREE26.Color(0, 0, 0)
|
|
6065
|
+
},
|
|
6066
|
+
uReverseGradient: { value: reverseGradient },
|
|
6067
|
+
uCenterFadeStrength: { value: centerFadeStrength },
|
|
6068
|
+
uVerticalFade: { value: verticalFade },
|
|
6069
|
+
uFinalMix: { value: finalMix }
|
|
6070
|
+
}),
|
|
6071
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
6072
|
+
[]
|
|
6073
|
+
);
|
|
6074
|
+
uniforms.uColor.value.set(color ?? "#000000");
|
|
6075
|
+
uniforms.uPattern.value.z = scale;
|
|
6076
|
+
uniforms.uReverseGradient.value = reverseGradient;
|
|
6077
|
+
uniforms.uCenterFadeStrength.value = centerFadeStrength;
|
|
6078
|
+
uniforms.uVerticalFade.value = verticalFade;
|
|
6079
|
+
uniforms.uFinalMix.value = finalMix;
|
|
6080
|
+
return /* @__PURE__ */ jsx30(
|
|
6081
|
+
ShaderPass,
|
|
6082
|
+
{
|
|
6083
|
+
vertexShader: vertex_default20,
|
|
6084
|
+
fragmentShader: fragment_default21,
|
|
6085
|
+
uniforms,
|
|
6086
|
+
timeUniform: "uTime",
|
|
6087
|
+
width,
|
|
6088
|
+
height,
|
|
6089
|
+
...divProps
|
|
6090
|
+
}
|
|
6091
|
+
);
|
|
6092
|
+
}
|
|
6035
6093
|
export {
|
|
6036
6094
|
AnimatedDrawingSVG,
|
|
6037
6095
|
DitherPulseRing,
|
|
@@ -6041,6 +6099,7 @@ export {
|
|
|
6041
6099
|
EFECTO_ASCII_POST_PROCESSING_DEFAULTS,
|
|
6042
6100
|
Efecto,
|
|
6043
6101
|
FractalFlower,
|
|
6102
|
+
IyoVADCanvas,
|
|
6044
6103
|
MenuGlitch,
|
|
6045
6104
|
OranoParticles,
|
|
6046
6105
|
RippleWave,
|