@bbki.ng/site 5.4.34 → 5.4.35

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @bbki.ng/site
 
+## 5.4.35
+
+### Patch Changes
+
+- 3d9b106: add paper texture
+- Updated dependencies [3d9b106]
+  - @bbki.ng/ui@0.1.9
+
 ## 5.4.34
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "5.4.34",
+  "version": "5.4.35",
   "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.8"
+    "@bbki.ng/ui": "0.1.9"
   },
   "devDependencies": {
     "@eslint/compat": "^1.0.0",

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

@@ -1,36 +1,15 @@
-float rand(vec2 co){
-    return fract(
-        sin(
-            dot(
-                co.xy,
-                vec2(12.9898, 78.233) * 2.
-            ) * uProgress
-        ) * 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;
+// 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) {
-    vec4 color = vec4(
-        rand(uv) * 0.1,
-        rand(uv) * 0.1,
-        rand(uv) * 0.1,
-        0.1
-    );
-
-    vec4 result = grain(color, uv) * 0.4;
-
-    result.a *= 0.8;
-
-    return result;
+    float n = rand(uv);
+    float intensity = (n - 0.5) * 0.05;
+    return vec4(vec3(0.0), abs(intensity) + 0.02);
 }
 
 void drawGrainOnNav(vec2 uv) {

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

@@ -0,0 +1,52 @@
+// Fine book paper texture — static, white-only, subtle fiber pattern
+
+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 3 octaves for 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;
+    }
+    return value;
+}
+
+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);
+
+    // Normalize to center around 0 and keep very subtle
+    float tex = (fiber - 0.5) * 0.06;
+
+    // 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);
+}

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/paper.frag"
 #include "effects/spiral.frag"
 //#include "shapes/circle.frag"
 
@@ -17,8 +18,8 @@ void main() {
   // set default color
   gl_FragColor = DefaultColor;
 
-  // draw circle on mouse
-  // drawCircleUnderMouse(uv, 0.05);
+  // draw paper texture (base layer)
+  drawPaperTexture(uv);
 
   // draw grain on nav
   drawGrainOnNav(uv);