@stackvibe-studio/three 0.3.0 → 0.3.1

package/dist/components/wave-canvas.d.ts

@@ -1,6 +1,13 @@
-export interface WaveCanvasProps {
+interface WaveMeshProps {
     color?: string;
     wireframe?: boolean;
+    speed?: number;
+    amplitude?: number;
+    roughness?: number;
+    metalness?: number;
+}
+export interface WaveCanvasProps extends WaveMeshProps {
     className?: string;
 }
-export declare function WaveCanvas({ color, wireframe, className }: WaveCanvasProps): import("react").JSX.Element;
+export declare function WaveCanvas({ color, wireframe, speed, amplitude, roughness, metalness, className, }: WaveCanvasProps): import("react").JSX.Element;
+export {};

package/dist/index.cjs

@@ -148,26 +148,28 @@ var import_fiber4 = require("@react-three/fiber");
 var import_react = require("react");
 var THREE = __toESM(require("three"), 1);
 var import_jsx_runtime4 = require("react/jsx-runtime");
-function WaveMesh({ color = "#8b5cf6", wireframe = false }) {
+function WaveMesh({
+  color = "#8b5cf6",
+  wireframe = false,
+  speed = 1.5,
+  amplitude = 0.25,
+  roughness = 0.3,
+  metalness = 0.5
+}) {
   const meshRef = (0, import_react.useRef)(null);
-  const { positions, originalZ } = (0, import_react.useMemo)(() => {
+  const { positions } = (0, import_react.useMemo)(() => {
     const geo = new THREE.PlaneGeometry(6, 6, 32, 32);
-    const pos = geo.attributes.position;
-    const orig = new Float32Array(pos.count);
-    for (let i = 0; i < pos.count; i++) {
-      orig[i] = pos.getZ(i);
-    }
-    return { positions: pos, originalZ: orig };
+    return { positions: geo.attributes.position };
   }, []);
   (0, import_fiber4.useFrame)(({ clock }) => {
     if (!meshRef.current) return;
-    const t = clock.getElapsedTime() * 1.5;
+    const t = clock.getElapsedTime() * speed;
     const geom = meshRef.current.geometry;
     const pos = geom.attributes.position;
     for (let i = 0; i < pos.count; i++) {
       const u = pos.getX(i);
       const v = pos.getY(i);
-      const z = Math.sin(u * 1.5 + t) * 0.25 + Math.cos(v * 1.5 + t) * 0.25;
+      const z = Math.sin(u * 1.5 + t) * amplitude + Math.cos(v * 1.5 + t) * amplitude;
       pos.setZ(i, z);
     }
     pos.needsUpdate = true;
@@ -179,19 +181,37 @@ function WaveMesh({ color = "#8b5cf6", wireframe = false }) {
       {
         color,
         wireframe,
-        roughness: 0.3,
-        metalness: 0.5,
+        roughness,
+        metalness,
         side: THREE.DoubleSide
       }
     )
   ] });
 }
-function WaveCanvas({ color = "#8b5cf6", wireframe = false, className = "" }) {
+function WaveCanvas({
+  color = "#8b5cf6",
+  wireframe = false,
+  speed = 1.5,
+  amplitude = 0.25,
+  roughness = 0.3,
+  metalness = 0.5,
+  className = ""
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: ["h-64 w-full rounded-3xl overflow-hidden bg-slate-950/50", className].join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_fiber4.Canvas, { camera: { position: [0, -1, 3], fov: 60 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ambientLight", { intensity: 0.8 }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("directionalLight", { position: [3, 5, 4], intensity: 1.5 }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("pointLight", { position: [-3, -3, 2], intensity: 0.5, color: "#22d3ee" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(WaveMesh, { color, wireframe })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      WaveMesh,
+      {
+        color,
+        wireframe,
+        speed,
+        amplitude,
+        roughness,
+        metalness
+      }
+    )
   ] }) });
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.js

@@ -110,26 +110,28 @@ import { Canvas as Canvas4, useFrame } from "@react-three/fiber";
 import { useRef, useMemo } from "react";
 import * as THREE from "three";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-function WaveMesh({ color = "#8b5cf6", wireframe = false }) {
+function WaveMesh({
+  color = "#8b5cf6",
+  wireframe = false,
+  speed = 1.5,
+  amplitude = 0.25,
+  roughness = 0.3,
+  metalness = 0.5
+}) {
   const meshRef = useRef(null);
-  const { positions, originalZ } = useMemo(() => {
+  const { positions } = useMemo(() => {
     const geo = new THREE.PlaneGeometry(6, 6, 32, 32);
-    const pos = geo.attributes.position;
-    const orig = new Float32Array(pos.count);
-    for (let i = 0; i < pos.count; i++) {
-      orig[i] = pos.getZ(i);
-    }
-    return { positions: pos, originalZ: orig };
+    return { positions: geo.attributes.position };
   }, []);
   useFrame(({ clock }) => {
     if (!meshRef.current) return;
-    const t = clock.getElapsedTime() * 1.5;
+    const t = clock.getElapsedTime() * speed;
     const geom = meshRef.current.geometry;
     const pos = geom.attributes.position;
     for (let i = 0; i < pos.count; i++) {
       const u = pos.getX(i);
       const v = pos.getY(i);
-      const z = Math.sin(u * 1.5 + t) * 0.25 + Math.cos(v * 1.5 + t) * 0.25;
+      const z = Math.sin(u * 1.5 + t) * amplitude + Math.cos(v * 1.5 + t) * amplitude;
       pos.setZ(i, z);
     }
     pos.needsUpdate = true;
@@ -141,19 +143,37 @@ function WaveMesh({ color = "#8b5cf6", wireframe = false }) {
       {
         color,
         wireframe,
-        roughness: 0.3,
-        metalness: 0.5,
+        roughness,
+        metalness,
         side: THREE.DoubleSide
       }
     )
   ] });
 }
-function WaveCanvas({ color = "#8b5cf6", wireframe = false, className = "" }) {
+function WaveCanvas({
+  color = "#8b5cf6",
+  wireframe = false,
+  speed = 1.5,
+  amplitude = 0.25,
+  roughness = 0.3,
+  metalness = 0.5,
+  className = ""
+}) {
   return /* @__PURE__ */ jsx4("div", { className: ["h-64 w-full rounded-3xl overflow-hidden bg-slate-950/50", className].join(" "), children: /* @__PURE__ */ jsxs4(Canvas4, { camera: { position: [0, -1, 3], fov: 60 }, children: [
     /* @__PURE__ */ jsx4("ambientLight", { intensity: 0.8 }),
     /* @__PURE__ */ jsx4("directionalLight", { position: [3, 5, 4], intensity: 1.5 }),
     /* @__PURE__ */ jsx4("pointLight", { position: [-3, -3, 2], intensity: 0.5, color: "#22d3ee" }),
-    /* @__PURE__ */ jsx4(WaveMesh, { color, wireframe })
+    /* @__PURE__ */ jsx4(
+      WaveMesh,
+      {
+        color,
+        wireframe,
+        speed,
+        amplitude,
+        roughness,
+        metalness
+      }
+    )
   ] }) });
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackvibe-studio/three",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "type": "module",
   "description": "3D component layer for StackVibe UI.",
   "repository": {
@@ -12,6 +12,24 @@
     "url": "https://github.com/StackVibe-Studio/stackvibe-ui/issues"
   },
   "license": "MIT",
+  "keywords": [
+    "react",
+    "react-19",
+    "three",
+    "threejs",
+    "webgl",
+    "react-three-fiber",
+    "drei",
+    "3d",
+    "canvas",
+    "wave-canvas",
+    "floating-sphere",
+    "glassmorphism",
+    "glass-card",
+    "orb-cluster",
+    "shaders",
+    "stackvibe"
+  ],
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {