@stackvibe-studio/three 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 StackVibe
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,36 @@
-# Temporary Holding Version
+# @stackvibe-studio/three
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+3D visual primitives for hero sections, product cards, and immersive surfaces.
+
+## Highlights
+
+- Glassmorphism-style 3D card wrapper
+- Floating sphere and orb cluster patterns
+- React Three Fiber powered with lightweight presets
+- New in v0.2.0: OrbCluster for layered hero artwork
+
+## Install
+
+```bash
+npm install @stackvibe-studio/three three @react-three/fiber @react-three/drei
+```
+
+## Example
+
+```tsx
+import { Glass3DCard, OrbCluster } from '@stackvibe-studio/three';
+
+export function Example() {
+  return (
+    <div>
+      <Glass3DCard className="h-80" />
+      <OrbCluster />
+    </div>
+  );
+}
+```
+
+## Related packages
+
+- @stackvibe-studio/ui
+- @stackvibe-studio/motion

package/dist/components/floating-sphere.d.ts

@@ -0,0 +1,6 @@
+export interface FloatingSphereProps {
+    color?: string;
+    scale?: number;
+    speed?: number;
+}
+export declare function FloatingSphere({ color, scale, speed }: FloatingSphereProps): import("react").JSX.Element;

package/dist/components/glass-3d-card.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export interface Glass3DCardProps {
+    children: ReactNode;
+    className?: string;
+    depth?: number;
+    blur?: number;
+    glow?: boolean;
+    tilt?: boolean;
+    interactive?: boolean;
+}
+export declare function Glass3DCard({ children, className, depth, blur, glow, tilt, interactive, }: Glass3DCardProps): import("react").JSX.Element;

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/index.cjs

@@ -0,0 +1,139 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  FloatingSphere: () => FloatingSphere,
+  Glass3DCard: () => Glass3DCard,
+  OrbCluster: () => OrbCluster
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/floating-sphere.tsx
+var import_drei = require("@react-three/drei");
+var import_fiber = require("@react-three/fiber");
+var import_jsx_runtime = require("react/jsx-runtime");
+function FloatingSphere({ color = "#8b5cf6", scale = 1, speed = 1.2 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-64 w-64 rounded-full", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_fiber.Canvas, { camera: { position: [0, 0, 3] }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ambientLight", { intensity: 1.2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("directionalLight", { position: [2, 2, 2], intensity: 1.5 }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_drei.Float, { speed, rotationIntensity: 1.5, floatIntensity: 2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_drei.Sphere, { args: [1, 64, 64], scale, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_drei.MeshDistortMaterial,
+      {
+        color,
+        roughness: 0.2,
+        metalness: 0.4,
+        distort: 0.35,
+        speed: 2
+      }
+    ) }) })
+  ] }) });
+}
+
+// src/components/glass-3d-card.tsx
+var import_drei2 = require("@react-three/drei");
+var import_fiber2 = require("@react-three/fiber");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Glass3DCard({
+  children,
+  className = "",
+  depth = 40,
+  blur = 18,
+  glow = true,
+  tilt = true,
+  interactive = true
+}) {
+  const style = {
+    position: "relative",
+    overflow: "hidden",
+    borderRadius: "1.5rem",
+    background: "linear-gradient(135deg, rgba(15, 23, 42, 0.66), rgba(30, 41, 59, 0.3))",
+    border: "1px solid rgba(255, 255, 255, 0.12)",
+    backdropFilter: `blur(${blur}px)`,
+    boxShadow: glow ? "0 0 30px rgba(139, 92, 246, 0.2)" : void 0,
+    transform: tilt ? "perspective(1200px) rotateX(4deg) rotateY(-8deg)" : void 0,
+    minHeight: "300px"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: ["relative", className].join(" "), style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "absolute inset-0 opacity-80", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_fiber2.Canvas, { dpr: [1, 2], camera: { position: [0, 0, 5], fov: 50 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ambientLight", { intensity: 0.8 }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("directionalLight", { position: [3, 3, 3], intensity: 1.2 }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_drei2.Float, { speed: 1.5, floatIntensity: 1.2, rotationIntensity: tilt ? 0.6 : 0.1, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_drei2.RoundedBox, { args: [2.6, 2.8, 0.5], radius: 0.18, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "meshPhysicalMaterial",
+        {
+          color: glow ? "#8b5cf6" : "#dbeafe",
+          roughness: 0.08,
+          metalness: 0.45,
+          transmission: 0.8,
+          thickness: depth,
+          transparent: true,
+          opacity: 0.55
+        }
+      ) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_drei2.Environment, { preset: "city" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "relative z-10 h-full w-full p-5", children }),
+    !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
+    ))
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FloatingSphere,
+  Glass3DCard,
+  OrbCluster
+});

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,111 @@
+"use client";
+
+// src/components/floating-sphere.tsx
+import { Float, MeshDistortMaterial, Sphere } from "@react-three/drei";
+import { Canvas } from "@react-three/fiber";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FloatingSphere({ color = "#8b5cf6", scale = 1, speed = 1.2 }) {
+  return /* @__PURE__ */ jsx("div", { className: "h-64 w-64 rounded-full", children: /* @__PURE__ */ jsxs(Canvas, { camera: { position: [0, 0, 3] }, children: [
+    /* @__PURE__ */ jsx("ambientLight", { intensity: 1.2 }),
+    /* @__PURE__ */ jsx("directionalLight", { position: [2, 2, 2], intensity: 1.5 }),
+    /* @__PURE__ */ jsx(Float, { speed, rotationIntensity: 1.5, floatIntensity: 2, children: /* @__PURE__ */ jsx(Sphere, { args: [1, 64, 64], scale, children: /* @__PURE__ */ jsx(
+      MeshDistortMaterial,
+      {
+        color,
+        roughness: 0.2,
+        metalness: 0.4,
+        distort: 0.35,
+        speed: 2
+      }
+    ) }) })
+  ] }) });
+}
+
+// src/components/glass-3d-card.tsx
+import { Environment, Float as Float2, RoundedBox } from "@react-three/drei";
+import { Canvas as Canvas2 } from "@react-three/fiber";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Glass3DCard({
+  children,
+  className = "",
+  depth = 40,
+  blur = 18,
+  glow = true,
+  tilt = true,
+  interactive = true
+}) {
+  const style = {
+    position: "relative",
+    overflow: "hidden",
+    borderRadius: "1.5rem",
+    background: "linear-gradient(135deg, rgba(15, 23, 42, 0.66), rgba(30, 41, 59, 0.3))",
+    border: "1px solid rgba(255, 255, 255, 0.12)",
+    backdropFilter: `blur(${blur}px)`,
+    boxShadow: glow ? "0 0 30px rgba(139, 92, 246, 0.2)" : void 0,
+    transform: tilt ? "perspective(1200px) rotateX(4deg) rotateY(-8deg)" : void 0,
+    minHeight: "300px"
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: ["relative", className].join(" "), style, children: [
+    /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 opacity-80", children: /* @__PURE__ */ jsxs2(Canvas2, { dpr: [1, 2], camera: { position: [0, 0, 5], fov: 50 }, children: [
+      /* @__PURE__ */ jsx2("ambientLight", { intensity: 0.8 }),
+      /* @__PURE__ */ jsx2("directionalLight", { position: [3, 3, 3], intensity: 1.2 }),
+      /* @__PURE__ */ jsx2(Float2, { speed: 1.5, floatIntensity: 1.2, rotationIntensity: tilt ? 0.6 : 0.1, children: /* @__PURE__ */ jsx2(RoundedBox, { args: [2.6, 2.8, 0.5], radius: 0.18, children: /* @__PURE__ */ jsx2(
+        "meshPhysicalMaterial",
+        {
+          color: glow ? "#8b5cf6" : "#dbeafe",
+          roughness: 0.08,
+          metalness: 0.45,
+          transmission: 0.8,
+          thickness: depth,
+          transparent: true,
+          opacity: 0.55
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx2(Environment, { preset: "city" })
+    ] }) }),
+    /* @__PURE__ */ jsx2("div", { className: "relative z-10 h-full w-full p-5", children }),
+    !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
+    ))
+  ] }) });
+}
+export {
+  FloatingSphere,
+  Glass3DCard,
+  OrbCluster
+};

package/package.json

@@ -1,6 +1,53 @@
 {
   "name": "@stackvibe-studio/three",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "type": "module",
+  "description": "3D component layer for StackVibe UI.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/StackVibe-Studio/stackvibe-ui.git"
+  },
+  "homepage": "https://stackvibe-studio.github.io/stackvibe-ui/",
+  "bugs": {
+    "url": "https://github.com/StackVibe-Studio/stackvibe-ui/issues"
+  },
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "@react-three/drei": "^10.0.0",
+    "@react-three/fiber": "^9.0.0",
+    "three": "^0.180.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@types/three": "^0.180.0",
+    "tsup": "^8.1.0",
+    "typescript": "^5.7.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --clean && tsc --project tsconfig.json --emitDeclarationOnly",
+    "typecheck": "tsc --noEmit"
+  }
 }