@bbki.ng/site 5.5.6 → 5.5.7

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @bbki.ng/site
 
+## 5.5.7
+
+### Patch Changes
+
+- 339de15: refactor effect layer
+- Updated dependencies [339de15]
+  - @bbki.ng/ui@0.2.7
+
 ## 5.5.6
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "description": "code behind bbki.ng",
   "main": "index.js",
   "type": "module",
@@ -14,7 +14,7 @@
     "react-dom": "^18.0.0",
     "react-router-dom": "6",
     "swr": "^2.2.5",
-    "@bbki.ng/ui": "0.2.6"
+    "@bbki.ng/ui": "0.2.7"
   },
   "devDependencies": {
     "@eslint/compat": "^1.0.0",

package/src/blog/components/effect-layer/EffectContextProvider.tsx

@@ -1,16 +1,33 @@
-import React, { createContext, ReactNode } from 'react';
+import React, { ReactNode, useContext, useMemo } from 'react';
 
-import { EffectLayer } from '@/components/effect-layer/EffectLayer';
+import { EffectLayer, grain, paper, spiral, watermark, Effect } from '@bbki.ng/ui';
 
-const EffectContext = createContext<any>({});
+import { GlobalLoadingContext } from '@/context/global_loading_state_provider';
+import { useFingerprint } from '@/hooks/use_fingerprint';
+
+const hashStr: string = typeof GLOBAL_COMMIT_HASH === 'string' ? GLOBAL_COMMIT_HASH : '0000000';
 
 export const EffectContextProvider = (props: { children: ReactNode }) => {
+  const { isLoading, isFontLoading } = useContext(GlobalLoadingContext);
+  const { deviceId } = useFingerprint();
+
+  const effects: Effect[] = useMemo(() => {
+    const wmLines = [hashStr];
+    if (deviceId) wmLines.push(deviceId);
+    wmLines.push('hello world');
+
+    return [
+      grain(),
+      paper(),
+      spiral({ active: isLoading || isFontLoading }),
+      watermark({ lines: wmLines }),
+    ];
+  }, [isLoading, isFontLoading, deviceId]);
+
   return (
-    <EffectContext.Provider value={{}}>
-      <>
-        <EffectLayer />
-        {props.children}
-      </>
-    </EffectContext.Provider>
+    <>
+      <EffectLayer effects={effects} />
+      {props.children}
+    </>
   );
 };

package/src/blog/components/effect-layer/EffectLayer.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { Canvas } from '@bbki.ng/ui';
-import frag from './main.frag';
-import vert from './shader.vert';
-import cls from 'classnames';
-import uniforms from './uniforms';
-import { useRender } from '@/components/effect-layer/hooks/useRender';
-
-export const EffectLayer = () => {
-  const canvasDefaultCls = cls(
-    'fixed',
-    'top-0',
-    'left-0',
-    'h-full',
-    'h-dvh',
-    'pointer-events-none',
-    'w-full',
-    'z-999'
-  );
-
-  const { onRender } = useRender();
-
-  return (
-    <Canvas
-      className={canvasDefaultCls}
-      uniforms={uniforms}
-      fragment={frag}
-      vertex={vert}
-      onRender={onRender}
-      style={{
-        height: '100lvh',
-      }}
-    />
-  );
-};

package/src/blog/components/effect-layer/effects/grain.frag

@@ -1,18 +0,0 @@
-// Integer-based hash, stable on mediump float and immune to precision loss
-float rand(vec2 co) {
-    vec2 seed = co * uResolution + fract(uProgress * vec2(12.453, 78.379));
-    vec3 p = fract(vec3(seed.xyx) * vec3(443.897, 441.423, 437.195));
-    p += dot(p, p.yzx + 19.19);
-    return fract((p.x + p.y) * p.z);
-}
-
-vec4 randGrain(vec2 uv) {
-    float n = rand(uv);
-    float intensity = (n - 0.5) * 0.05;
-    return vec4(vec3(0.0), abs(intensity) + 0.02);
-}
-
-void drawGrain(vec2 uv) {
-    vec4 grain = randGrain(uv);
-    gl_FragColor = grain + gl_FragColor * (1.0 - grain.a);
-}

package/src/blog/components/effect-layer/effects/paper.frag

@@ -1,50 +0,0 @@
-// Fine book paper texture — static, subtle fiber pattern
-// Simulates delicate diffuse micro-fiber scattering on white paper
-
-float paperHash(vec2 p) {
-    vec3 p3 = fract(vec3(p.xyx) * vec3(443.897, 441.423, 437.195));
-    p3 += dot(p3, p3.yzx + 19.19);
-    return fract((p3.x + p3.y) * p3.z);
-}
-
-float paperNoise(vec2 uv) {
-    vec2 i = floor(uv);
-    vec2 f = fract(uv);
-    // smooth interpolation
-    vec2 u = f * f * (3.0 - 2.0 * f);
-
-    float a = paperHash(i);
-    float b = paperHash(i + vec2(1.0, 0.0));
-    float c = paperHash(i + vec2(0.0, 1.0));
-    float d = paperHash(i + vec2(1.0, 1.0));
-
-    return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
-}
-
-// fBm with 5 octaves for dense, fine fiber detail
-float paperFBM(vec2 uv) {
-    float value = 0.0;
-    float amplitude = 0.5;
-    for (int i = 0; i < 3; i++) {
-        value += amplitude * paperNoise(uv);
-        uv *= 2.5;
-        amplitude *= 0.4;
-    }
-    return value;
-}
-
-void drawPaperTexture(vec2 uv) {
-    // Scale to physical pixels so texture density stays consistent across screens
-    vec2 texCoord = uv * uResolution / uDevicePixelRatio;
-
-    // Single high-frequency FBM — fine, uniform, no visible banding
-    float fiber = paperFBM(texCoord * 3.0);
-
-    // abs() for full symmetric coverage; low multiplier as quiet base layer
-    float alpha = abs(fiber - 0.5) * 0.05;
-
-    // Soft neutral gray (premultiplied) instead of pure black — avoids dirty look
-    float tone = 0.55;
-    vec4 paper = vec4(vec3(tone * alpha), alpha);
-    gl_FragColor = paper + gl_FragColor * (1.0 - alpha);
-}

package/src/blog/components/effect-layer/effects/spiral.frag

@@ -1,99 +0,0 @@
-uniform float uLoading;
-uniform float uSpiralProgress;
-uniform float uSpiralOpacity;
-
-const float PI2 = 3.141592653589793 * 2.0;
-
-vec3 spiralCurve(float _percent) {
-  const float _length = 0.3;
-  const float radius = 0.056;
-  float t = mod(_percent, 0.25) / 0.25;
-  t = mod(_percent, 0.25) - (2.0 * (1.0 - t) * t * -0.0185 + t * t * 0.25);
-  float x = _length * sin(PI2 * _percent);
-  float y = radius * cos(PI2 * 3.0 * _percent);
-
-  if (
-    floor(_percent / 0.25) == 0.0
-    || floor(_percent / 0.25) == 2.0
-  ) {
-    t = t * -1.0;
-  }
-  float z = radius * sin(PI2 * 2.0 * (_percent - t));
-  return vec3(x, y, z);
-}
-
-vec3 rotateXVec3(vec3 v, float angle) {
-  float c = cos(angle);
-  float s = sin(angle);
-  return vec3(
-    v.x,
-    v.y * c - v.z * s,
-    v.y * s + v.z * c
-  );
-}
-
-void drawSpiral(vec2 uv) {
-  if (uLoading < 0.5) {
-    return;
-  }
-
-  float aspect = uResolution.x / uResolution.y;
-  vec2 center = vec2(0.5, 0.6);
-  vec2 p = uv - center;
-  p.x *= aspect;
-
-  // Fixed visual size: spiral always appears ~120 CSS px wide, regardless of device.
-  // After aspect correction, 1 curve unit = uResolution.y / scale physical pixels,
-  // so spiral CSS width = 0.6 * cssHeight / scale. Solve for scale:
-  float cssHeight = uResolution.y / uDevicePixelRatio;
-  float targetCss = 80.0;
-  float scale = 0.6 * cssHeight / targetCss;
-  p *= scale;
-
-  // early exit: spiral fits within radius ~0.35 in curve space
-  if (length(p) > 0.5) {
-    return;
-  }
-
-  float minDist = 1.0;
-
-  const int SAMPLES = 80;
-  vec2 prevProjected;
-  for (int i = 0; i < SAMPLES; i++) {
-    float pct = float(i) / float(SAMPLES);
-    vec3 pos3d = spiralCurve(pct);
-    vec3 rotated = rotateXVec3(pos3d, uSpiralProgress);
-    vec2 projected = rotated.xy;
-
-    if (i > 0) {
-      // distance from point to line segment
-      vec2 ab = projected - prevProjected;
-      vec2 ap = p - prevProjected;
-      float t = clamp(dot(ap, ab) / dot(ab, ab), 0.0, 1.0);
-      vec2 closest = prevProjected + t * ab;
-      float d = distance(p, closest);
-      minDist = min(minDist, d);
-    }
-
-    prevProjected = projected;
-  }
-
-  // close the loop: connect last sample back to first
-  vec3 firstPos = spiralCurve(0.0);
-  vec3 firstRotated = rotateXVec3(firstPos, uSpiralProgress);
-  vec2 firstProjected = firstRotated.xy;
-  vec2 ab = firstProjected - prevProjected;
-  vec2 ap = p - prevProjected;
-  float tc = clamp(dot(ap, ab) / dot(ab, ab), 0.0, 1.0);
-  vec2 closest = prevProjected + tc * ab;
-  float dc = distance(p, closest);
-  minDist = min(minDist, dc);
-
-  // ~1.2 CSS px line width, device-independent
-  float lineWidth = 1.2 * scale / cssHeight;
-  float alpha = 1.0 - smoothstep(0.0, lineWidth, minDist);
-
-  float spiralAlpha = alpha * 0.8 * uSpiralOpacity;
-  gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.0), spiralAlpha);
-  gl_FragColor.a = max(gl_FragColor.a, spiralAlpha);
-}

package/src/blog/components/effect-layer/effects/watermark.frag

@@ -1,157 +0,0 @@
-// Bitmap-font watermark — 4×5 pixel hex glyphs (0-9, a-f)
-// Rendered at the bottom-left corner; meant to be drawn BEFORE grain
-// so that film-grain noise is composited on top of the text.
-
-uniform vec4 uHashChars;      // hex digit values for chars 0–3 (each 0.0–15.0)
-uniform vec4 uHashChars2;     // hex digit values for chars 4–6 (.w unused)
-uniform vec4 uFpChars1;       // fingerprint chars 0–3
-uniform vec4 uFpChars2;       // fingerprint chars 4–7
-uniform vec4 uFpChars3;       // fingerprint chars 8–11
-uniform vec4 uFpChars4;       // fingerprint chars 12–15
-uniform float uWatermarkHover; // 0.0 = idle (#f1f1f1), 1.0 = hovered (black)
-
-// Each glyph is a 4-wide × 5-tall bitmap packed into 20 bits of a float.
-// Bit layout (MSB → LSB): row0-col0 … row0-col3, row1-col0 … row4-col3
-// Row 0 = top of glyph.  Requires highp for exact integer representation.
-
-highp float charBitmap(float c) {
-    //        .##.  #..#  #..#  #..#  .##.
-    if (c < 0.5)  return 432534.0;  // 0
-    //        .#..  ##..  .#..  .#..  ###.
-    if (c < 1.5)  return 312398.0;  // 1
-    //        .##.  #..#  ..#.  .#..  ####
-    if (c < 2.5)  return 430671.0;  // 2
-    //        ###.  ...#  .##.  ...#  ###.
-    if (c < 3.5)  return 923166.0;  // 3
-    //        #..#  #..#  ####  ...#  ...#
-    if (c < 4.5)  return 630545.0;  // 4
-    //        ####  #...  ###.  ...#  ###.
-    if (c < 5.5)  return 1019422.0; // 5
-    //        .##.  #...  ###.  #..#  .##.
-    if (c < 6.5)  return 429718.0;  // 6
-    //        ####  ...#  ..#.  .#..  .#..
-    if (c < 7.5)  return 987716.0;  // 7
-    //        .##.  #..#  .##.  #..#  .##.
-    if (c < 8.5)  return 431766.0;  // 8
-    //        .##.  #..#  .###  ...#  .##.
-    if (c < 9.5)  return 431894.0;  // 9
-    //        .##.  #..#  ####  #..#  #..#
-    if (c < 10.5) return 434073.0;  // a
-    //        ###.  #..#  ###.  #..#  ###.
-    if (c < 11.5) return 958110.0;  // b
-    //        .###  #...  #...  #...  .###
-    if (c < 12.5) return 493703.0;  // c
-    //        ###.  #..#  #..#  #..#  ###.
-    if (c < 13.5) return 956830.0;  // d
-    //        ####  #...  ###.  #...  ####
-    if (c < 14.5) return 1019535.0; // e
-    //        ####  #...  ###.  #...  #...
-    return 1019528.0;               // f
-}
-
-float sampleChar(float c, vec2 p) {
-    // p in bitmap-pixel coords: x ∈ [0,4), y ∈ [0,5), origin = bottom-left
-    if (p.x < 0.0 || p.x >= 4.0 || p.y < 0.0 || p.y >= 5.0) return 0.0;
-
-    highp float bits = charBitmap(c);
-    float col = floor(p.x);       // 0 = left
-    float row = floor(p.y);       // 0 = bottom  (screen coords)
-    // Map to bit position: row 0 (bottom) → bits 3-0, row 4 (top) → bits 19-16
-    highp float idx = row * 4.0 + (3.0 - col);
-    return mod(floor(bits / exp2(idx)), 2.0);
-}
-
-float getHashChar(float i) {
-    if (i < 0.5) return uHashChars.x;
-    if (i < 1.5) return uHashChars.y;
-    if (i < 2.5) return uHashChars.z;
-    if (i < 3.5) return uHashChars.w;
-    if (i < 4.5) return uHashChars2.x;
-    if (i < 5.5) return uHashChars2.y;
-    return uHashChars2.z;
-}
-
-float getFpChar(float i) {
-    if (i < 0.5)  return uFpChars1.x;
-    if (i < 1.5)  return uFpChars1.y;
-    if (i < 2.5)  return uFpChars1.z;
-    if (i < 3.5)  return uFpChars1.w;
-    if (i < 4.5)  return uFpChars2.x;
-    if (i < 5.5)  return uFpChars2.y;
-    if (i < 6.5)  return uFpChars2.z;
-    if (i < 7.5)  return uFpChars2.w;
-    if (i < 8.5)  return uFpChars3.x;
-    if (i < 9.5)  return uFpChars3.y;
-    if (i < 10.5) return uFpChars3.z;
-    if (i < 11.5) return uFpChars3.w;
-    if (i < 12.5) return uFpChars4.x;
-    if (i < 13.5) return uFpChars4.y;
-    if (i < 14.5) return uFpChars4.z;
-    return uFpChars4.w;
-}
-
-void drawWatermark(vec2 uv) {
-    // Work in CSS (logical) pixels
-    vec2 pixel = gl_FragCoord.xy / uDevicePixelRatio;
-
-    // Layout constants
-    float scale  = 2.0;              // each bitmap pixel = 2 CSS px
-    float charW  = 4.0 * scale;      // 8 px per glyph
-    float charH  = 5.0 * scale;      // 10 px per glyph  (≈ 12 px visual)
-    float gap    = 3.0;              // 3 px gap between glyphs
-    float cellW  = charW + gap;      // 11 px per cell
-
-    float padX = 16.0;
-    float padY = 16.0;
-    float lineGap = 6.0;             // 6 px gap between lines
-
-    // ----- Line 1 (bottom): Git hash - 7 chars -----
-    {
-        float nChars = 7.0;
-        vec2 pos = pixel - vec2(padX, padY);
-        float totalW = nChars * cellW - gap;
-
-        if (pos.x >= 0.0 && pos.x < totalW && pos.y >= 0.0 && pos.y < charH) {
-            float ci = floor(pos.x / cellW);
-            if (ci < nChars) {
-                float localX = pos.x - ci * cellW;
-                if (localX < charW) {
-                    vec2 bp = vec2(localX, pos.y) / scale;
-                    float charCode = getHashChar(ci);
-                    float on = sampleChar(charCode, bp);
-                    if (on > 0.5) {
-                        float a   = 0.4;
-                        vec3  col = mix(vec3(0.945), vec3(0.0), uWatermarkHover);
-                        gl_FragColor = vec4(col * a, a) + gl_FragColor * (1.0 - a);
-                        return;
-                    }
-                }
-            }
-        }
-    }
-
-    // ----- Line 2 (above): Fingerprint - 16 chars -----
-    {
-        float nChars = 16.0;
-        float fpPadY = padY + charH + lineGap;
-        vec2 pos = pixel - vec2(padX, fpPadY);
-        float totalW = nChars * cellW - gap;
-
-        if (pos.x >= 0.0 && pos.x < totalW && pos.y >= 0.0 && pos.y < charH) {
-            float ci = floor(pos.x / cellW);
-            if (ci < nChars) {
-                float localX = pos.x - ci * cellW;
-                if (localX < charW) {
-                    vec2 bp = vec2(localX, pos.y) / scale;
-                    float charCode = getFpChar(ci);
-                    float on = sampleChar(charCode, bp);
-                    if (on > 0.5) {
-                        float a   = 0.4;
-                        vec3  col = mix(vec3(0.945), vec3(0.0), uWatermarkHover);
-                        gl_FragColor = vec4(col * a, a) + gl_FragColor * (1.0 - a);
-                    }
-                }
-            }
-        }
-    }
-}

package/src/blog/components/effect-layer/hooks/useFingerprintUniforms.ts

@@ -1,49 +0,0 @@
-import { useRef } from 'react';
-import { useFingerprint } from '@/hooks/use_fingerprint';
-
-export const useFingerprintUniforms = () => {
-  const { deviceId, loading } = useFingerprint();
-
-  const charsRef = useRef<number[] | null>(null);
-  const appliedRef = useRef(false);
-
-  if (!loading && deviceId && !charsRef.current) {
-    const hash = deviceId;
-    const chars = [...hash].map(c => parseInt(c, 16) || 0);
-    while (chars.length < 16) chars.push(0);
-    charsRef.current = chars;
-  }
-
-  const updateFingerprintUniforms = (inst: any) => {
-    if (!inst?.uniforms || appliedRef.current || !charsRef.current) {
-      return;
-    }
-
-    const chars = charsRef.current;
-
-    // Mutate the existing arrays instead of replacing them
-    inst.uniforms.uFpChars1.value[0] = chars[0];
-    inst.uniforms.uFpChars1.value[1] = chars[1];
-    inst.uniforms.uFpChars1.value[2] = chars[2];
-    inst.uniforms.uFpChars1.value[3] = chars[3];
-
-    inst.uniforms.uFpChars2.value[0] = chars[4];
-    inst.uniforms.uFpChars2.value[1] = chars[5];
-    inst.uniforms.uFpChars2.value[2] = chars[6];
-    inst.uniforms.uFpChars2.value[3] = chars[7];
-
-    inst.uniforms.uFpChars3.value[0] = chars[8];
-    inst.uniforms.uFpChars3.value[1] = chars[9];
-    inst.uniforms.uFpChars3.value[2] = chars[10];
-    inst.uniforms.uFpChars3.value[3] = chars[11];
-
-    inst.uniforms.uFpChars4.value[0] = chars[12];
-    inst.uniforms.uFpChars4.value[1] = chars[13];
-    inst.uniforms.uFpChars4.value[2] = chars[14];
-    inst.uniforms.uFpChars4.value[3] = chars[15];
-
-    appliedRef.current = true;
-  };
-
-  return { updateFingerprintUniforms };
-};

package/src/blog/components/effect-layer/hooks/useRender.ts

@@ -1,80 +0,0 @@
-import { useCallback, useContext, useRef } from 'react';
-import { useMousePosition } from '@/hooks/use_mouse_position';
-import { useResolution } from '@/components/effect-layer/hooks/useResolution';
-import { useWatermarkHover } from '@/components/effect-layer/hooks/useWatermarkHover';
-import { useFingerprintUniforms } from '@/components/effect-layer/hooks/useFingerprintUniforms';
-import { GlobalLoadingContext } from '@/context/global_loading_state_provider';
-
-const SPIRAL_ACCEL = 0.005;
-const SPIRAL_MAX_SPEED = 0.2;
-const FADE_SPEED = 0.04; // ~0→1 in 25 frames (~400ms at 60fps)
-const MIN_DURATION = 800;
-
-export const useRender = () => {
-  const pos = useMousePosition();
-  const resolution = useResolution();
-  const { isLoading, isFontLoading } = useContext(GlobalLoadingContext);
-  const loadingRef = useRef(false);
-  loadingRef.current = isLoading || isFontLoading;
-
-  const spiralSpeedRef = useRef(0);
-  const spiralOpacityRef = useRef(0);
-  const loadingStartRef = useRef(0);
-  const wasLoadingRef = useRef(false);
-
-  const { updateWatermarkHover } = useWatermarkHover();
-  const { updateFingerprintUniforms } = useFingerprintUniforms();
-
-  const onRender = useCallback((inst: any) => {
-    if (inst == null) {
-      return;
-    }
-
-    inst.uniforms.uResolution.value[0] = inst.gl.canvas.width;
-    inst.uniforms.uResolution.value[1] = inst.gl.canvas.height;
-
-    inst.uniforms.uMouse.value[0] = pos.current.x;
-    inst.uniforms.uMouse.value[1] = pos.current.y;
-
-    const now = performance.now();
-    const loading = loadingRef.current;
-
-    // track when loading starts
-    if (loading && !wasLoadingRef.current) {
-      loadingStartRef.current = now;
-    }
-    wasLoadingRef.current = loading;
-
-    // determine if spiral should be visible (loading OR within min duration)
-    const elapsed = now - loadingStartRef.current;
-    const inMinDuration = !loading && loadingStartRef.current > 0 && elapsed < MIN_DURATION;
-    const shouldShow = loading || inMinDuration;
-
-    // fade in/out
-    if (shouldShow) {
-      spiralOpacityRef.current = Math.min(1, spiralOpacityRef.current + FADE_SPEED);
-    } else {
-      spiralOpacityRef.current = Math.max(0, spiralOpacityRef.current - FADE_SPEED);
-      if (spiralOpacityRef.current === 0) {
-        loadingStartRef.current = 0;
-      }
-    }
-
-    inst.uniforms.uLoading.value[0] = spiralOpacityRef.current > 0 ? 1.0 : 0.0;
-    inst.uniforms.uSpiralOpacity.value[0] = spiralOpacityRef.current;
-
-    if (spiralOpacityRef.current > 0) {
-      // accelerate to max speed before fade out
-      const accel = inMinDuration ? SPIRAL_ACCEL * 4 : SPIRAL_ACCEL;
-      spiralSpeedRef.current = Math.min(SPIRAL_MAX_SPEED, spiralSpeedRef.current + accel);
-    } else {
-      spiralSpeedRef.current = 0;
-    }
-    inst.uniforms.uSpiralProgress.value[0] += spiralSpeedRef.current;
-
-    updateWatermarkHover(inst);
-    updateFingerprintUniforms(inst);
-  }, []);
-
-  return { onRender };
-};

package/src/blog/components/effect-layer/hooks/useResolution.ts

@@ -1,19 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-export const useResolution = () => {
-  const resolution = useRef<[number, number]>([window.innerWidth, window.innerHeight]);
-
-  const updateResolution = () => {
-    resolution.current = [window.innerWidth, window.innerHeight];
-  };
-
-  useEffect(() => {
-    window.addEventListener('resize', updateResolution);
-
-    return () => {
-      window.removeEventListener('resize', updateResolution);
-    };
-  }, []);
-
-  return resolution;
-};

package/src/blog/components/effect-layer/hooks/useWatermarkHover.ts

@@ -1,63 +0,0 @@
-import { useRef } from 'react';
-import { useMousePosition } from '@/hooks/use_mouse_position';
-
-// Watermark layout constants (must match watermark.frag)
-const WM_PAD_X = 16;
-const WM_PAD_Y = 16;
-const WM_SCALE = 2;
-const WM_CHAR_W = 4 * WM_SCALE; // 8
-const WM_CHAR_H = 5 * WM_SCALE; // 10
-const WM_GAP = 3;
-const WM_CELL_W = WM_CHAR_W + WM_GAP; // 11
-
-// Git hash line (bottom): 7 chars
-const WM_N_CHARS = 7;
-const WM_TOTAL_W = WM_N_CHARS * WM_CELL_W - WM_GAP; // 74
-
-// Fingerprint line (above): 16 chars
-const FP_N_CHARS = 16;
-const FP_TOTAL_W = FP_N_CHARS * WM_CELL_W - WM_GAP; // 173
-const LINE_GAP = 6; // vertical gap between lines
-
-// Combined bounds
-const MAX_W = Math.max(WM_TOTAL_W, FP_TOTAL_W);
-const TOTAL_H = WM_CHAR_H * 2 + LINE_GAP; // 26
-
-const WM_HOVER_PADDING = 4; // extra hit-area padding (px)
-const WM_HOVER_SPEED = 0.06; // ~0→1 in 17 frames (~280ms at 60fps)
-
-export const useWatermarkHover = () => {
-  const pos = useMousePosition();
-  const hoverRef = useRef(0);
-
-  const updateWatermarkHover = (inst: any) => {
-    // Detect mouse inside watermark bounding box (CSS pixels)
-    const viewportH = inst.gl.canvas.height / window.devicePixelRatio;
-    const mx = pos.current.x;
-    const my = pos.current.y;
-    // Convert clientY (top-down) to GL-style bottom-up for comparison
-    const myFromBottom = viewportH - my;
-
-    // The fingerprint line is above the git hash line
-    // Git hash starts at WM_PAD_Y from bottom
-    // Fingerprint starts at WM_PAD_Y + WM_CHAR_H + LINE_GAP from bottom
-    const fpPadY = WM_PAD_Y + WM_CHAR_H + LINE_GAP;
-    const maxPadY = Math.max(WM_PAD_Y, fpPadY);
-
-    const inWatermark =
-      mx >= WM_PAD_X - WM_HOVER_PADDING &&
-      mx <= WM_PAD_X + MAX_W + WM_HOVER_PADDING &&
-      myFromBottom >= WM_PAD_Y - WM_HOVER_PADDING &&
-      myFromBottom <= maxPadY + WM_CHAR_H + WM_HOVER_PADDING;
-
-    if (inWatermark) {
-      hoverRef.current = Math.min(1, hoverRef.current + WM_HOVER_SPEED);
-    } else {
-      hoverRef.current = Math.max(0, hoverRef.current - WM_HOVER_SPEED);
-    }
-
-    inst.uniforms.uWatermarkHover.value[0] = hoverRef.current;
-  };
-
-  return { updateWatermarkHover };
-};

package/src/blog/components/effect-layer/main.frag

@@ -1,27 +0,0 @@
-precision highp float;
-
-uniform vec2 uResolution;
-uniform float uProgress;
-uniform float uDevicePixelRatio;
-
-#define DefaultColor vec4(0.0, 0.0, 0.0, 0.0)
-
-#include "effects/grain.frag"
-#include "effects/paper.frag"
-#include "effects/spiral.frag"
-#include "effects/watermark.frag"
-
-
-void main() {
-  vec2 uv = gl_FragCoord.xy / uResolution;
-
-  gl_FragColor = DefaultColor;
-
-  drawWatermark(uv);
-
-  drawPaperTexture(uv);
-
-  drawGrain(uv);
-
-  drawSpiral(uv);
-}

package/src/blog/components/effect-layer/shader.vert

@@ -1,9 +0,0 @@
-attribute vec3 aPosition;
-
-uniform mat4 uProjectionMatrix;
-uniform mat4 uModelMatrix;
-uniform mat4 uViewMatrix;
-
-void main(){
-    gl_Position= uProjectionMatrix * uModelMatrix * uViewMatrix * vec4(aPosition, 1.);
-}

package/src/blog/components/effect-layer/shapes/circle.frag

@@ -1,32 +0,0 @@
-uniform vec2 uMouse;
-
-vec4 sdfCircle(vec2 uv, float r, vec2 center) {
-    float x = uv.x;
-    float y = uv.y;
-
-    float d = distance(vec2(x, y), center) - r;
-
-    return d > 0. ? DefaultColor : vec4(1.0, 0.0, 1.0, 1.0);
-}
-
-vec4 sdfSquare(vec2 uv, vec4 rect) {
-    float x = uv.x;
-    float y = uv.y;
-
-    float dx = max(abs(x - rect.x) - rect.z, 0.);
-    float dy = max(abs(y - rect.y) - rect.w, 0.);
-
-    float d = max(dx, dy);
-
-    return d > 0. ? DefaultColor : vec4(1.0, 0.0, 1.0, 1.0);
-
-}
-
-void drawCircleUnderMouse(vec2 uv, float r) {
-    // flip uMouse vertically
-    vec2 normalizedMouse = vec2(uMouse.x, uResolution.y - uMouse.y) * uDevicePixelRatio / uResolution;
-
-    // sdfCircle transition to sdfSquare
-
-    // gl_FragColor = sdfSquare(uv, vec4(normalizedMouse, 0.1, 0.1));
-}

package/src/blog/components/effect-layer/shapes/heart.frag

@@ -1,11 +0,0 @@
-float sdHeart(vec2 p)
-{
-    p.x = abs(p.x);
-
-    if( p.y+p.x>1.0 ) {
-        return sqrt(dot2(p-vec2(0.25,0.75))) - sqrt(2.0)/4.0;
-    }
-
-    return sqrt(min(dot2(p-vec2(0.00,1.00)),
-                    dot2(p-0.5*max(p.x+p.y,0.0)))) * sign(p.x-p.y);
-}

package/src/blog/components/effect-layer/shapes/spiral.frag

@@ -1,14 +0,0 @@
-void cosCurve(vec2 uv) {
-    float curve = 0.1 * cos((19.25 * uv.x + 3.141592654 * 0.5) + (2.0 * uProgress));
-
-    vec2 p = uv - 0.5;
-
-    float d = length(p);
-
-    gl_FragColor = d > curve ? vec4(1.0) : vec4(0.0);
-
-}
-
-void spiral(vec2 uv) {
-    cosCurve(uv);
-}

package/src/blog/components/effect-layer/uniforms.ts

@@ -1,62 +0,0 @@
-const hashStr: string = typeof GLOBAL_COMMIT_HASH === 'string' ? GLOBAL_COMMIT_HASH : '0000000';
-const hc = [...hashStr].map(c => parseInt(c, 16) || 0);
-
-export default {
-  uResolution: {
-    type: 'vec2',
-    value: [innerWidth, innerHeight],
-  },
-  uDevicePixelRatio: {
-    type: 'float',
-    value: [devicePixelRatio],
-  },
-  pi: {
-    type: 'float',
-    value: [Math.PI],
-  },
-  uMouse: {
-    type: 'vec2',
-    value: [0, 0],
-  },
-  uLoading: {
-    type: 'float',
-    value: [0.0],
-  },
-  uSpiralProgress: {
-    type: 'float',
-    value: [0.0],
-  },
-  uSpiralOpacity: {
-    type: 'float',
-    value: [0.0],
-  },
-  uHashChars: {
-    type: 'vec4',
-    value: [hc[0] ?? 0, hc[1] ?? 0, hc[2] ?? 0, hc[3] ?? 0],
-  },
-  uHashChars2: {
-    type: 'vec4',
-    value: [hc[4] ?? 0, hc[5] ?? 0, hc[6] ?? 0, 0],
-  },
-  // Fingerprint hash uniforms (16 characters, split into 4 vec4)
-  uFpChars1: {
-    type: 'vec4',
-    value: [0, 0, 0, 0],
-  },
-  uFpChars2: {
-    type: 'vec4',
-    value: [0, 0, 0, 0],
-  },
-  uFpChars3: {
-    type: 'vec4',
-    value: [0, 0, 0, 0],
-  },
-  uFpChars4: {
-    type: 'vec4',
-    value: [0, 0, 0, 0],
-  },
-  uWatermarkHover: {
-    type: 'float',
-    value: [0.0],
-  },
-};