react-rubiks-cube 0.1.0 → 0.1.1
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/README.md +224 -190
- package/package.json +71 -70
package/README.md
CHANGED
|
@@ -1,190 +1,224 @@
|
|
|
1
|
-
<div align="center">
|
|
2
|
-
|
|
3
|
-
# cubex
|
|
4
|
-
|
|
5
|
-
**A beautiful, self-solving 3D Rubik's Cube component for React.**
|
|
6
|
-
|
|
7
|
-
It scrambles and solves itself in an endless loop, tumbles gently in 3D, and — when you click it — opens a fullscreen playground where you can drag faces to turn them or drive it with Rubik's-notation buttons. Fully themeable, ~8 kB gzipped, zero configuration to drop in.
|
|
8
|
-
|
|
9
|
-
[](https://www.npmjs.com/package/react-rubiks-cube)
|
|
10
|
-
[](./LICENSE)
|
|
11
|
-
[](https://github.com/chahe-dridi/cubex/stargazers)
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
-
|
|
26
|
-
-
|
|
27
|
-
-
|
|
28
|
-
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
>
|
|
47
|
-
> ```
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
|
68
|
-
|
|
|
69
|
-
| `
|
|
70
|
-
| `
|
|
71
|
-
| `
|
|
72
|
-
| `
|
|
73
|
-
| `
|
|
74
|
-
| `
|
|
75
|
-
| `
|
|
76
|
-
| `
|
|
77
|
-
| `
|
|
78
|
-
| `
|
|
79
|
-
| `
|
|
80
|
-
| `
|
|
81
|
-
| `
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
```
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
import {
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
```
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
npm
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
1
|
+
<div align="center">
|
|
2
|
+
|
|
3
|
+
# cubex
|
|
4
|
+
|
|
5
|
+
**A beautiful, self-solving 3D Rubik's Cube component for React.**
|
|
6
|
+
|
|
7
|
+
It scrambles and solves itself in an endless loop, tumbles gently in 3D, and — when you click it — opens a fullscreen playground where you can drag faces to turn them or drive it with Rubik's-notation buttons. Fully themeable, ~8 kB gzipped, zero configuration to drop in.
|
|
8
|
+
|
|
9
|
+
[](https://www.npmjs.com/package/react-rubiks-cube)
|
|
10
|
+
[](./LICENSE)
|
|
11
|
+
[](https://github.com/chahe-dridi/cubex/stargazers)
|
|
12
|
+
|
|
13
|
+
### [▶ Live demo](https://cubex-fawn-xi.vercel.app)
|
|
14
|
+
|
|
15
|
+
[Features](#features) · [Install](#install) · [Quick start](#quick-start) · [Props](#props) · [Theming](#theming) · [Advanced](#advanced)
|
|
16
|
+
|
|
17
|
+
**Like it? [⭐ Star the repo](https://github.com/chahe-dridi/cubex) — it genuinely helps others find it.**
|
|
18
|
+
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
## Features
|
|
24
|
+
|
|
25
|
+
- 🎲 **Self-solving** — realistic scramble → solve loop, with occasional flourishes and dual concurrent slice turns.
|
|
26
|
+
- 🖱️ **Interactive** — click to expand into a fullscreen overlay; drag a face to turn a slice, orbit to look around, or use the notation buttons (U, R, F, M, x/y/z…).
|
|
27
|
+
- 🎨 **Themeable** — ships with a warm `brand` palette and the `classic` Rubik's colours, or pass your own per-face colours.
|
|
28
|
+
- 🪶 **Light** — one shared geometry, pooled quaternions, no per-frame allocations. ~8 kB gzipped, everything heavy stays a peer dependency.
|
|
29
|
+
- 🧩 **Composable** — use the one-line `<RubiksCube />`, or drop the underlying scenes into your own `<Canvas>`.
|
|
30
|
+
- 🔒 **TypeScript** — full typings included.
|
|
31
|
+
|
|
32
|
+
## Install
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
npm install react-rubiks-cube
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
> The package is published as **`react-rubiks-cube`**; the project/brand name is **cubex**. Import from `react-rubiks-cube`.
|
|
39
|
+
|
|
40
|
+
`cubex` relies on a few peers you probably already have in a react-three project. Install them if you don't:
|
|
41
|
+
|
|
42
|
+
```bash
|
|
43
|
+
npm install react react-dom three @react-three/fiber @react-three/drei framer-motion
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
> Installing straight from GitHub also works and builds automatically:
|
|
47
|
+
> ```bash
|
|
48
|
+
> npm install github:chahe-dridi/cubex
|
|
49
|
+
> ```
|
|
50
|
+
|
|
51
|
+
## Quick start
|
|
52
|
+
|
|
53
|
+
```jsx
|
|
54
|
+
import { RubiksCube } from 'react-rubiks-cube'
|
|
55
|
+
|
|
56
|
+
export default function App() {
|
|
57
|
+
return <RubiksCube size={400} />
|
|
58
|
+
}
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
That's it — you get an auto-solving, tumbling cube that expands into an interactive playground on click. It renders its own `<Canvas>`, so it works anywhere in your app.
|
|
62
|
+
|
|
63
|
+
## Props
|
|
64
|
+
|
|
65
|
+
All props are optional.
|
|
66
|
+
|
|
67
|
+
| Prop | Type | Default | Description |
|
|
68
|
+
| ---------------- | -------------------------------------- | ---------------- | ---------------------------------------------------------------------- |
|
|
69
|
+
| `size` | `number \| string` | `400` | Width in px (number) or any CSS size. |
|
|
70
|
+
| `height` | `number \| string` | `size` | Height. Defaults to a square. |
|
|
71
|
+
| `palette` | `PaletteInput` | brand palette | Colour override — see [Theming](#theming). |
|
|
72
|
+
| `accent` | `string` | `'#E05C28'` | Accent colour for the overlay's active mode toggle. |
|
|
73
|
+
| `autoplay` | `boolean` | `true` | Run the scramble → solve loop. |
|
|
74
|
+
| `tumble` | `boolean` | `true` | Slowly tumble the whole cube in 3D. |
|
|
75
|
+
| `interactive` | `boolean` | `true` | Click to open the fullscreen interactive overlay. |
|
|
76
|
+
| `scrollTilt` | `boolean` | `false` | Tilt the cube as the element scrolls through the viewport. |
|
|
77
|
+
| `scale` | `number` | `0.72` | Cube scale inside the canvas. |
|
|
78
|
+
| `cameraPosition` | `[number, number, number]` | `[7, 6, 7]` | Camera position. |
|
|
79
|
+
| `fov` | `number` | `24` | Camera field of view. |
|
|
80
|
+
| `background` | `string` | `'transparent'` | Canvas background (e.g. `'#0a0908'`). |
|
|
81
|
+
| `ambient` | `number` | `0.22` | Ambient light intensity. |
|
|
82
|
+
| `onExpand` | `() => void` | — | Called when the interactive overlay opens. |
|
|
83
|
+
| `className` / `style` | — | — | Applied to the wrapper `<div>`. |
|
|
84
|
+
|
|
85
|
+
### Examples
|
|
86
|
+
|
|
87
|
+
```jsx
|
|
88
|
+
// A calm, non-interactive hero cube that reacts to scroll
|
|
89
|
+
<RubiksCube size="min(80vw, 460px)" interactive={false} scrollTilt />
|
|
90
|
+
|
|
91
|
+
// Classic Rubik's colours on a solid background
|
|
92
|
+
<RubiksCube palette={{ base: 'classic' }} background="#0a0908" accent="#009B48" />
|
|
93
|
+
|
|
94
|
+
// Static showpiece — no tumble, no autoplay
|
|
95
|
+
<RubiksCube tumble={false} autoplay={false} />
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
## Theming
|
|
99
|
+
|
|
100
|
+
A palette defines the six sticker faces (`right`, `left`, `up`, `down`, `front`, `back`) plus the `inner` body. Each entry is `{ color, roughness, metalness }`.
|
|
101
|
+
|
|
102
|
+
Pass a **partial** palette and it's merged over a base. Pick the base with `base: 'brand'` (default) or `base: 'classic'`:
|
|
103
|
+
|
|
104
|
+
```jsx
|
|
105
|
+
<RubiksCube
|
|
106
|
+
palette={{
|
|
107
|
+
base: 'classic',
|
|
108
|
+
up: { color: '#fafafa' }, // override just one face
|
|
109
|
+
front:{ color: '#8b5cf6', roughness: 0.25 },
|
|
110
|
+
}}
|
|
111
|
+
/>
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
You can also import the built-in palettes and helper directly:
|
|
115
|
+
|
|
116
|
+
```jsx
|
|
117
|
+
import { BRAND_PALETTE, CLASSIC_PALETTE, resolvePalette } from 'react-rubiks-cube'
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
## Advanced
|
|
121
|
+
|
|
122
|
+
Want the cube inside your own scene? Import the underlying pieces and render them in a `<Canvas>` you control.
|
|
123
|
+
|
|
124
|
+
```jsx
|
|
125
|
+
import { Canvas } from '@react-three/fiber'
|
|
126
|
+
import { AutoCubeScene, Lights, resolvePalette } from 'react-rubiks-cube'
|
|
127
|
+
|
|
128
|
+
const palette = resolvePalette({ base: 'classic' })
|
|
129
|
+
|
|
130
|
+
function Scene() {
|
|
131
|
+
return (
|
|
132
|
+
<Canvas flat camera={{ position: [7, 6, 7], fov: 24 }}>
|
|
133
|
+
<Lights ambient={0.25} />
|
|
134
|
+
<AutoCubeScene palette={palette} tumble autoplay />
|
|
135
|
+
</Canvas>
|
|
136
|
+
)
|
|
137
|
+
}
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
Building a custom control UI? `InteractiveCubeScene` reads moves from a queue ref, and `MOVE_GROUPS` gives you the full Rubik's-notation move set to render buttons from:
|
|
141
|
+
|
|
142
|
+
```jsx
|
|
143
|
+
import { useRef } from 'react'
|
|
144
|
+
import { Canvas } from '@react-three/fiber'
|
|
145
|
+
import { InteractiveCubeScene, MOVE_GROUPS, Lights, resolvePalette } from 'react-rubiks-cube'
|
|
146
|
+
|
|
147
|
+
function Playground() {
|
|
148
|
+
const queue = useRef([]) // push { axis, layer, dir } to turn a slice
|
|
149
|
+
const palette = resolvePalette()
|
|
150
|
+
return (
|
|
151
|
+
<>
|
|
152
|
+
<Canvas flat camera={{ position: [5, 4, 5], fov: 34 }}>
|
|
153
|
+
<Lights ambient={0.4} />
|
|
154
|
+
<InteractiveCubeScene palette={palette} queueRef={queue} />
|
|
155
|
+
</Canvas>
|
|
156
|
+
<button onClick={() => queue.current.push({ axis: 'y', layer: 1, dir: -1 })}>U</button>
|
|
157
|
+
</>
|
|
158
|
+
)
|
|
159
|
+
}
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
### A move
|
|
163
|
+
|
|
164
|
+
```ts
|
|
165
|
+
{ axis: 'x' | 'y' | 'z', layer: -1 | 0 | 1 | null, dir: 1 | -1 }
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
`layer` selects which of the three slices along `axis` turns; `null` rotates the whole cube. `dir` is the turn direction.
|
|
169
|
+
|
|
170
|
+
## Local development
|
|
171
|
+
|
|
172
|
+
```bash
|
|
173
|
+
git clone https://github.com/chahe-dridi/cubex.git
|
|
174
|
+
cd cubex
|
|
175
|
+
npm install
|
|
176
|
+
npm run dev # runs the interactive demo in example/
|
|
177
|
+
npm run build # builds the library into dist/
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
## Roadmap & contributing
|
|
181
|
+
|
|
182
|
+
Contributions are very welcome — the repo has a set of scoped issues to pick from:
|
|
183
|
+
|
|
184
|
+
- 🟢 **Good first issues** — [more built-in palettes](https://github.com/chahe-dridi/cubex/issues/7), [`prefers-reduced-motion` support](https://github.com/chahe-dridi/cubex/issues/1), [a preview GIF](https://github.com/chahe-dridi/cubex/issues/3)
|
|
185
|
+
- ✨ **Features** — [imperative `scramble()`/`solve()` API](https://github.com/chahe-dridi/cubex/issues/4), [keyboard controls](https://github.com/chahe-dridi/cubex/issues/5), [NxN cubes](https://github.com/chahe-dridi/cubex/issues/6)
|
|
186
|
+
|
|
187
|
+
See all [open issues](https://github.com/chahe-dridi/cubex/issues). Grab one, comment to claim it, then follow the flow below.
|
|
188
|
+
|
|
189
|
+
### Branching model
|
|
190
|
+
|
|
191
|
+
| Branch | Role |
|
|
192
|
+
| --------- | ------------------------------------------------------------------- |
|
|
193
|
+
| `master` | Stable / release branch. This is what npm publishes and what `npm install github:chahe-dridi/cubex` pulls. Never push straight to it. |
|
|
194
|
+
| `dev` | Integration branch. All work lands here first and is tested together. |
|
|
195
|
+
| `feat/*` | Your working branch, one per issue. |
|
|
196
|
+
|
|
197
|
+
**All pull requests target `dev`, not `master`.** Once changes on `dev` are tested and stable, a maintainer merges `dev → master` and cuts a release.
|
|
198
|
+
|
|
199
|
+
```bash
|
|
200
|
+
# 1. Branch off dev
|
|
201
|
+
git checkout dev && git pull
|
|
202
|
+
git checkout -b feat/reduced-motion # e.g. issue #1
|
|
203
|
+
|
|
204
|
+
# 2. Do the work, then push
|
|
205
|
+
git push -u origin feat/reduced-motion
|
|
206
|
+
|
|
207
|
+
# 3. Open a PR into dev
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
See [CONTRIBUTING.md](./CONTRIBUTING.md) for the full guide.
|
|
211
|
+
|
|
212
|
+
## Support
|
|
213
|
+
|
|
214
|
+
If cubex saved you some time or just made you smile:
|
|
215
|
+
|
|
216
|
+
- ⭐ **[Star it on GitHub](https://github.com/chahe-dridi/cubex)** — the single biggest thing that helps others discover it.
|
|
217
|
+
- 🐦 **Share it** — a quick post or link to the repo goes a long way.
|
|
218
|
+
- 🐛 **[Open an issue](https://github.com/chahe-dridi/cubex/issues)** for bugs or ideas, or send a PR.
|
|
219
|
+
|
|
220
|
+
Every star and share is genuinely appreciated. 🙏
|
|
221
|
+
|
|
222
|
+
## License
|
|
223
|
+
|
|
224
|
+
[MIT](./LICENSE) © chahe-dridi
|
package/package.json
CHANGED
|
@@ -1,70 +1,71 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "react-rubiks-cube",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "A beautiful, self-solving 3D Rubik's Cube React component — auto scramble/solve loop, drag-to-turn interaction, and a fully themeable palette. Built on react-three-fiber.",
|
|
5
|
-
"type": "module",
|
|
6
|
-
"license": "MIT",
|
|
7
|
-
"author": "chahe-dridi",
|
|
8
|
-
"homepage": "https://github.com/chahe-dridi/cubex#readme",
|
|
9
|
-
"repository": {
|
|
10
|
-
"type": "git",
|
|
11
|
-
"url": "git+https://github.com/chahe-dridi/cubex.git"
|
|
12
|
-
},
|
|
13
|
-
"bugs": {
|
|
14
|
-
"url": "https://github.com/chahe-dridi/cubex/issues"
|
|
15
|
-
},
|
|
16
|
-
"keywords": [
|
|
17
|
-
"react",
|
|
18
|
-
"rubiks-cube",
|
|
19
|
-
"rubik",
|
|
20
|
-
"cube",
|
|
21
|
-
"three",
|
|
22
|
-
"three-js",
|
|
23
|
-
"react-three-fiber",
|
|
24
|
-
"3d",
|
|
25
|
-
"animation",
|
|
26
|
-
"hero",
|
|
27
|
-
"component"
|
|
28
|
-
],
|
|
29
|
-
"main": "./dist/cubex.umd.cjs",
|
|
30
|
-
"module": "./dist/cubex.js",
|
|
31
|
-
"types": "./src/index.d.ts",
|
|
32
|
-
"exports": {
|
|
33
|
-
".": {
|
|
34
|
-
"types": "./src/index.d.ts",
|
|
35
|
-
"import": "./dist/cubex.js",
|
|
36
|
-
"require": "./dist/cubex.umd.cjs"
|
|
37
|
-
}
|
|
38
|
-
},
|
|
39
|
-
"files": [
|
|
40
|
-
"dist",
|
|
41
|
-
"src",
|
|
42
|
-
"README.md",
|
|
43
|
-
"LICENSE"
|
|
44
|
-
],
|
|
45
|
-
"sideEffects": false,
|
|
46
|
-
"scripts": {
|
|
47
|
-
"dev": "vite",
|
|
48
|
-
"build": "vite build",
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
"@react-three/
|
|
55
|
-
"
|
|
56
|
-
"
|
|
57
|
-
"react
|
|
58
|
-
"
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
"@react-three/
|
|
63
|
-
"@
|
|
64
|
-
"
|
|
65
|
-
"
|
|
66
|
-
"react
|
|
67
|
-
"
|
|
68
|
-
"
|
|
69
|
-
|
|
70
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "react-rubiks-cube",
|
|
3
|
+
"version": "0.1.1",
|
|
4
|
+
"description": "A beautiful, self-solving 3D Rubik's Cube React component — auto scramble/solve loop, drag-to-turn interaction, and a fully themeable palette. Built on react-three-fiber.",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"author": "chahe-dridi",
|
|
8
|
+
"homepage": "https://github.com/chahe-dridi/cubex#readme",
|
|
9
|
+
"repository": {
|
|
10
|
+
"type": "git",
|
|
11
|
+
"url": "git+https://github.com/chahe-dridi/cubex.git"
|
|
12
|
+
},
|
|
13
|
+
"bugs": {
|
|
14
|
+
"url": "https://github.com/chahe-dridi/cubex/issues"
|
|
15
|
+
},
|
|
16
|
+
"keywords": [
|
|
17
|
+
"react",
|
|
18
|
+
"rubiks-cube",
|
|
19
|
+
"rubik",
|
|
20
|
+
"cube",
|
|
21
|
+
"three",
|
|
22
|
+
"three-js",
|
|
23
|
+
"react-three-fiber",
|
|
24
|
+
"3d",
|
|
25
|
+
"animation",
|
|
26
|
+
"hero",
|
|
27
|
+
"component"
|
|
28
|
+
],
|
|
29
|
+
"main": "./dist/cubex.umd.cjs",
|
|
30
|
+
"module": "./dist/cubex.js",
|
|
31
|
+
"types": "./src/index.d.ts",
|
|
32
|
+
"exports": {
|
|
33
|
+
".": {
|
|
34
|
+
"types": "./src/index.d.ts",
|
|
35
|
+
"import": "./dist/cubex.js",
|
|
36
|
+
"require": "./dist/cubex.umd.cjs"
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
"files": [
|
|
40
|
+
"dist",
|
|
41
|
+
"src",
|
|
42
|
+
"README.md",
|
|
43
|
+
"LICENSE"
|
|
44
|
+
],
|
|
45
|
+
"sideEffects": false,
|
|
46
|
+
"scripts": {
|
|
47
|
+
"dev": "vite",
|
|
48
|
+
"build": "vite build",
|
|
49
|
+
"build:demo": "vite build --config vite.demo.config.js",
|
|
50
|
+
"preview": "vite preview --config vite.demo.config.js",
|
|
51
|
+
"prepare": "vite build"
|
|
52
|
+
},
|
|
53
|
+
"peerDependencies": {
|
|
54
|
+
"@react-three/drei": ">=9.0.0",
|
|
55
|
+
"@react-three/fiber": ">=8.0.0",
|
|
56
|
+
"framer-motion": ">=10.0.0",
|
|
57
|
+
"react": ">=18.0.0",
|
|
58
|
+
"react-dom": ">=18.0.0",
|
|
59
|
+
"three": ">=0.150.0"
|
|
60
|
+
},
|
|
61
|
+
"devDependencies": {
|
|
62
|
+
"@react-three/drei": "^9.122.0",
|
|
63
|
+
"@react-three/fiber": "^8.18.0",
|
|
64
|
+
"@vitejs/plugin-react": "^4.3.1",
|
|
65
|
+
"framer-motion": "^11.3.0",
|
|
66
|
+
"react": "^18.3.1",
|
|
67
|
+
"react-dom": "^18.3.1",
|
|
68
|
+
"three": "^0.186.1",
|
|
69
|
+
"vite": "^5.3.4"
|
|
70
|
+
}
|
|
71
|
+
}
|