@bbki.ng/site 5.4.26 → 5.4.27

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @bbki.ng/site
 
+## 5.4.27
+
+### Patch Changes
+
+- 1ab4d7c: update animation
+- Updated dependencies [1ab4d7c]
+  - @bbki.ng/ui@0.1.2
+
 ## 5.4.26
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "5.4.26",
+  "version": "5.4.27",
   "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.1.1"
+    "@bbki.ng/ui": "0.1.2"
   },
   "devDependencies": {
     "@eslint/compat": "^1.0.0",

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

@@ -1,4 +1,5 @@
 import React, { createContext, ReactNode } from 'react';
+
 import { EffectLayer } from '@/components/effect-layer/EffectLayer';
 
 const EffectContext = createContext<any>({});

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

@@ -0,0 +1,93 @@
+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;
+
+  float scale = 4.0;
+  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);
+
+  float lineWidth = 0.002;
+  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/hooks/useRender.ts

@@ -1,10 +1,24 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useContext, useRef } from 'react';
 import { useMousePosition } from '@/hooks/use_mouse_position';
 import { useResolution } from '@/components/effect-layer/hooks/useResolution';
+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 onRender = useCallback((inst: any) => {
     if (inst == null) {
@@ -16,6 +30,42 @@ export const useRender = () => {
 
     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;
   }, []);
 
   return { onRender };

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

@@ -7,6 +7,7 @@ uniform float uDevicePixelRatio;
 #define DefaultColor vec4(0.0, 0.0, 0.0, 0.0)
 
 #include "effects/grain.frag"
+#include "effects/spiral.frag"
 //#include "shapes/circle.frag"
 
 
@@ -21,4 +22,7 @@ void main() {
 
   // draw grain on nav
   drawGrainOnNav(uv);
+
+  // draw loading spiral
+  drawSpiral(uv);
 }

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

@@ -15,4 +15,16 @@ export default {
     type: 'vec2',
     value: [0, 0],
   },
+  uLoading: {
+    type: 'float',
+    value: [0.0],
+  },
+  uSpiralProgress: {
+    type: 'float',
+    value: [0.0],
+  },
+  uSpiralOpacity: {
+    type: 'float',
+    value: [0.0],
+  },
 };

package/src/blog/pages/streaming/index.tsx

@@ -62,11 +62,7 @@ const Streaming = () => {
     };
   }, [isLoading, formattedData]);
 
-  if (isError) {
-    return <div className="p-8 text-center text-gray-500">加载失败</div>;
-  }
-
-  if (isLoading) {
+  if (isLoading || isError) {
     return null;
   }