@bbki.ng/site 5.4.36 → 5.4.38

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @bbki.ng/site
 
+## 5.4.38
+
+### Patch Changes
+
+- 22ba590: fix grid layout
+- c66ab86: update shader
+- Updated dependencies [22ba590]
+  - @bbki.ng/ui@0.1.12
+
+## 5.4.37
+
+### Patch Changes
+
+- 1ba88b0: fix margin
+- Updated dependencies [1ba88b0]
+  - @bbki.ng/ui@0.1.11
+
 ## 5.4.36
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "5.4.36",
+  "version": "5.4.38",
   "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.10"
+    "@bbki.ng/ui": "0.1.12"
   },
   "devDependencies": {
     "@eslint/compat": "^1.0.0",

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

@@ -12,10 +12,7 @@ vec4 randGrain(vec2 uv) {
     return vec4(vec3(0.0), abs(intensity) + 0.02);
 }
 
-void drawGrainOnNav(vec2 uv) {
-//    float navHeight = 64. * uDevicePixelRatio / uResolution.y;
-//
-//    if (1. - uv.y < navHeight) {
-        gl_FragColor = randGrain(uv);
-//    }
+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,4 +1,5 @@
-// Fine book paper texture — static, white-only, subtle fiber pattern
+// 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));
@@ -20,14 +21,14 @@ float paperNoise(vec2 uv) {
     return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
 }
 
-// fBm with 3 octaves for fine fiber detail
+// 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.2;
-        amplitude *= 0.45;
+        uv *= 2.5;
+        amplitude *= 0.4;
     }
     return value;
 }
@@ -36,17 +37,14 @@ void drawPaperTexture(vec2 uv) {
     // Scale to physical pixels so texture density stays consistent across screens
     vec2 texCoord = uv * uResolution / uDevicePixelRatio;
 
-    // Fine-scale fiber pattern (~1px detail at 1x)
-    float fiber = paperFBM(texCoord * 0.8);
+    // Single high-frequency FBM — fine, uniform, no visible banding
+    float fiber = paperFBM(texCoord * 3.0);
 
-    // Normalize to center around 0 and keep very subtle
-    float tex = (fiber - 0.5) * 0.06;
+    // abs() for full symmetric coverage; low multiplier as quiet base layer
+    float alpha = abs(fiber - 0.5) * 0.05;
 
-    // White-only: positive values add slight white highlights (paper fiber ridges)
-    // Negative values stay transparent
-    float alpha = max(tex, 0.0);
-
-    // Blend paper texture under the grain effect
-    vec4 paper = vec4(1.0, 1.0, 1.0, alpha);
-    gl_FragColor = paper + gl_FragColor * (1.0 - paper.a * 0.3);
+    // 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/main.frag

@@ -22,7 +22,7 @@ void main() {
   drawPaperTexture(uv);
 
   // draw grain on nav
-  drawGrainOnNav(uv);
+  drawGrain(uv);
 
   // draw loading spiral
   drawSpiral(uv);

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

@@ -81,7 +81,7 @@ const Streaming = () => {
       </Panel>
       {scrolled ? (
         <Button
-          className="mt-32"
+          className="mt-16"
           transparent={!showScrollBtn}
           onClick={() => {
             bbMsgHistoryRef.current?.scrollToBottom();