@bbki.ng/components 1.5.50 → 2.0.0

package/dist/index.js

@@ -1070,7 +1070,7 @@ var import_react23 = __toESM(require("react"));
 
 // src/loading-spiral/createSettings.ts
 var createSettings = (settings) => {
-  const { canvas, step = 0.1 } = settings;
+  const { canvas, step = 0.09 } = settings;
   const uniforms = {
     uProgress: {
       type: "float",
@@ -1079,6 +1079,7 @@ var createSettings = (settings) => {
   };
   return {
     uniforms,
+    devicePixelRatio: window.devicePixelRatio,
     shouldRender: true,
     canvas,
     onRender: (r) => {
@@ -1090,14 +1091,38 @@ var createSettings = (settings) => {
 
 // src/loading-spiral/constants.ts
 var VERTEX_SHADER = `
-  attribute vec3 ${"aPositionStart" /* POSITION_START */};
   attribute vec3 ${"aColor" /* COLOR */};
   attribute float ${"aOffsetY" /* OFFSET_Y */};
+  attribute float ${"aPercent" /* PERCENT */};
+  attribute float ${"aLength" /* LENGTH */};
+  attribute float ${"aPointSize" /* POINT_SIZE */};
+
   uniform mat4 uProjectionMatrix;
   uniform mat4 uModelMatrix;
   uniform mat4 uViewMatrix;
   uniform float uProgress;
+
   varying vec3 vColor;
+  
+  vec3 curve(float _percent, float _length) {
+    const float PI2 = 3.141592653589793 * 2.0;
+    float radius = 0.028 / 0.15 * _length;
+
+    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);
+  }
+
   mat4 rotateX(float _angle){
     return mat4(
       1.0, 0.0, 0.0, 0.0,
@@ -1106,22 +1131,7 @@ var VERTEX_SHADER = `
       0.0, 0.0, 0.0, 1.0
     );
   }
-  mat4 rotateY(float _angle){
-    return mat4(
-      cos(_angle), 0.0, sin(_angle), 0.0,
-      0.0, 1.0, 0.0, 0.0,
-      -sin(_angle), 0.0, cos(_angle), 0.0,
-      0.0, 0.0, 0.0, 1.0
-    );
-  }
-  mat4 rotateZ(float _angle){
-    return mat4(
-      cos(_angle), -sin(_angle), 0.0, 0.0,
-      sin(_angle), cos(_angle), 0.0, 0.0,
-      0.0, 0.0, 1.0, 0.0,
-      0.0, 0.0, 0.0, 1.0
-    );
-  }
+
   mat4 translateY(float _offset){
     return mat4(
       1.0, 0.0, 0.0, 0.0,
@@ -1130,16 +1140,22 @@ var VERTEX_SHADER = `
       0.0, 0.0, 0.0, 1.0
     );
   }
+  
   void main(){
-    gl_Position = uProjectionMatrix * uModelMatrix * uViewMatrix * rotateX(uProgress) * vec4(${"aPositionStart" /* POSITION_START */}, 1.0) * translateY(${"aOffsetY" /* OFFSET_Y */});
-    gl_PointSize = 1.0;
+    gl_Position = uProjectionMatrix
+     * uModelMatrix
+     * uViewMatrix
+     * rotateX(uProgress)
+     * vec4(curve(${"aPercent" /* PERCENT */}, ${"aLength" /* LENGTH */}), 1.0)
+     * translateY(${"aOffsetY" /* OFFSET_Y */});
+
+    gl_PointSize = ${"aPointSize" /* POINT_SIZE */};
     vColor = ${"aColor" /* COLOR */};
   }
 `;
 var FRAGMENT_SHADER = `
   precision mediump float;
   uniform float uProgress;
- 
   varying vec3 vColor;
   void main(){
     gl_FragColor = vec4(vColor, 1.0);
@@ -1154,30 +1170,23 @@ var rgba = (val) => {
 
 // src/loading-spiral/createOptions.ts
 var DEFAULT_OPT = {
-  multiplier: 5e4,
+  multiplier: 5e3,
   color: [209, 213, 219, 1],
   offset: -0.3,
-  length: 0.15
+  length: 0.3
 };
 var createOptions = (opt = DEFAULT_OPT) => {
   const { multiplier, color, length, offset = -1 * 0.3 } = opt;
-  const radius = 0.028 / 0.15 * length;
   const attributes = [
     {
-      name: "aPositionStart" /* POSITION_START */,
-      data: (index, total) => {
-        const percent = index / total;
-        const pi2 = Math.PI * 2;
-        let x = length * Math.sin(pi2 * percent), y = radius * Math.cos(pi2 * 3 * percent), z, t;
-        t = percent % 0.25 / 0.25;
-        t = percent % 0.25 - (2 * (1 - t) * t * -0.0185 + t * t * 0.25);
-        if (Math.floor(percent / 0.25) == 0 || Math.floor(percent / 0.25) == 2) {
-          t *= -1;
-        }
-        z = radius * Math.sin(pi2 * 2 * (percent - t));
-        return [x, y, z];
-      },
-      size: 3
+      name: "aPercent" /* PERCENT */,
+      data: (i, total) => [i / total],
+      size: 1
+    },
+    {
+      name: "aLength" /* LENGTH */,
+      data: () => [length],
+      size: 1
     },
     {
       name: "aColor" /* COLOR */,
@@ -1188,6 +1197,11 @@ var createOptions = (opt = DEFAULT_OPT) => {
       name: "aOffsetY" /* OFFSET_Y */,
       data: () => [offset],
       size: 1
+    },
+    {
+      name: "aPointSize" /* POINT_SIZE */,
+      data: () => [window.devicePixelRatio * 1.5],
+      size: 1
     }
   ];
   return {
@@ -1209,7 +1223,7 @@ var useResizedCanvasRef = (maxSize) => {
     if (!canvas || !container)
       return;
     const { width, height } = container.getBoundingClientRect();
-    const canvasSize = Math.max(width, height);
+    const canvasSize = Math.min(width, height);
     const size = Math.min(canvasSize, maxSize);
     canvas.setAttribute("width", `${size}`);
     canvas.setAttribute("height", `${size}`);
@@ -1231,19 +1245,15 @@ var LoadingSpiral = (props) => {
     const phenomenon = new import_phenomenon.default({
       settings: createSettings({ canvas: canvasRef.current, step }),
       context: {
-        alpha: true,
         antialias: true
       }
     });
     phenomenon.add("spiral", createOptions(Object.assign({}, DEFAULT_OPT, rest)));
   }, []);
-  return /* @__PURE__ */ import_react23.default.createElement("div", {
-    className: (0, import_classnames13.default)("h-full w-full overflow-hidden flex justify-center items-center", className),
-    ref: containerRef
-  }, /* @__PURE__ */ import_react23.default.createElement("canvas", {
+  return /* @__PURE__ */ import_react23.default.createElement("canvas", {
     ref: canvasRef,
-    className: "relative"
-  }));
+    className: (0, import_classnames13.default)("h-full w-full overflow-hidden flex justify-center items-center", className)
+  });
 };
 module.exports = __toCommonJS(src_exports);
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.mjs

@@ -1011,7 +1011,7 @@ import React21, { useEffect as useEffect4 } from "react";
 
 // src/loading-spiral/createSettings.ts
 var createSettings = (settings) => {
-  const { canvas, step = 0.1 } = settings;
+  const { canvas, step = 0.09 } = settings;
   const uniforms = {
     uProgress: {
       type: "float",
@@ -1020,6 +1020,7 @@ var createSettings = (settings) => {
   };
   return {
     uniforms,
+    devicePixelRatio: window.devicePixelRatio,
     shouldRender: true,
     canvas,
     onRender: (r) => {
@@ -1031,14 +1032,38 @@ var createSettings = (settings) => {
 
 // src/loading-spiral/constants.ts
 var VERTEX_SHADER = `
-  attribute vec3 ${"aPositionStart" /* POSITION_START */};
   attribute vec3 ${"aColor" /* COLOR */};
   attribute float ${"aOffsetY" /* OFFSET_Y */};
+  attribute float ${"aPercent" /* PERCENT */};
+  attribute float ${"aLength" /* LENGTH */};
+  attribute float ${"aPointSize" /* POINT_SIZE */};
+
   uniform mat4 uProjectionMatrix;
   uniform mat4 uModelMatrix;
   uniform mat4 uViewMatrix;
   uniform float uProgress;
+
   varying vec3 vColor;
+  
+  vec3 curve(float _percent, float _length) {
+    const float PI2 = 3.141592653589793 * 2.0;
+    float radius = 0.028 / 0.15 * _length;
+
+    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);
+  }
+
   mat4 rotateX(float _angle){
     return mat4(
       1.0, 0.0, 0.0, 0.0,
@@ -1047,22 +1072,7 @@ var VERTEX_SHADER = `
       0.0, 0.0, 0.0, 1.0
     );
   }
-  mat4 rotateY(float _angle){
-    return mat4(
-      cos(_angle), 0.0, sin(_angle), 0.0,
-      0.0, 1.0, 0.0, 0.0,
-      -sin(_angle), 0.0, cos(_angle), 0.0,
-      0.0, 0.0, 0.0, 1.0
-    );
-  }
-  mat4 rotateZ(float _angle){
-    return mat4(
-      cos(_angle), -sin(_angle), 0.0, 0.0,
-      sin(_angle), cos(_angle), 0.0, 0.0,
-      0.0, 0.0, 1.0, 0.0,
-      0.0, 0.0, 0.0, 1.0
-    );
-  }
+
   mat4 translateY(float _offset){
     return mat4(
       1.0, 0.0, 0.0, 0.0,
@@ -1071,16 +1081,22 @@ var VERTEX_SHADER = `
       0.0, 0.0, 0.0, 1.0
     );
   }
+  
   void main(){
-    gl_Position = uProjectionMatrix * uModelMatrix * uViewMatrix * rotateX(uProgress) * vec4(${"aPositionStart" /* POSITION_START */}, 1.0) * translateY(${"aOffsetY" /* OFFSET_Y */});
-    gl_PointSize = 1.0;
+    gl_Position = uProjectionMatrix
+     * uModelMatrix
+     * uViewMatrix
+     * rotateX(uProgress)
+     * vec4(curve(${"aPercent" /* PERCENT */}, ${"aLength" /* LENGTH */}), 1.0)
+     * translateY(${"aOffsetY" /* OFFSET_Y */});
+
+    gl_PointSize = ${"aPointSize" /* POINT_SIZE */};
     vColor = ${"aColor" /* COLOR */};
   }
 `;
 var FRAGMENT_SHADER = `
   precision mediump float;
   uniform float uProgress;
- 
   varying vec3 vColor;
   void main(){
     gl_FragColor = vec4(vColor, 1.0);
@@ -1095,30 +1111,23 @@ var rgba = (val) => {
 
 // src/loading-spiral/createOptions.ts
 var DEFAULT_OPT = {
-  multiplier: 5e4,
+  multiplier: 5e3,
   color: [209, 213, 219, 1],
   offset: -0.3,
-  length: 0.15
+  length: 0.3
 };
 var createOptions = (opt = DEFAULT_OPT) => {
   const { multiplier, color, length, offset = -1 * 0.3 } = opt;
-  const radius = 0.028 / 0.15 * length;
   const attributes = [
     {
-      name: "aPositionStart" /* POSITION_START */,
-      data: (index, total) => {
-        const percent = index / total;
-        const pi2 = Math.PI * 2;
-        let x = length * Math.sin(pi2 * percent), y = radius * Math.cos(pi2 * 3 * percent), z, t;
-        t = percent % 0.25 / 0.25;
-        t = percent % 0.25 - (2 * (1 - t) * t * -0.0185 + t * t * 0.25);
-        if (Math.floor(percent / 0.25) == 0 || Math.floor(percent / 0.25) == 2) {
-          t *= -1;
-        }
-        z = radius * Math.sin(pi2 * 2 * (percent - t));
-        return [x, y, z];
-      },
-      size: 3
+      name: "aPercent" /* PERCENT */,
+      data: (i, total) => [i / total],
+      size: 1
+    },
+    {
+      name: "aLength" /* LENGTH */,
+      data: () => [length],
+      size: 1
     },
     {
       name: "aColor" /* COLOR */,
@@ -1129,6 +1138,11 @@ var createOptions = (opt = DEFAULT_OPT) => {
       name: "aOffsetY" /* OFFSET_Y */,
       data: () => [offset],
       size: 1
+    },
+    {
+      name: "aPointSize" /* POINT_SIZE */,
+      data: () => [window.devicePixelRatio * 1.5],
+      size: 1
     }
   ];
   return {
@@ -1150,7 +1164,7 @@ var useResizedCanvasRef = (maxSize) => {
     if (!canvas || !container)
       return;
     const { width, height } = container.getBoundingClientRect();
-    const canvasSize = Math.max(width, height);
+    const canvasSize = Math.min(width, height);
     const size = Math.min(canvasSize, maxSize);
     canvas.setAttribute("width", `${size}`);
     canvas.setAttribute("height", `${size}`);
@@ -1172,19 +1186,15 @@ var LoadingSpiral = (props) => {
     const phenomenon = new Phenomenon({
       settings: createSettings({ canvas: canvasRef.current, step }),
       context: {
-        alpha: true,
         antialias: true
       }
     });
     phenomenon.add("spiral", createOptions(Object.assign({}, DEFAULT_OPT, rest)));
   }, []);
-  return /* @__PURE__ */ React21.createElement("div", {
-    className: classNames7("h-full w-full overflow-hidden flex justify-center items-center", className),
-    ref: containerRef
-  }, /* @__PURE__ */ React21.createElement("canvas", {
+  return /* @__PURE__ */ React21.createElement("canvas", {
     ref: canvasRef,
-    className: "relative"
-  }));
+    className: classNames7("h-full w-full overflow-hidden flex justify-center items-center", className)
+  });
 };
 export {
   Article,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/components",
-  "version": "1.5.50",
+  "version": "2.0.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",