spatial-ui-universe 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.npmignore +13 -0
- package/README.md +36 -0
- package/dist/index.d.mts +10 -0
- package/dist/index.js +208 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +171 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +42 -0
package/.npmignore
ADDED
package/README.md
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
|
2
|
+
|
|
3
|
+
## Getting Started
|
|
4
|
+
|
|
5
|
+
First, run the development server:
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm run dev
|
|
9
|
+
# or
|
|
10
|
+
yarn dev
|
|
11
|
+
# or
|
|
12
|
+
pnpm dev
|
|
13
|
+
# or
|
|
14
|
+
bun dev
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
|
18
|
+
|
|
19
|
+
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
|
20
|
+
|
|
21
|
+
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
|
22
|
+
|
|
23
|
+
## Learn More
|
|
24
|
+
|
|
25
|
+
To learn more about Next.js, take a look at the following resources:
|
|
26
|
+
|
|
27
|
+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
|
28
|
+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
|
29
|
+
|
|
30
|
+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
|
31
|
+
|
|
32
|
+
## Deploy on Vercel
|
|
33
|
+
|
|
34
|
+
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
|
35
|
+
|
|
36
|
+
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
|
|
3
|
+
declare function Scene({ coreColor, particleColor, particleCount, particleShape }: {
|
|
4
|
+
coreColor?: string;
|
|
5
|
+
particleColor?: string;
|
|
6
|
+
particleCount?: number;
|
|
7
|
+
particleShape?: "dodecahedron" | "icosahedron" | "box";
|
|
8
|
+
}): react_jsx_runtime.JSX.Element;
|
|
9
|
+
|
|
10
|
+
export { Scene };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,208 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
|
|
30
|
+
// src/lib/index.ts
|
|
31
|
+
var index_exports = {};
|
|
32
|
+
__export(index_exports, {
|
|
33
|
+
Scene: () => Scene
|
|
34
|
+
});
|
|
35
|
+
module.exports = __toCommonJS(index_exports);
|
|
36
|
+
|
|
37
|
+
// src/components/Scene.tsx
|
|
38
|
+
var import_react = __toESM(require("react"));
|
|
39
|
+
var import_fiber = require("@react-three/fiber");
|
|
40
|
+
var import_drei = require("@react-three/drei");
|
|
41
|
+
var THREE = __toESM(require("three"));
|
|
42
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
43
|
+
function BlackHoleCore({ color = "#312e81" }) {
|
|
44
|
+
const groupRef = (0, import_react.useRef)(null);
|
|
45
|
+
const coreRef = (0, import_react.useRef)(null);
|
|
46
|
+
const shockwaveRef = (0, import_react.useRef)(null);
|
|
47
|
+
const [clicked, setClicked] = (0, import_react.useState)(false);
|
|
48
|
+
const shockProgress = (0, import_react.useRef)(0);
|
|
49
|
+
const triggerShockwave = () => {
|
|
50
|
+
setClicked(true);
|
|
51
|
+
shockProgress.current = 0;
|
|
52
|
+
setTimeout(() => setClicked(false), 800);
|
|
53
|
+
};
|
|
54
|
+
(0, import_fiber.useFrame)((state, delta) => {
|
|
55
|
+
if (groupRef.current) {
|
|
56
|
+
groupRef.current.rotation.y += delta * 0.05;
|
|
57
|
+
groupRef.current.rotation.x += delta * 0.02;
|
|
58
|
+
}
|
|
59
|
+
if (clicked && shockProgress.current < 1) {
|
|
60
|
+
shockProgress.current += delta * 2;
|
|
61
|
+
} else if (!clicked && shockProgress.current > 0) {
|
|
62
|
+
shockProgress.current -= delta * 1;
|
|
63
|
+
}
|
|
64
|
+
if (shockProgress.current < 0) shockProgress.current = 0;
|
|
65
|
+
if (shockwaveRef.current) {
|
|
66
|
+
const s = 1 + shockProgress.current * 15;
|
|
67
|
+
shockwaveRef.current.scale.set(s, s, s);
|
|
68
|
+
shockwaveRef.current.material.opacity = Math.max(0, 0.6 - shockProgress.current * 0.6);
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
72
|
+
"group",
|
|
73
|
+
{
|
|
74
|
+
ref: groupRef,
|
|
75
|
+
onClick: triggerShockwave,
|
|
76
|
+
onPointerOver: (e) => {
|
|
77
|
+
e.stopPropagation();
|
|
78
|
+
document.body.style.cursor = "crosshair";
|
|
79
|
+
},
|
|
80
|
+
onPointerOut: () => {
|
|
81
|
+
document.body.style.cursor = "default";
|
|
82
|
+
},
|
|
83
|
+
children: [
|
|
84
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_drei.Sphere, { ref: coreRef, args: [1.5, 64, 64], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
85
|
+
import_drei.MeshDistortMaterial,
|
|
86
|
+
{
|
|
87
|
+
color: "#000000",
|
|
88
|
+
emissive: color,
|
|
89
|
+
emissiveIntensity: 1.5,
|
|
90
|
+
distort: 0.4,
|
|
91
|
+
speed: 3,
|
|
92
|
+
roughness: 0.1
|
|
93
|
+
}
|
|
94
|
+
) }),
|
|
95
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { ref: shockwaveRef, rotation: [Math.PI / 2, 0, 0], children: [
|
|
96
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("ringGeometry", { args: [1.6, 2, 64] }),
|
|
97
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshBasicMaterial", { color, transparent: true, opacity: 0, side: THREE.DoubleSide })
|
|
98
|
+
] }),
|
|
99
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { rotation: [Math.PI / 2.2, 0.1, 0], children: [
|
|
100
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("torusGeometry", { args: [3.2, 0.015, 16, 100] }),
|
|
101
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshBasicMaterial", { color, transparent: true, opacity: 0.5 })
|
|
102
|
+
] }),
|
|
103
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { rotation: [Math.PI / 2.2, -0.1, 0], children: [
|
|
104
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("torusGeometry", { args: [4.5, 0.03, 16, 100] }),
|
|
105
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshBasicMaterial", { color: "#38bdf8", transparent: true, opacity: 0.3 })
|
|
106
|
+
] })
|
|
107
|
+
]
|
|
108
|
+
}
|
|
109
|
+
);
|
|
110
|
+
}
|
|
111
|
+
function AsteroidField({ count = 150, color = "#6366f1", shape = "dodecahedron" }) {
|
|
112
|
+
const meshRef = (0, import_react.useRef)(null);
|
|
113
|
+
const dummy = (0, import_react.useMemo)(() => new THREE.Object3D(), []);
|
|
114
|
+
const particles = (0, import_react.useMemo)(() => {
|
|
115
|
+
return Array.from({ length: count }, () => ({
|
|
116
|
+
pos: new THREE.Vector3((Math.random() - 0.5) * 25, (Math.random() - 0.5) * 25, (Math.random() - 0.5) * 20),
|
|
117
|
+
vel: new THREE.Vector3((Math.random() - 0.5) * 0.04, (Math.random() - 0.5) * 0.04, (Math.random() - 0.5) * 0.04),
|
|
118
|
+
scale: Math.random() * 0.3 + 0.05,
|
|
119
|
+
rotSpeed: new THREE.Vector3(Math.random() * 0.1, Math.random() * 0.1, Math.random() * 0.1),
|
|
120
|
+
rotation: new THREE.Vector3()
|
|
121
|
+
}));
|
|
122
|
+
}, [count, shape]);
|
|
123
|
+
(0, import_fiber.useFrame)((state) => {
|
|
124
|
+
if (!meshRef.current) return;
|
|
125
|
+
const mouse3D = new THREE.Vector3(
|
|
126
|
+
state.pointer.x * 12,
|
|
127
|
+
state.pointer.y * 12,
|
|
128
|
+
2
|
|
129
|
+
);
|
|
130
|
+
particles.forEach((p, i) => {
|
|
131
|
+
p.pos.add(p.vel);
|
|
132
|
+
p.rotation.add(p.rotSpeed);
|
|
133
|
+
if (Math.abs(p.pos.x) > 20) p.vel.x *= -1;
|
|
134
|
+
if (Math.abs(p.pos.y) > 20) p.vel.y *= -1;
|
|
135
|
+
if (Math.abs(p.pos.z) > 15) p.vel.z *= -1;
|
|
136
|
+
const dist = p.pos.distanceTo(mouse3D);
|
|
137
|
+
if (dist < 4) {
|
|
138
|
+
const pushDir = p.pos.clone().sub(mouse3D).normalize();
|
|
139
|
+
p.pos.add(pushDir.multiplyScalar((4 - dist) * 0.08));
|
|
140
|
+
}
|
|
141
|
+
p.pos.applyAxisAngle(new THREE.Vector3(0, 1, 0), 1e-3);
|
|
142
|
+
dummy.position.copy(p.pos);
|
|
143
|
+
dummy.rotation.set(p.rotation.x, p.rotation.y, p.rotation.z);
|
|
144
|
+
dummy.scale.setScalar(p.scale);
|
|
145
|
+
dummy.updateMatrix();
|
|
146
|
+
meshRef.current.setMatrixAt(i, dummy.matrix);
|
|
147
|
+
});
|
|
148
|
+
meshRef.current.instanceMatrix.needsUpdate = true;
|
|
149
|
+
});
|
|
150
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("instancedMesh", { ref: meshRef, args: [void 0, void 0, count], children: [
|
|
151
|
+
shape === "dodecahedron" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dodecahedronGeometry", { args: [1, 0] }),
|
|
152
|
+
shape === "icosahedron" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("icosahedronGeometry", { args: [1, 0] }),
|
|
153
|
+
shape === "box" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("boxGeometry", { args: [1, 1, 1] }),
|
|
154
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshStandardMaterial", { color, roughness: 0.4, metalness: 0.6 })
|
|
155
|
+
] }, shape);
|
|
156
|
+
}
|
|
157
|
+
function CameraController() {
|
|
158
|
+
(0, import_fiber.useFrame)((state) => {
|
|
159
|
+
const scrollY = window.scrollY;
|
|
160
|
+
const targetY = -scrollY * 5e-3 + state.pointer.y * 1.5;
|
|
161
|
+
const targetX = state.pointer.x * 2;
|
|
162
|
+
state.camera.position.x += (targetX - state.camera.position.x) * 0.05;
|
|
163
|
+
state.camera.position.y += (targetY - state.camera.position.y) * 0.05;
|
|
164
|
+
state.camera.lookAt(0, 0, 0);
|
|
165
|
+
});
|
|
166
|
+
return null;
|
|
167
|
+
}
|
|
168
|
+
function NebulaClouds() {
|
|
169
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("group", { children: [
|
|
170
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { position: [-8, 6, -10], children: [
|
|
171
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("sphereGeometry", { args: [12, 32, 32] }),
|
|
172
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshBasicMaterial", { color: "#4c1d95", transparent: true, opacity: 0.08, fog: false })
|
|
173
|
+
] }),
|
|
174
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { position: [10, -5, -15], children: [
|
|
175
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("sphereGeometry", { args: [15, 32, 32] }),
|
|
176
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshBasicMaterial", { color: "#312e81", transparent: true, opacity: 0.06, fog: false })
|
|
177
|
+
] })
|
|
178
|
+
] });
|
|
179
|
+
}
|
|
180
|
+
function Scene({
|
|
181
|
+
coreColor = "#312e81",
|
|
182
|
+
particleColor = "#6366f1",
|
|
183
|
+
particleCount = 150,
|
|
184
|
+
particleShape = "dodecahedron"
|
|
185
|
+
}) {
|
|
186
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 w-full h-full z-0 pointer-events-auto bg-[#020205]", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_fiber.Canvas, { camera: { position: [0, 0, 12], fov: 45 }, gl: { alpha: true }, children: [
|
|
187
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("color", { attach: "background", args: ["#020205"] }),
|
|
188
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.default.Suspense, { fallback: null, children: [
|
|
189
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("ambientLight", { intensity: 0.5 }),
|
|
190
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("directionalLight", { position: [10, 10, 5], intensity: 3, color: "#818cf8" }),
|
|
191
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("directionalLight", { position: [-10, -10, -5], intensity: 2, color: "#c084fc" }),
|
|
192
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CameraController, {}),
|
|
193
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(BlackHoleCore, { color: coreColor }),
|
|
194
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AsteroidField, { count: particleCount, color: particleColor, shape: particleShape }),
|
|
195
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(NebulaClouds, {}),
|
|
196
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_drei.Stars, { radius: 150, depth: 100, count: 8e3, factor: 6, saturation: 1, fade: true, speed: 2 }),
|
|
197
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_drei.Sparkles, { count: 300, scale: 25, size: 3, speed: 0.2, opacity: 0.4, color: "#818cf8" }),
|
|
198
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_drei.Sparkles, { count: 200, scale: 20, size: 1, speed: 0.4, opacity: 0.6, color: "#c084fc" }),
|
|
199
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_drei.Sparkles, { count: 100, scale: 30, size: 6, speed: 0.1, opacity: 0.2, color: "#2dd4bf" }),
|
|
200
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_drei.Environment, { preset: "city" })
|
|
201
|
+
] })
|
|
202
|
+
] }) });
|
|
203
|
+
}
|
|
204
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
205
|
+
0 && (module.exports = {
|
|
206
|
+
Scene
|
|
207
|
+
});
|
|
208
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/lib/index.ts","../src/components/Scene.tsx"],"sourcesContent":["export { default as Scene } from '../components/Scene';","\"use client\";\r\n\r\nimport React, { useRef, useState, useMemo } from \"react\";\r\nimport { Canvas, useFrame } from \"@react-three/fiber\";\r\nimport { Environment, Sparkles, Stars, Sphere, MeshDistortMaterial } from \"@react-three/drei\";\r\nimport * as THREE from \"three\";\r\n\r\n// The central \"Black Hole\" or pulsing star\r\nfunction BlackHoleCore({ color = \"#312e81\" }: { color?: string }) {\r\n const groupRef = useRef<THREE.Group>(null);\r\n const coreRef = useRef<THREE.Mesh>(null);\r\n const shockwaveRef = useRef<THREE.Mesh>(null);\r\n const [clicked, setClicked] = useState(false);\r\n const shockProgress = useRef(0);\r\n\r\n const triggerShockwave = () => {\r\n setClicked(true);\r\n shockProgress.current = 0;\r\n setTimeout(() => setClicked(false), 800);\r\n };\r\n\r\n useFrame((state, delta) => {\r\n // Ambient slow rotation\r\n if (groupRef.current) {\r\n groupRef.current.rotation.y += delta * 0.05;\r\n groupRef.current.rotation.x += delta * 0.02;\r\n }\r\n\r\n // Shockwave logic\r\n if (clicked && shockProgress.current < 1) {\r\n shockProgress.current += delta * 2;\r\n } else if (!clicked && shockProgress.current > 0) {\r\n shockProgress.current -= delta * 1;\r\n }\r\n if (shockProgress.current < 0) shockProgress.current = 0;\r\n\r\n if (shockwaveRef.current) {\r\n const s = 1 + shockProgress.current * 15; // Explosive scale\r\n shockwaveRef.current.scale.set(s, s, s);\r\n (shockwaveRef.current.material as THREE.Material).opacity = Math.max(0, 0.6 - shockProgress.current * 0.6);\r\n }\r\n });\r\n\r\n return (\r\n <group \r\n ref={groupRef} \r\n onClick={triggerShockwave} \r\n onPointerOver={(e) => { e.stopPropagation(); document.body.style.cursor = \"crosshair\"; }} \r\n onPointerOut={() => { document.body.style.cursor = \"default\"; }}\r\n >\r\n {/* Distorting Liquid Core */}\r\n <Sphere ref={coreRef} args={[1.5, 64, 64]}>\r\n <MeshDistortMaterial\r\n color=\"#000000\"\r\n emissive={color}\r\n emissiveIntensity={1.5}\r\n distort={0.4}\r\n speed={3}\r\n roughness={0.1}\r\n />\r\n </Sphere>\r\n \r\n {/* Supernova Shockwave Ring */}\r\n <mesh ref={shockwaveRef} rotation={[Math.PI / 2, 0, 0]}>\r\n <ringGeometry args={[1.6, 2.0, 64]} />\r\n <meshBasicMaterial color={color} transparent opacity={0} side={THREE.DoubleSide} />\r\n </mesh>\r\n\r\n {/* Orbiting Energy Rings */}\r\n <mesh rotation={[Math.PI / 2.2, 0.1, 0]}>\r\n <torusGeometry args={[3.2, 0.015, 16, 100]} />\r\n <meshBasicMaterial color={color} transparent opacity={0.5} />\r\n </mesh>\r\n <mesh rotation={[Math.PI / 2.2, -0.1, 0]}>\r\n <torusGeometry args={[4.5, 0.03, 16, 100]} />\r\n <meshBasicMaterial color=\"#38bdf8\" transparent opacity={0.3} />\r\n </mesh>\r\n </group>\r\n );\r\n}\r\n\r\n// Asteroid field that physically runs away from the user's mouse cursor\r\nfunction AsteroidField({ count = 150, color = \"#6366f1\", shape = \"dodecahedron\" }: { count?: number, color?: string, shape?: \"dodecahedron\" | \"icosahedron\" | \"box\" }) {\r\n const meshRef = useRef<THREE.InstancedMesh>(null);\r\n const dummy = useMemo(() => new THREE.Object3D(), []);\r\n \r\n const particles = useMemo(() => {\r\n return Array.from({ length: count }, () => ({\r\n pos: new THREE.Vector3((Math.random() - 0.5) * 25, (Math.random() - 0.5) * 25, (Math.random() - 0.5) * 20),\r\n vel: new THREE.Vector3((Math.random() - 0.5) * 0.04, (Math.random() - 0.5) * 0.04, (Math.random() - 0.5) * 0.04),\r\n scale: Math.random() * 0.3 + 0.05,\r\n rotSpeed: new THREE.Vector3(Math.random() * 0.1, Math.random() * 0.1, Math.random() * 0.1),\r\n rotation: new THREE.Vector3()\r\n }));\r\n }, [count, shape]); // reset particles when shape changes to allow fresh instancing if needed\r\n\r\n useFrame((state) => {\r\n if (!meshRef.current) return;\r\n \r\n // Project mouse 2D into 3D space rough bounds\r\n const mouse3D = new THREE.Vector3(\r\n state.pointer.x * 12,\r\n state.pointer.y * 12,\r\n 2\r\n );\r\n\r\n particles.forEach((p, i) => {\r\n // Base movement\r\n p.pos.add(p.vel);\r\n p.rotation.add(p.rotSpeed);\r\n\r\n // Bounce at boundaries to keep them contained\r\n if (Math.abs(p.pos.x) > 20) p.vel.x *= -1;\r\n if (Math.abs(p.pos.y) > 20) p.vel.y *= -1;\r\n if (Math.abs(p.pos.z) > 15) p.vel.z *= -1;\r\n\r\n // Mouse Repulsion Interaction (Asteroids flee from cursor)\r\n const dist = p.pos.distanceTo(mouse3D);\r\n if (dist < 4) {\r\n const pushDir = p.pos.clone().sub(mouse3D).normalize();\r\n p.pos.add(pushDir.multiplyScalar((4 - dist) * 0.08));\r\n }\r\n \r\n // Gentle universal orbit\r\n p.pos.applyAxisAngle(new THREE.Vector3(0, 1, 0), 0.001);\r\n\r\n // Update instance matrix\r\n dummy.position.copy(p.pos);\r\n dummy.rotation.set(p.rotation.x, p.rotation.y, p.rotation.z);\r\n dummy.scale.setScalar(p.scale);\r\n dummy.updateMatrix();\r\n meshRef.current!.setMatrixAt(i, dummy.matrix);\r\n });\r\n\r\n meshRef.current.instanceMatrix.needsUpdate = true;\r\n });\r\n\r\n return (\r\n <instancedMesh ref={meshRef} args={[undefined, undefined, count]} key={shape}>\r\n {shape === \"dodecahedron\" && <dodecahedronGeometry args={[1, 0]} />}\r\n {shape === \"icosahedron\" && <icosahedronGeometry args={[1, 0]} />}\r\n {shape === \"box\" && <boxGeometry args={[1, 1, 1]} />}\r\n <meshStandardMaterial color={color} roughness={0.4} metalness={0.6} />\r\n </instancedMesh>\r\n );\r\n}\r\n\r\n// Controls camera movement based on Scroll + Mouse Tracking\r\nfunction CameraController() {\r\n useFrame((state) => {\r\n // 1. SCROLL PARALLAX: moves camera down effectively floating through space as you scroll down\r\n const scrollY = window.scrollY;\r\n // Reduce Y target so the camera doesn't veer off too drastically\r\n const targetY = (-scrollY * 0.005) + (state.pointer.y * 1.5);\r\n \r\n // 2. MOUSE PARALLAX: entire universe tilts slightly opposite to your mouse\r\n const targetX = state.pointer.x * 2;\r\n \r\n // Smooth Lerp\r\n state.camera.position.x += (targetX - state.camera.position.x) * 0.05;\r\n state.camera.position.y += (targetY - state.camera.position.y) * 0.05;\r\n \r\n state.camera.lookAt(0, 0, 0);\r\n });\r\n return null;\r\n}\r\n\r\n// Background Nebula Clouds\r\nfunction NebulaClouds() {\r\n return (\r\n <group>\r\n <mesh position={[-8, 6, -10]}>\r\n <sphereGeometry args={[12, 32, 32]} />\r\n <meshBasicMaterial color=\"#4c1d95\" transparent opacity={0.08} fog={false} />\r\n </mesh>\r\n <mesh position={[10, -5, -15]}>\r\n <sphereGeometry args={[15, 32, 32]} />\r\n <meshBasicMaterial color=\"#312e81\" transparent opacity={0.06} fog={false} />\r\n </mesh>\r\n </group>\r\n );\r\n}\r\n\r\nexport default function Scene({ \r\n coreColor = \"#312e81\", \r\n particleColor = \"#6366f1\", \r\n particleCount = 150, \r\n particleShape = \"dodecahedron\" \r\n}: { \r\n coreColor?: string, \r\n particleColor?: string, \r\n particleCount?: number, \r\n particleShape?: \"dodecahedron\" | \"icosahedron\" | \"box\" \r\n}) {\r\n return (\r\n <div className=\"absolute inset-0 w-full h-full z-0 pointer-events-auto bg-[#020205]\">\r\n <Canvas camera={{ position: [0, 0, 12], fov: 45 }} gl={{ alpha: true }}>\r\n <color attach=\"background\" args={['#020205']} />\r\n <React.Suspense fallback={null}>\r\n <ambientLight intensity={0.5} />\r\n <directionalLight position={[10, 10, 5]} intensity={3} color=\"#818cf8\" />\r\n <directionalLight position={[-10, -10, -5]} intensity={2} color=\"#c084fc\" />\r\n \r\n <CameraController />\r\n <BlackHoleCore color={coreColor} />\r\n <AsteroidField count={particleCount} color={particleColor} shape={particleShape} />\r\n <NebulaClouds />\r\n \r\n {/* Dense Universe Stars & Sparkles */}\r\n <Stars radius={150} depth={100} count={8000} factor={6} saturation={1} fade speed={2} />\r\n <Sparkles count={300} scale={25} size={3} speed={0.2} opacity={0.4} color=\"#818cf8\" />\r\n <Sparkles count={200} scale={20} size={1} speed={0.4} opacity={0.6} color=\"#c084fc\" />\r\n <Sparkles count={100} scale={30} size={6} speed={0.1} opacity={0.2} color=\"#2dd4bf\" />\r\n \r\n <Environment preset=\"city\" />\r\n </React.Suspense>\r\n </Canvas>\r\n </div>\r\n );\r\n}"],"mappings":"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","names":["React"]}
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
// src/components/Scene.tsx
|
|
2
|
+
import React, { useRef, useState, useMemo } from "react";
|
|
3
|
+
import { Canvas, useFrame } from "@react-three/fiber";
|
|
4
|
+
import { Environment, Sparkles, Stars, Sphere, MeshDistortMaterial } from "@react-three/drei";
|
|
5
|
+
import * as THREE from "three";
|
|
6
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
function BlackHoleCore({ color = "#312e81" }) {
|
|
8
|
+
const groupRef = useRef(null);
|
|
9
|
+
const coreRef = useRef(null);
|
|
10
|
+
const shockwaveRef = useRef(null);
|
|
11
|
+
const [clicked, setClicked] = useState(false);
|
|
12
|
+
const shockProgress = useRef(0);
|
|
13
|
+
const triggerShockwave = () => {
|
|
14
|
+
setClicked(true);
|
|
15
|
+
shockProgress.current = 0;
|
|
16
|
+
setTimeout(() => setClicked(false), 800);
|
|
17
|
+
};
|
|
18
|
+
useFrame((state, delta) => {
|
|
19
|
+
if (groupRef.current) {
|
|
20
|
+
groupRef.current.rotation.y += delta * 0.05;
|
|
21
|
+
groupRef.current.rotation.x += delta * 0.02;
|
|
22
|
+
}
|
|
23
|
+
if (clicked && shockProgress.current < 1) {
|
|
24
|
+
shockProgress.current += delta * 2;
|
|
25
|
+
} else if (!clicked && shockProgress.current > 0) {
|
|
26
|
+
shockProgress.current -= delta * 1;
|
|
27
|
+
}
|
|
28
|
+
if (shockProgress.current < 0) shockProgress.current = 0;
|
|
29
|
+
if (shockwaveRef.current) {
|
|
30
|
+
const s = 1 + shockProgress.current * 15;
|
|
31
|
+
shockwaveRef.current.scale.set(s, s, s);
|
|
32
|
+
shockwaveRef.current.material.opacity = Math.max(0, 0.6 - shockProgress.current * 0.6);
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
return /* @__PURE__ */ jsxs(
|
|
36
|
+
"group",
|
|
37
|
+
{
|
|
38
|
+
ref: groupRef,
|
|
39
|
+
onClick: triggerShockwave,
|
|
40
|
+
onPointerOver: (e) => {
|
|
41
|
+
e.stopPropagation();
|
|
42
|
+
document.body.style.cursor = "crosshair";
|
|
43
|
+
},
|
|
44
|
+
onPointerOut: () => {
|
|
45
|
+
document.body.style.cursor = "default";
|
|
46
|
+
},
|
|
47
|
+
children: [
|
|
48
|
+
/* @__PURE__ */ jsx(Sphere, { ref: coreRef, args: [1.5, 64, 64], children: /* @__PURE__ */ jsx(
|
|
49
|
+
MeshDistortMaterial,
|
|
50
|
+
{
|
|
51
|
+
color: "#000000",
|
|
52
|
+
emissive: color,
|
|
53
|
+
emissiveIntensity: 1.5,
|
|
54
|
+
distort: 0.4,
|
|
55
|
+
speed: 3,
|
|
56
|
+
roughness: 0.1
|
|
57
|
+
}
|
|
58
|
+
) }),
|
|
59
|
+
/* @__PURE__ */ jsxs("mesh", { ref: shockwaveRef, rotation: [Math.PI / 2, 0, 0], children: [
|
|
60
|
+
/* @__PURE__ */ jsx("ringGeometry", { args: [1.6, 2, 64] }),
|
|
61
|
+
/* @__PURE__ */ jsx("meshBasicMaterial", { color, transparent: true, opacity: 0, side: THREE.DoubleSide })
|
|
62
|
+
] }),
|
|
63
|
+
/* @__PURE__ */ jsxs("mesh", { rotation: [Math.PI / 2.2, 0.1, 0], children: [
|
|
64
|
+
/* @__PURE__ */ jsx("torusGeometry", { args: [3.2, 0.015, 16, 100] }),
|
|
65
|
+
/* @__PURE__ */ jsx("meshBasicMaterial", { color, transparent: true, opacity: 0.5 })
|
|
66
|
+
] }),
|
|
67
|
+
/* @__PURE__ */ jsxs("mesh", { rotation: [Math.PI / 2.2, -0.1, 0], children: [
|
|
68
|
+
/* @__PURE__ */ jsx("torusGeometry", { args: [4.5, 0.03, 16, 100] }),
|
|
69
|
+
/* @__PURE__ */ jsx("meshBasicMaterial", { color: "#38bdf8", transparent: true, opacity: 0.3 })
|
|
70
|
+
] })
|
|
71
|
+
]
|
|
72
|
+
}
|
|
73
|
+
);
|
|
74
|
+
}
|
|
75
|
+
function AsteroidField({ count = 150, color = "#6366f1", shape = "dodecahedron" }) {
|
|
76
|
+
const meshRef = useRef(null);
|
|
77
|
+
const dummy = useMemo(() => new THREE.Object3D(), []);
|
|
78
|
+
const particles = useMemo(() => {
|
|
79
|
+
return Array.from({ length: count }, () => ({
|
|
80
|
+
pos: new THREE.Vector3((Math.random() - 0.5) * 25, (Math.random() - 0.5) * 25, (Math.random() - 0.5) * 20),
|
|
81
|
+
vel: new THREE.Vector3((Math.random() - 0.5) * 0.04, (Math.random() - 0.5) * 0.04, (Math.random() - 0.5) * 0.04),
|
|
82
|
+
scale: Math.random() * 0.3 + 0.05,
|
|
83
|
+
rotSpeed: new THREE.Vector3(Math.random() * 0.1, Math.random() * 0.1, Math.random() * 0.1),
|
|
84
|
+
rotation: new THREE.Vector3()
|
|
85
|
+
}));
|
|
86
|
+
}, [count, shape]);
|
|
87
|
+
useFrame((state) => {
|
|
88
|
+
if (!meshRef.current) return;
|
|
89
|
+
const mouse3D = new THREE.Vector3(
|
|
90
|
+
state.pointer.x * 12,
|
|
91
|
+
state.pointer.y * 12,
|
|
92
|
+
2
|
|
93
|
+
);
|
|
94
|
+
particles.forEach((p, i) => {
|
|
95
|
+
p.pos.add(p.vel);
|
|
96
|
+
p.rotation.add(p.rotSpeed);
|
|
97
|
+
if (Math.abs(p.pos.x) > 20) p.vel.x *= -1;
|
|
98
|
+
if (Math.abs(p.pos.y) > 20) p.vel.y *= -1;
|
|
99
|
+
if (Math.abs(p.pos.z) > 15) p.vel.z *= -1;
|
|
100
|
+
const dist = p.pos.distanceTo(mouse3D);
|
|
101
|
+
if (dist < 4) {
|
|
102
|
+
const pushDir = p.pos.clone().sub(mouse3D).normalize();
|
|
103
|
+
p.pos.add(pushDir.multiplyScalar((4 - dist) * 0.08));
|
|
104
|
+
}
|
|
105
|
+
p.pos.applyAxisAngle(new THREE.Vector3(0, 1, 0), 1e-3);
|
|
106
|
+
dummy.position.copy(p.pos);
|
|
107
|
+
dummy.rotation.set(p.rotation.x, p.rotation.y, p.rotation.z);
|
|
108
|
+
dummy.scale.setScalar(p.scale);
|
|
109
|
+
dummy.updateMatrix();
|
|
110
|
+
meshRef.current.setMatrixAt(i, dummy.matrix);
|
|
111
|
+
});
|
|
112
|
+
meshRef.current.instanceMatrix.needsUpdate = true;
|
|
113
|
+
});
|
|
114
|
+
return /* @__PURE__ */ jsxs("instancedMesh", { ref: meshRef, args: [void 0, void 0, count], children: [
|
|
115
|
+
shape === "dodecahedron" && /* @__PURE__ */ jsx("dodecahedronGeometry", { args: [1, 0] }),
|
|
116
|
+
shape === "icosahedron" && /* @__PURE__ */ jsx("icosahedronGeometry", { args: [1, 0] }),
|
|
117
|
+
shape === "box" && /* @__PURE__ */ jsx("boxGeometry", { args: [1, 1, 1] }),
|
|
118
|
+
/* @__PURE__ */ jsx("meshStandardMaterial", { color, roughness: 0.4, metalness: 0.6 })
|
|
119
|
+
] }, shape);
|
|
120
|
+
}
|
|
121
|
+
function CameraController() {
|
|
122
|
+
useFrame((state) => {
|
|
123
|
+
const scrollY = window.scrollY;
|
|
124
|
+
const targetY = -scrollY * 5e-3 + state.pointer.y * 1.5;
|
|
125
|
+
const targetX = state.pointer.x * 2;
|
|
126
|
+
state.camera.position.x += (targetX - state.camera.position.x) * 0.05;
|
|
127
|
+
state.camera.position.y += (targetY - state.camera.position.y) * 0.05;
|
|
128
|
+
state.camera.lookAt(0, 0, 0);
|
|
129
|
+
});
|
|
130
|
+
return null;
|
|
131
|
+
}
|
|
132
|
+
function NebulaClouds() {
|
|
133
|
+
return /* @__PURE__ */ jsxs("group", { children: [
|
|
134
|
+
/* @__PURE__ */ jsxs("mesh", { position: [-8, 6, -10], children: [
|
|
135
|
+
/* @__PURE__ */ jsx("sphereGeometry", { args: [12, 32, 32] }),
|
|
136
|
+
/* @__PURE__ */ jsx("meshBasicMaterial", { color: "#4c1d95", transparent: true, opacity: 0.08, fog: false })
|
|
137
|
+
] }),
|
|
138
|
+
/* @__PURE__ */ jsxs("mesh", { position: [10, -5, -15], children: [
|
|
139
|
+
/* @__PURE__ */ jsx("sphereGeometry", { args: [15, 32, 32] }),
|
|
140
|
+
/* @__PURE__ */ jsx("meshBasicMaterial", { color: "#312e81", transparent: true, opacity: 0.06, fog: false })
|
|
141
|
+
] })
|
|
142
|
+
] });
|
|
143
|
+
}
|
|
144
|
+
function Scene({
|
|
145
|
+
coreColor = "#312e81",
|
|
146
|
+
particleColor = "#6366f1",
|
|
147
|
+
particleCount = 150,
|
|
148
|
+
particleShape = "dodecahedron"
|
|
149
|
+
}) {
|
|
150
|
+
return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 w-full h-full z-0 pointer-events-auto bg-[#020205]", children: /* @__PURE__ */ jsxs(Canvas, { camera: { position: [0, 0, 12], fov: 45 }, gl: { alpha: true }, children: [
|
|
151
|
+
/* @__PURE__ */ jsx("color", { attach: "background", args: ["#020205"] }),
|
|
152
|
+
/* @__PURE__ */ jsxs(React.Suspense, { fallback: null, children: [
|
|
153
|
+
/* @__PURE__ */ jsx("ambientLight", { intensity: 0.5 }),
|
|
154
|
+
/* @__PURE__ */ jsx("directionalLight", { position: [10, 10, 5], intensity: 3, color: "#818cf8" }),
|
|
155
|
+
/* @__PURE__ */ jsx("directionalLight", { position: [-10, -10, -5], intensity: 2, color: "#c084fc" }),
|
|
156
|
+
/* @__PURE__ */ jsx(CameraController, {}),
|
|
157
|
+
/* @__PURE__ */ jsx(BlackHoleCore, { color: coreColor }),
|
|
158
|
+
/* @__PURE__ */ jsx(AsteroidField, { count: particleCount, color: particleColor, shape: particleShape }),
|
|
159
|
+
/* @__PURE__ */ jsx(NebulaClouds, {}),
|
|
160
|
+
/* @__PURE__ */ jsx(Stars, { radius: 150, depth: 100, count: 8e3, factor: 6, saturation: 1, fade: true, speed: 2 }),
|
|
161
|
+
/* @__PURE__ */ jsx(Sparkles, { count: 300, scale: 25, size: 3, speed: 0.2, opacity: 0.4, color: "#818cf8" }),
|
|
162
|
+
/* @__PURE__ */ jsx(Sparkles, { count: 200, scale: 20, size: 1, speed: 0.4, opacity: 0.6, color: "#c084fc" }),
|
|
163
|
+
/* @__PURE__ */ jsx(Sparkles, { count: 100, scale: 30, size: 6, speed: 0.1, opacity: 0.2, color: "#2dd4bf" }),
|
|
164
|
+
/* @__PURE__ */ jsx(Environment, { preset: "city" })
|
|
165
|
+
] })
|
|
166
|
+
] }) });
|
|
167
|
+
}
|
|
168
|
+
export {
|
|
169
|
+
Scene
|
|
170
|
+
};
|
|
171
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Scene.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { useRef, useState, useMemo } from \"react\";\r\nimport { Canvas, useFrame } from \"@react-three/fiber\";\r\nimport { Environment, Sparkles, Stars, Sphere, MeshDistortMaterial } from \"@react-three/drei\";\r\nimport * as THREE from \"three\";\r\n\r\n// The central \"Black Hole\" or pulsing star\r\nfunction BlackHoleCore({ color = \"#312e81\" }: { color?: string }) {\r\n const groupRef = useRef<THREE.Group>(null);\r\n const coreRef = useRef<THREE.Mesh>(null);\r\n const shockwaveRef = useRef<THREE.Mesh>(null);\r\n const [clicked, setClicked] = useState(false);\r\n const shockProgress = useRef(0);\r\n\r\n const triggerShockwave = () => {\r\n setClicked(true);\r\n shockProgress.current = 0;\r\n setTimeout(() => setClicked(false), 800);\r\n };\r\n\r\n useFrame((state, delta) => {\r\n // Ambient slow rotation\r\n if (groupRef.current) {\r\n groupRef.current.rotation.y += delta * 0.05;\r\n groupRef.current.rotation.x += delta * 0.02;\r\n }\r\n\r\n // Shockwave logic\r\n if (clicked && shockProgress.current < 1) {\r\n shockProgress.current += delta * 2;\r\n } else if (!clicked && shockProgress.current > 0) {\r\n shockProgress.current -= delta * 1;\r\n }\r\n if (shockProgress.current < 0) shockProgress.current = 0;\r\n\r\n if (shockwaveRef.current) {\r\n const s = 1 + shockProgress.current * 15; // Explosive scale\r\n shockwaveRef.current.scale.set(s, s, s);\r\n (shockwaveRef.current.material as THREE.Material).opacity = Math.max(0, 0.6 - shockProgress.current * 0.6);\r\n }\r\n });\r\n\r\n return (\r\n <group \r\n ref={groupRef} \r\n onClick={triggerShockwave} \r\n onPointerOver={(e) => { e.stopPropagation(); document.body.style.cursor = \"crosshair\"; }} \r\n onPointerOut={() => { document.body.style.cursor = \"default\"; }}\r\n >\r\n {/* Distorting Liquid Core */}\r\n <Sphere ref={coreRef} args={[1.5, 64, 64]}>\r\n <MeshDistortMaterial\r\n color=\"#000000\"\r\n emissive={color}\r\n emissiveIntensity={1.5}\r\n distort={0.4}\r\n speed={3}\r\n roughness={0.1}\r\n />\r\n </Sphere>\r\n \r\n {/* Supernova Shockwave Ring */}\r\n <mesh ref={shockwaveRef} rotation={[Math.PI / 2, 0, 0]}>\r\n <ringGeometry args={[1.6, 2.0, 64]} />\r\n <meshBasicMaterial color={color} transparent opacity={0} side={THREE.DoubleSide} />\r\n </mesh>\r\n\r\n {/* Orbiting Energy Rings */}\r\n <mesh rotation={[Math.PI / 2.2, 0.1, 0]}>\r\n <torusGeometry args={[3.2, 0.015, 16, 100]} />\r\n <meshBasicMaterial color={color} transparent opacity={0.5} />\r\n </mesh>\r\n <mesh rotation={[Math.PI / 2.2, -0.1, 0]}>\r\n <torusGeometry args={[4.5, 0.03, 16, 100]} />\r\n <meshBasicMaterial color=\"#38bdf8\" transparent opacity={0.3} />\r\n </mesh>\r\n </group>\r\n );\r\n}\r\n\r\n// Asteroid field that physically runs away from the user's mouse cursor\r\nfunction AsteroidField({ count = 150, color = \"#6366f1\", shape = \"dodecahedron\" }: { count?: number, color?: string, shape?: \"dodecahedron\" | \"icosahedron\" | \"box\" }) {\r\n const meshRef = useRef<THREE.InstancedMesh>(null);\r\n const dummy = useMemo(() => new THREE.Object3D(), []);\r\n \r\n const particles = useMemo(() => {\r\n return Array.from({ length: count }, () => ({\r\n pos: new THREE.Vector3((Math.random() - 0.5) * 25, (Math.random() - 0.5) * 25, (Math.random() - 0.5) * 20),\r\n vel: new THREE.Vector3((Math.random() - 0.5) * 0.04, (Math.random() - 0.5) * 0.04, (Math.random() - 0.5) * 0.04),\r\n scale: Math.random() * 0.3 + 0.05,\r\n rotSpeed: new THREE.Vector3(Math.random() * 0.1, Math.random() * 0.1, Math.random() * 0.1),\r\n rotation: new THREE.Vector3()\r\n }));\r\n }, [count, shape]); // reset particles when shape changes to allow fresh instancing if needed\r\n\r\n useFrame((state) => {\r\n if (!meshRef.current) return;\r\n \r\n // Project mouse 2D into 3D space rough bounds\r\n const mouse3D = new THREE.Vector3(\r\n state.pointer.x * 12,\r\n state.pointer.y * 12,\r\n 2\r\n );\r\n\r\n particles.forEach((p, i) => {\r\n // Base movement\r\n p.pos.add(p.vel);\r\n p.rotation.add(p.rotSpeed);\r\n\r\n // Bounce at boundaries to keep them contained\r\n if (Math.abs(p.pos.x) > 20) p.vel.x *= -1;\r\n if (Math.abs(p.pos.y) > 20) p.vel.y *= -1;\r\n if (Math.abs(p.pos.z) > 15) p.vel.z *= -1;\r\n\r\n // Mouse Repulsion Interaction (Asteroids flee from cursor)\r\n const dist = p.pos.distanceTo(mouse3D);\r\n if (dist < 4) {\r\n const pushDir = p.pos.clone().sub(mouse3D).normalize();\r\n p.pos.add(pushDir.multiplyScalar((4 - dist) * 0.08));\r\n }\r\n \r\n // Gentle universal orbit\r\n p.pos.applyAxisAngle(new THREE.Vector3(0, 1, 0), 0.001);\r\n\r\n // Update instance matrix\r\n dummy.position.copy(p.pos);\r\n dummy.rotation.set(p.rotation.x, p.rotation.y, p.rotation.z);\r\n dummy.scale.setScalar(p.scale);\r\n dummy.updateMatrix();\r\n meshRef.current!.setMatrixAt(i, dummy.matrix);\r\n });\r\n\r\n meshRef.current.instanceMatrix.needsUpdate = true;\r\n });\r\n\r\n return (\r\n <instancedMesh ref={meshRef} args={[undefined, undefined, count]} key={shape}>\r\n {shape === \"dodecahedron\" && <dodecahedronGeometry args={[1, 0]} />}\r\n {shape === \"icosahedron\" && <icosahedronGeometry args={[1, 0]} />}\r\n {shape === \"box\" && <boxGeometry args={[1, 1, 1]} />}\r\n <meshStandardMaterial color={color} roughness={0.4} metalness={0.6} />\r\n </instancedMesh>\r\n );\r\n}\r\n\r\n// Controls camera movement based on Scroll + Mouse Tracking\r\nfunction CameraController() {\r\n useFrame((state) => {\r\n // 1. SCROLL PARALLAX: moves camera down effectively floating through space as you scroll down\r\n const scrollY = window.scrollY;\r\n // Reduce Y target so the camera doesn't veer off too drastically\r\n const targetY = (-scrollY * 0.005) + (state.pointer.y * 1.5);\r\n \r\n // 2. MOUSE PARALLAX: entire universe tilts slightly opposite to your mouse\r\n const targetX = state.pointer.x * 2;\r\n \r\n // Smooth Lerp\r\n state.camera.position.x += (targetX - state.camera.position.x) * 0.05;\r\n state.camera.position.y += (targetY - state.camera.position.y) * 0.05;\r\n \r\n state.camera.lookAt(0, 0, 0);\r\n });\r\n return null;\r\n}\r\n\r\n// Background Nebula Clouds\r\nfunction NebulaClouds() {\r\n return (\r\n <group>\r\n <mesh position={[-8, 6, -10]}>\r\n <sphereGeometry args={[12, 32, 32]} />\r\n <meshBasicMaterial color=\"#4c1d95\" transparent opacity={0.08} fog={false} />\r\n </mesh>\r\n <mesh position={[10, -5, -15]}>\r\n <sphereGeometry args={[15, 32, 32]} />\r\n <meshBasicMaterial color=\"#312e81\" transparent opacity={0.06} fog={false} />\r\n </mesh>\r\n </group>\r\n );\r\n}\r\n\r\nexport default function Scene({ \r\n coreColor = \"#312e81\", \r\n particleColor = \"#6366f1\", \r\n particleCount = 150, \r\n particleShape = \"dodecahedron\" \r\n}: { \r\n coreColor?: string, \r\n particleColor?: string, \r\n particleCount?: number, \r\n particleShape?: \"dodecahedron\" | \"icosahedron\" | \"box\" \r\n}) {\r\n return (\r\n <div className=\"absolute inset-0 w-full h-full z-0 pointer-events-auto bg-[#020205]\">\r\n <Canvas camera={{ position: [0, 0, 12], fov: 45 }} gl={{ alpha: true }}>\r\n <color attach=\"background\" args={['#020205']} />\r\n <React.Suspense fallback={null}>\r\n <ambientLight intensity={0.5} />\r\n <directionalLight position={[10, 10, 5]} intensity={3} color=\"#818cf8\" />\r\n <directionalLight position={[-10, -10, -5]} intensity={2} color=\"#c084fc\" />\r\n \r\n <CameraController />\r\n <BlackHoleCore color={coreColor} />\r\n <AsteroidField count={particleCount} color={particleColor} shape={particleShape} />\r\n <NebulaClouds />\r\n \r\n {/* Dense Universe Stars & Sparkles */}\r\n <Stars radius={150} depth={100} count={8000} factor={6} saturation={1} fade speed={2} />\r\n <Sparkles count={300} scale={25} size={3} speed={0.2} opacity={0.4} color=\"#818cf8\" />\r\n <Sparkles count={200} scale={20} size={1} speed={0.4} opacity={0.6} color=\"#c084fc\" />\r\n <Sparkles count={100} scale={30} size={6} speed={0.1} opacity={0.2} color=\"#2dd4bf\" />\r\n \r\n <Environment preset=\"city\" />\r\n </React.Suspense>\r\n </Canvas>\r\n </div>\r\n );\r\n}"],"mappings":"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","names":[]}
|
package/package.json
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "spatial-ui-universe",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"main": "./dist/index.js",
|
|
5
|
+
"module": "./dist/index.mjs",
|
|
6
|
+
"types": "./dist/index.d.ts",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"types": "./dist/index.d.ts",
|
|
10
|
+
"import": "./dist/index.mjs",
|
|
11
|
+
"require": "./dist/index.js"
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
"scripts": {
|
|
15
|
+
"dev": "next dev",
|
|
16
|
+
"build": "next build",
|
|
17
|
+
"start": "next start",
|
|
18
|
+
"lint": "eslint",
|
|
19
|
+
"build:package": "tsup"
|
|
20
|
+
},
|
|
21
|
+
"dependencies": {
|
|
22
|
+
"@react-three/drei": "^10.7.7",
|
|
23
|
+
"@react-three/fiber": "^9.5.0",
|
|
24
|
+
"@types/three": "^0.183.1",
|
|
25
|
+
"framer-motion": "^12.38.0",
|
|
26
|
+
"next": "16.2.0",
|
|
27
|
+
"react": "19.2.4",
|
|
28
|
+
"react-dom": "19.2.4",
|
|
29
|
+
"three": "^0.183.2"
|
|
30
|
+
},
|
|
31
|
+
"devDependencies": {
|
|
32
|
+
"@tailwindcss/postcss": "^4",
|
|
33
|
+
"@types/node": "^20",
|
|
34
|
+
"@types/react": "^19",
|
|
35
|
+
"@types/react-dom": "^19",
|
|
36
|
+
"eslint": "^9",
|
|
37
|
+
"eslint-config-next": "16.2.0",
|
|
38
|
+
"tailwindcss": "^4",
|
|
39
|
+
"tsup": "^8.5.1",
|
|
40
|
+
"typescript": "^5"
|
|
41
|
+
}
|
|
42
|
+
}
|