@stackvibe-studio/three 0.1.0 → 0.2.0

package/README.md

@@ -0,0 +1,36 @@
+# @stackvibe-studio/three
+
+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/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

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -21,7 +22,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   FloatingSphere: () => FloatingSphere,
-  Glass3DCard: () => Glass3DCard
+  Glass3DCard: () => Glass3DCard,
+  OrbCluster: () => OrbCluster
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -92,8 +94,46 @@ 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
+    ))
+  ] }) });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   FloatingSphere,
-  Glass3DCard
+  Glass3DCard,
+  OrbCluster
 });

package/dist/index.d.ts

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

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,45 @@ 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
+    ))
+  ] }) });
+}
 export {
   FloatingSphere,
-  Glass3DCard
+  Glass3DCard,
+  OrbCluster
 };

package/package.json

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