Create <GridScan /> background

2026-03-07 14:39:30 -07:00 · 2025-12-26 21:02:59 +07:00
parent b91dd767ac
commit ac136bae7e
7 changed files with 1204 additions and 1 deletions
--- a/src/content/Backgrounds/GridScan/GridScan.vue
+++ b/src/content/Backgrounds/GridScan/GridScan.vue
@@ -0,0 +1,923 @@
+<template>
+  <div
+    ref="containerRef"
+    :class="['relative w-full h-full overflow-hidden', className]"
+    :style="style"
+  >
+    <div
+      v-if="showPreview"
+      class="absolute right-3 bottom-3 w-[220px] h-[132px] rounded-lg overflow-hidden border border-white/25 shadow-[0_4px_16px_rgba(0,0,0,0.4)] bg-black text-white text-[12px] leading-[1.2] font-sans pointer-events-none"
+    >
+      <video
+        ref="videoRef"
+        muted
+        playsinline
+        autoplay
+        class="w-full h-full object-cover -scale-x-100"
+      />
+      <div class="absolute left-2 top-2 px-[6px] py-[2px] bg-black/50 rounded-[6px] backdrop-blur-[4px]">
+        {{
+          enableWebcam
+            ? modelsReady
+              ? uiFaceActive
+                ? 'Face: tracking'
+                : 'Face: searching'
+              : 'Loading models'
+            : 'Webcam disabled'
+        }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch, useTemplateRef, type CSSProperties } from 'vue';
+import { EffectComposer, RenderPass, EffectPass, BloomEffect, ChromaticAberrationEffect } from 'postprocessing';
+import * as THREE from 'three';
+import * as faceapi from 'face-api.js';
+
+export type LineStyle = 'solid' | 'dashed' | 'dotted';
+export type ScanDirection = 'forward' | 'backward' | 'pingpong';
+
+interface GridScanProps {
+  enableWebcam?: boolean;
+  showPreview?: boolean;
+  modelsPath?: string;
+  sensitivity?: number;
+  lineThickness?: number;
+  linesColor?: string;
+  gridScale?: number;
+  lineStyle?: LineStyle;
+  lineJitter?: number;
+  enablePost?: boolean;
+  bloomIntensity?: number;
+  bloomThreshold?: number;
+  bloomSmoothing?: number;
+  chromaticAberration?: number;
+  noiseIntensity?: number;
+  scanColor?: string;
+  scanOpacity?: number;
+  scanDirection?: ScanDirection;
+  scanSoftness?: number;
+  scanGlow?: number;
+  scanPhaseTaper?: number;
+  scanDuration?: number;
+  scanDelay?: number;
+  enableGyro?: boolean;
+  scanOnClick?: boolean;
+  snapBackDelay?: number;
+  className?: string;
+  style?: CSSProperties;
+}
+
+const props = withDefaults(defineProps<GridScanProps>(), {
+  enableWebcam: false,
+  showPreview: false,
+  modelsPath: 'https://cdn.jsdelivr.net/gh/justadudewhohacks/face-api.js@0.22.2/weights',
+  sensitivity: 0.55,
+  lineThickness: 1,
+  linesColor: '#392e4e',
+  scanColor: '#FF9FFC',
+  scanOpacity: 0.4,
+  gridScale: 0.1,
+  lineStyle: 'solid',
+  lineJitter: 0.1,
+  scanDirection: 'pingpong',
+  enablePost: true,
+  bloomIntensity: 0,
+  bloomThreshold: 0,
+  bloomSmoothing: 0,
+  chromaticAberration: 0.002,
+  noiseIntensity: 0.01,
+  scanGlow: 0.5,
+  scanSoftness: 2,
+  scanPhaseTaper: 0.9,
+  scanDuration: 2.0,
+  scanDelay: 2.0,
+  enableGyro: false,
+  scanOnClick: false,
+  snapBackDelay: 250,
+  className: ''
+});
+
+const vert = `
+varying vec2 vUv;
+void main(){
+  vUv = uv;
+  gl_Position = vec4(position.xy, 0.0, 1.0);
+}
+`;
+
+const frag = `
+precision highp float;
+uniform vec3 iResolution;
+uniform float iTime;
+uniform vec2 uSkew;
+uniform float uTilt;
+uniform float uYaw;
+uniform float uLineThickness;
+uniform vec3 uLinesColor;
+uniform vec3 uScanColor;
+uniform float uGridScale;
+uniform float uLineStyle;
+uniform float uLineJitter;
+uniform float uScanOpacity;
+uniform float uScanDirection;
+uniform float uNoise;
+uniform float uBloomOpacity;
+uniform float uScanGlow;
+uniform float uScanSoftness;
+uniform float uPhaseTaper;
+uniform float uScanDuration;
+uniform float uScanDelay;
+varying vec2 vUv;
+
+uniform float uScanStarts[8];
+uniform float uScanCount;
+
+const int MAX_SCANS = 8;
+
+float smoother01(float a, float b, float x){
+  float t = clamp((x - a) / max(1e-5, (b - a)), 0.0, 1.0);
+  return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord)
+{
+    vec2 p = (2.0 * fragCoord - iResolution.xy) / iResolution.y;
+
+    vec3 ro = vec3(0.0);
+    vec3 rd = normalize(vec3(p, 2.0));
+
+    float cR = cos(uTilt), sR = sin(uTilt);
+    rd.xy = mat2(cR, -sR, sR, cR) * rd.xy;
+
+    float cY = cos(uYaw), sY = sin(uYaw);
+    rd.xz = mat2(cY, -sY, sY, cY) * rd.xz;
+
+    vec2 skew = clamp(uSkew, vec2(-0.7), vec2(0.7));
+    rd.xy += skew * rd.z;
+
+    vec3 color = vec3(0.0);
+  float minT = 1e20;
+  float gridScale = max(1e-5, uGridScale);
+    float fadeStrength = 2.0;
+    vec2 gridUV = vec2(0.0);
+
+  float hitIsY = 1.0;
+    for (int i = 0; i < 4; i++)
+    {
+        float isY = float(i < 2);
+        float pos = mix(-0.2, 0.2, float(i)) * isY + mix(-0.5, 0.5, float(i - 2)) * (1.0 - isY);
+        float num = pos - (isY * ro.y + (1.0 - isY) * ro.x);
+        float den = isY * rd.y + (1.0 - isY) * rd.x;
+        float t = num / den;
+        vec3 h = ro + rd * t;
+
+        float depthBoost = smoothstep(0.0, 3.0, h.z);
+        h.xy += skew * 0.15 * depthBoost;
+
+    bool use = t > 0.0 && t < minT;
+    gridUV = use ? mix(h.zy, h.xz, isY) / gridScale : gridUV;
+    minT = use ? t : minT;
+    hitIsY = use ? isY : hitIsY;
+    }
+
+    vec3 hit = ro + rd * minT;
+    float dist = length(hit - ro);
+
+  float jitterAmt = clamp(uLineJitter, 0.0, 1.0);
+  if (jitterAmt > 0.0) {
+    vec2 j = vec2(
+      sin(gridUV.y * 2.7 + iTime * 1.8),
+      cos(gridUV.x * 2.3 - iTime * 1.6)
+    ) * (0.15 * jitterAmt);
+    gridUV += j;
+  }
+  float fx = fract(gridUV.x);
+  float fy = fract(gridUV.y);
+  float ax = min(fx, 1.0 - fx);
+  float ay = min(fy, 1.0 - fy);
+  float wx = fwidth(gridUV.x);
+  float wy = fwidth(gridUV.y);
+  float halfPx = max(0.0, uLineThickness) * 0.5;
+
+  float tx = halfPx * wx;
+  float ty = halfPx * wy;
+
+  float aax = wx;
+  float aay = wy;
+
+  float lineX = 1.0 - smoothstep(tx, tx + aax, ax);
+  float lineY = 1.0 - smoothstep(ty, ty + aay, ay);
+  if (uLineStyle > 0.5) {
+    float dashRepeat = 4.0;
+    float dashDuty = 0.5;
+    float vy = fract(gridUV.y * dashRepeat);
+    float vx = fract(gridUV.x * dashRepeat);
+    float dashMaskY = step(vy, dashDuty);
+    float dashMaskX = step(vx, dashDuty);
+    if (uLineStyle < 1.5) {
+      lineX *= dashMaskY;
+      lineY *= dashMaskX;
+    } else {
+      float dotRepeat = 6.0;
+      float dotWidth = 0.18;
+      float cy = abs(fract(gridUV.y * dotRepeat) - 0.5);
+      float cx = abs(fract(gridUV.x * dotRepeat) - 0.5);
+      float dotMaskY = 1.0 - smoothstep(dotWidth, dotWidth + fwidth(gridUV.y * dotRepeat), cy);
+      float dotMaskX = 1.0 - smoothstep(dotWidth, dotWidth + fwidth(gridUV.x * dotRepeat), cx);
+      lineX *= dotMaskY;
+      lineY *= dotMaskX;
+    }
+  }
+  float primaryMask = max(lineX, lineY);
+
+  vec2 gridUV2 = (hitIsY > 0.5 ? hit.xz : hit.zy) / gridScale;
+  if (jitterAmt > 0.0) {
+    vec2 j2 = vec2(
+      cos(gridUV2.y * 2.1 - iTime * 1.4),
+      sin(gridUV2.x * 2.5 + iTime * 1.7)
+    ) * (0.15 * jitterAmt);
+    gridUV2 += j2;
+  }
+  float fx2 = fract(gridUV2.x);
+  float fy2 = fract(gridUV2.y);
+  float ax2 = min(fx2, 1.0 - fx2);
+  float ay2 = min(fy2, 1.0 - fy2);
+  float wx2 = fwidth(gridUV2.x);
+  float wy2 = fwidth(gridUV2.y);
+  float tx2 = halfPx * wx2;
+  float ty2 = halfPx * wy2;
+  float aax2 = wx2;
+  float aay2 = wy2;
+  float lineX2 = 1.0 - smoothstep(tx2, tx2 + aax2, ax2);
+  float lineY2 = 1.0 - smoothstep(ty2, ty2 + aay2, ay2);
+  if (uLineStyle > 0.5) {
+    float dashRepeat2 = 4.0;
+    float dashDuty2 = 0.5;
+    float vy2m = fract(gridUV2.y * dashRepeat2);
+    float vx2m = fract(gridUV2.x * dashRepeat2);
+    float dashMaskY2 = step(vy2m, dashDuty2);
+    float dashMaskX2 = step(vx2m, dashDuty2);
+    if (uLineStyle < 1.5) {
+      lineX2 *= dashMaskY2;
+      lineY2 *= dashMaskX2;
+    } else {
+      float dotRepeat2 = 6.0;
+      float dotWidth2 = 0.18;
+      float cy2 = abs(fract(gridUV2.y * dotRepeat2) - 0.5);
+      float cx2 = abs(fract(gridUV2.x * dotRepeat2) - 0.5);
+      float dotMaskY2 = 1.0 - smoothstep(dotWidth2, dotWidth2 + fwidth(gridUV2.y * dotRepeat2), cy2);
+      float dotMaskX2 = 1.0 - smoothstep(dotWidth2, dotWidth2 + fwidth(gridUV2.x * dotRepeat2), cx2);
+      lineX2 *= dotMaskY2;
+      lineY2 *= dotMaskX2;
+    }
+  }
+    float altMask = max(lineX2, lineY2);
+
+    float edgeDistX = min(abs(hit.x - (-0.5)), abs(hit.x - 0.5));
+    float edgeDistY = min(abs(hit.y - (-0.2)), abs(hit.y - 0.2));
+    float edgeDist = mix(edgeDistY, edgeDistX, hitIsY);
+    float edgeGate = 1.0 - smoothstep(gridScale * 0.5, gridScale * 2.0, edgeDist);
+    altMask *= edgeGate;
+
+  float lineMask = max(primaryMask, altMask);
+
+    float fade = exp(-dist * fadeStrength);
+
+    float dur = max(0.05, uScanDuration);
+    float del = max(0.0, uScanDelay);
+    float scanZMax = 2.0;
+    float widthScale = max(0.1, uScanGlow);
+    float sigma = max(0.001, 0.18 * widthScale * uScanSoftness);
+    float sigmaA = sigma * 2.0;
+
+    float combinedPulse = 0.0;
+    float combinedAura = 0.0;
+
+    float cycle = dur + del;
+    float tCycle = mod(iTime, cycle);
+    float scanPhase = clamp((tCycle - del) / dur, 0.0, 1.0);
+    float phase = scanPhase;
+    if (uScanDirection > 0.5 && uScanDirection < 1.5) {
+      phase = 1.0 - phase;
+    } else if (uScanDirection > 1.5) {
+      float t2 = mod(max(0.0, iTime - del), 2.0 * dur);
+      phase = (t2 < dur) ? (t2 / dur) : (1.0 - (t2 - dur) / dur);
+    }
+    float scanZ = phase * scanZMax;
+    float dz = abs(hit.z - scanZ);
+    float lineBand = exp(-0.5 * (dz * dz) / (sigma * sigma));
+    float taper = clamp(uPhaseTaper, 0.0, 0.49);
+    float headW = taper;
+    float tailW = taper;
+    float headFade = smoother01(0.0, headW, phase);
+    float tailFade = 1.0 - smoother01(1.0 - tailW, 1.0, phase);
+    float phaseWindow = headFade * tailFade;
+    float pulseBase = lineBand * phaseWindow;
+    combinedPulse += pulseBase * clamp(uScanOpacity, 0.0, 1.0);
+    float auraBand = exp(-0.5 * (dz * dz) / (sigmaA * sigmaA));
+    combinedAura += (auraBand * 0.25) * phaseWindow * clamp(uScanOpacity, 0.0, 1.0);
+
+    for (int i = 0; i < MAX_SCANS; i++) {
+      if (float(i) >= uScanCount) break;
+      float tActiveI = iTime - uScanStarts[i];
+      float phaseI = clamp(tActiveI / dur, 0.0, 1.0);
+      if (uScanDirection > 0.5 && uScanDirection < 1.5) {
+        phaseI = 1.0 - phaseI;
+      } else if (uScanDirection > 1.5) {
+        phaseI = (phaseI < 0.5) ? (phaseI * 2.0) : (1.0 - (phaseI - 0.5) * 2.0);
+      }
+      float scanZI = phaseI * scanZMax;
+      float dzI = abs(hit.z - scanZI);
+      float lineBandI = exp(-0.5 * (dzI * dzI) / (sigma * sigma));
+      float headFadeI = smoother01(0.0, headW, phaseI);
+      float tailFadeI = 1.0 - smoother01(1.0 - tailW, 1.0, phaseI);
+      float phaseWindowI = headFadeI * tailFadeI;
+      combinedPulse += lineBandI * phaseWindowI * clamp(uScanOpacity, 0.0, 1.0);
+      float auraBandI = exp(-0.5 * (dzI * dzI) / (sigmaA * sigmaA));
+      combinedAura += (auraBandI * 0.25) * phaseWindowI * clamp(uScanOpacity, 0.0, 1.0);
+    }
+
+  float lineVis = lineMask;
+  vec3 gridCol = uLinesColor * lineVis * fade;
+  vec3 scanCol = uScanColor * combinedPulse;
+  vec3 scanAura = uScanColor * combinedAura;
+
+    color = gridCol + scanCol + scanAura;
+
+  float n = fract(sin(dot(gl_FragCoord.xy + vec2(iTime * 123.4), vec2(12.9898,78.233))) * 43758.5453123);
+  color += (n - 0.5) * uNoise;
+  color = clamp(color, 0.0, 1.0);
+  float alpha = clamp(max(lineVis, combinedPulse), 0.0, 1.0);
+  float gx = 1.0 - smoothstep(tx * 2.0, tx * 2.0 + aax * 2.0, ax);
+  float gy = 1.0 - smoothstep(ty * 2.0, ty * 2.0 + aay * 2.0, ay);
+  float halo = max(gx, gy) * fade;
+  alpha = max(alpha, halo * clamp(uBloomOpacity, 0.0, 1.0));
+  fragColor = vec4(color, alpha);
+}
+
+void main(){
+  vec4 c;
+  mainImage(c, vUv * iResolution.xy);
+  gl_FragColor = c;
+}
+`;
+
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
+const videoRef = useTemplateRef<HTMLVideoElement>('videoRef');
+
+const modelsReady = ref(false);
+const uiFaceActive = ref(false);
+
+const MAX_SCANS = 8;
+
+let cleanupAnimation: () => void = () => {};
+
+const srgbColor = (hex: string): THREE.Color => {
+  const c = new THREE.Color(hex);
+  return c.convertSRGBToLinear();
+};
+
+const smoothDampVec2 = (
+  current: THREE.Vector2,
+  target: THREE.Vector2,
+  currentVelocity: THREE.Vector2,
+  smoothTimeVal: number,
+  maxSpeedVal: number,
+  deltaTime: number
+): THREE.Vector2 => {
+  const out = current.clone();
+  smoothTimeVal = Math.max(0.0001, smoothTimeVal);
+  const omega = 2 / smoothTimeVal;
+  const x = omega * deltaTime;
+  const exp = 1 / (1 + x + 0.48 * x * x + 0.235 * x * x * x);
+
+  let change = current.clone().sub(target);
+  const originalTo = target.clone();
+
+  const maxChange = maxSpeedVal * smoothTimeVal;
+  if (change.length() > maxChange) change.setLength(maxChange);
+
+  target = current.clone().sub(change);
+  const temp = currentVelocity.clone().addScaledVector(change, omega).multiplyScalar(deltaTime);
+  currentVelocity.sub(temp.clone().multiplyScalar(omega));
+  currentVelocity.multiplyScalar(exp);
+
+  out.copy(target.clone().add(change.add(temp).multiplyScalar(exp)));
+
+  const origMinusCurrent = originalTo.clone().sub(current);
+  const outMinusOrig = out.clone().sub(originalTo);
+  if (origMinusCurrent.dot(outMinusOrig) > 0) {
+    out.copy(originalTo);
+    currentVelocity.set(0, 0);
+  }
+  return out;
+};
+
+const smoothDampFloat = (
+  current: number,
+  target: number,
+  velRef: { v: number },
+  smoothTimeVal: number,
+  maxSpeedVal: number,
+  deltaTime: number
+): { value: number; v: number } => {
+  smoothTimeVal = Math.max(0.0001, smoothTimeVal);
+  const omega = 2 / smoothTimeVal;
+  const x = omega * deltaTime;
+  const exp = 1 / (1 + x + 0.48 * x * x + 0.235 * x * x * x);
+
+  let change = current - target;
+  const originalTo = target;
+
+  const maxChange = maxSpeedVal * smoothTimeVal;
+  change = Math.sign(change) * Math.min(Math.abs(change), maxChange);
+
+  target = current - change;
+  const temp = (velRef.v + omega * change) * deltaTime;
+  velRef.v = (velRef.v - omega * temp) * exp;
+
+  let out = target + (change + temp) * exp;
+
+  const origMinusCurrent = originalTo - current;
+  const outMinusOrig = out - originalTo;
+  if (origMinusCurrent * outMinusOrig > 0) {
+    out = originalTo;
+    velRef.v = 0;
+  }
+  return { value: out, v: velRef.v };
+};
+
+const medianPush = (buf: number[], v: number, maxLen: number): void => {
+  buf.push(v);
+  if (buf.length > maxLen) buf.shift();
+};
+
+const median = (buf: number[]): number => {
+  if (buf.length === 0) return 0;
+  const a = [...buf].sort((x, y) => x - y);
+  const mid = Math.floor(a.length / 2);
+  return a.length % 2 ? a[mid] : (a[mid - 1] + a[mid]) * 0.5;
+};
+
+const centroid = (points: { x: number; y: number }[]): { x: number; y: number } => {
+  let x = 0,
+    y = 0;
+  const n = points.length || 1;
+  for (const p of points) {
+    x += p.x;
+    y += p.y;
+  }
+  return { x: x / n, y: y / n };
+};
+
+const dist2 = (a: { x: number; y: number }, b: { x: number; y: number }): number => {
+  return Math.hypot(a.x - b.x, a.y - b.y);
+};
+
+const setupAnimation = () => {
+  const container = containerRef.value;
+  if (!container) return;
+
+  // Non-reactive Three.js objects - stored as plain variables
+  const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
+  renderer.setSize(container.clientWidth, container.clientHeight);
+  renderer.outputColorSpace = THREE.SRGBColorSpace;
+  renderer.toneMapping = THREE.NoToneMapping;
+  renderer.autoClear = false;
+  renderer.setClearColor(0x000000, 0);
+  container.appendChild(renderer.domElement);
+
+  const scene = new THREE.Scene();
+  const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+
+  // Animation state - plain objects, not reactive
+  const lookTarget = new THREE.Vector2(0, 0);
+  const lookCurrent = new THREE.Vector2(0, 0);
+  const lookVel = new THREE.Vector2(0, 0);
+  let tiltTarget = 0;
+  let tiltCurrent = 0;
+  let tiltVel = 0;
+  let yawTarget = 0;
+  let yawCurrent = 0;
+  let yawVel = 0;
+  const scanStarts: number[] = [];
+  const bufX: number[] = [];
+  const bufY: number[] = [];
+  const bufT: number[] = [];
+  const bufYaw: number[] = [];
+  let leaveTimer: number | null = null;
+
+  const uniforms = {
+    iResolution: {
+      value: new THREE.Vector3(container.clientWidth, container.clientHeight, renderer.getPixelRatio())
+    },
+    iTime: { value: 0 },
+    uSkew: { value: new THREE.Vector2(0, 0) },
+    uTilt: { value: 0 },
+    uYaw: { value: 0 },
+    uLineThickness: { value: props.lineThickness },
+    uLinesColor: { value: srgbColor(props.linesColor) },
+    uScanColor: { value: srgbColor(props.scanColor) },
+    uGridScale: { value: props.gridScale },
+    uLineStyle: { value: props.lineStyle === 'dashed' ? 1 : props.lineStyle === 'dotted' ? 2 : 0 },
+    uLineJitter: { value: Math.max(0, Math.min(1, props.lineJitter || 0)) },
+    uScanOpacity: { value: props.scanOpacity },
+    uNoise: { value: props.noiseIntensity },
+    uBloomOpacity: { value: props.bloomIntensity },
+    uScanGlow: { value: props.scanGlow },
+    uScanSoftness: { value: props.scanSoftness },
+    uPhaseTaper: { value: props.scanPhaseTaper },
+    uScanDuration: { value: props.scanDuration },
+    uScanDelay: { value: props.scanDelay },
+    uScanDirection: { value: props.scanDirection === 'backward' ? 1 : props.scanDirection === 'pingpong' ? 2 : 0 },
+    uScanStarts: { value: new Array(MAX_SCANS).fill(0) },
+    uScanCount: { value: 0 }
+  };
+
+  const material = new THREE.ShaderMaterial({
+    uniforms,
+    vertexShader: vert,
+    fragmentShader: frag,
+    transparent: true,
+    depthWrite: false,
+    depthTest: false
+  });
+
+  const geometry = new THREE.PlaneGeometry(2, 2);
+  const quad = new THREE.Mesh(geometry, material);
+  scene.add(quad);
+
+  let composer: EffectComposer | null = null;
+  let bloom: BloomEffect | null = null;
+  let chroma: ChromaticAberrationEffect | null = null;
+
+  if (props.enablePost) {
+    composer = new EffectComposer(renderer);
+    const renderPass = new RenderPass(scene, camera);
+    composer.addPass(renderPass);
+
+    bloom = new BloomEffect({
+      intensity: 1.0,
+      luminanceThreshold: props.bloomThreshold,
+      luminanceSmoothing: props.bloomSmoothing
+    });
+    bloom.blendMode.opacity.value = Math.max(0, props.bloomIntensity);
+
+    chroma = new ChromaticAberrationEffect({
+      offset: new THREE.Vector2(props.chromaticAberration, props.chromaticAberration),
+      radialModulation: true,
+      modulationOffset: 0.0
+    });
+
+    const effectPass = new EffectPass(camera, bloom, chroma);
+    effectPass.renderToScreen = true;
+    composer.addPass(effectPass);
+  }
+
+  const pushScan = (t: number): void => {
+    if (scanStarts.length >= MAX_SCANS) scanStarts.shift();
+    scanStarts.push(t);
+    const buf = new Array(MAX_SCANS).fill(0);
+    for (let i = 0; i < scanStarts.length && i < MAX_SCANS; i++) buf[i] = scanStarts[i];
+    uniforms.uScanStarts.value = buf;
+    uniforms.uScanCount.value = scanStarts.length;
+  };
+
+  const onMouseMove = (e: MouseEvent): void => {
+    if (uiFaceActive.value) return;
+    if (leaveTimer) {
+      clearTimeout(leaveTimer);
+      leaveTimer = null;
+    }
+    const rect = container.getBoundingClientRect();
+    const nx = ((e.clientX - rect.left) / rect.width) * 2 - 1;
+    const ny = -(((e.clientY - rect.top) / rect.height) * 2 - 1);
+    lookTarget.set(nx, ny);
+  };
+
+  const onClick = async (): Promise<void> => {
+    const nowSec = performance.now() / 1000;
+    if (props.scanOnClick) pushScan(nowSec);
+    if (
+      props.enableGyro &&
+      typeof window !== 'undefined' &&
+      (window as any).DeviceOrientationEvent &&
+      (DeviceOrientationEvent as any).requestPermission
+    ) {
+      try {
+        await (DeviceOrientationEvent as any).requestPermission();
+      } catch {}
+    }
+  };
+
+  const onMouseEnter = (): void => {
+    if (leaveTimer) {
+      clearTimeout(leaveTimer);
+      leaveTimer = null;
+    }
+  };
+
+  const onMouseLeave = (): void => {
+    if (uiFaceActive.value) return;
+    if (leaveTimer) clearTimeout(leaveTimer);
+    leaveTimer = window.setTimeout(
+      () => {
+        lookTarget.set(0, 0);
+        tiltTarget = 0;
+        yawTarget = 0;
+      },
+      Math.max(0, props.snapBackDelay || 0)
+    );
+  };
+
+  const onDeviceOrientation = (e: DeviceOrientationEvent): void => {
+    if (uiFaceActive.value) return;
+    const gamma = e.gamma ?? 0;
+    const beta = e.beta ?? 0;
+    const nx = THREE.MathUtils.clamp(gamma / 45, -1, 1);
+    const ny = THREE.MathUtils.clamp(-beta / 30, -1, 1);
+    lookTarget.set(nx, ny);
+    tiltTarget = THREE.MathUtils.degToRad(gamma) * 0.4;
+  };
+
+  const onResize = (): void => {
+    renderer.setSize(container.clientWidth, container.clientHeight);
+    uniforms.iResolution.value.set(container.clientWidth, container.clientHeight, renderer.getPixelRatio());
+    if (composer) composer.setSize(container.clientWidth, container.clientHeight);
+  };
+
+  container.addEventListener('mousemove', onMouseMove);
+  container.addEventListener('mouseenter', onMouseEnter);
+  container.addEventListener('mouseleave', onMouseLeave);
+  if (props.scanOnClick) container.addEventListener('click', onClick);
+  if (props.enableGyro) window.addEventListener('deviceorientation', onDeviceOrientation);
+  window.addEventListener('resize', onResize);
+
+  // Face detection
+  let stopFaceDetection = false;
+  let lastDetect = 0;
+
+  const startFaceDetection = async (): Promise<void> => {
+    if (!props.enableWebcam || !modelsReady.value) return;
+    const video = videoRef.value;
+    if (!video) return;
+
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: { facingMode: 'user', width: { ideal: 1280 }, height: { ideal: 720 } },
+        audio: false
+      });
+      video.srcObject = stream;
+      await video.play();
+    } catch {
+      return;
+    }
+
+    const opts = new faceapi.TinyFaceDetectorOptions({ inputSize: 320, scoreThreshold: 0.5 });
+
+    const s = THREE.MathUtils.clamp(props.sensitivity, 0, 1);
+    const depthResponse = THREE.MathUtils.lerp(0.25, 0.45, s);
+
+    const detect = async (ts: number): Promise<void> => {
+      if (stopFaceDetection) return;
+
+      if (ts - lastDetect >= 33) {
+        lastDetect = ts;
+        try {
+          const res = await faceapi.detectSingleFace(video, opts).withFaceLandmarks(true);
+          if (res && res.detection) {
+            const det = res.detection;
+            const box = det.box;
+            const vw = video.videoWidth || 1;
+            const vh = video.videoHeight || 1;
+
+            const cx = box.x + box.width * 0.5;
+            const cy = box.y + box.height * 0.5;
+            const nx = (cx / vw) * 2 - 1;
+            const ny = (cy / vh) * 2 - 1;
+            medianPush(bufX, nx, 5);
+            medianPush(bufY, ny, 5);
+            const nxm = median(bufX);
+            const nym = median(bufY);
+
+            const look = new THREE.Vector2(Math.tanh(nxm), Math.tanh(nym));
+
+            const faceSize = Math.min(1, Math.hypot(box.width / vw, box.height / vh));
+            const depthScaleVal = 1 + depthResponse * (faceSize - 0.25);
+            lookTarget.copy(look.multiplyScalar(depthScaleVal));
+
+            const leftEye = res.landmarks.getLeftEye();
+            const rightEye = res.landmarks.getRightEye();
+            const lc = centroid(leftEye);
+            const rc = centroid(rightEye);
+            const tilt = Math.atan2(rc.y - lc.y, rc.x - lc.x);
+            medianPush(bufT, tilt, 5);
+            tiltTarget = median(bufT);
+
+            const nose = res.landmarks.getNose();
+            const tip = nose[nose.length - 1] || nose[Math.floor(nose.length / 2)];
+            const jaw = res.landmarks.getJawOutline();
+            const leftCheek = jaw[3] || jaw[2];
+            const rightCheek = jaw[13] || jaw[14];
+            const dL = dist2(tip, leftCheek);
+            const dR = dist2(tip, rightCheek);
+            const eyeDist = Math.hypot(rc.x - lc.x, rc.y - lc.y) + 1e-6;
+            let yawSignal = THREE.MathUtils.clamp((dR - dL) / (eyeDist * 1.6), -1, 1);
+            yawSignal = Math.tanh(yawSignal);
+            medianPush(bufYaw, yawSignal, 5);
+            yawTarget = median(bufYaw);
+
+            uiFaceActive.value = true;
+          } else {
+            uiFaceActive.value = false;
+          }
+        } catch {
+          uiFaceActive.value = false;
+        }
+      }
+
+      if ('requestVideoFrameCallback' in HTMLVideoElement.prototype) {
+        (video as any).requestVideoFrameCallback(() => detect(performance.now()));
+      } else {
+        requestAnimationFrame(detect);
+      }
+    };
+
+    requestAnimationFrame(detect);
+  };
+
+  const stopWebcam = (): void => {
+    stopFaceDetection = true;
+    const video = videoRef.value;
+    if (video) {
+      const stream = video.srcObject as MediaStream | null;
+      if (stream) stream.getTracks().forEach(t => t.stop());
+      video.pause();
+      video.srcObject = null;
+    }
+  };
+
+  // Watch for webcam changes
+  const unwatchWebcam = watch(
+    () => props.enableWebcam,
+    (newVal) => {
+      if (newVal && modelsReady.value) {
+        stopFaceDetection = false;
+        startFaceDetection();
+      } else {
+        stopWebcam();
+      }
+    }
+  );
+
+  const unwatchModels = watch(modelsReady, (ready) => {
+    if (ready && props.enableWebcam) {
+      stopFaceDetection = false;
+      startFaceDetection();
+    }
+  });
+
+  // Watch for prop changes
+  const unwatchProps = watch(
+    [
+      () => props.lineThickness,
+      () => props.linesColor,
+      () => props.scanColor,
+      () => props.gridScale,
+      () => props.lineStyle,
+      () => props.lineJitter,
+      () => props.bloomIntensity,
+      () => props.bloomThreshold,
+      () => props.bloomSmoothing,
+      () => props.chromaticAberration,
+      () => props.noiseIntensity,
+      () => props.scanGlow,
+      () => props.scanOpacity,
+      () => props.scanDirection,
+      () => props.scanSoftness,
+      () => props.scanPhaseTaper,
+      () => props.scanDuration,
+      () => props.scanDelay
+    ],
+    () => {
+      uniforms.uLineThickness.value = props.lineThickness;
+      (uniforms.uLinesColor.value as THREE.Color).copy(srgbColor(props.linesColor));
+      (uniforms.uScanColor.value as THREE.Color).copy(srgbColor(props.scanColor));
+      uniforms.uGridScale.value = props.gridScale;
+      uniforms.uLineStyle.value = props.lineStyle === 'dashed' ? 1 : props.lineStyle === 'dotted' ? 2 : 0;
+      uniforms.uLineJitter.value = Math.max(0, Math.min(1, props.lineJitter || 0));
+      uniforms.uBloomOpacity.value = Math.max(0, props.bloomIntensity);
+      uniforms.uNoise.value = Math.max(0, props.noiseIntensity);
+      uniforms.uScanGlow.value = props.scanGlow;
+      uniforms.uScanOpacity.value = Math.max(0, Math.min(1, props.scanOpacity));
+      uniforms.uScanDirection.value = props.scanDirection === 'backward' ? 1 : props.scanDirection === 'pingpong' ? 2 : 0;
+      uniforms.uScanSoftness.value = props.scanSoftness;
+      uniforms.uPhaseTaper.value = props.scanPhaseTaper;
+      uniforms.uScanDuration.value = Math.max(0.05, props.scanDuration);
+      uniforms.uScanDelay.value = Math.max(0.0, props.scanDelay);
+
+      if (bloom) {
+        bloom.blendMode.opacity.value = Math.max(0, props.bloomIntensity);
+        (bloom as any).luminanceMaterial.threshold = props.bloomThreshold;
+        (bloom as any).luminanceMaterial.smoothing = props.bloomSmoothing;
+      }
+      if (chroma) {
+        chroma.offset.set(props.chromaticAberration, props.chromaticAberration);
+      }
+    }
+  );
+
+  // Animation loop
+  let rafId: number | null = null;
+  let last = performance.now();
+
+  const tick = (): void => {
+    const now = performance.now();
+    const dt = Math.max(0, Math.min(0.1, (now - last) / 1000));
+    last = now;
+
+    const s = THREE.MathUtils.clamp(props.sensitivity, 0, 1);
+    const skewScale = THREE.MathUtils.lerp(0.06, 0.2, s);
+    const tiltScale = THREE.MathUtils.lerp(0.12, 0.3, s);
+    const yawScale = THREE.MathUtils.lerp(0.1, 0.28, s);
+    const smoothTime = THREE.MathUtils.lerp(0.45, 0.12, s);
+    const yBoost = THREE.MathUtils.lerp(1.2, 1.6, s);
+    const maxSpeed = Infinity;
+
+    lookCurrent.copy(smoothDampVec2(lookCurrent, lookTarget, lookVel, smoothTime, maxSpeed, dt));
+
+    const tiltSm = smoothDampFloat(tiltCurrent, tiltTarget, { v: tiltVel }, smoothTime, maxSpeed, dt);
+    tiltCurrent = tiltSm.value;
+    tiltVel = tiltSm.v;
+
+    const yawSm = smoothDampFloat(yawCurrent, yawTarget, { v: yawVel }, smoothTime, maxSpeed, dt);
+    yawCurrent = yawSm.value;
+    yawVel = yawSm.v;
+
+    uniforms.uSkew.value.set(lookCurrent.x * skewScale, -lookCurrent.y * yBoost * skewScale);
+    uniforms.uTilt.value = tiltCurrent * tiltScale;
+    uniforms.uYaw.value = THREE.MathUtils.clamp(yawCurrent * yawScale, -0.6, 0.6);
+
+    uniforms.iTime.value = now / 1000;
+    renderer.clear(true, true, true);
+    if (composer) {
+      composer.render(dt);
+    } else {
+      renderer.render(scene, camera);
+    }
+    rafId = requestAnimationFrame(tick);
+  };
+  rafId = requestAnimationFrame(tick);
+
+  cleanupAnimation = () => {
+    if (rafId) cancelAnimationFrame(rafId);
+    if (leaveTimer) clearTimeout(leaveTimer);
+
+    container.removeEventListener('mousemove', onMouseMove);
+    container.removeEventListener('mouseenter', onMouseEnter);
+    container.removeEventListener('mouseleave', onMouseLeave);
+    container.removeEventListener('click', onClick);
+    window.removeEventListener('deviceorientation', onDeviceOrientation);
+    window.removeEventListener('resize', onResize);
+
+    unwatchWebcam();
+    unwatchModels();
+    unwatchProps();
+
+    stopWebcam();
+
+    material.dispose();
+    geometry.dispose();
+    if (composer) composer.dispose();
+    renderer.dispose();
+    if (container.contains(renderer.domElement)) {
+      container.removeChild(renderer.domElement);
+    }
+  };
+};
+
+const loadFaceModels = async (): Promise<void> => {
+  try {
+    await Promise.all([
+      faceapi.nets.tinyFaceDetector.loadFromUri(props.modelsPath),
+      faceapi.nets.faceLandmark68TinyNet.loadFromUri(props.modelsPath)
+    ]);
+    modelsReady.value = true;
+  } catch {
+    modelsReady.value = false;
+  }
+};
+
+onMounted(() => {
+  setupAnimation();
+  loadFaceModels();
+});
+
+onUnmounted(() => {
+  cleanupAnimation();
+});
+</script>