@bbki.ng/site 1.6.4 → 1.7.1

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @bbki.ng/site
 
+## 1.7.1
+
+## 1.7.0
+
 ## 1.6.4
 
 ## 1.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "1.6.4",
+  "version": "1.7.1",
   "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.3",
+    "@bbki.ng/components": "workspace:2.5.4",
     "@supabase/supabase-js": "^1.35.4",
     "classnames": "2.3.1",
     "react": "^18.0.0",
@@ -28,7 +28,7 @@
     "swr": "^2.2.5"
   },
   "devDependencies": {
-    "@bbki.ng/stylebase": "workspace:0.4.3",
+    "@bbki.ng/stylebase": "workspace:0.4.4",
     "@mdx-js/mdx": "2.0.0-next.9",
     "@mdx-js/react": "^1.6.22",
     "@mdx-js/rollup": "3.0.0",
@@ -58,6 +58,7 @@
     "ts-jest": "^27.1.1",
     "typescript": "^4.5.4",
     "vite": "5.0.0",
+    "vite-plugin-glsl": "1.2.1",
     "vite-plugin-mdx": "^3.5.8",
     "vite-plugin-pwa": "0.19",
     "workbox-window": "^6.3.0"

package/src/app.tsx

@@ -65,7 +65,6 @@ export const App = () => {
   return (
     <SWR>
       <HotKeyNav>
-        {/*<Stickers />*/}
         <GlobalLoadingStateProvider>
           <Routes>
             <Route path="/" element={<Layout />}>

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

@@ -0,0 +1,32 @@
+import React, { useCallback, useEffect } from "react";
+import { Canvas } from "@bbki.ng/components";
+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",
+    "pointer-events-none",
+    "w-full",
+    "z-[999]"
+  );
+
+  const { onRender } = useRender();
+
+  return (
+    <Canvas
+      style={{ opacity: 0.1 }}
+      className={canvasDefaultCls}
+      uniforms={uniforms}
+      fragment={frag}
+      vertex={vert}
+      onRender={onRender}
+    />
+  );
+};

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

@@ -0,0 +1,42 @@
+float rand(vec2 co){
+    return fract(
+        sin(
+            dot(
+                co.xy,
+                vec2(12.9898, 78.233)
+            )
+        ) * 43758.5453
+    );
+}
+
+vec4 grain(vec4 fragColor, vec2 uv){
+    vec4 color = fragColor;
+    float diff = (rand(uv) - 0.0) * 0.09;
+    color.r += diff;
+    color.g += diff;
+    color.b += diff;
+    return color;
+}
+
+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)))
+    );
+
+    vec4 result = grain(color, uv);
+    result.a *= 0.8;
+
+    return result;
+}
+
+void drawGrainOnNav(vec2 uv) {
+    float navHeight = 64. * uDevicePixelRatio / uResolution.y;
+
+    if (uv.y <= navHeight) {
+        gl_FragColor = randGrain(uv);
+    }
+}
+

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

@@ -0,0 +1,19 @@
+import {useCallback, useState} from "react";
+import {useMousePosition} from "@/hooks/use_mouse_position";
+
+export const useRender = () => {
+  const [inst, setInst] = useState<any>(null)
+  const pos = useMousePosition();
+
+  const onRender = useCallback((p: any) => {
+    if (inst === null) {
+      setInst(p)
+      return;
+    }
+
+    inst.uniforms.uMouse.value[0] = pos.current.x;
+    inst.uniforms.uMouse.value[1] = pos.current.y;
+  }, [inst]);
+
+  return { inst, onRender }
+}

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

@@ -0,0 +1,27 @@
+precision mediump float;
+
+uniform vec2 uResolution;
+uniform float uProgress;
+uniform float uDevicePixelRatio;
+uniform vec2 uCenter;
+uniform vec2 uOffset;
+
+#define DefaultColor vec4(0.0, 0.0, 0.0, 0.0)
+#define CenterPos uCenter * uDevicePixelRatio / uResolution
+
+#include "effects/grain.frag"
+//#include "shapes/circle.frag"
+
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / uResolution;
+
+  // set default color
+  gl_FragColor = DefaultColor;
+
+  // draw circle on mouse
+  // drawCircleUnderMouse(uv, 0.05);
+
+  // draw grain on nav
+  drawGrainOnNav(uv);
+}

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

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

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

@@ -0,0 +1,32 @@
+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/components/effect-layer/shapes/heart.frag

@@ -0,0 +1,11 @@
+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/components/effect-layer/uniforms.ts

@@ -0,0 +1,32 @@
+export default {
+  uResolution: {
+    type: "vec2",
+    value: [
+      Math.min(innerWidth, innerHeight),
+      Math.min(innerWidth, innerHeight),
+    ],
+  },
+  uDevicePixelRatio: {
+    type: "float",
+    value: [devicePixelRatio],
+  },
+  uOffset: {
+    type: "vec2",
+    value: [
+      (innerWidth / innerHeight) > 1 ? (innerWidth - innerHeight) / 2 : 0,
+      (innerWidth / innerHeight) < 1 ? (innerHeight - innerWidth) / 2 : 0,
+    ],
+  },
+  pi: {
+    type: "float",
+    value: [Math.PI],
+  },
+  uCenter: {
+    type: "vec2",
+    value: [innerWidth / 2, innerHeight / 2],
+  },
+  uMouse: {
+    type: "vec2",
+    value: [0, 0],
+  }
+}

package/src/hooks/use_mouse_position.ts

@@ -0,0 +1,17 @@
+import {useEffect, useRef} from "react";
+
+export const useMousePosition = () => {
+  const posRef = useRef<{x: number, y:number}>({x: 0, y: 0});
+  useEffect(() => {
+    const updateMousePosition = (e: MouseEvent) => {
+      posRef.current = {
+        x: e.clientX,
+        y: e.clientY,
+      };
+    };
+    window.addEventListener("mousemove", updateMousePosition);
+    return () => window.removeEventListener("mousemove", updateMousePosition);
+  }, []);
+
+  return posRef;
+}

package/src/main.tsx

@@ -7,6 +7,7 @@ import "@bbki.ng/components/style";
 import App from "./app";
 import "./main.css";
 import Logger from "@/components/Logger";
+import {EffectLayer} from "@/components/effect-layer/EffectLayer";
 
 const container = document.getElementById("root") as Element;
 const root = createRoot(container);
@@ -18,6 +19,7 @@ root.render(
       <Toaster />
       <Logger />
       <ReloadPrompt />
+      <EffectLayer />
     </Router>
   </React.StrictMode>
 );

package/src/pages/cover/index.tsx

@@ -1,25 +1,28 @@
 import React from "react";
 import { CenterLinkList } from "@/components";
+import {EffectLayer} from "@/components/effect-layer/EffectLayer";
 
 export const Cover = (props: { className: string }) => {
   return (
-    <CenterLinkList
-      className="select-none"
-      links={[
-        {
-          to: "/projects",
-          name: "cd ./projects",
-        },
-        {
-          to: "/blog",
-          name: "cd ./blog",
-        },
-        {
-          to: "/now",
-          name: "cd ./now",
-        },
-      ]}
-      title=""
-    />
+    <>
+      <CenterLinkList
+        className="select-none"
+        links={[
+          {
+            to: "/projects",
+            name: "cd ./projects",
+          },
+          {
+            to: "/blog",
+            name: "cd ./blog",
+          },
+          {
+            to: "/now",
+            name: "cd ./now",
+          },
+        ]}
+        title=""
+      />
+    </>
   );
 };

package/src/pages/extensions/png/png_projects.tsx

@@ -8,6 +8,7 @@ import { ImageUploader } from "@/components/ImageUploader";
 import classnames from "classnames";
 import { ImageRenderer } from "@bbki.ng/components/lib";
 import { ImgCtxMenu } from "@/components/Img_ctx_menu";
+import {EffectLayer} from "@/components/effect-layer/EffectLayer";
 
 const ProjectDetail = () => {
   const { id } = useParams();

package/src/types/glsl.d.ts

@@ -0,0 +1,8 @@
+declare module '*.frag' {
+  const file: string;
+  export default file;
+}
+declare module '*.vert' {
+  const file: string;
+  export default file;
+}

package/vite.config.js

@@ -11,6 +11,7 @@ import rehypeSlug from "rehype-slug";
 import rehypeHighlight from "rehype-highlight";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import react from "@vitejs/plugin-react";
+import glsl from 'vite-plugin-glsl';
 
 const options = {
   remarkPlugins: [
@@ -51,6 +52,7 @@ export default defineConfig({
   plugins: [
     react(),
     mdx(options),
+    glsl(),
     VitePWA({
       injectRegister: "auto",
       includeAssets: [