@sangwonl/pocato-core 0.2.0 → 0.3.0

package/dist/index.js

@@ -27,7 +27,10 @@ var EventEmitter = class {
 };
 
 // src/renderer/index.ts
-import * as THREE2 from "three";
+import * as THREE4 from "three";
+
+// src/renderer/face-renderer.ts
+import * as THREE3 from "three";
 
 // src/renderer/shader-bootstrap.ts
 import * as THREE from "three";
@@ -361,6 +364,153 @@ function bootstrapShaders() {
   ThreeShaderChunk["utils/defaultLighting"] = default_lighting_glsl_default;
 }
 
+// src/renderer/texture-loader.ts
+import * as THREE2 from "three";
+var VIDEO_EXTENSIONS = /\.(mp4|webm|mov|ogg)(\?|$)/i;
+function isVideoSource(layer) {
+  if (layer.type) return layer.type === "video";
+  return VIDEO_EXTENSIONS.test(layer.src);
+}
+var transparentTexture = null;
+function getTransparentTexture() {
+  if (!transparentTexture) {
+    const data = new Uint8Array([0, 0, 0, 0]);
+    transparentTexture = new THREE2.DataTexture(data, 1, 1, THREE2.RGBAFormat);
+    transparentTexture.needsUpdate = true;
+  }
+  return transparentTexture;
+}
+var pendingVideos = /* @__PURE__ */ new Set();
+function loadLayerTexture(layer, onError) {
+  if (isVideoSource(layer)) {
+    if (layer.freeze != null) {
+      return loadFrozenVideoTexture(layer.src, layer.freeze === "random" ? -1 : layer.freeze, onError);
+    }
+    return loadVideoTexture(layer.src, onError);
+  }
+  return loadImageTexture(layer.src, onError);
+}
+var inflight = /* @__PURE__ */ new Map();
+function loadImageTexture(src, onError) {
+  let pending = inflight.get(src);
+  if (!pending) {
+    pending = new Promise((resolve) => {
+      const loader = new THREE2.TextureLoader();
+      loader.load(
+        src,
+        (texture) => {
+          inflight.delete(src);
+          resolve(texture);
+        },
+        void 0,
+        () => {
+          inflight.delete(src);
+          onError?.(new Error(`Failed to load image texture: ${src}`));
+          resolve(getTransparentTexture());
+        }
+      );
+    });
+    inflight.set(src, pending);
+  }
+  return pending.then((texture) => ({ texture }));
+}
+function loadVideoTexture(src, onError) {
+  return new Promise((resolve) => {
+    const video = document.createElement("video");
+    video.src = src;
+    video.muted = true;
+    video.loop = true;
+    video.playsInline = true;
+    video.preload = "auto";
+    video.style.position = "fixed";
+    video.style.width = "1px";
+    video.style.height = "1px";
+    video.style.opacity = "0.01";
+    video.style.pointerEvents = "none";
+    video.style.zIndex = "-9999";
+    document.body.appendChild(video);
+    pendingVideos.add(video);
+    video.addEventListener("error", () => {
+      pendingVideos.delete(video);
+      const msg = video.error?.message ?? "Unknown video error";
+      onError?.(new Error(`Failed to load video texture: ${src} (${msg})`));
+      video.remove();
+      resolve({ texture: getTransparentTexture() });
+    }, { once: true });
+    video.play().then(() => {
+      pendingVideos.delete(video);
+      const texture = new THREE2.VideoTexture(video);
+      resolve({ texture, videoEl: video });
+    }).catch(() => {
+      pendingVideos.delete(video);
+      onError?.(new Error(`Video autoplay blocked: ${src}`));
+      video.remove();
+      resolve({ texture: getTransparentTexture() });
+    });
+  });
+}
+function loadFrozenVideoTexture(src, freezeTime, onError) {
+  return new Promise((resolve) => {
+    const video = document.createElement("video");
+    video.src = src;
+    video.muted = true;
+    video.playsInline = true;
+    video.preload = "auto";
+    video.style.position = "fixed";
+    video.style.width = "1px";
+    video.style.height = "1px";
+    video.style.opacity = "0.01";
+    video.style.pointerEvents = "none";
+    video.style.zIndex = "-9999";
+    document.body.appendChild(video);
+    pendingVideos.add(video);
+    video.addEventListener("error", () => {
+      pendingVideos.delete(video);
+      const msg = video.error?.message ?? "Unknown video error";
+      onError?.(new Error(`Failed to load video texture: ${src} (${msg})`));
+      video.remove();
+      resolve({ texture: getTransparentTexture() });
+    }, { once: true });
+    video.addEventListener("loadeddata", () => {
+      const time = freezeTime < 0 ? Math.random() * (video.duration || 1) : Math.min(freezeTime, video.duration || 0);
+      video.currentTime = time;
+    }, { once: true });
+    video.addEventListener("seeked", () => {
+      const canvas = document.createElement("canvas");
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+      const ctx = canvas.getContext("2d");
+      ctx.drawImage(video, 0, 0);
+      const texture = new THREE2.CanvasTexture(canvas);
+      texture.needsUpdate = true;
+      pendingVideos.delete(video);
+      video.pause();
+      video.src = "";
+      video.remove();
+      resolve({ texture });
+    }, { once: true });
+    video.load();
+  });
+}
+function disposeLoadedLayer(loaded) {
+  if (loaded.videoEl) {
+    loaded.videoEl.pause();
+    loaded.videoEl.src = "";
+    loaded.videoEl.remove();
+  }
+  if (loaded.texture !== getTransparentTexture()) {
+    loaded.texture.dispose();
+  }
+}
+function cleanupPendingVideos() {
+  for (const video of pendingVideos) {
+    video.pause();
+    video.src = "";
+    video.remove();
+  }
+  pendingVideos.clear();
+}
+
 // src/shaders/common.vert.ts
 var common_vert_default = glsl`
 // three.js built-in attributes
@@ -409,8 +559,9 @@ uniform vec2 uMouse;
 uniform vec2 uMove;
 uniform vec2 uRotate;
 uniform float uTime;
-uniform sampler2D uImgBase;
-uniform sampler2D uImgPopup;
+uniform sampler2D uLayer0;
+uniform sampler2D uLayer1;
+uniform int uLayerCount;
 
 varying vec2 vUv;
 
@@ -418,12 +569,12 @@ varying vec2 vUv;
 
 void main() {
   // 기본 카드 텍스처 샘플링
-  vec4 baseColor = texture2D(uImgBase, vUv);
+  vec4 baseColor = texture2D(uLayer0, vUv);
 
   // 팝업 텍스처 샘플링 (움직임 반영)
   float popupOffset = 0.0;
   vec2 popupUv = vUv + (uMove / uResolution) * popupOffset; // 팝업 이동 효과
-  vec4 popupColor = texture2D(uImgPopup, popupUv);
+  vec4 popupColor = texture2D(uLayer1, popupUv);
 
   float aSoft = smoothstep(0.4, 1.0,  popupColor.a);
   vec4 pocaColor = mix(baseColor, popupColor, aSoft);
@@ -443,8 +594,9 @@ uniform vec2 uMouse;
 uniform vec2 uMove;
 uniform vec2 uRotate;
 uniform float uTime;
-uniform sampler2D uImgBase;
-uniform sampler2D uImgPopup;
+uniform sampler2D uLayer0;
+uniform sampler2D uLayer1;
+uniform int uLayerCount;
 
 varying vec2 vUv;
 
@@ -452,12 +604,12 @@ varying vec2 vUv;
 
 void main() {
   // 기본 카드 텍스처 샘플링
-  vec4 baseColor = texture2D(uImgBase, vUv);
+  vec4 baseColor = texture2D(uLayer0, vUv);
 
   // 팝업 텍스처 샘플링 (움직임 반영)
   vec2 popupOffset = vec2(-uRotate.x * 0.08, -uRotate.y * 0.06);
   vec2 popupUv = vUv + popupOffset; // 팝업 이동 효과
-  vec4 popupColor = texture2D(uImgPopup, popupUv);
+  vec4 popupColor = texture2D(uLayer1, popupUv);
 
   float aSoft = smoothstep(0.4, 1.0,  popupColor.a);
   vec4 pocaColor = mix(baseColor, popupColor, aSoft);
@@ -477,8 +629,9 @@ uniform vec2 uMouse;
 uniform vec2 uMove;
 uniform vec2 uRotate;
 uniform float uTime;
-uniform sampler2D uImgBase;
-uniform sampler2D uImgPopup;
+uniform sampler2D uLayer0;
+uniform sampler2D uLayer1;
+uniform int uLayerCount;
 
 varying vec2 vUv;
 
@@ -567,7 +720,7 @@ float computeSnow(in vec2 uv, int layerStart, int layerEnd) {
 }
 
 void main() {
-  vec4 baseTexture = texture2D(uImgBase, vUv);
+  vec4 baseTexture = texture2D(uLayer0, vUv);
   gl_FragColor = mix(gl_FragColor, baseTexture, baseTexture.a);
 
   float snowEffect = computeSnow(vUv, 5, 15);
@@ -575,7 +728,7 @@ void main() {
 
   float popupMoveOffset = 0.0;
   vec2 popupOffsetUv = vUv + (uMove.xy / uResolution.xy) * popupMoveOffset;
-  vec4 popupTexture = texture2D(uImgPopup, popupOffsetUv);
+  vec4 popupTexture = texture2D(uLayer1, popupOffsetUv);
   gl_FragColor = mix(gl_FragColor, popupTexture, popupTexture.a);
 
   snowEffect = computeSnow(vUv, 16, 20);
@@ -594,8 +747,9 @@ uniform vec2 uMouse;
 uniform vec2 uMove;
 uniform vec2 uRotate;
 uniform float uTime;
-uniform sampler2D uImgBase;
-uniform sampler2D uImgPopup;
+uniform sampler2D uLayer0;
+uniform sampler2D uLayer1;
+uniform int uLayerCount;
 
 varying vec2 vUv;
 
@@ -684,7 +838,7 @@ float computeSnow(in vec2 uv, int layerStart, int layerEnd) {
 }
 
 void main() {
-  vec4 baseTexture = texture2D(uImgBase, vUv);
+  vec4 baseTexture = texture2D(uLayer0, vUv);
   gl_FragColor = mix(gl_FragColor, baseTexture, baseTexture.a);
 
   float snowEffect = computeSnow(vUv, 5, 15);
@@ -693,7 +847,7 @@ void main() {
   // 3D parallax offset for popup layer
   vec2 popupOffset = vec2(-uRotate.x * 0.08, -uRotate.y * 0.06);
   vec2 popupOffsetUv = vUv + popupOffset;
-  vec4 popupTexture = texture2D(uImgPopup, popupOffsetUv);
+  vec4 popupTexture = texture2D(uLayer1, popupOffsetUv);
   gl_FragColor = mix(gl_FragColor, popupTexture, popupTexture.a);
 
   snowEffect = computeSnow(vUv, 16, 20);
@@ -712,8 +866,9 @@ uniform vec2 uMouse;
 uniform vec2 uMove;
 uniform vec2 uRotate;
 uniform float uTime;
-uniform sampler2D uImgBase;
-uniform sampler2D uImgPopup;
+uniform sampler2D uLayer0;
+uniform sampler2D uLayer1;
+uniform int uLayerCount;
 
 varying vec2 vUv;
 
@@ -727,8 +882,8 @@ void main() {
   vec2 pixel = 1.0 / uResolution.xy;
   vec2 popUpUv = vUv + (uMove.xy / uResolution.xy) * 0.008;
 
-  vec4 baseColor = kuwahara(uImgBase, vUv, pixel, 4.0);
-  vec4 popupColor = kuwahara(uImgPopup, popUpUv, pixel, 4.0);
+  vec4 baseColor = kuwahara(uLayer0, vUv, pixel, 4.0);
+  vec4 popupColor = kuwahara(uLayer1, popUpUv, pixel, 4.0);
 
   float aSoft = smoothstep(0.4, 1.0,  popupColor.a);
   vec4 pocaColor = mix(baseColor, popupColor, aSoft);
@@ -748,8 +903,9 @@ uniform vec2 uMouse;
 uniform vec2 uMove;
 uniform vec2 uRotate;
 uniform float uTime;
-uniform sampler2D uImgBase;
-uniform sampler2D uImgPopup;
+uniform sampler2D uLayer0;
+uniform sampler2D uLayer1;
+uniform int uLayerCount;
 
 varying vec2 vUv;
 
@@ -766,8 +922,8 @@ void main() {
   vec2 popupOffset = vec2(-uRotate.x * 0.08, -uRotate.y * 0.06);
   vec2 popUpUv = vUv + popupOffset;
 
-  vec4 baseColor = kuwahara(uImgBase, vUv, pixel, 4.0);
-  vec4 popupColor = kuwahara(uImgPopup, popUpUv, pixel, 4.0);
+  vec4 baseColor = kuwahara(uLayer0, vUv, pixel, 4.0);
+  vec4 popupColor = kuwahara(uLayer1, popUpUv, pixel, 4.0);
 
   float aSoft = smoothstep(0.4, 1.0,  popupColor.a);
   vec4 pocaColor = mix(baseColor, popupColor, aSoft);
@@ -787,8 +943,9 @@ uniform vec2 uMouse;
 uniform vec2 uMove;
 uniform vec2 uRotate;
 uniform float uTime;
-uniform sampler2D uImgBase;
-uniform sampler2D uImgPopup;
+uniform sampler2D uLayer0;
+uniform sampler2D uLayer1;
+uniform int uLayerCount;
 
 varying vec2 vUv;
 
@@ -803,8 +960,8 @@ void main() {
   vec2 pixel = 1.0 / uResolution.xy;
   vec2 popUpUv = vUv + (uMove.xy / uResolution.xy) * 0.008;
 
-  vec4 baseColor = gaussianBlur(uImgBase, vUv, pixel, 12);
-  vec4 popupColor = texture2D(uImgPopup, popUpUv);
+  vec4 baseColor = gaussianBlur(uLayer0, vUv, pixel, 12);
+  vec4 popupColor = texture2D(uLayer1, popUpUv);
 
   float aSoft = smoothstep(0.4, 1.0,  popupColor.a);
   vec4 pocaColor = mix(baseColor, popupColor, aSoft);
@@ -824,8 +981,9 @@ uniform vec2 uMouse;
 uniform vec2 uMove;
 uniform vec2 uRotate;
 uniform float uTime;
-uniform sampler2D uImgBase;
-uniform sampler2D uImgPopup;
+uniform sampler2D uLayer0;
+uniform sampler2D uLayer1;
+uniform int uLayerCount;
 
 varying vec2 vUv;
 
@@ -843,8 +1001,8 @@ void main() {
   vec2 popupOffset = vec2(-uRotate.x * 0.08, -uRotate.y * 0.06);
   vec2 popUpUv = vUv + popupOffset;
 
-  vec4 baseColor = gaussianBlur(uImgBase, vUv, pixel, 12);
-  vec4 popupColor = texture2D(uImgPopup, popUpUv);
+  vec4 baseColor = gaussianBlur(uLayer0, vUv, pixel, 12);
+  vec4 popupColor = texture2D(uLayer1, popUpUv);
 
   float aSoft = smoothstep(0.4, 1.0,  popupColor.a);
   vec4 pocaColor = mix(baseColor, popupColor, aSoft);
@@ -864,8 +1022,9 @@ uniform vec2 uMouse;
 uniform vec2 uMove;
 uniform vec2 uRotate;
 uniform float uTime;
-uniform sampler2D uImgBase;
-uniform sampler2D uImgPopup;
+uniform sampler2D uLayer0;
+uniform sampler2D uLayer1;
+uniform int uLayerCount;
 
 varying vec2 vUv;
 
@@ -879,8 +1038,8 @@ vec3 hsv2rgb(vec3 c) {
 }
 
 void main() {
-  vec4 baseColor = texture2D(uImgBase, vUv);
-  vec4 popupColor = texture2D(uImgPopup, vUv);
+  vec4 baseColor = texture2D(uLayer0, vUv);
+  vec4 popupColor = texture2D(uLayer1, vUv);
 
   // Iridescence on base only
   float angle = uRotate.x * 2.0 + uRotate.y * 1.5;
@@ -911,8 +1070,9 @@ uniform vec2 uMouse;
 uniform vec2 uMove;
 uniform vec2 uRotate;
 uniform float uTime;
-uniform sampler2D uImgBase;
-uniform sampler2D uImgPopup;
+uniform sampler2D uLayer0;
+uniform sampler2D uLayer1;
+uniform int uLayerCount;
 
 varying vec2 vUv;
 
@@ -926,12 +1086,12 @@ vec3 hsv2rgb(vec3 c) {
 }
 
 void main() {
-  vec4 baseColor = texture2D(uImgBase, vUv);
+  vec4 baseColor = texture2D(uLayer0, vUv);
 
   // 3D parallax offset for popup layer
   vec2 popupOffset = vec2(-uRotate.x * 0.08, -uRotate.y * 0.06);
   vec2 popupUv = vUv + popupOffset;
-  vec4 popupColor = texture2D(uImgPopup, popupUv);
+  vec4 popupColor = texture2D(uLayer1, popupUv);
 
   // Iridescence on base only
   float angle = uRotate.x * 2.0 + uRotate.y * 1.5;
@@ -951,7 +1111,7 @@ void main() {
 }
 `;
 
-// src/renderer/index.ts
+// src/renderer/face-renderer.ts
 var FRAG_SHADERS = {
   "glare": glare_frag_default,
   "glare-3d": glare_3d_frag_default,
@@ -964,21 +1124,111 @@ var FRAG_SHADERS = {
   "holo": holo_frag_default,
   "holo-3d": holo_3d_frag_default
 };
+var MAX_LAYERS = 8;
+var FaceRenderer = class {
+  constructor(shader, width, height) {
+    this.loadedLayers = [];
+    bootstrapShaders();
+    this.scene = new THREE3.Scene();
+    this.camera = new THREE3.Camera();
+    const uniforms = this.createUniforms(width, height);
+    const rawFrag = shader ?? FRAG_SHADERS["glare"];
+    const fragmentShader = resolveIncludes(rawFrag);
+    this.material = new THREE3.ShaderMaterial({
+      vertexShader: resolveIncludes(common_vert_default),
+      fragmentShader,
+      uniforms,
+      transparent: true
+    });
+    const geometry = new THREE3.PlaneGeometry(2, 2);
+    this.mesh = new THREE3.Mesh(geometry, this.material);
+    this.scene.add(this.mesh);
+  }
+  createUniforms(width, height) {
+    const uniforms = {
+      uTime: { value: 0 },
+      uResolution: { value: new THREE3.Vector2(width, height) },
+      uMouse: { value: new THREE3.Vector2(0, 0) },
+      uMove: { value: new THREE3.Vector2(0, 0) },
+      uRotate: { value: new THREE3.Vector2(0, 0) },
+      uCardOpacity: { value: 1 },
+      uLayerCount: { value: 0 }
+    };
+    const transparent = getTransparentTexture();
+    for (let i = 0; i < MAX_LAYERS; i++) {
+      uniforms[`uLayer${i}`] = { value: transparent };
+    }
+    return uniforms;
+  }
+  async loadLayers(layers, onError) {
+    this.disposeLayers();
+    const count = Math.min(layers.length, MAX_LAYERS);
+    this.material.uniforms.uLayerCount.value = count;
+    const promises = layers.slice(0, MAX_LAYERS).map(
+      (layer) => loadLayerTexture(layer, onError)
+    );
+    const results = await Promise.all(promises);
+    this.loadedLayers = results;
+    for (let i = 0; i < results.length; i++) {
+      this.material.uniforms[`uLayer${i}`].value = results[i].texture;
+    }
+  }
+  updateUniforms(updates) {
+    const u = this.material.uniforms;
+    if (updates.rotate) u.uRotate.value.set(
+      updates.rotate.x * (Math.PI / 180),
+      updates.rotate.y * (Math.PI / 180)
+    );
+    if (updates.mouse) u.uMouse.value.set(updates.mouse.x, updates.mouse.y);
+    if (updates.move) u.uMove.value.set(updates.move.x, updates.move.y);
+    if (updates.opacity !== void 0) u.uCardOpacity.value = updates.opacity;
+    if (updates.time !== void 0) u.uTime.value = updates.time;
+  }
+  updateResolution(width, height) {
+    this.material.uniforms.uResolution.value.set(width, height);
+  }
+  updateShader(fragmentShader) {
+    this.material.fragmentShader = resolveIncludes(fragmentShader);
+    this.material.needsUpdate = true;
+  }
+  disposeLayers() {
+    for (const loaded of this.loadedLayers) {
+      disposeLoadedLayer(loaded);
+    }
+    this.loadedLayers = [];
+    const transparent = getTransparentTexture();
+    for (let i = 0; i < MAX_LAYERS; i++) {
+      this.material.uniforms[`uLayer${i}`].value = transparent;
+    }
+    this.material.uniforms.uLayerCount.value = 0;
+  }
+  destroy() {
+    this.disposeLayers();
+    this.mesh.geometry.dispose();
+    this.material.dispose();
+  }
+};
+
+// src/renderer/index.ts
 var Renderer = class {
   constructor(container, options, onError, onReady) {
     this.container = container;
     this.options = options;
     this.onError = onError;
     this.onReady = onReady;
-    this.scene = null;
-    this.camera = null;
-    this.webglRenderer = null;
-    this.material = null;
-    this.mesh = null;
-    this.clock = new THREE2.Clock();
+    this.backFace = null;
+    this.frontRenderer = null;
+    this.backRenderer = null;
+    this.clock = new THREE4.Clock();
     this.rafId = null;
-    this.textures = [];
+    this.backCanvas = null;
     this.resizeObserver = null;
+    this.intersectionObserver = null;
+    this.visible = false;
+    this.destroyed = false;
+    if (!options.front?.layers?.length) {
+      console.warn("[pocato] front.layers must have at least 1 element");
+    }
     this.injectStyles();
     this.cardEl = document.createElement("div");
     this.cardEl.className = "pocato-card pocato-loading";
@@ -986,29 +1236,133 @@ var Renderer = class {
     this.rotatorEl.className = "pocato-rotator";
     this.backEl = document.createElement("div");
     this.backEl.className = "pocato-back";
-    if (options.backImage) {
-      const backImg = document.createElement("img");
-      backImg.src = options.backImage;
-      backImg.className = "pocato-back-img";
-      this.backEl.appendChild(backImg);
-    }
     this.frontEl = document.createElement("div");
     this.frontEl.className = "pocato-front";
-    this.canvas = document.createElement("canvas");
-    this.canvas.className = "pocato-canvas";
+    this.frontCanvas = document.createElement("canvas");
+    this.frontCanvas.className = "pocato-canvas";
     this.frontContentEl = document.createElement("div");
     this.frontContentEl.className = "pocato-content pocato-front-content";
     this.backContentEl = document.createElement("div");
     this.backContentEl.className = "pocato-content pocato-back-content";
-    this.frontEl.appendChild(this.canvas);
+    this.frontEl.appendChild(this.frontCanvas);
     this.frontEl.appendChild(this.frontContentEl);
     this.backEl.appendChild(this.backContentEl);
     this.rotatorEl.appendChild(this.backEl);
     this.rotatorEl.appendChild(this.frontEl);
     this.cardEl.appendChild(this.rotatorEl);
     this.container.appendChild(this.cardEl);
-    bootstrapShaders();
-    this.init();
+    const { width, height } = this.container.getBoundingClientRect();
+    const dpr = window.devicePixelRatio || 1;
+    const pixelWidth = Math.floor(width * dpr);
+    const pixelHeight = Math.floor(height * dpr);
+    this.frontCanvas.width = pixelWidth;
+    this.frontCanvas.height = pixelHeight;
+    this.frontFace = new FaceRenderer(
+      options.front.shader,
+      pixelWidth,
+      pixelHeight
+    );
+    this.backFace = new FaceRenderer(
+      this.options.back?.shader,
+      pixelWidth,
+      pixelHeight
+    );
+    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.loadAllLayers();
+    this.setupResizeObserver();
+    this.setupIntersectionObserver();
+    requestAnimationFrame(() => {
+      this.cardEl.classList.remove("pocato-loading");
+      this.cardEl.classList.add("pocato-ready");
+    });
+  }
+  createFrontRenderer() {
+    if (this.frontRenderer) return;
+    const newCanvas = document.createElement("canvas");
+    newCanvas.className = "pocato-canvas";
+    this.frontEl.replaceChild(newCanvas, this.frontCanvas);
+    this.frontCanvas = newCanvas;
+    this.frontRenderer = new THREE4.WebGLRenderer({
+      canvas: this.frontCanvas,
+      alpha: true
+    });
+    this.frontRenderer.setPixelRatio(window.devicePixelRatio);
+    const { width, height } = this.container.getBoundingClientRect();
+    this.frontRenderer.setSize(width, height);
+  }
+  createBackRenderer() {
+    if (this.backRenderer || !this.backCanvas || !this.backFace) return;
+    const newCanvas = document.createElement("canvas");
+    newCanvas.className = "pocato-canvas";
+    this.backEl.replaceChild(newCanvas, this.backCanvas);
+    this.backCanvas = newCanvas;
+    this.backRenderer = new THREE4.WebGLRenderer({
+      canvas: this.backCanvas,
+      alpha: true
+    });
+    this.backRenderer.setPixelRatio(window.devicePixelRatio);
+    const { width, height } = this.container.getBoundingClientRect();
+    this.backRenderer.setSize(width, height);
+  }
+  disposeFrontRenderer() {
+    if (!this.frontRenderer) return;
+    this.frontRenderer.render(this.frontFace.scene, this.frontFace.camera);
+    this.frontRenderer.dispose();
+    this.frontRenderer = null;
+  }
+  disposeBackRenderer() {
+    if (!this.backRenderer) return;
+    if (this.backFace) {
+      this.backRenderer.render(this.backFace.scene, this.backFace.camera);
+    }
+    this.backRenderer.dispose();
+    this.backRenderer = null;
+  }
+  activate() {
+    if (this.visible) return;
+    this.visible = true;
+    this.createFrontRenderer();
+    if (this.backFace) this.createBackRenderer();
+    this.clock.getDelta();
+    this.startRenderLoop();
+  }
+  deactivate() {
+    if (!this.visible) return;
+    this.visible = false;
+    this.stopRenderLoop();
+    this.disposeFrontRenderer();
+    this.disposeBackRenderer();
+  }
+  setupIntersectionObserver() {
+    this.intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (!entry || this.destroyed) return;
+        if (entry.isIntersecting) {
+          this.activate();
+        } else {
+          this.deactivate();
+        }
+      },
+      { rootMargin: "100px" }
+      // activate slightly before entering viewport
+    );
+    this.intersectionObserver.observe(this.cardEl);
+  }
+  async loadAllLayers() {
+    const promises = [];
+    if (this.options.front?.layers?.length) {
+      promises.push(this.frontFace.loadLayers(this.options.front.layers, this.onError));
+    }
+    if (this.backFace && this.options.back?.layers?.length) {
+      promises.push(this.backFace.loadLayers(this.options.back.layers, this.onError));
+    }
+    await Promise.all(promises);
+    this.onReady?.();
   }
   injectStyles() {
     const id = "pocato-styles";
@@ -1067,12 +1421,6 @@ var Renderer = class {
         overflow: hidden;
         background-color: #1a1a2e;
       }
-      .pocato-back-img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        pointer-events: none;
-      }
       .pocato-canvas {
         width: 100%;
         height: 100%;
@@ -1092,134 +1440,83 @@ var Renderer = class {
     `;
     document.head.appendChild(style);
   }
-  init() {
-    const { width, height } = this.container.getBoundingClientRect();
-    this.scene = new THREE2.Scene();
-    this.camera = new THREE2.Camera();
-    this.webglRenderer = new THREE2.WebGLRenderer({
-      canvas: this.canvas,
-      alpha: true
-    });
-    this.webglRenderer.setPixelRatio(window.devicePixelRatio);
-    this.webglRenderer.setSize(width, height);
-    const pixelWidth = this.canvas.width;
-    const pixelHeight = this.canvas.height;
-    const uniforms = this.createUniforms(pixelWidth, pixelHeight);
-    const rawFragmentShader = this.options.customShader ?? FRAG_SHADERS[this.options.type];
-    const fragmentShader = resolveIncludes(rawFragmentShader);
-    this.material = new THREE2.ShaderMaterial({
-      vertexShader: resolveIncludes(common_vert_default),
-      fragmentShader,
-      uniforms,
-      transparent: true
-    });
-    const geometry = new THREE2.PlaneGeometry(2, 2);
-    this.mesh = new THREE2.Mesh(geometry, this.material);
-    this.scene.add(this.mesh);
-    this.loadTextures();
-    this.setupResizeObserver();
-    this.startRenderLoop();
-    requestAnimationFrame(() => {
-      this.cardEl.classList.remove("pocato-loading");
-      this.cardEl.classList.add("pocato-ready");
-    });
-  }
-  createUniforms(width, height) {
-    return {
-      uTime: { value: 0 },
-      uResolution: { value: new THREE2.Vector2(width, height) },
-      uMouse: { value: new THREE2.Vector2(0, 0) },
-      uMove: { value: new THREE2.Vector2(0, 0) },
-      uRotate: { value: new THREE2.Vector2(0, 0) },
-      uCardOpacity: { value: 1 },
-      uImgBase: { value: null },
-      uImgPopup: { value: null },
-      uImgMask: { value: null }
-    };
-  }
-  loadTextures() {
-    const loader = new THREE2.TextureLoader();
-    const load = (url, uniform) => {
-      if (!url) return;
-      loader.load(
-        url,
-        (texture) => {
-          this.textures.push(texture);
-          if (this.material) {
-            this.material.uniforms[uniform].value = texture;
-          }
-        },
-        void 0,
-        () => {
-          this.onError?.(new Error(`Failed to load texture: ${url}`));
-        }
-      );
-    };
-    load(this.options.baseImage, "uImgBase");
-    load(this.options.popupImage, "uImgPopup");
-    load(this.options.maskImage, "uImgMask");
-    this.onReady?.();
-  }
   setupResizeObserver() {
     this.resizeObserver = new ResizeObserver((entries) => {
       const entry = entries[0];
       if (!entry) return;
       const { width, height } = entry.contentRect;
       if (width === 0 || height === 0) return;
-      this.webglRenderer?.setSize(width, height);
-      if (this.material) {
-        this.material.uniforms.uResolution.value.set(this.canvas.width, this.canvas.height);
+      if (this.frontRenderer) {
+        this.frontRenderer.setSize(width, height);
+      }
+      this.frontFace.updateResolution(this.frontCanvas.width, this.frontCanvas.height);
+      if (this.backFace && this.backCanvas) {
+        if (this.backRenderer) {
+          this.backRenderer.setSize(width, height);
+        }
+        this.backFace.updateResolution(this.backCanvas.width, this.backCanvas.height);
       }
     });
     this.resizeObserver.observe(this.container);
   }
   startRenderLoop() {
+    if (this.rafId !== null) return;
     const animate = () => {
+      if (!this.visible || this.destroyed) return;
       this.rafId = requestAnimationFrame(animate);
-      if (!this.material || !this.scene || !this.camera || !this.webglRenderer) return;
       const delta = this.clock.getDelta();
-      this.material.uniforms.uTime.value += delta;
-      this.webglRenderer.render(this.scene, this.camera);
+      this.frontFace.material.uniforms.uTime.value += delta;
+      if (this.frontRenderer) {
+        this.frontRenderer.render(this.frontFace.scene, this.frontFace.camera);
+      }
+      if (this.backFace && this.backRenderer) {
+        this.backFace.material.uniforms.uTime.value += delta;
+        this.backRenderer.render(this.backFace.scene, this.backFace.camera);
+      }
     };
     this.rafId = requestAnimationFrame(animate);
   }
+  stopRenderLoop() {
+    if (this.rafId !== null) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+  }
   updateUniforms(updates) {
-    if (!this.material) return;
-    const u = this.material.uniforms;
     if (updates.rotate) {
       this.rotatorEl.style.setProperty("--pocato-rotate-x", `${updates.rotate.x}deg`);
       this.rotatorEl.style.setProperty("--pocato-rotate-y", `${updates.rotate.y}deg`);
-      u.uRotate.value.set(
-        updates.rotate.x * (Math.PI / 180),
-        updates.rotate.y * (Math.PI / 180)
-      );
     }
-    if (updates.mouse) u.uMouse.value.set(updates.mouse.x, updates.mouse.y);
-    if (updates.move) u.uMove.value.set(updates.move.x, updates.move.y);
-    if (updates.opacity !== void 0) u.uCardOpacity.value = updates.opacity;
+    this.frontFace.updateUniforms({
+      rotate: updates.rotate,
+      mouse: updates.mouse,
+      move: updates.move,
+      opacity: updates.opacity
+    });
+    if (this.backFace) {
+      this.backFace.updateUniforms({
+        rotate: updates.rotate,
+        mouse: updates.mouse,
+        move: updates.move,
+        opacity: updates.opacity
+      });
+    }
   }
   updateShader(fragmentShader) {
-    if (!this.material) return;
-    this.material.fragmentShader = resolveIncludes(fragmentShader);
-    this.material.needsUpdate = true;
+    this.frontFace.updateShader(fragmentShader);
   }
-  updateTextures(options) {
-    const loader = new THREE2.TextureLoader();
-    const load = (url, uniform) => {
-      if (!url) return;
-      loader.load(url, (texture) => {
-        this.textures.push(texture);
-        if (this.material) {
-          this.material.uniforms[uniform].value = texture;
-        }
-      });
-    };
-    if (options.baseImage) load(options.baseImage, "uImgBase");
-    if (options.popupImage) load(options.popupImage, "uImgPopup");
-    if (options.maskImage) load(options.maskImage, "uImgMask");
+  updateBackShader(fragmentShader) {
+    this.backFace?.updateShader(fragmentShader);
   }
-  getContainerRect() {
-    return this.container.getBoundingClientRect();
+  async updateLayers(frontLayers, backLayers) {
+    const promises = [];
+    if (frontLayers) {
+      promises.push(this.frontFace.loadLayers(frontLayers, this.onError));
+    }
+    if (backLayers && this.backFace) {
+      promises.push(this.backFace.loadLayers(backLayers, this.onError));
+    }
+    await Promise.all(promises);
   }
   getRotatorEl() {
     return this.rotatorEl;
@@ -1231,20 +1528,20 @@ var Renderer = class {
     return this.backContentEl;
   }
   destroy() {
-    if (this.rafId !== null) cancelAnimationFrame(this.rafId);
+    this.destroyed = true;
+    this.stopRenderLoop();
     this.resizeObserver?.disconnect();
-    this.textures.forEach((t) => t.dispose());
-    this.mesh?.geometry.dispose();
-    this.material?.dispose();
-    this.webglRenderer?.dispose();
+    this.intersectionObserver?.disconnect();
+    cleanupPendingVideos();
+    this.frontFace.destroy();
+    this.frontRenderer?.dispose();
+    if (this.backFace) {
+      this.backFace.destroy();
+      this.backRenderer?.dispose();
+    }
     if (this.cardEl.parentNode) {
       this.cardEl.parentNode.removeChild(this.cardEl);
     }
-    this.scene = null;
-    this.camera = null;
-    this.webglRenderer = null;
-    this.material = null;
-    this.mesh = null;
   }
 };
 
@@ -1296,6 +1593,7 @@ function spring(initialValue, onChange, opts = {}) {
     invMass: 1
   };
   let currentResolve = null;
+  let currentTask = null;
   const s = {
     stiffness,
     damping,
@@ -1305,10 +1603,16 @@ function spring(initialValue, onChange, opts = {}) {
     },
     set(value, updateOpts) {
       ctx.target = value;
+      if (currentTask) {
+        tasks.delete(currentTask);
+        currentTask = null;
+      }
       if (updateOpts?.hard) {
         ctx.val = value;
         ctx.lastVal = value;
         onChange(value);
+        currentResolve?.();
+        currentResolve = null;
         return Promise.resolve();
       }
       if (updateOpts?.soft) {
@@ -1317,7 +1621,7 @@ function spring(initialValue, onChange, opts = {}) {
       }
       return new Promise((resolve) => {
         currentResolve = resolve;
-        scheduleTask(() => {
+        const task = () => {
           const invMassTarget = 1;
           ctx.invMass = Math.min(ctx.invMass + 0.02, invMassTarget);
           const moving = tickSpring(ctx, s.stiffness, s.damping, s.precision);
@@ -1325,9 +1629,12 @@ function spring(initialValue, onChange, opts = {}) {
           if (!moving) {
             currentResolve?.();
             currentResolve = null;
+            currentTask = null;
           }
           return moving;
-        });
+        };
+        currentTask = task;
+        scheduleTask(task);
       });
     }
   };
@@ -1471,6 +1778,7 @@ var InteractionHandler = class {
     this.dblClickTimer = null;
     this.activePointerId = null;
     this._flipSpeed = 1;
+    this._flipId = 0;
     this.flipped = initialFlipped;
     this.springRotate = springVec2({ x: 0, y: 0 }, (v) => {
       callbacks.onRotate(v);
@@ -1615,11 +1923,16 @@ var InteractionHandler = class {
   flip(flipped) {
     this.flipped = flipped ?? !this.flipped;
     const targetX = this.flipped ? 180 : 0;
+    const current = this.springRotate.get();
+    this.springRotate.set({ x: current.x, y: current.y }, { hard: true });
+    const flipId = ++this._flipId;
     this.springRotate.stiffness = SPRING_FLIP.stiffness * this._flipSpeed;
     this.springRotate.damping = SPRING_FLIP.damping;
     this.springRotate.set({ x: targetX, y: 0 }).then(() => {
-      this.springRotate.stiffness = SPRING_INTERACT.stiffness;
-      this.springRotate.damping = SPRING_INTERACT.damping;
+      if (this._flipId === flipId) {
+        this.springRotate.stiffness = SPRING_INTERACT.stiffness;
+        this.springRotate.damping = SPRING_INTERACT.damping;
+      }
     });
     this.callbacks.onFlip(this.flipped);
     return this.flipped;
@@ -1644,6 +1957,9 @@ var InteractionHandler = class {
   simulateEndInteract() {
     this.endInteract();
   }
+  isInteracting() {
+    return this.interacting;
+  }
   isFlipped() {
     return this.flipped;
   }
@@ -1772,12 +2088,8 @@ var PocaCard = class extends EventEmitter {
     this.renderer = new Renderer(
       container,
       {
-        type: options.type,
-        baseImage: options.baseImage,
-        popupImage: options.popupImage,
-        maskImage: options.maskImage,
-        backImage: options.backImage,
-        customShader: options.customShader
+        front: options.front,
+        back: options.back
       },
       (error) => this.emit("error", error),
       () => this.emit("ready")
@@ -1792,11 +2104,19 @@ var PocaCard = class extends EventEmitter {
         onMoveDelta: (delta) => this.renderer.updateUniforms({ move: delta }),
         onDistFromCenter: (_dist) => {
         },
-        onFlip: (flipped) => this.emit("flip", flipped)
+        onFlip: (flipped) => {
+          this.emit("flip", flipped);
+        }
       },
       options.flippable ?? false,
       options.initialFlipped ?? false
     );
+    this.renderer.getRotatorEl().addEventListener("pointerdown", () => {
+      if (this.wiggleController) {
+        this.wiggleController.stop();
+        this.wiggleController = null;
+      }
+    });
     if (options.flipSpeed != null) {
       this.interaction.flipSpeed = options.flipSpeed;
     }
@@ -1811,6 +2131,7 @@ var PocaCard = class extends EventEmitter {
     this.interaction.flip();
   }
   wiggle() {
+    if (this.interaction.isInteracting()) return;
     this.wiggleController?.stop();
     this.interaction.startSyntheticInteraction();
     this.wiggleController = wiggle(0, 0, 100, (pos, done) => {
@@ -1831,11 +2152,14 @@ var PocaCard = class extends EventEmitter {
     if (options.flipSpeed != null) {
       this.interaction.flipSpeed = options.flipSpeed;
     }
-    if (options.customShader) {
-      this.renderer.updateShader(options.customShader);
+    if (options.front?.shader) {
+      this.renderer.updateShader(options.front.shader);
+    }
+    if (options.back?.shader) {
+      this.renderer.updateBackShader(options.back.shader);
     }
-    if (options.baseImage || options.popupImage || options.maskImage) {
-      this.renderer.updateTextures(options);
+    if (options.front?.layers || options.back?.layers) {
+      this.renderer.updateLayers(options.front?.layers, options.back?.layers);
     }
   }
   destroy() {
@@ -1845,7 +2169,24 @@ var PocaCard = class extends EventEmitter {
     this.removeAllListeners();
   }
 };
+
+// src/shaders/registry.ts
+var builtinShaders = {
+  glare: glare_frag_default,
+  "glare-3d": glare_3d_frag_default,
+  holo: holo_frag_default,
+  "holo-3d": holo_3d_frag_default,
+  snowfall: snowfall_frag_default,
+  "snowfall-3d": snowfall_3d_frag_default,
+  blur: blur_frag_default,
+  "blur-3d": blur_3d_frag_default,
+  brush: brush_frag_default,
+  "brush-3d": brush_3d_frag_default
+};
 export {
-  PocaCard
+  FRAG_SHADERS,
+  PocaCard,
+  builtinShaders,
+  resolveIncludes
 };
 //# sourceMappingURL=index.js.map