@bbki.ng/site 1.7.9 → 1.7.10

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @bbki.ng/site
 
+## 1.7.10
+
 ## 1.7.9
 
 ## 1.7.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "1.7.9",
+  "version": "1.7.10",
   "description": "code behind bbki.ng",
   "main": "index.js",
   "scripts": {
@@ -16,7 +16,7 @@
     "url": "git+https://github.com/bbbottle/bbki.ng.git"
   },
   "dependencies": {
-    "@bbki.ng/components": "workspace:2.5.7",
+    "@bbki.ng/components": "workspace:2.5.8",
     "@supabase/supabase-js": "^1.35.4",
     "classnames": "2.3.1",
     "react": "^18.0.0",

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

@@ -21,9 +21,6 @@ export const EffectLayer = () => {
 
   return (
     <Canvas
-      style={{
-        opacity: 0.1,
-      }}
       className={canvasDefaultCls}
       uniforms={uniforms}
       fragment={frag}

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

@@ -3,8 +3,8 @@ float rand(vec2 co){
         sin(
             dot(
                 co.xy,
-                vec2(12.9898, 78.233)
-            )
+                vec2(12.9898, 78.233) * 2.
+            ) * uProgress
         ) * 43758.5453
     );
 }
@@ -20,23 +20,24 @@ vec4 grain(vec4 fragColor, vec2 uv){
 
 vec4 randGrain(vec2 uv) {
     vec4 color = vec4(
-        rand(uv * abs(sin(uProgress))) * 0.09,
-        rand(uv * abs(sin(uProgress))) * 0.09,
-        rand(uv * abs(sin(uProgress))) * 0.09,
-        rand(uv * abs(sin(uProgress)))
+        rand(uv) * 0.1,
+        rand(uv) * 0.1,
+        rand(uv) * 0.1,
+        0.1
     );
 
-    vec4 result = grain(color, uv);
-    result.a *= 0.8;
+    vec4 result = grain(color, uv) * 0.4;
+
+    result.a *= 0.2;
 
     return result;
 }
 
 void drawGrainOnNav(vec2 uv) {
-    float navHeight = 64. * uDevicePixelRatio / uResolution.y;
-
-    if (1. * uDevicePixelRatio - uv.y < navHeight) {
+//    float navHeight = 64. * uDevicePixelRatio / uResolution.y;
+//
+//    if (1. - uv.y < navHeight) {
         gl_FragColor = randGrain(uv);
-    }
+//    }
 }
 

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

@@ -3,25 +3,23 @@ import { useMousePosition } from "@/hooks/use_mouse_position";
 import { useResolution } from "@/components/effect-layer/hooks/useResolution";
 
 export const useRender = () => {
-  const [inst, setInst] = useState<any>(null);
   const pos = useMousePosition();
   const resolution = useResolution();
 
   const onRender = useCallback(
-    (p: any) => {
-      if (inst === null) {
-        setInst(p);
+    (inst: any) => {
+      if (inst == null) {
         return;
       }
 
-      inst.uniforms.uResolution.value[0] = resolution.current[0];
-      inst.uniforms.uResolution.value[1] = resolution.current[1];
+      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;
     },
-    [inst]
+    []
   );
 
-  return { inst, onRender };
+  return { onRender };
 };

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

@@ -5,23 +5,16 @@ export const useResolution = () => {
     window.innerWidth,
     window.innerHeight,
   ]);
-  useEffect(() => {
-    const updateResolution = () => {
-      resolution.current = [window.innerWidth, window.innerHeight];
-    };
-
-    window.addEventListener("resize", updateResolution);
 
-    // touch move
-    window.addEventListener("touchmove", updateResolution);
+  const updateResolution = () => {
+    resolution.current = [window.innerWidth, window.innerHeight];
+  };
 
-    // scroll
-    window.addEventListener("scroll", updateResolution);
+  useEffect(() => {
+    window.addEventListener("resize", updateResolution);
 
     return () => {
       window.removeEventListener("resize", updateResolution);
-      window.removeEventListener("touchmove", updateResolution);
-      window.removeEventListener("scroll", updateResolution);
     };
   }, []);