@sangwonl/pocato-core 0.4.0 → 0.4.2

package/dist/index.js

@@ -629,6 +629,8 @@ uniform vec2 uMouse;
 uniform vec2 uMove;
 uniform vec2 uRotate;
 uniform float uTime;
+uniform float uEffectIntensity;
+uniform float uEffectSpeed;
 uniform sampler2D uLayer0;
 uniform sampler2D uLayer1;
 uniform int uLayerCount;
@@ -691,6 +693,11 @@ const float DEPTH_FAR = 0.1;
 const float WIDTH_FAR = 0.3;
 const float SPEED_FAR = 0.1;
 
+float effectTime() {
+  float speed = uEffectSpeed > 0.0 ? uEffectSpeed : 1.0;
+  return uTime * speed;
+}
+
 float computeSnow(in vec2 uv, int layerStart, int layerEnd) {
   const mat3 permutationMatrix = mat3(13.323122, 23.5112, 21.71123, 21.1212, 28.7312, 11.9312, 21.8112, 14.7212, 61.3934);
   vec2 moveNormalized = uMove.xy / uResolution.xy;
@@ -698,15 +705,16 @@ float computeSnow(in vec2 uv, int layerStart, int layerEnd) {
   uv.x += moveNormalized.x * 0.2;
   float totalLayers = float(LAYERS);
   float accumulation = 0.0;
-  float depthOfField = 5.0 * sin(uTime * 0.1);
+  float snowTime = effectTime();
+  float depthOfField = 5.0 * sin(snowTime * 0.1);
   for (int i = max(layerStart, 0); i < min(layerEnd, LAYERS); i++) {
     float layer = float(i);
     float depthFactor = smoothstep(DEPTH_NEAR, DEPTH_FAR, layer / totalLayers);
     float widthFactor = smoothstep(WIDTH_NEAR, WIDTH_FAR, layer / totalLayers);
     float speedFactor = smoothstep(SPEED_NEAR, SPEED_FAR, layer / totalLayers);
     vec2 offsetUv = uv * (1.0 + layer * depthFactor);
-    float windEffect = widthFactor * mod(layer * 7.238917, 1.0) - widthFactor * 0.1 * sin(uTime * 2.0 + layer);
-    offsetUv += vec2(offsetUv.y * windEffect, speedFactor * uTime / (1.0 + layer * depthFactor * 0.03));
+    float windEffect = widthFactor * mod(layer * 7.238917, 1.0) - widthFactor * 0.1 * sin(snowTime * 2.0 + layer);
+    offsetUv += vec2(offsetUv.y * windEffect, speedFactor * snowTime / (1.0 + layer * depthFactor * 0.03));
     vec3 noiseInput = vec3(floor(offsetUv), 31.189 + layer);
     vec3 permuted = floor(noiseInput) * 0.00001 + fract(noiseInput);
     vec3 noise = fract((31415.9 + permuted) / fract(permutationMatrix * permuted));
@@ -721,10 +729,11 @@ float computeSnow(in vec2 uv, int layerStart, int layerEnd) {
 
 void main() {
   vec4 baseTexture = texture2D(uLayer0, vUv);
+  float effectIntensity = uEffectIntensity > 0.0 ? uEffectIntensity : 1.0;
   gl_FragColor = mix(gl_FragColor, baseTexture, baseTexture.a);
 
   float snowEffect = computeSnow(vUv, 5, 15);
-  gl_FragColor += vec4(vec3(snowEffect), 1.0);
+  gl_FragColor += vec4(vec3(snowEffect * effectIntensity), 1.0);
 
   float popupMoveOffset = 0.0;
   vec2 popupOffsetUv = vUv + (uMove.xy / uResolution.xy) * popupMoveOffset;
@@ -732,7 +741,7 @@ void main() {
   gl_FragColor = mix(gl_FragColor, popupTexture, popupTexture.a);
 
   snowEffect = computeSnow(vUv, 16, 20);
-  gl_FragColor += vec4(vec3(snowEffect), 1.0);
+  gl_FragColor += vec4(vec3(snowEffect * effectIntensity), 1.0);
 }
 `;
 
@@ -747,6 +756,8 @@ uniform vec2 uMouse;
 uniform vec2 uMove;
 uniform vec2 uRotate;
 uniform float uTime;
+uniform float uEffectIntensity;
+uniform float uEffectSpeed;
 uniform sampler2D uLayer0;
 uniform sampler2D uLayer1;
 uniform int uLayerCount;
@@ -809,6 +820,11 @@ const float DEPTH_FAR = 0.1;
 const float WIDTH_FAR = 0.3;
 const float SPEED_FAR = 0.1;
 
+float effectTime() {
+  float speed = uEffectSpeed > 0.0 ? uEffectSpeed : 1.0;
+  return uTime * speed;
+}
+
 float computeSnow(in vec2 uv, int layerStart, int layerEnd) {
   const mat3 permutationMatrix = mat3(13.323122, 23.5112, 21.71123, 21.1212, 28.7312, 11.9312, 21.8112, 14.7212, 61.3934);
   vec2 moveNormalized = uMove.xy / uResolution.xy;
@@ -816,15 +832,16 @@ float computeSnow(in vec2 uv, int layerStart, int layerEnd) {
   uv.x += moveNormalized.x * 0.2;
   float totalLayers = float(LAYERS);
   float accumulation = 0.0;
-  float depthOfField = 5.0 * sin(uTime * 0.1);
+  float snowTime = effectTime();
+  float depthOfField = 5.0 * sin(snowTime * 0.1);
   for (int i = max(layerStart, 0); i < min(layerEnd, LAYERS); i++) {
     float layer = float(i);
     float depthFactor = smoothstep(DEPTH_NEAR, DEPTH_FAR, layer / totalLayers);
     float widthFactor = smoothstep(WIDTH_NEAR, WIDTH_FAR, layer / totalLayers);
     float speedFactor = smoothstep(SPEED_NEAR, SPEED_FAR, layer / totalLayers);
     vec2 offsetUv = uv * (1.0 + layer * depthFactor);
-    float windEffect = widthFactor * mod(layer * 7.238917, 1.0) - widthFactor * 0.1 * sin(uTime * 2.0 + layer);
-    offsetUv += vec2(offsetUv.y * windEffect, speedFactor * uTime / (1.0 + layer * depthFactor * 0.03));
+    float windEffect = widthFactor * mod(layer * 7.238917, 1.0) - widthFactor * 0.1 * sin(snowTime * 2.0 + layer);
+    offsetUv += vec2(offsetUv.y * windEffect, speedFactor * snowTime / (1.0 + layer * depthFactor * 0.03));
     vec3 noiseInput = vec3(floor(offsetUv), 31.189 + layer);
     vec3 permuted = floor(noiseInput) * 0.00001 + fract(noiseInput);
     vec3 noise = fract((31415.9 + permuted) / fract(permutationMatrix * permuted));
@@ -839,10 +856,11 @@ float computeSnow(in vec2 uv, int layerStart, int layerEnd) {
 
 void main() {
   vec4 baseTexture = texture2D(uLayer0, vUv);
+  float effectIntensity = uEffectIntensity > 0.0 ? uEffectIntensity : 1.0;
   gl_FragColor = mix(gl_FragColor, baseTexture, baseTexture.a);
 
   float snowEffect = computeSnow(vUv, 5, 15);
-  gl_FragColor += vec4(vec3(snowEffect), 1.0);
+  gl_FragColor += vec4(vec3(snowEffect * effectIntensity), 1.0);
 
   // 3D parallax offset for popup layer
   vec2 popupOffset = vec2(-uRotate.x * 0.08, -uRotate.y * 0.06);
@@ -851,7 +869,7 @@ void main() {
   gl_FragColor = mix(gl_FragColor, popupTexture, popupTexture.a);
 
   snowEffect = computeSnow(vUv, 16, 20);
-  gl_FragColor += vec4(vec3(snowEffect), 1.0);
+  gl_FragColor += vec4(vec3(snowEffect * effectIntensity), 1.0);
 }
 `;
 
@@ -866,6 +884,7 @@ uniform vec2 uMouse;
 uniform vec2 uMove;
 uniform vec2 uRotate;
 uniform float uTime;
+uniform float uEffectIntensity;
 uniform sampler2D uLayer0;
 uniform sampler2D uLayer1;
 uniform int uLayerCount;
@@ -881,9 +900,14 @@ varying vec2 vUv;
 void main() {
   vec2 pixel = 1.0 / uResolution.xy;
   vec2 popUpUv = vUv + (uMove.xy / uResolution.xy) * 0.008;
+  float effectIntensity = uEffectIntensity > 0.0 ? uEffectIntensity : 1.0;
 
-  vec4 baseColor = kuwahara(uLayer0, vUv, pixel, 4.0);
-  vec4 popupColor = kuwahara(uLayer1, popUpUv, pixel, 4.0);
+  vec4 originalBaseColor = texture2D(uLayer0, vUv);
+  vec4 originalPopupColor = texture2D(uLayer1, popUpUv);
+  vec4 brushedBaseColor = kuwahara(uLayer0, vUv, pixel, 4.0);
+  vec4 brushedPopupColor = kuwahara(uLayer1, popUpUv, pixel, 4.0);
+  vec4 baseColor = mix(originalBaseColor, brushedBaseColor, effectIntensity);
+  vec4 popupColor = mix(originalPopupColor, brushedPopupColor, effectIntensity);
 
   float aSoft = smoothstep(0.4, 1.0,  popupColor.a);
   vec4 pocaColor = mix(baseColor, popupColor, aSoft);
@@ -903,6 +927,7 @@ uniform vec2 uMouse;
 uniform vec2 uMove;
 uniform vec2 uRotate;
 uniform float uTime;
+uniform float uEffectIntensity;
 uniform sampler2D uLayer0;
 uniform sampler2D uLayer1;
 uniform int uLayerCount;
@@ -917,13 +942,18 @@ varying vec2 vUv;
 
 void main() {
   vec2 pixel = 1.0 / uResolution.xy;
+  float effectIntensity = uEffectIntensity > 0.0 ? uEffectIntensity : 1.0;
 
   // 3D parallax offset for popup layer
   vec2 popupOffset = vec2(-uRotate.x * 0.08, -uRotate.y * 0.06);
   vec2 popUpUv = vUv + popupOffset;
 
-  vec4 baseColor = kuwahara(uLayer0, vUv, pixel, 4.0);
-  vec4 popupColor = kuwahara(uLayer1, popUpUv, pixel, 4.0);
+  vec4 originalBaseColor = texture2D(uLayer0, vUv);
+  vec4 originalPopupColor = texture2D(uLayer1, popUpUv);
+  vec4 brushedBaseColor = kuwahara(uLayer0, vUv, pixel, 4.0);
+  vec4 brushedPopupColor = kuwahara(uLayer1, popUpUv, pixel, 4.0);
+  vec4 baseColor = mix(originalBaseColor, brushedBaseColor, effectIntensity);
+  vec4 popupColor = mix(originalPopupColor, brushedPopupColor, effectIntensity);
 
   float aSoft = smoothstep(0.4, 1.0,  popupColor.a);
   vec4 pocaColor = mix(baseColor, popupColor, aSoft);
@@ -943,6 +973,7 @@ uniform vec2 uMouse;
 uniform vec2 uMove;
 uniform vec2 uRotate;
 uniform float uTime;
+uniform float uEffectIntensity;
 uniform sampler2D uLayer0;
 uniform sampler2D uLayer1;
 uniform int uLayerCount;
@@ -959,8 +990,11 @@ varying vec2 vUv;
 void main() {
   vec2 pixel = 1.0 / uResolution.xy;
   vec2 popUpUv = vUv + (uMove.xy / uResolution.xy) * 0.008;
+  float effectIntensity = uEffectIntensity > 0.0 ? uEffectIntensity : 1.0;
 
-  vec4 baseColor = gaussianBlur(uLayer0, vUv, pixel, 12);
+  vec4 originalBaseColor = texture2D(uLayer0, vUv);
+  vec4 blurredBaseColor = gaussianBlur(uLayer0, vUv, pixel, 12);
+  vec4 baseColor = mix(originalBaseColor, blurredBaseColor, effectIntensity);
   vec4 popupColor = texture2D(uLayer1, popUpUv);
 
   float aSoft = smoothstep(0.4, 1.0,  popupColor.a);
@@ -981,6 +1015,7 @@ uniform vec2 uMouse;
 uniform vec2 uMove;
 uniform vec2 uRotate;
 uniform float uTime;
+uniform float uEffectIntensity;
 uniform sampler2D uLayer0;
 uniform sampler2D uLayer1;
 uniform int uLayerCount;
@@ -996,12 +1031,15 @@ varying vec2 vUv;
 
 void main() {
   vec2 pixel = 1.0 / uResolution.xy;
+  float effectIntensity = uEffectIntensity > 0.0 ? uEffectIntensity : 1.0;
 
   // 3D parallax offset for popup layer
   vec2 popupOffset = vec2(-uRotate.x * 0.08, -uRotate.y * 0.06);
   vec2 popUpUv = vUv + popupOffset;
 
-  vec4 baseColor = gaussianBlur(uLayer0, vUv, pixel, 12);
+  vec4 originalBaseColor = texture2D(uLayer0, vUv);
+  vec4 blurredBaseColor = gaussianBlur(uLayer0, vUv, pixel, 12);
+  vec4 baseColor = mix(originalBaseColor, blurredBaseColor, effectIntensity);
   vec4 popupColor = texture2D(uLayer1, popUpUv);
 
   float aSoft = smoothstep(0.4, 1.0,  popupColor.a);
@@ -1022,6 +1060,8 @@ uniform vec2 uMouse;
 uniform vec2 uMove;
 uniform vec2 uRotate;
 uniform float uTime;
+uniform float uEffectIntensity;
+uniform float uEffectSpeed;
 uniform sampler2D uLayer0;
 uniform sampler2D uLayer1;
 uniform int uLayerCount;
@@ -1040,14 +1080,16 @@ vec3 hsv2rgb(vec3 c) {
 void main() {
   vec4 baseColor = texture2D(uLayer0, vUv);
   vec4 popupColor = texture2D(uLayer1, vUv);
+  float effectIntensity = uEffectIntensity > 0.0 ? uEffectIntensity : 1.0;
+  float effectSpeed = uEffectSpeed > 0.0 ? uEffectSpeed : 1.0;
 
   // Iridescence on base only
   float angle = uRotate.x * 2.0 + uRotate.y * 1.5;
-  float hue = fract(vUv.y * 0.8 + vUv.x * 0.3 + angle * 0.5 + uTime * 0.05);
+  float hue = fract(vUv.y * 0.8 + vUv.x * 0.3 + angle * 0.5 + uTime * 0.05 * effectSpeed);
   vec3 rainbow = hsv2rgb(vec3(hue, 0.6, 1.0));
 
   float tiltAmount = length(uRotate) * 3.0;
-  float holoIntensity = smoothstep(0.0, 1.0, tiltAmount) * 0.35;
+  float holoIntensity = smoothstep(0.0, 1.0, tiltAmount) * 0.35 * effectIntensity;
 
   vec3 holoBase = baseColor.rgb + rainbow * holoIntensity;
 
@@ -1070,6 +1112,8 @@ uniform vec2 uMouse;
 uniform vec2 uMove;
 uniform vec2 uRotate;
 uniform float uTime;
+uniform float uEffectIntensity;
+uniform float uEffectSpeed;
 uniform sampler2D uLayer0;
 uniform sampler2D uLayer1;
 uniform int uLayerCount;
@@ -1087,6 +1131,8 @@ vec3 hsv2rgb(vec3 c) {
 
 void main() {
   vec4 baseColor = texture2D(uLayer0, vUv);
+  float effectIntensity = uEffectIntensity > 0.0 ? uEffectIntensity : 1.0;
+  float effectSpeed = uEffectSpeed > 0.0 ? uEffectSpeed : 1.0;
 
   // 3D parallax offset for popup layer
   vec2 popupOffset = vec2(-uRotate.x * 0.08, -uRotate.y * 0.06);
@@ -1095,11 +1141,11 @@ void main() {
 
   // Iridescence on base only
   float angle = uRotate.x * 2.0 + uRotate.y * 1.5;
-  float hue = fract(vUv.y * 0.8 + vUv.x * 0.3 + angle * 0.5 + uTime * 0.05);
+  float hue = fract(vUv.y * 0.8 + vUv.x * 0.3 + angle * 0.5 + uTime * 0.05 * effectSpeed);
   vec3 rainbow = hsv2rgb(vec3(hue, 0.6, 1.0));
 
   float tiltAmount = length(uRotate) * 3.0;
-  float holoIntensity = smoothstep(0.0, 1.0, tiltAmount) * 0.35;
+  float holoIntensity = smoothstep(0.0, 1.0, tiltAmount) * 0.35 * effectIntensity;
 
   vec3 holoBase = baseColor.rgb + rainbow * holoIntensity;
 
@@ -1111,6 +1157,648 @@ void main() {
 }
 `;
 
+// src/shaders/pulse-lines.frag.ts
+var pulse_lines_frag_default = glsl`
+#ifdef GL_ES
+precision highp float;
+#endif
+
+uniform vec2 uResolution;
+uniform vec2 uMouse;
+uniform vec2 uMove;
+uniform vec2 uRotate;
+uniform float uTime;
+uniform float uEffectIntensity;
+uniform float uEffectSpeed;
+uniform sampler2D uLayer0;
+uniform sampler2D uLayer1;
+uniform int uLayerCount;
+
+varying vec2 vUv;
+
+#include <utils/defaultLighting>
+
+float pulseField(vec2 uv, float t) {
+  float dist = length(uv);
+  float band = abs(fract(t - dist * 0.9) - 0.5);
+  float ring = 1.0 - smoothstep(0.03, 0.12, band);
+  float wave = 0.5 + 0.5 * sin((uv.x + uv.y) * 8.0 + t * 2.0);
+  float stripes = 0.5 + 0.5 * sin((uv.x - uv.y) * 14.0 - t * 3.0);
+  return ring * 0.55 + wave * 0.25 + stripes * 0.20;
+}
+
+void main() {
+  vec4 baseColor = texture2D(uLayer0, vUv);
+  float effectIntensity = uEffectIntensity > 0.0 ? uEffectIntensity : 1.0;
+  float effectSpeed = uEffectSpeed > 0.0 ? uEffectSpeed : 1.0;
+  vec2 popupOffset = vec2(-uRotate.x * 0.08, -uRotate.y * 0.06);
+  vec4 popupColor = texture2D(uLayer1, vUv + popupOffset);
+  float popupMix = smoothstep(0.35, 1.0, popupColor.a);
+  vec3 layeredColor = mix(baseColor.rgb, popupColor.rgb, popupMix);
+
+  vec2 centered = (vUv * 2.0 - 1.0);
+  centered.x *= uResolution.x / max(uResolution.y, 1.0);
+
+  float time = uTime * 0.35 * effectSpeed;
+  float field = 0.0;
+
+  for (int j = 0; j < 3; j++) {
+    float jf = float(j);
+    float offset = jf * 0.24;
+    vec2 lane = centered;
+    lane.x += sin(lane.y * 3.0 + time + jf) * 0.18;
+    lane.y += cos(lane.x * 2.2 - time * 1.2 + jf * 0.7) * 0.14;
+    field += pulseField(lane + vec2(offset), time + jf * 0.6);
+  }
+  field /= 3.0;
+
+  float edge = smoothstep(1.2, 0.1, length(centered));
+  float highlight = smoothstep(0.25, 0.95, field) * edge;
+  float glow = smoothstep(0.18, 0.95, field + 0.12 * sin(time + centered.x * 4.0));
+
+  float luminance = dot(layeredColor, vec3(0.299, 0.587, 0.114));
+  vec3 lifted = mix(layeredColor, vec3(luminance), 0.08);
+  vec3 pulseColor = lifted + layeredColor * (0.22 + glow * 0.18) + vec3(0.04) * glow;
+  vec3 finalColor = mix(layeredColor, pulseColor, highlight * 0.88 * effectIntensity);
+  finalColor += (pulseColor - layeredColor) * glow * 0.10 * effectIntensity;
+
+  float finalAlpha = max(baseColor.a, popupColor.a);
+  gl_FragColor = defaultLighting(vec4(finalColor, finalAlpha), uResolution, uRotate, 1.0);
+}
+`;
+
+// src/shaders/gradient-flow.frag.ts
+var gradient_flow_frag_default = glsl`
+#ifdef GL_ES
+precision highp float;
+#endif
+
+uniform vec2 uResolution;
+uniform vec2 uMouse;
+uniform vec2 uMove;
+uniform vec2 uRotate;
+uniform float uTime;
+uniform float uEffectIntensity;
+uniform float uEffectSpeed;
+uniform sampler2D uLayer0;
+uniform sampler2D uLayer1;
+uniform int uLayerCount;
+
+varying vec2 vUv;
+
+#include <utils/defaultLighting>
+
+#define S(a,b,t) smoothstep(a,b,t)
+
+mat2 Rot(float a) {
+  float s = sin(a);
+  float c = cos(a);
+  return mat2(c, -s, s, c);
+}
+
+vec2 hash(vec2 p) {
+  p = vec2(dot(p, vec2(2127.1, 81.17)), dot(p, vec2(1269.5, 283.37)));
+  return fract(sin(p) * 43758.5453);
+}
+
+float noise(in vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  vec2 u = f * f * (3.0 - 2.0 * f);
+
+  float n = mix(
+    mix(
+      dot(-1.0 + 2.0 * hash(i + vec2(0.0, 0.0)), f - vec2(0.0, 0.0)),
+      dot(-1.0 + 2.0 * hash(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0)),
+      u.x
+    ),
+    mix(
+      dot(-1.0 + 2.0 * hash(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0)),
+      dot(-1.0 + 2.0 * hash(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0)),
+      u.x
+    ),
+    u.y
+  );
+
+  return 0.5 + 0.5 * n;
+}
+
+void main() {
+  vec4 baseColor = texture2D(uLayer0, vUv);
+  float effectIntensity = uEffectIntensity > 0.0 ? uEffectIntensity : 1.0;
+  float effectSpeed = uEffectSpeed > 0.0 ? uEffectSpeed : 1.0;
+  vec2 popupOffset = vec2(-uRotate.x * 0.08, -uRotate.y * 0.06);
+  vec4 popupColor = texture2D(uLayer1, vUv + popupOffset);
+  float popupMix = smoothstep(0.35, 1.0, popupColor.a);
+  vec3 layeredColor = mix(baseColor.rgb, popupColor.rgb, popupMix);
+
+  vec2 uv = vUv;
+  float ratio = uResolution.x / max(uResolution.y, 1.0);
+
+  vec2 tuv = uv - 0.5;
+
+  float effectTime = uTime * effectSpeed;
+  float degree = noise(vec2(effectTime * 0.1, tuv.x * tuv.y));
+
+  tuv.y *= 1.0 / ratio;
+  tuv *= Rot(radians((degree - 0.5) * 720.0 + 180.0));
+  tuv.y *= ratio;
+
+  float frequency = 5.0;
+  float amplitude = 30.0;
+  float speed = effectTime * 2.0;
+  tuv.x += sin(tuv.y * frequency + speed) / amplitude;
+  tuv.y += sin(tuv.x * frequency * 1.5 + speed) / (amplitude * 0.5);
+
+  vec3 colorYellow = vec3(0.957, 0.804, 0.623);
+  vec3 colorDeepBlue = vec3(0.192, 0.384, 0.933);
+  vec3 layer1 = mix(colorYellow, colorDeepBlue, S(-0.3, 0.2, (tuv * Rot(radians(-5.0))).x));
+
+  vec3 colorRed = vec3(0.910, 0.510, 0.800);
+  vec3 colorBlue = vec3(0.350, 0.710, 0.953);
+  vec3 layer2 = mix(colorRed, colorBlue, S(-0.3, 0.2, (tuv * Rot(radians(-5.0))).x));
+
+  vec3 waveComp = mix(layer1, layer2, S(0.5, -0.3, tuv.y));
+
+  float luminance = dot(layeredColor, vec3(0.299, 0.587, 0.114));
+  vec3 neutralBase = mix(layeredColor, vec3(luminance), 0.12);
+  vec3 finalComp = mix(neutralBase, waveComp, 0.78 * effectIntensity);
+  finalComp = mix(layeredColor, finalComp, 0.18 * effectIntensity);
+
+  float vignette = smoothstep(1.25, 0.15, length((uv - 0.5) * vec2(ratio, 1.0)));
+  finalComp = mix(finalComp * 0.75, finalComp, vignette);
+
+  gl_FragColor = defaultLighting(vec4(finalComp, max(baseColor.a, popupColor.a)), uResolution, uRotate, 1.0);
+}
+`;
+
+// src/shaders/procedural-ocean.frag.ts
+var procedural_ocean_frag_default = glsl`
+#ifdef GL_ES
+precision highp float;
+#endif
+
+#define DRAG_MULT 0.048
+#define ITERATIONS_RAYMARCH 13
+#define ITERATIONS_NORMAL 48
+
+uniform vec2 uResolution;
+uniform vec2 uMove;
+uniform vec2 uRotate;
+uniform float uTime;
+uniform float uEffectIntensity;
+uniform float uEffectSpeed;
+uniform sampler2D uLayer0;
+uniform sampler2D uLayer1;
+uniform int uLayerCount;
+
+varying vec2 vUv;
+
+const vec2 DEFAULT_VIEW = vec2(0.0, 0.0);
+
+float effectTime() {
+  float speed = uEffectSpeed > 0.0 ? uEffectSpeed : 1.0;
+  return uTime * speed;
+}
+
+vec2 wavedx(vec2 position, vec2 direction, float speed, float frequency, float timeshift) {
+  float x = dot(direction, position) * frequency + timeshift * speed;
+  float wave = exp(sin(x) - 1.0);
+  float dx = wave * cos(x);
+  return vec2(wave, -dx);
+}
+
+float getwaves(vec2 position, int iterations) {
+  float iter = 0.0;
+  float phase = 6.0;
+  float speed = 0.4;
+  float weight = 1.0;
+  float w = 0.0;
+  float ws = 0.0;
+  for (int i = 0; i < iterations; i++) {
+    vec2 p = vec2(sin(iter), cos(iter));
+    vec2 res = wavedx(position, p, speed, phase, effectTime());
+    position += p * res.y * weight * DRAG_MULT;
+    w += res.x * weight;
+    iter += 12.0;
+    ws += weight;
+    weight = mix(weight, 0.0, 0.2);
+    phase *= 1.18;
+    speed *= 1.07;
+  }
+  return w / ws;
+}
+
+float raymarchwater(vec3 camera, vec3 start, vec3 end, float depth) {
+  vec3 pos = start;
+  float h = 0.0;
+  vec3 dir = normalize(end - start);
+  float eps = 0.01;
+  for (int i = 0; i < 318; i++) {
+    h = getwaves(pos.xz * 0.1, ITERATIONS_RAYMARCH) * depth - depth;
+    float dist_pos = distance(pos, camera);
+    if (h + eps * dist_pos > pos.y) {
+      return dist_pos;
+    }
+    pos += dir * (pos.y - h);
+  }
+  return -1.0;
+}
+
+vec3 normal(vec2 pos, float e, float depth) {
+  vec2 ex = vec2(e, 0.0);
+  float h = getwaves(pos * 0.1, ITERATIONS_NORMAL) * depth - depth;
+  float hx = getwaves((pos + ex.xy) * 0.1, ITERATIONS_NORMAL) * depth - depth;
+  float hy = getwaves((pos + ex.yx) * 0.1, ITERATIONS_NORMAL) * depth - depth;
+  vec3 a = vec3(pos.x, h, pos.y);
+  vec3 b = vec3(pos.x + e, hx, pos.y);
+  vec3 c = vec3(pos.x, hy, pos.y + e);
+  return normalize(cross(b - a, c - a));
+}
+
+mat3 rotmat(vec3 axis, float angle) {
+  axis = normalize(axis);
+  float s = sin(angle);
+  float c = cos(angle);
+  float oc = 1.0 - c;
+  return mat3(
+    oc * axis.x * axis.x + c,           oc * axis.x * axis.y - axis.z * s,  oc * axis.z * axis.x + axis.y * s,
+    oc * axis.x * axis.y + axis.z * s,  oc * axis.y * axis.y + c,            oc * axis.y * axis.z - axis.x * s,
+    oc * axis.z * axis.x - axis.y * s,  oc * axis.y * axis.z + axis.x * s,   oc * axis.z * axis.z + c
+  );
+}
+
+vec3 getRay(vec2 uv) {
+  uv = (uv * 2.0 - 1.0) * vec2(uResolution.x / uResolution.y, 1.0);
+  vec3 proj = normalize(vec3(uv.x, uv.y, 1.0) + vec3(uv.x, uv.y, -1.0) * pow(length(uv), 2.0) * 0.05);
+  vec3 ray = rotmat(vec3(0.0, -1.0, 0.0), 3.0 * (DEFAULT_VIEW.x * 2.0 - 1.0) + uRotate.x * 0.06) *
+             rotmat(vec3(1.0, 0.0, 0.0), 1.5 * (DEFAULT_VIEW.y * 2.0 - 1.0) + uRotate.y * 0.04) *
+             proj;
+  return ray;
+}
+
+float intersectPlane(vec3 origin, vec3 direction, vec3 point, vec3 normal) {
+  return clamp(dot(point - origin, normal) / dot(direction, normal), -1.0, 9991999.0);
+}
+
+vec3 extra_cheap_atmosphere(vec3 raydir, vec3 sundir) {
+  sundir.y = max(sundir.y, -0.07);
+  float special_trick = 1.0 / (raydir.y * 1.0 + 0.1);
+  float special_trick2 = 1.0 / (sundir.y * 11.0 + 1.0);
+  float raysundt = pow(abs(dot(sundir, raydir)), 2.0);
+  float sundt = pow(max(0.0, dot(sundir, raydir)), 8.0);
+  float mymie = sundt * special_trick * 0.2;
+  vec3 suncolor = mix(vec3(1.0), max(vec3(0.0), vec3(1.0) - vec3(5.5, 13.0, 22.4) / 22.4), special_trick2);
+  vec3 bluesky = vec3(5.5, 13.0, 22.4) / 22.4 * suncolor;
+  vec3 bluesky2 = max(vec3(0.0), bluesky - vec3(5.5, 13.0, 22.4) * 0.002 * (special_trick + -6.0 * sundir.y * sundir.y));
+  bluesky2 *= special_trick * (0.24 + raysundt * 0.24);
+  return bluesky2 * (1.0 + 1.0 * pow(1.0 - raydir.y, 3.0)) + mymie * suncolor;
+}
+
+vec3 getatm(vec3 ray) {
+  return extra_cheap_atmosphere(ray, normalize(vec3(1.0))) * 0.5;
+}
+
+float sun(vec3 ray) {
+  vec3 sd = normalize(vec3(1.0));
+  return pow(max(0.0, dot(ray, sd)), 528.0) * 110.0;
+}
+
+vec3 aces_tonemap(vec3 color) {
+  mat3 m1 = mat3(
+    0.59719, 0.07600, 0.02840,
+    0.35458, 0.90834, 0.13383,
+    0.04823, 0.01566, 0.83777
+  );
+  mat3 m2 = mat3(
+    1.60475, -0.10208, -0.00327,
+    -0.53108, 1.10813, -0.07276,
+    -0.07367, -0.00605, 1.07602
+  );
+  vec3 v = m1 * color;
+  vec3 a = v * (v + 0.0245786) - 0.000090537;
+  vec3 b = v * (0.983729 * v + 0.4329510) + 0.238081;
+  return pow(clamp(m2 * (a / b), 0.0, 1.0), vec3(1.0 / 2.2));
+}
+
+void main() {
+  vec2 uv = vUv;
+  float effectIntensity = uEffectIntensity > 0.0 ? uEffectIntensity : 1.0;
+  float waterdepth = 2.1;
+  vec3 wfloor = vec3(0.0, -waterdepth, 0.0);
+  vec3 wceil = vec3(0.0, 0.0, 0.0);
+  // vec3 orig = vec3(uMove.x * 0.12, 2.0 + uMove.y * 0.08, 0.0);
+  vec3 orig = vec3(0.0, 2.0, 0.0);
+  vec3 ray = getRay(uv);
+
+  vec4 baseColor = texture2D(uLayer0, uv);
+  // vec2 popupOffset = vec2(-uRotate.x * 0.08, -uRotate.y * 0.06);
+  vec2 popupOffset = vec2(0.0, 0.0);
+  vec4 popupColor = texture2D(uLayer1, uv + popupOffset);
+  float popupMix = smoothstep(0.35, 1.0, popupColor.a);
+  vec3 layeredColor = mix(baseColor.rgb, popupColor.rgb, popupMix);
+  vec3 tint = mix(layeredColor, vec3(dot(layeredColor, vec3(0.299, 0.587, 0.114))), 0.15);
+
+  float hihit = intersectPlane(orig, ray, wceil, vec3(0.0, 1.0, 0.0));
+  if (ray.y >= -0.01) {
+    vec3 C = getatm(ray) * 2.0 + sun(ray);
+    C = aces_tonemap(C);
+    C = mix(C, tint, 0.38 * effectIntensity); // sky tint
+    gl_FragColor = vec4(C, 1.0);
+    return;
+  }
+
+  float lohit = intersectPlane(orig, ray, wfloor, vec3(0.0, 1.0, 0.0));
+  vec3 hipos = orig + ray * hihit;
+  vec3 lopos = orig + ray * lohit;
+  float dist = raymarchwater(orig, hipos, lopos, waterdepth);
+  vec3 pos = orig + ray * dist;
+
+  vec3 N = normal(pos.xz, 0.001, waterdepth);
+  vec2 velocity = N.xz * (1.0 - N.y);
+  N = mix(vec3(0.0, 1.0, 0.0), N, 1.0 / (dist * dist * 0.01 + 1.0));
+  vec3 R = reflect(ray, N);
+  float fresnel = 0.04 + (1.0 - 0.04) * pow(1.0 - max(0.0, dot(-N, ray)), 5.0);
+
+  vec3 C = fresnel * getatm(R) * 2.0 + fresnel * sun(R);
+  C = mix(C, tint, 0.32 * effectIntensity);  // water tint
+  C += vec3(velocity.xyx) * 0.01;
+  C = aces_tonemap(C);
+  C = mix(C, layeredColor, 0.75 * effectIntensity);  // final color mix
+
+  gl_FragColor = vec4(C, 1.0);
+}
+`;
+
+// src/shaders/rainbow-flow.frag.ts
+var rainbow_flow_frag_default = glsl`
+#ifdef GL_ES
+precision highp float;
+#endif
+
+uniform vec2 uResolution;
+uniform vec2 uMove;
+uniform vec2 uRotate;
+uniform float uTime;
+uniform float uEffectIntensity;
+uniform float uEffectSpeed;
+uniform sampler2D uLayer0;
+uniform sampler2D uLayer1;
+uniform int uLayerCount;
+
+varying vec2 vUv;
+
+#include <utils/defaultLighting>
+
+vec3 hsv2rgb(vec3 c) {
+  vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
+  vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
+  return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
+}
+
+void main() {
+  vec4 baseColor = texture2D(uLayer0, vUv);
+  float effectIntensity = uEffectIntensity > 0.0 ? uEffectIntensity : 1.0;
+  float effectSpeed = uEffectSpeed > 0.0 ? uEffectSpeed : 1.0;
+  vec2 popupOffset = vec2(-uRotate.x * 0.08, -uRotate.y * 0.06);
+  vec4 popupColor = texture2D(uLayer1, vUv + popupOffset);
+
+  float popupMix = smoothstep(0.35, 1.0, popupColor.a);
+  vec3 layeredColor = mix(baseColor.rgb, popupColor.rgb, popupMix);
+
+  vec2 uv = vUv;
+  float ratio = uResolution.x / max(uResolution.y, 1.0);
+  vec2 centered = (uv - 0.5) * vec2(ratio, 1.0);
+
+  float effectTime = uTime * effectSpeed;
+  float hue = fract((uv.x + uv.y) * 0.25 + effectTime * 0.5);
+  vec3 rainbow = hsv2rgb(vec3(hue, 0.6, 1.0));
+
+  float flow = 0.5 + 0.5 * sin((centered.x + centered.y) * 7.0 + effectTime * 1.8);
+  float stripe = 0.5 + 0.5 * sin((centered.x - centered.y) * 11.0 - effectTime * 1.2);
+  float mask = smoothstep(0.15, 0.95, 0.35 * flow + 0.65 * stripe);
+  float vignette = smoothstep(1.2, 0.15, length(centered));
+
+  vec3 tint = mix(layeredColor, layeredColor * rainbow, 0.22);
+  vec3 finalColor = mix(layeredColor, tint, mask * 0.65 * effectIntensity);
+  finalColor = mix(finalColor * 0.85, finalColor, vignette);
+
+  gl_FragColor = defaultLighting(vec4(finalColor, max(baseColor.a, popupColor.a)), uResolution, uRotate, 1.0);
+}
+`;
+
+// src/shaders/shock-wave.frag.ts
+var shock_wave_frag_default = glsl`
+#ifdef GL_ES
+precision highp float;
+#endif
+
+uniform vec2 uResolution;
+uniform vec2 uMove;
+uniform vec2 uRotate;
+uniform float uTime;
+uniform float uEffectIntensity;
+uniform float uEffectSpeed;
+uniform sampler2D uLayer0;
+uniform sampler2D uLayer1;
+uniform int uLayerCount;
+
+varying vec2 vUv;
+
+#include <utils/defaultLighting>
+
+#define CENTER vec2(0.5, 0.5)
+#define PI 3.1415926
+
+#define force 0.04
+#define thickness 0.075
+#define feathering 0.05
+#define aberrationOffset 0.006
+#define flashIntensity 3.0
+#define waveSpeed 0.42
+
+vec2 centerScaleUV(vec2 uv, vec2 factor) {
+  return (uv - vec2(0.5)) * factor + vec2(0.5);
+}
+
+float easeOutSine(float t) {
+  return sin((t * PI) / 2.0);
+}
+
+void main() {
+  vec4 baseColor = texture2D(uLayer0, vUv);
+  float effectIntensity = uEffectIntensity > 0.0 ? uEffectIntensity : 1.0;
+  float effectSpeed = uEffectSpeed > 0.0 ? uEffectSpeed : 1.0;
+  vec2 popupOffset = vec2(-uRotate.x * 0.08, -uRotate.y * 0.06);
+  vec4 popupColor = texture2D(uLayer1, vUv + popupOffset);
+  float popupMix = smoothstep(0.35, 1.0, popupColor.a);
+  vec3 layeredColor = mix(baseColor.rgb, popupColor.rgb, popupMix);
+
+  vec2 screenUV = vUv;
+  float pos = easeOutSine(fract(uTime * waveSpeed * effectSpeed));
+
+  float aspectRatio = uResolution.x / max(uResolution.y, 1.0);
+  vec2 scalingFactor = vec2(aspectRatio, 1.0);
+  scalingFactor *= 2.0;
+  scalingFactor *= 1.0 - thickness - feathering;
+  scalingFactor /= sqrt(pow(aspectRatio, 2.0) + 1.0);
+
+  vec2 scaledUV = centerScaleUV(screenUV, scalingFactor);
+  vec2 displacement = normalize(scaledUV - CENTER + vec2(1e-5)) * force * effectIntensity;
+  float distanceFromCenter = distance(scaledUV, CENTER);
+
+  float innerBound = smoothstep(
+    pos - thickness - feathering,
+    pos - thickness,
+    distanceFromCenter
+  );
+  float outerBound = smoothstep(
+    pos - feathering,
+    pos,
+    distanceFromCenter
+  );
+  float shapeMask = innerBound - outerBound;
+
+  vec2 coords = vUv;
+
+  vec2 texelOffset = displacement * shapeMask;
+  vec2 chromaOffset = texelOffset * 0.5;
+
+  vec3 background;
+  background.r = texture2D(uLayer0, clamp(coords - (texelOffset - aberrationOffset * chromaOffset), vec2(0.0), vec2(1.0))).r;
+  background.g = texture2D(uLayer0, clamp(coords - texelOffset, vec2(0.0), vec2(1.0))).g;
+  background.b = texture2D(uLayer0, clamp(coords - (texelOffset + aberrationOffset * chromaOffset), vec2(0.0), vec2(1.0))).b;
+
+  float flashOpacity = pow(1.0 - pos, 4.0);
+  float flashMask = 1.0 - innerBound;
+  background += flashIntensity * background * flashMask * flashOpacity * 0.12 * effectIntensity;
+
+  vec3 finalColor = mix(background, layeredColor, 0.35);
+  finalColor = mix(finalColor, layeredColor, popupMix * 0.25);
+
+  gl_FragColor = defaultLighting(vec4(finalColor, max(baseColor.a, popupColor.a)), uResolution, uRotate, 1.0);
+}
+`;
+
+// src/shaders/ripple.frag.ts
+var ripple_frag_default = glsl`
+#ifdef GL_ES
+precision highp float;
+#endif
+
+uniform vec2 uResolution;
+uniform vec2 uMove;
+uniform vec2 uRotate;
+uniform float uTime;
+uniform float uEffectIntensity;
+uniform float uEffectSpeed;
+uniform sampler2D uLayer0;
+uniform sampler2D uLayer1;
+uniform int uLayerCount;
+
+varying vec2 vUv;
+
+#include <utils/defaultLighting>
+
+const vec2 CENTER = vec2(0.5, 0.5);
+const float EffectDuration = 2.0;
+const float EffectFadeInTimeFactor = 0.5;
+const float EffectWidth = 0.8;
+const float EffectMaxTexelOffset = 0.01;
+
+vec2 getOffsetFromCenter(vec2 screenCoords, vec2 screenSize) {
+  vec2 halfScreenSize = screenSize / 2.0;
+  return (screenCoords - halfScreenSize) / min(halfScreenSize.x, halfScreenSize.y);
+}
+
+vec2 getDistortion(vec2 offsetDirection, float offsetDistance, float time) {
+  float progress = mod(time, EffectDuration) / EffectDuration;
+
+  float halfWidth = EffectWidth / 2.0;
+  float lower = 1.0 - smoothstep(progress - halfWidth, progress, offsetDistance);
+  float upper = smoothstep(progress, progress + halfWidth, offsetDistance);
+  float band = 1.0 - (upper + lower);
+
+  float strength = 1.0 - progress;
+  float fadeStrength = smoothstep(0.0, EffectFadeInTimeFactor, progress);
+  float distortion = band * strength * fadeStrength;
+
+  return distortion * offsetDirection * EffectMaxTexelOffset;
+}
+
+void main() {
+  vec4 baseColor = texture2D(uLayer0, vUv);
+  float effectIntensity = uEffectIntensity > 0.0 ? uEffectIntensity : 1.0;
+  float effectSpeed = uEffectSpeed > 0.0 ? uEffectSpeed : 1.0;
+  vec2 popupOffset = vec2(-uRotate.x * 0.08, -uRotate.y * 0.06);
+  vec4 popupColor = texture2D(uLayer1, vUv + popupOffset);
+  float popupMix = smoothstep(0.35, 1.0, popupColor.a);
+  vec3 layeredColor = mix(baseColor.rgb, popupColor.rgb, popupMix);
+
+  vec2 screenSize = max(uResolution, vec2(1.0));
+  vec2 screenCoords = vUv * screenSize;
+  vec2 offsetFromCenter = getOffsetFromCenter(screenCoords, screenSize);
+  offsetFromCenter += uMove * 0.12 + uRotate * 0.04;
+
+  float offsetDistance = length(offsetFromCenter);
+  vec2 offsetDirection = normalize(-offsetFromCenter + vec2(1e-5));
+  float effectTime = uTime * effectSpeed;
+  vec2 offset = getDistortion(offsetDirection, offsetDistance, effectTime * 1.2);
+  offset *= effectIntensity;
+
+  vec2 warpedUv = clamp(vUv + offset, vec2(0.0), vec2(1.0));
+  vec3 rippleColor = texture2D(uLayer0, warpedUv).rgb;
+
+  float dist = length((vUv - CENTER) * vec2(screenSize.x / screenSize.y, 1.0));
+  float ring = 1.0 - smoothstep(0.0, 0.55, abs(fract(effectTime * 0.8 - dist * 2.5) - 0.5));
+  float rippleMix = smoothstep(0.15, 0.9, ring);
+
+  vec3 finalColor = mix(layeredColor, rippleColor, rippleMix * 0.8 * effectIntensity);
+  finalColor = mix(finalColor, layeredColor, 0.45);
+  finalColor += layeredColor * rippleMix * 0.05;
+
+  gl_FragColor = defaultLighting(vec4(finalColor, max(baseColor.a, popupColor.a)), uResolution, uRotate, 1.0);
+}
+`;
+
+// src/shaders/lenticular.frag.ts
+var lenticular_frag_default = glsl`
+#ifdef GL_ES
+precision highp float;
+#endif
+
+uniform vec2 uResolution;
+uniform vec2 uMove;
+uniform vec2 uRotate;
+uniform float uTime;
+uniform sampler2D uLayer0;
+uniform sampler2D uLayer1;
+uniform int uLayerCount;
+uniform float uEffectIntensity;
+uniform float uEffectThreshold;
+
+varying vec2 vUv;
+
+#include <utils/defaultLighting>
+
+void main() {
+  vec4 baseColor = texture2D(uLayer0, vUv);
+  vec4 topColor = texture2D(uLayer1, vUv);
+
+  float intensity = uEffectIntensity > 0.0 ? uEffectIntensity : 1.8;
+  float threshold = uEffectThreshold > 0.0 ? uEffectThreshold : 0.5;
+  float tilt = clamp(abs(uRotate.x) * intensity, 0.0, 1.0);
+  float blend = smoothstep(0.0, threshold, tilt);
+  float baseWeight = 1.0 - blend;
+  float topWeight = blend;
+
+  vec3 finalColor = baseColor.rgb * baseWeight + topColor.rgb * topWeight;
+  float alpha = baseColor.a * baseWeight + topColor.a * topWeight;
+
+  gl_FragColor = defaultLighting(vec4(finalColor, alpha), uResolution, uRotate, 1.0);
+}
+`;
+
 // src/renderer/face-renderer.ts
 var FRAG_SHADERS = {
   "glare": glare_frag_default,
@@ -1122,16 +1810,23 @@ var FRAG_SHADERS = {
   "blur": blur_frag_default,
   "blur-3d": blur_3d_frag_default,
   "holo": holo_frag_default,
-  "holo-3d": holo_3d_frag_default
+  "holo-3d": holo_3d_frag_default,
+  "pulse-lines": pulse_lines_frag_default,
+  "gradient-flow": gradient_flow_frag_default,
+  "procedural-ocean": procedural_ocean_frag_default,
+  "rainbow-flow": rainbow_flow_frag_default,
+  "shock-wave": shock_wave_frag_default,
+  "ripple": ripple_frag_default,
+  lenticular: lenticular_frag_default
 };
 var MAX_LAYERS = 8;
 var FaceRenderer = class {
-  constructor(shader, width, height) {
+  constructor(shader, width, height, effectUniforms) {
     this.loadedLayers = [];
     bootstrapShaders();
     this.scene = new THREE3.Scene();
     this.camera = new THREE3.Camera();
-    const uniforms = this.createUniforms(width, height);
+    const uniforms = this.createUniforms(width, height, effectUniforms);
     const rawFrag = shader ?? FRAG_SHADERS["glare"];
     const fragmentShader = resolveIncludes(rawFrag);
     this.material = new THREE3.ShaderMaterial({
@@ -1144,7 +1839,7 @@ var FaceRenderer = class {
     this.mesh = new THREE3.Mesh(geometry, this.material);
     this.scene.add(this.mesh);
   }
-  createUniforms(width, height) {
+  createUniforms(width, height, effectUniforms) {
     const uniforms = {
       uTime: { value: 0 },
       uResolution: { value: new THREE3.Vector2(width, height) },
@@ -1158,8 +1853,24 @@ var FaceRenderer = class {
     for (let i = 0; i < MAX_LAYERS; i++) {
       uniforms[`uLayer${i}`] = { value: transparent };
     }
+    if (effectUniforms) {
+      for (const [name, value] of Object.entries(effectUniforms)) {
+        uniforms[name] = { value: toThreeUniformValue(value) };
+      }
+    }
     return uniforms;
   }
+  updateEffectUniforms(values) {
+    if (!values) return;
+    for (const [name, value] of Object.entries(values)) {
+      const nextValue = toThreeUniformValue(value);
+      if (this.material.uniforms[name]) {
+        this.material.uniforms[name].value = nextValue;
+      } else {
+        this.material.uniforms[name] = { value: nextValue };
+      }
+    }
+  }
   async loadLayers(layers, onError) {
     this.disposeLayers();
     const count = Math.min(layers.length, MAX_LAYERS);
@@ -1208,6 +1919,17 @@ var FaceRenderer = class {
     this.material.dispose();
   }
 };
+function toThreeUniformValue(value) {
+  if (typeof value === "string") {
+    return value.startsWith("#") ? new THREE3.Color(value) : value;
+  }
+  if (Array.isArray(value)) {
+    if (value.length === 2) return new THREE3.Vector2(value[0], value[1]);
+    if (value.length === 3) return new THREE3.Vector3(value[0], value[1], value[2]);
+    return new THREE3.Vector4(value[0], value[1], value[2], value[3]);
+  }
+  return value;
+}
 
 // src/renderer/index.ts
 var Renderer = class {
@@ -1232,6 +1954,9 @@ var Renderer = class {
     this.injectStyles();
     this.cardEl = document.createElement("div");
     this.cardEl.className = "pocato-card pocato-loading";
+    if (options.preventTouchScroll) {
+      this.cardEl.style.touchAction = "none";
+    }
     this.rotatorEl = document.createElement("div");
     this.rotatorEl.className = "pocato-rotator";
     this.backEl = document.createElement("div");
@@ -1244,9 +1969,21 @@ var Renderer = class {
     this.frontContentEl.className = "pocato-content pocato-front-content";
     this.backContentEl = document.createElement("div");
     this.backContentEl.className = "pocato-content pocato-back-content";
+    this.frontFrameEl = document.createElement("div");
+    this.frontFrameEl.className = "pocato-frame";
+    this.backFrameEl = document.createElement("div");
+    this.backFrameEl.className = "pocato-frame";
+    this.frontFrameShadowEl = document.createElement("div");
+    this.frontFrameShadowEl.className = "pocato-frame-shadow";
+    this.backFrameShadowEl = document.createElement("div");
+    this.backFrameShadowEl.className = "pocato-frame-shadow";
     this.frontEl.appendChild(this.frontCanvas);
     this.frontEl.appendChild(this.frontContentEl);
+    this.frontEl.appendChild(this.frontFrameEl);
+    this.frontEl.appendChild(this.frontFrameShadowEl);
     this.backEl.appendChild(this.backContentEl);
+    this.backEl.appendChild(this.backFrameEl);
+    this.backEl.appendChild(this.backFrameShadowEl);
     this.rotatorEl.appendChild(this.backEl);
     this.rotatorEl.appendChild(this.frontEl);
     this.cardEl.appendChild(this.rotatorEl);
@@ -1260,18 +1997,24 @@ var Renderer = class {
     this.frontFace = new FaceRenderer(
       options.front.shader,
       pixelWidth,
-      pixelHeight
+      pixelHeight,
+      options.front.uniforms
     );
     this.backFace = new FaceRenderer(
       this.options.back?.shader,
       pixelWidth,
-      pixelHeight
+      pixelHeight,
+      this.options.back?.uniforms
     );
     this.backCanvas = document.createElement("canvas");
     this.backCanvas.className = "pocato-canvas";
     this.backCanvas.width = pixelWidth;
     this.backCanvas.height = pixelHeight;
     this.backEl.insertBefore(this.backCanvas, this.backEl.firstChild);
+    this.applyFrame(this.frontEl, this.frontFrameEl, this.frontFrameShadowEl, options.front.frame);
+    this.applyFrame(this.backEl, this.backFrameEl, this.backFrameShadowEl, options.back?.frame);
+    this.frontFrame = options.front.frame;
+    this.backFrame = options.back?.frame;
     this.loadAllLayers();
     this.setupResizeObserver();
     this.setupIntersectionObserver();
@@ -1291,8 +2034,7 @@ var Renderer = class {
       alpha: true
     });
     this.frontRenderer.setPixelRatio(window.devicePixelRatio);
-    const { width, height } = this.container.getBoundingClientRect();
-    this.frontRenderer.setSize(width, height);
+    this.resizeFaceRenderer(this.frontEl, this.frontCanvas, this.frontFace, this.frontRenderer, this.frontFrame);
   }
   createBackRenderer() {
     if (this.backRenderer || !this.backCanvas || !this.backFace) return;
@@ -1305,8 +2047,7 @@ var Renderer = class {
       alpha: true
     });
     this.backRenderer.setPixelRatio(window.devicePixelRatio);
-    const { width, height } = this.container.getBoundingClientRect();
-    this.backRenderer.setSize(width, height);
+    this.resizeFaceRenderer(this.backEl, this.backCanvas, this.backFace, this.backRenderer, this.backFrame);
   }
   disposeFrontRenderer() {
     if (!this.frontRenderer) return;
@@ -1374,7 +2115,6 @@ var Renderer = class {
         width: 100%;
         height: 100%;
         perspective: 1000px;
-        touch-action: none;
         user-select: none;
         transform: translate3d(0,0,0);
         opacity: 0;
@@ -1422,24 +2162,83 @@ var Renderer = class {
         background-color: #1a1a2e;
       }
       .pocato-canvas {
-        width: 100%;
-        height: 100%;
+        position: absolute;
+        inset: var(--pocato-face-padding, 0px);
+        width: calc(100% - var(--pocato-face-padding-total, 0px));
+        height: calc(100% - var(--pocato-face-padding-total, 0px));
         display: block;
       }
       .pocato-content {
         position: absolute;
-        top: 0; left: 0;
-        width: 100%;
-        height: 100%;
+        inset: var(--pocato-face-padding, 0px);
         pointer-events: none;
         z-index: 1;
       }
       .pocato-content > * {
         pointer-events: auto;
       }
+      .pocato-frame {
+        position: absolute;
+        inset: var(--pocato-frame-inset, 0px);
+        z-index: 2;
+        pointer-events: none;
+        opacity: var(--pocato-frame-opacity, 0);
+      }
+      .pocato-frame::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border: var(--pocato-frame-width, 0px) solid transparent;
+        background: var(--pocato-frame-background, transparent) border-box;
+        background-size: 220% 220%;
+        -webkit-mask:
+          linear-gradient(#000 0 0) padding-box,
+          linear-gradient(#000 0 0);
+        -webkit-mask-composite: xor;
+        mask:
+          linear-gradient(#000 0 0) padding-box,
+          linear-gradient(#000 0 0);
+        mask-composite: exclude;
+      }
+      .pocato-frame-shadow {
+        position: absolute;
+        inset: var(--pocato-frame-shadow-inset, 0px);
+        z-index: 3;
+        pointer-events: none;
+        opacity: var(--pocato-frame-shadow-opacity, 0);
+        box-shadow: inset 0 0 var(--pocato-frame-shadow-blur, 0px) var(--pocato-frame-shadow-color, rgba(0,0,0,0.4));
+      }
+      .pocato-frame[data-animated="true"]::before {
+        animation: pocato-frame-flow var(--pocato-frame-speed, 3s) linear infinite;
+      }
+      @keyframes pocato-frame-flow {
+        0% { background-position: 0% 50%; }
+        50% { background-position: 100% 50%; }
+        100% { background-position: 0% 50%; }
+      }
     `;
     document.head.appendChild(style);
   }
+  applyFrame(faceEl, frameEl, shadowEl, frame) {
+    const enabled = frame?.enabled ?? false;
+    const facePadding = enabled ? frame?.padding ?? 0 : 0;
+    const frameInset = enabled ? frame?.inset ?? 0 : 0;
+    const frameWidth = enabled ? frame?.width ?? 0 : 0;
+    const shadowEnabled = enabled && (frame?.innerShadow ?? false);
+    faceEl.style.setProperty("--pocato-face-padding", `${facePadding}px`);
+    faceEl.style.setProperty("--pocato-face-padding-total", `${facePadding * 2}px`);
+    faceEl.style.background = enabled ? getFrameBackground(frame) : "";
+    frameEl.style.setProperty("--pocato-frame-opacity", enabled ? "1" : "0");
+    frameEl.style.setProperty("--pocato-frame-inset", `${frameInset}px`);
+    frameEl.style.setProperty("--pocato-frame-width", `${frameWidth}px`);
+    frameEl.style.setProperty("--pocato-frame-speed", `${frame?.animationSpeed ?? 3}s`);
+    frameEl.dataset.animated = enabled && frameWidth > 0 && frame?.animated ? "true" : "false";
+    frameEl.style.setProperty("--pocato-frame-background", getFrameBorderBackground(frame));
+    shadowEl.style.setProperty("--pocato-frame-shadow-inset", `${frameInset + frameWidth}px`);
+    shadowEl.style.setProperty("--pocato-frame-shadow-blur", `${frame?.innerShadowBlur ?? 16}px`);
+    shadowEl.style.setProperty("--pocato-frame-shadow-color", toRgba(frame?.innerShadowColor ?? "#000000", frame?.innerShadowOpacity ?? 0.28));
+    shadowEl.style.setProperty("--pocato-frame-shadow-opacity", shadowEnabled ? "1" : "0");
+  }
   setupResizeObserver() {
     this.resizeObserver = new ResizeObserver((entries) => {
       const entry = entries[0];
@@ -1447,14 +2246,16 @@ var Renderer = class {
       const { width, height } = entry.contentRect;
       if (width === 0 || height === 0) return;
       if (this.frontRenderer) {
-        this.frontRenderer.setSize(width, height);
+        this.resizeFaceRenderer(this.frontEl, this.frontCanvas, this.frontFace, this.frontRenderer, this.frontFrame);
+      } else {
+        this.resizeFaceRenderer(this.frontEl, this.frontCanvas, this.frontFace, null, this.frontFrame);
       }
-      this.frontFace.updateResolution(this.frontCanvas.width, this.frontCanvas.height);
       if (this.backFace && this.backCanvas) {
         if (this.backRenderer) {
-          this.backRenderer.setSize(width, height);
+          this.resizeFaceRenderer(this.backEl, this.backCanvas, this.backFace, this.backRenderer, this.backFrame);
+        } else {
+          this.resizeFaceRenderer(this.backEl, this.backCanvas, this.backFace, null, this.backFrame);
         }
-        this.backFace.updateResolution(this.backCanvas.width, this.backCanvas.height);
       }
     });
     this.resizeObserver.observe(this.container);
@@ -1508,6 +2309,38 @@ var Renderer = class {
   updateBackShader(fragmentShader) {
     this.backFace?.updateShader(fragmentShader);
   }
+  updateEffectUniforms(frontUniforms, backUniforms) {
+    this.frontFace.updateEffectUniforms(frontUniforms);
+    this.backFace?.updateEffectUniforms(backUniforms);
+  }
+  updateFrames(frontFrame, backFrame) {
+    if (frontFrame) {
+      this.frontFrame = frontFrame;
+      this.applyFrame(this.frontEl, this.frontFrameEl, this.frontFrameShadowEl, frontFrame);
+      this.resizeFaceRenderer(this.frontEl, this.frontCanvas, this.frontFace, this.frontRenderer, this.frontFrame);
+    }
+    if (backFrame) {
+      this.backFrame = backFrame;
+      this.applyFrame(this.backEl, this.backFrameEl, this.backFrameShadowEl, backFrame);
+      if (this.backFace && this.backCanvas) {
+        this.resizeFaceRenderer(this.backEl, this.backCanvas, this.backFace, this.backRenderer, this.backFrame);
+      }
+    }
+  }
+  resizeFaceRenderer(faceEl, canvas, face, renderer, frame) {
+    const { width, height } = faceEl.getBoundingClientRect();
+    const padding = frame?.enabled ? frame.padding ?? 0 : 0;
+    const nextWidth = Math.max(1, width - padding * 2);
+    const nextHeight = Math.max(1, height - padding * 2);
+    if (renderer) {
+      renderer.setSize(nextWidth, nextHeight);
+    } else {
+      const dpr = window.devicePixelRatio || 1;
+      canvas.width = Math.floor(nextWidth * dpr);
+      canvas.height = Math.floor(nextHeight * dpr);
+    }
+    face.updateResolution(canvas.width, canvas.height);
+  }
   async updateLayers(frontLayers, backLayers) {
     const promises = [];
     if (frontLayers) {
@@ -1544,6 +2377,30 @@ var Renderer = class {
     }
   }
 };
+function getFrameBackground(frame) {
+  const color = frame?.backgroundColor ?? "#111827";
+  const gradientFrom = frame?.backgroundGradientFrom ?? color;
+  const gradientTo = frame?.backgroundGradientTo ?? color;
+  return frame?.backgroundGradient ? `linear-gradient(135deg, ${gradientFrom}, ${gradientTo})` : color;
+}
+function getFrameBorderBackground(frame) {
+  const color = frame?.color ?? "#ffffff";
+  const gradientFrom = frame?.gradientFrom ?? color;
+  const gradientTo = frame?.gradientTo ?? color;
+  const opacity = frame?.borderOpacity ?? 1;
+  return frame?.gradient ? `linear-gradient(120deg, ${toRgba(gradientFrom, opacity)}, ${toRgba(gradientTo, opacity)}, ${toRgba(gradientFrom, opacity)})` : toRgba(color, opacity);
+}
+function toRgba(hex, opacity) {
+  const value = hex.replace("#", "");
+  if (value.length !== 6) return `rgba(0, 0, 0, ${opacity})`;
+  const red = Number.parseInt(value.slice(0, 2), 16);
+  const green = Number.parseInt(value.slice(2, 4), 16);
+  const blue = Number.parseInt(value.slice(4, 6), 16);
+  if ([red, green, blue].some((channel) => Number.isNaN(channel))) {
+    return `rgba(0, 0, 0, ${opacity})`;
+  }
+  return `rgba(${red}, ${green}, ${blue}, ${opacity})`;
+}
 
 // src/animation/spring.ts
 var tasks = /* @__PURE__ */ new Set();
@@ -1765,10 +2622,11 @@ var SPRING_FLIP = { stiffness: 0.03, damping: 0.25 };
 var THROTTLE_MS = 1e3 / 60;
 var DBLCLICK_MS = 200;
 var InteractionHandler = class {
-  constructor(container, callbacks, flippable, initialFlipped) {
+  constructor(container, callbacks, flippable, initialFlipped, options = {}) {
     this.container = container;
     this.callbacks = callbacks;
     this.flippable = flippable;
+    this.options = options;
     this.flipped = false;
     this.interacting = false;
     this.boundingRect = { left: 0, top: 0, width: 0, height: 0 };
@@ -1792,15 +2650,20 @@ var InteractionHandler = class {
     this.boundPointerUp = this.onPointerUp.bind(this);
     this.boundClick = this.onClick.bind(this);
     this.boundTouchHandler = (e) => {
+      e.preventDefault();
       e.stopPropagation();
     };
-    this.container.addEventListener("pointerdown", this.boundPointerDown);
-    this.container.addEventListener("pointermove", this.boundPointerMove);
-    this.container.addEventListener("pointerup", this.boundPointerUp);
-    this.container.addEventListener("pointercancel", this.boundPointerUp);
-    this.container.addEventListener("click", this.boundClick);
-    this.container.addEventListener("touchstart", this.boundTouchHandler, { passive: true });
-    this.container.addEventListener("touchmove", this.boundTouchHandler, { passive: true });
+    if (this.options.interactive ?? true) {
+      this.container.addEventListener("pointerdown", this.boundPointerDown);
+      this.container.addEventListener("pointermove", this.boundPointerMove);
+      this.container.addEventListener("pointerup", this.boundPointerUp);
+      this.container.addEventListener("pointercancel", this.boundPointerUp);
+      this.container.addEventListener("click", this.boundClick);
+    }
+    if (this.options.preventTouchScroll) {
+      this.container.addEventListener("touchstart", this.boundTouchHandler, { passive: false });
+      this.container.addEventListener("touchmove", this.boundTouchHandler, { passive: false });
+    }
   }
   updateRect(rect) {
     this.boundingRect = rect;
@@ -2089,7 +2952,8 @@ var PocaCard = class extends EventEmitter {
       container,
       {
         front: options.front,
-        back: options.back
+        back: options.back,
+        preventTouchScroll: options.preventTouchScroll
       },
       (error) => this.emit("error", error),
       () => this.emit("ready")
@@ -2109,14 +2973,20 @@ var PocaCard = class extends EventEmitter {
         }
       },
       options.flippable ?? false,
-      options.initialFlipped ?? false
-    );
-    this.renderer.getRotatorEl().addEventListener("pointerdown", () => {
-      if (this.wiggleController) {
-        this.wiggleController.stop();
-        this.wiggleController = null;
+      options.initialFlipped ?? false,
+      {
+        interactive: options.interactive,
+        preventTouchScroll: options.preventTouchScroll
       }
-    });
+    );
+    if (options.interactive ?? true) {
+      this.renderer.getRotatorEl().addEventListener("pointerdown", () => {
+        if (this.wiggleController) {
+          this.wiggleController.stop();
+          this.wiggleController = null;
+        }
+      });
+    }
     if (options.flipSpeed != null) {
       this.interaction.flipSpeed = options.flipSpeed;
     }
@@ -2161,6 +3031,12 @@ var PocaCard = class extends EventEmitter {
     if (options.front?.layers || options.back?.layers) {
       this.renderer.updateLayers(options.front?.layers, options.back?.layers);
     }
+    if (options.front?.uniforms || options.back?.uniforms) {
+      this.renderer.updateEffectUniforms(options.front?.uniforms, options.back?.uniforms);
+    }
+    if (options.front?.frame || options.back?.frame) {
+      this.renderer.updateFrames(options.front?.frame, options.back?.frame);
+    }
   }
   destroy() {
     this.wiggleController?.stop();
@@ -2181,7 +3057,14 @@ var builtinShaders = {
   blur: blur_frag_default,
   "blur-3d": blur_3d_frag_default,
   brush: brush_frag_default,
-  "brush-3d": brush_3d_frag_default
+  "brush-3d": brush_3d_frag_default,
+  "pulse-lines": pulse_lines_frag_default,
+  "gradient-flow": gradient_flow_frag_default,
+  "procedural-ocean": procedural_ocean_frag_default,
+  "rainbow-flow": rainbow_flow_frag_default,
+  "shock-wave": shock_wave_frag_default,
+  "ripple": ripple_frag_default,
+  lenticular: lenticular_frag_default
 };
 export {
   FRAG_SHADERS,