@stackvibe-studio/three 0.1.0 → 0.3.0

package/README.md

@@ -0,0 +1,81 @@
+# @stackvibe-studio/three
+
+Product-grade 3D visual primitives, canvas environments, and WebGL components built with Three.js and React Three Fiber.
+
+Designed for immersive hero sections, interactive landing page surfaces, and futuristic product cards with smooth 60fps animations.
+
+[![npm version](https://img.shields.io/npm/v/@stackvibe-studio/three.svg)](https://www.npmjs.com/package/@stackvibe-studio/three)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+
+## Features
+
+- **WaveCanvas**: WebGL undulating sinusoidal mesh and wave canvas with dynamic light physics.
+- **Glass3DCard**: Glassmorphism-style 3D card wrapper with realistic specular reflection and tilt.
+- **FloatingSphere**: Physics-based floating sphere with ambient lighting and rotation.
+- **OrbCluster**: Multi-layered 3D orb cluster designed for ambient hero backgrounds.
+- **Zero layout shift**: Fully responsive canvas containers with graceful fallback rendering.
+- **Framework agnostic**: Works with Next.js (App Router & Pages Router), Vite, Remix, and Gatsby.
+
+## Installation
+
+```bash
+pnpm add @stackvibe-studio/three three @react-three/fiber @react-three/drei
+# or
+npm install @stackvibe-studio/three three @react-three/fiber @react-three/drei
+```
+
+## Usage
+
+### WaveCanvas (Hero Backgrounds)
+
+```tsx
+import { WaveCanvas } from '@stackvibe-studio/three';
+
+export function HeroSection() {
+  return (
+    <div className="relative h-[500px] w-full overflow-hidden rounded-2xl bg-zinc-950">
+      <WaveCanvas 
+        wireframe={false} 
+        speed={1.2} 
+        color="#6366f1" 
+        className="absolute inset-0" 
+      />
+      <div className="relative z-10 flex h-full flex-col items-center justify-center text-center p-8">
+        <h1 className="text-4xl font-bold text-white">Next-Gen Interface Canvas</h1>
+        <p className="mt-2 text-zinc-400">Interactive 3D surfaces rendered in real-time WebGL.</p>
+      </div>
+    </div>
+  );
+}
+```
+
+### Glass3DCard & OrbCluster
+
+```tsx
+import { Glass3DCard, OrbCluster } from '@stackvibe-studio/three';
+
+export function FeatureCard() {
+  return (
+    <div className="relative flex items-center justify-center p-12">
+      <OrbCluster className="absolute inset-0 pointer-events-none opacity-60" />
+      <Glass3DCard className="w-80 h-96 p-6">
+        <h3 className="text-xl font-bold text-white">Pro Access</h3>
+        <p className="text-zinc-400 mt-2">Enterprise-grade WebGL rendering primitives.</p>
+      </Glass3DCard>
+    </div>
+  );
+}
+```
+
+## Components Reference
+
+| Component | Description | Props |
+| :--- | :--- | :--- |
+| `WaveCanvas` | Real-time undulating 3D sine-wave plane | `wireframe?: boolean`, `speed?: number`, `color?: string`, `className?: string` |
+| `Glass3DCard` | 3D glass card with reflective lighting | `children?: ReactNode`, `className?: string` |
+| `FloatingSphere` | Autonomous 3D floating orb with glow | `color?: string`, `wireframe?: boolean`, `className?: string` |
+| `OrbCluster` | Ambient particle cluster with floating orbs | `count?: number`, `className?: string` |
+
+## License
+
+MIT © [StackVibe Studio](https://github.com/StackVibe-Studio/stackvibe-ui)

package/dist/components/orb-cluster.d.ts

@@ -0,0 +1,6 @@
+export interface OrbClusterProps {
+    colors?: string[];
+    scale?: number;
+    speed?: number;
+}
+export declare function OrbCluster({ colors, scale, speed, }: OrbClusterProps): import("react").JSX.Element;

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

@@ -0,0 +1,6 @@
+export interface WaveCanvasProps {
+    color?: string;
+    wireframe?: boolean;
+    className?: string;
+}
+export declare function WaveCanvas({ color, wireframe, className }: WaveCanvasProps): import("react").JSX.Element;

package/dist/index.cjs

@@ -1,7 +1,10 @@
 "use strict";
+"use client";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,13 +18,23 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
   FloatingSphere: () => FloatingSphere,
-  Glass3DCard: () => Glass3DCard
+  Glass3DCard: () => Glass3DCard,
+  OrbCluster: () => OrbCluster,
+  WaveCanvas: () => WaveCanvas
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -92,8 +105,99 @@ function Glass3DCard({
     !interactive ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(255,255,255,0.08),transparent_55%)]" })
   ] });
 }
+
+// src/components/orb-cluster.tsx
+var import_drei3 = require("@react-three/drei");
+var import_fiber3 = require("@react-three/fiber");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function OrbCluster({
+  colors = ["#8b5cf6", "#22d3ee", "#f472b6", "#34d399"],
+  scale = 1,
+  speed = 1.2
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "h-72 w-full overflow-hidden rounded-[2rem] border border-white/10 bg-slate-950/80", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_fiber3.Canvas, { camera: { position: [0, 0, 6] }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ambientLight", { intensity: 1.2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("directionalLight", { position: [3, 3, 3], intensity: 1.5 }),
+    colors.map((color, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_drei3.Float,
+      {
+        speed: speed + index * 0.2,
+        rotationIntensity: 1.2,
+        floatIntensity: 2,
+        position: [(index - 1.5) * 1.6, (index % 2 === 0 ? 1 : -1) * 0.7, -1],
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_drei3.Sphere, { args: [0.8, 48, 48], scale: scale * (index === 0 ? 1.1 : 0.8), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_drei3.MeshDistortMaterial,
+          {
+            color,
+            roughness: 0.15,
+            metalness: 0.5,
+            distort: 0.35,
+            speed: 2,
+            transparent: true,
+            opacity: 0.82
+          }
+        ) })
+      },
+      color + index
+    ))
+  ] }) });
+}
+
+// src/components/wave-canvas.tsx
+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 }) {
+  const meshRef = (0, import_react.useRef)(null);
+  const { positions, originalZ } = (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 };
+  }, []);
+  (0, import_fiber4.useFrame)(({ clock }) => {
+    if (!meshRef.current) return;
+    const t = clock.getElapsedTime() * 1.5;
+    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;
+      pos.setZ(i, z);
+    }
+    pos.needsUpdate = true;
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("mesh", { ref: meshRef, rotation: [-Math.PI / 3, 0, 0], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("planeGeometry", { args: [6, 6, 32, 32] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "meshStandardMaterial",
+      {
+        color,
+        wireframe,
+        roughness: 0.3,
+        metalness: 0.5,
+        side: THREE.DoubleSide
+      }
+    )
+  ] });
+}
+function WaveCanvas({ color = "#8b5cf6", wireframe = false, 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 })
+  ] }) });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   FloatingSphere,
-  Glass3DCard
+  Glass3DCard,
+  OrbCluster,
+  WaveCanvas
 });

package/dist/index.d.ts

@@ -1,2 +1,4 @@
 export * from './components/floating-sphere';
 export * from './components/glass-3d-card';
+export * from './components/orb-cluster';
+export * from './components/wave-canvas';

package/dist/index.js

@@ -1,3 +1,5 @@
+"use client";
+
 // src/components/floating-sphere.tsx
 import { Float, MeshDistortMaterial, Sphere } from "@react-three/drei";
 import { Canvas } from "@react-three/fiber";
@@ -65,7 +67,98 @@ function Glass3DCard({
     !interactive ? null : /* @__PURE__ */ jsx2("div", { className: "pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(255,255,255,0.08),transparent_55%)]" })
   ] });
 }
+
+// src/components/orb-cluster.tsx
+import { Float as Float3, MeshDistortMaterial as MeshDistortMaterial2, Sphere as Sphere2 } from "@react-three/drei";
+import { Canvas as Canvas3 } from "@react-three/fiber";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function OrbCluster({
+  colors = ["#8b5cf6", "#22d3ee", "#f472b6", "#34d399"],
+  scale = 1,
+  speed = 1.2
+}) {
+  return /* @__PURE__ */ jsx3("div", { className: "h-72 w-full overflow-hidden rounded-[2rem] border border-white/10 bg-slate-950/80", children: /* @__PURE__ */ jsxs3(Canvas3, { camera: { position: [0, 0, 6] }, children: [
+    /* @__PURE__ */ jsx3("ambientLight", { intensity: 1.2 }),
+    /* @__PURE__ */ jsx3("directionalLight", { position: [3, 3, 3], intensity: 1.5 }),
+    colors.map((color, index) => /* @__PURE__ */ jsx3(
+      Float3,
+      {
+        speed: speed + index * 0.2,
+        rotationIntensity: 1.2,
+        floatIntensity: 2,
+        position: [(index - 1.5) * 1.6, (index % 2 === 0 ? 1 : -1) * 0.7, -1],
+        children: /* @__PURE__ */ jsx3(Sphere2, { args: [0.8, 48, 48], scale: scale * (index === 0 ? 1.1 : 0.8), children: /* @__PURE__ */ jsx3(
+          MeshDistortMaterial2,
+          {
+            color,
+            roughness: 0.15,
+            metalness: 0.5,
+            distort: 0.35,
+            speed: 2,
+            transparent: true,
+            opacity: 0.82
+          }
+        ) })
+      },
+      color + index
+    ))
+  ] }) });
+}
+
+// src/components/wave-canvas.tsx
+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 }) {
+  const meshRef = useRef(null);
+  const { positions, originalZ } = 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 };
+  }, []);
+  useFrame(({ clock }) => {
+    if (!meshRef.current) return;
+    const t = clock.getElapsedTime() * 1.5;
+    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;
+      pos.setZ(i, z);
+    }
+    pos.needsUpdate = true;
+  });
+  return /* @__PURE__ */ jsxs4("mesh", { ref: meshRef, rotation: [-Math.PI / 3, 0, 0], children: [
+    /* @__PURE__ */ jsx4("planeGeometry", { args: [6, 6, 32, 32] }),
+    /* @__PURE__ */ jsx4(
+      "meshStandardMaterial",
+      {
+        color,
+        wireframe,
+        roughness: 0.3,
+        metalness: 0.5,
+        side: THREE.DoubleSide
+      }
+    )
+  ] });
+}
+function WaveCanvas({ color = "#8b5cf6", wireframe = false, 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 })
+  ] }) });
+}
 export {
   FloatingSphere,
-  Glass3DCard
+  Glass3DCard,
+  OrbCluster,
+  WaveCanvas
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackvibe-studio/three",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "type": "module",
   "description": "3D component layer for StackVibe UI.",
   "repository": {