anim-3d-obj 2.0.2 → 2.0.9
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 +29 -118
- package/package.json +41 -34
- package/dist/index.cjs +0 -35
- package/dist/index.cjs.map +0 -1
- package/dist/index.css +0 -38
- package/dist/index.css.map +0 -1
- package/dist/index.d.mts +0 -20
- package/dist/index.d.ts +0 -20
- package/dist/index.js +0 -33
- package/dist/index.js.map +0 -1
package/README.md
CHANGED
|
@@ -1,10 +1,3 @@
|
|
|
1
|
-
# anim-3d-obj
|
|
2
|
-
|
|
3
|
-
A lightweight React component for rendering and animating 3D-like objects using only HTML & CSS.
|
|
4
|
-
No WebGL or heavy 3D libraries required.
|
|
5
|
-
|
|
6
|
-
---
|
|
7
|
-
|
|
8
1
|
# React Typescript Cuboid Builder
|
|
9
2
|
|
|
10
3
|
This project allows a user to create Cuboids of any size simply by entering a set of parameters.
|
|
@@ -32,7 +25,6 @@ The program does the leg work with regard to calculating translationZ depth and
|
|
|
32
25
|
- `noAnim`: no animation place holder
|
|
33
26
|
|
|
34
27
|
`X-AXIS Animations`
|
|
35
|
-
|
|
36
28
|
- `X360`: rotate 360 degrees on the x-axis: [demo](https://codesandbox.io/s/anim-3d-obj-x360-7kiuhw)
|
|
37
29
|
- `wobX`: wobble on x-axis (degreesHi <-> degreesLow): [demo](https://codesandbox.io/s/anim-3d-obj-wobx-ldwek7)
|
|
38
30
|
- `fwdx018`: spin object on x-axis from 0 degrees to 180 degrees: [demo](https://codesandbox.io/s/anim-3d-obj-fwd180-v90xyu)
|
|
@@ -43,7 +35,6 @@ The program does the leg work with regard to calculating translationZ depth and
|
|
|
43
35
|
- `fwdx2736`: spin object on x-axis from 270 degrees to 360 degrees: [demo](https://codesandbox.io/s/anim-3d-obj-fwdx2736-e6c6wg)
|
|
44
36
|
|
|
45
37
|
`Y-AXIS Animations`
|
|
46
|
-
|
|
47
38
|
- `Y360`: rotate 360 degrees on the y-axis: [demo](https://codesandbox.io/s/anim-3d-obj-y360-16lzeb)
|
|
48
39
|
- `wobY`: wobble on y-axis (degreesHi <-> degreesLow): [demo](https://codesandbox.io/s/anim-3d-obj-woby-tkoxms)
|
|
49
40
|
- `fwdy018`: spin object on y-axis from 0 degrees to 180 degrees: [demo](https://codesandbox.io/s/anim-3d-obj-fwdy180-qpqhtq)
|
|
@@ -53,8 +44,8 @@ The program does the leg work with regard to calculating translationZ depth and
|
|
|
53
44
|
- `fwdy1827`: spin object on y-axis from 180 degrees to 270 degrees: [demo](https://codesandbox.io/s/anim-3d-obj-fwdy1827-osskgx)
|
|
54
45
|
- `fwdy2736`: spin object on y-axis from 270 degrees to 360 degrees: [demo](https://codesandbox.io/s/anim-3d-obj-fwdy2736-rnbs2q)
|
|
55
46
|
|
|
56
|
-
## Config
|
|
57
47
|
|
|
48
|
+
## Config
|
|
58
49
|
### Animations:
|
|
59
50
|
|
|
60
51
|
Animations are optional. Either or both of `anim1` or `anim2` can be applied to the component. Animations are applied to 2 wrapping divs respectively.
|
|
@@ -75,122 +66,42 @@ const anim1 = {
|
|
|
75
66
|
```
|
|
76
67
|
|
|
77
68
|
### Faces:
|
|
78
|
-
|
|
79
69
|
This is an array of objects containing the face used for a given component
|
|
80
|
-
|
|
81
70
|
```javascript
|
|
82
|
-
export interface FaceType {
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
const faces: FaceType[] = [
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
71
|
+
export interface FaceType {
|
|
72
|
+
name?: string; // front,back,left,right,top,top_rear,top_front,bottom,bottom_rear,bottom_front
|
|
73
|
+
css?: string | undefined;
|
|
74
|
+
body?: any; // can be JSX Component | string | number
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
const faces: FaceType[] = [
|
|
78
|
+
{
|
|
79
|
+
name: "back",
|
|
80
|
+
body: "BACK",
|
|
81
|
+
css: `background:rgba(22,22,22,.5)`,
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
name: "right",
|
|
85
|
+
body: "RIGHT",
|
|
86
|
+
css: `background:rgba(220,220,220,.5);
|
|
98
87
|
border:1px solid #ddd`,
|
|
99
|
-
|
|
100
|
-
];
|
|
88
|
+
},
|
|
89
|
+
];
|
|
101
90
|
```
|
|
102
91
|
|
|
103
92
|
### Global (face):
|
|
104
|
-
|
|
105
|
-
If the name parameter in the faces array is indicated (ie: "front") but `css` and / or `body` are not. The `global default`(below) will satisfy those parameters.
|
|
106
|
-
|
|
93
|
+
If the name parameter in the faces array is indicated (ie: "front") but `css` and / or `body` are not. The `global default`(below) will satisfy those parameters.
|
|
107
94
|
```javascript
|
|
108
|
-
interface GlobalType {
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
}
|
|
112
|
-
const global: GlobalType = {
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
};
|
|
95
|
+
interface GlobalType {
|
|
96
|
+
css?: string;
|
|
97
|
+
body?: string;
|
|
98
|
+
}
|
|
99
|
+
const global: GlobalType = {
|
|
100
|
+
body: "BODY FOR FACE WHICH DOES NOT CONTAIN BODY",
|
|
101
|
+
css: 'color:red'
|
|
102
|
+
};
|
|
116
103
|
```
|
|
117
104
|
|
|
118
105
|
|
|
119
106
|
|
|
120
|
-
-
|
|
121
|
-
|
|
122
|
-
---
|
|
123
|
-
|
|
124
|
-
## Features
|
|
125
|
-
|
|
126
|
-
- 🎨 Pure CSS-based 3D object rendering
|
|
127
|
-
- ⚡ Zero dependencies (other than React)
|
|
128
|
-
- 🛠 Fully customizable width, height, depth, and colors
|
|
129
|
-
- 🌀 Built-in animation support
|
|
130
|
-
- 🌍 SSR-safe (works with Next.js, Remix, etc.)
|
|
131
|
-
|
|
132
|
-
---
|
|
133
|
-
|
|
134
|
-
## Peer requirements
|
|
135
|
-
|
|
136
|
-
React 18+. Works in Vite, CRA, Next.js (SSR-safe), Remix, etc.
|
|
137
|
-
|
|
138
|
-
---
|
|
139
|
-
|
|
140
|
-
## Installation
|
|
141
|
-
|
|
142
|
-
```bash
|
|
143
|
-
npm install anim-3d-obj
|
|
144
|
-
# or
|
|
145
|
-
yarn add anim-3d-obj
|
|
146
|
-
# or
|
|
147
|
-
pnpm add anim-3d-obj
|
|
148
|
-
|
|
149
|
-
import React from "react";
|
|
150
|
-
import { Obj } from "anim-3d-obj";
|
|
151
|
-
```
|
|
152
|
-
|
|
153
|
-
## Full Example
|
|
154
|
-
|
|
155
|
-
```bash
|
|
156
|
-
function App() {
|
|
157
|
-
const global = {
|
|
158
|
-
css: "border: 1px solid #00f; color:#00f; backface-visibility: visible; text-align:center; line-height: 120px; font-size: 14px;",
|
|
159
|
-
body: "height: 120px; width: 120px;",
|
|
160
|
-
};
|
|
161
|
-
|
|
162
|
-
return (
|
|
163
|
-
<Obj
|
|
164
|
-
depth="120px"
|
|
165
|
-
height="120px"
|
|
166
|
-
width="120px"
|
|
167
|
-
perspective="800px"
|
|
168
|
-
rotation="x 1s linear infinite"
|
|
169
|
-
global={global}
|
|
170
|
-
>
|
|
171
|
-
Hello 3D
|
|
172
|
-
</Obj>
|
|
173
|
-
);
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
export default App;
|
|
177
|
-
```
|
|
178
|
-
|
|
179
|
-
# Props
|
|
180
|
-
|
|
181
|
-
The `<Obj />` component accepts the following props:
|
|
182
|
-
|
|
183
|
-
| Prop | Type | Default | Description |
|
|
184
|
-
| ----------- | ------ | --------- | ------------------------------------------------------------------------------ |
|
|
185
|
-
| width | string | "100px" | Width of the object. |
|
|
186
|
-
| height | string | "100px" | Height of the object. |
|
|
187
|
-
| depth | string | "100px" | Depth of the object (3rd dimension). |
|
|
188
|
-
| perspective | string | "600px" | Perspective distance for 3D rendering. |
|
|
189
|
-
| rotation | string | undefined | CSS animation shorthand for rotating the object (e.g. "x 1s linear infinite"). |
|
|
190
|
-
| global | object | {} | Global styles for all faces (css for shared CSS, body for dimensions). |
|
|
191
|
-
|
|
192
|
-
## Tips
|
|
193
|
-
|
|
194
|
-
- You can pass any React children inside `<Obj> ... </Obj>` to render content on the front face.
|
|
195
|
-
- Combine with CSS variables or Tailwind utilities for theming.
|
|
196
|
-
- Works with server-side rendering (SSR) — no window dependency.
|
|
107
|
+
- https://www.npmjs.com/package/anim-3d-obj
|
package/package.json
CHANGED
|
@@ -1,43 +1,50 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "anim-3d-obj",
|
|
3
|
-
"version": "2.0.
|
|
4
|
-
"
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
"sideEffects": [
|
|
8
|
-
"dist/**/*.css",
|
|
9
|
-
"src/styles/obj.css"
|
|
10
|
-
],
|
|
11
|
-
"main": "dist/index.cjs",
|
|
12
|
-
"module": "dist/index.js",
|
|
13
|
-
"types": "dist/index.d.ts",
|
|
14
|
-
"exports": {
|
|
15
|
-
".": {
|
|
16
|
-
"types": "./dist/index.d.ts",
|
|
17
|
-
"import": "./dist/index.js",
|
|
18
|
-
"require": "./dist/index.cjs",
|
|
19
|
-
"default": "./dist/index.js"
|
|
20
|
-
}
|
|
3
|
+
"version": "2.0.9",
|
|
4
|
+
"repository": {
|
|
5
|
+
"type": "git",
|
|
6
|
+
"url": "https://github.com/mdnelles/anim-3d-obj-npm-publisher.git"
|
|
21
7
|
},
|
|
8
|
+
"homepage": "https://mdnelles.github.io/a3o-playground/",
|
|
9
|
+
"description": "React library for creating 3D objects quickly. Also these objects can be animated",
|
|
10
|
+
"mainOLD": "dist/cjs/index.js",
|
|
11
|
+
"main": "dist/cjs/components/Obj.js",
|
|
12
|
+
"module": "dist/esm/components/Obj.js",
|
|
22
13
|
"files": [
|
|
23
|
-
"dist"
|
|
24
|
-
"README.md",
|
|
25
|
-
"LICENSE"
|
|
14
|
+
"dist"
|
|
26
15
|
],
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
16
|
+
"scripts": {
|
|
17
|
+
"build": "rm -rf dist/ && prettier --write src/ && npm run build:esm && npm run build:cjs",
|
|
18
|
+
"build:esm": "tsc",
|
|
19
|
+
"build:cjs": "tsc --module CommonJS --outDir dist/cjs"
|
|
30
20
|
},
|
|
21
|
+
"author": "mdnelles",
|
|
22
|
+
"license": "MIT",
|
|
31
23
|
"devDependencies": {
|
|
32
|
-
"@types/
|
|
33
|
-
"@types/react
|
|
34
|
-
"
|
|
35
|
-
"
|
|
24
|
+
"@types/node": "^18.11.9",
|
|
25
|
+
"@types/react": "^18.0.25",
|
|
26
|
+
"@types/react-dom": "^18.0.8",
|
|
27
|
+
"@types/styled-components": "^5.1.26",
|
|
28
|
+
"prettier": "^3.0.0",
|
|
29
|
+
"react": "^18.2.0",
|
|
30
|
+
"react-dom": "^18.2.0",
|
|
31
|
+
"typescript": "^4.8.4"
|
|
36
32
|
},
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
"
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
33
|
+
"peerDependencies": {
|
|
34
|
+
"react": "^18.2.0",
|
|
35
|
+
"react-dom": "^18.2.0"
|
|
36
|
+
},
|
|
37
|
+
"dependencies": {
|
|
38
|
+
"styled-components": "^5.3.6"
|
|
39
|
+
},
|
|
40
|
+
"keywords": [
|
|
41
|
+
"React",
|
|
42
|
+
"CSS",
|
|
43
|
+
"style",
|
|
44
|
+
"animation",
|
|
45
|
+
"cube",
|
|
46
|
+
"cuboid",
|
|
47
|
+
"3d",
|
|
48
|
+
"webGL"
|
|
49
|
+
]
|
|
43
50
|
}
|
package/dist/index.cjs
DELETED
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
|
|
5
|
-
// src/components/Obj.tsx
|
|
6
|
-
var Obj = ({
|
|
7
|
-
width = "160px",
|
|
8
|
-
height = "160px",
|
|
9
|
-
depth = "150px",
|
|
10
|
-
perspective = 500,
|
|
11
|
-
perspectiveOrigin = "50% 50%",
|
|
12
|
-
rotation,
|
|
13
|
-
className,
|
|
14
|
-
style,
|
|
15
|
-
global,
|
|
16
|
-
children
|
|
17
|
-
}) => {
|
|
18
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
19
|
-
"div",
|
|
20
|
-
{
|
|
21
|
-
className,
|
|
22
|
-
style: {
|
|
23
|
-
perspective,
|
|
24
|
-
perspectiveOrigin,
|
|
25
|
-
...style
|
|
26
|
-
},
|
|
27
|
-
"data-anim-3d-obj": true,
|
|
28
|
-
children
|
|
29
|
-
}
|
|
30
|
-
);
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
exports.Obj = Obj;
|
|
34
|
-
//# sourceMappingURL=index.cjs.map
|
|
35
|
-
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Obj.tsx"],"names":["jsx"],"mappings":";;;;;AAmBO,IAAM,MAA0B,CAAC;AAAA,EACrC,KAAA,GAAQ,OAAA;AAAA,EACR,MAAA,GAAS,OAAA;AAAA,EACT,KAAA,GAAQ,OAAA;AAAA,EACR,WAAA,GAAc,GAAA;AAAA,EACd,iBAAA,GAAoB,SAAA;AAAA,EACpB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA;AACH,CAAA,KAAM;AAEH,EAAA,uBACGA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,SAAA;AAAA,MACA,KAAA,EAAO;AAAA,QACJ,WAAA;AAAA,QACA,iBAAA;AAAA,QACA,GAAG;AAAA,OACN;AAAA,MACA,kBAAA,EAAgB,IAAA;AAAA,MAGf;AAAA;AAAA,GACJ;AAEN","file":"index.cjs","sourcesContent":["import * as React from \"react\";\nimport \"./../styles/obj.css\";\n\nexport type ObjProps = {\n width?: string | number;\n height?: string | number;\n depth?: string | number;\n perspective?: string | number;\n perspectiveOrigin?: string;\n rotation?: string; // e.g., \"x 1s linear infinite\"\n className?: string;\n style?: React.CSSProperties;\n global?: {\n css?: string;\n body?: string;\n };\n children?: React.ReactNode;\n};\n\nexport const Obj: React.FC<ObjProps> = ({\n width = \"160px\",\n height = \"160px\",\n depth = \"150px\",\n perspective = 500,\n perspectiveOrigin = \"50% 50%\",\n rotation,\n className,\n style,\n global,\n children,\n}) => {\n // … your existing DOM/CSS 3D layout & animations\n return (\n <div\n className={className}\n style={{\n perspective,\n perspectiveOrigin,\n ...style,\n }}\n data-anim-3d-obj\n >\n {/* faces, wrappers, animations… */}\n {children}\n </div>\n );\n};\n"]}
|
package/dist/index.css
DELETED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
/* src/styles/obj.css */
|
|
2
|
-
.anim3d-stage {
|
|
3
|
-
position: relative;
|
|
4
|
-
width: max-content;
|
|
5
|
-
height: max-content;
|
|
6
|
-
perspective: 600px;
|
|
7
|
-
perspective-origin: 50% 50%;
|
|
8
|
-
}
|
|
9
|
-
.anim3d-wrapper {
|
|
10
|
-
position: relative;
|
|
11
|
-
transform-style: preserve-3d;
|
|
12
|
-
width: var(--obj-w);
|
|
13
|
-
height: var(--obj-h);
|
|
14
|
-
}
|
|
15
|
-
.anim3d-center {
|
|
16
|
-
position: absolute;
|
|
17
|
-
left: 50%;
|
|
18
|
-
top: 50%;
|
|
19
|
-
width: 2px;
|
|
20
|
-
height: 2px;
|
|
21
|
-
background: #f00;
|
|
22
|
-
transform: translate(-50%, -50%);
|
|
23
|
-
z-index: 10;
|
|
24
|
-
}
|
|
25
|
-
.anim3d-face {
|
|
26
|
-
position: absolute;
|
|
27
|
-
left: 50%;
|
|
28
|
-
top: 50%;
|
|
29
|
-
width: var(--obj-w);
|
|
30
|
-
height: var(--obj-h);
|
|
31
|
-
transform-style: preserve-3d;
|
|
32
|
-
display: flex;
|
|
33
|
-
align-items: center;
|
|
34
|
-
justify-content: center;
|
|
35
|
-
backface-visibility: visible;
|
|
36
|
-
box-sizing: border-box;
|
|
37
|
-
}
|
|
38
|
-
/*# sourceMappingURL=index.css.map */
|
package/dist/index.css.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/styles/obj.css"],"sourcesContent":[".anim3d-stage {\n position: relative;\n width: max-content;\n height: max-content;\n perspective: 600px;\n perspective-origin: 50% 50%;\n}\n\n.anim3d-wrapper {\n position: relative;\n transform-style: preserve-3d;\n width: var(--obj-w);\n height: var(--obj-h);\n}\n\n.anim3d-center {\n position: absolute;\n left: 50%;\n top: 50%;\n width: 2px;\n height: 2px;\n background: #f00;\n transform: translate(-50%, -50%);\n z-index: 10;\n}\n\n.anim3d-face {\n position: absolute;\n left: 50%;\n top: 50%;\n width: var(--obj-w);\n height: var(--obj-h);\n transform-style: preserve-3d;\n display: flex;\n align-items: center;\n justify-content: center;\n backface-visibility: visible;\n box-sizing: border-box;\n}\n"],"mappings":";AAAA,CAAC;AACE,YAAU;AACV,SAAO;AACP,UAAQ;AACR,eAAa;AACb,sBAAoB,IAAI;AAC3B;AAEA,CAAC;AACE,YAAU;AACV,mBAAiB;AACjB,SAAO,IAAI;AACX,UAAQ,IAAI;AACf;AAEA,CAAC;AACE,YAAU;AACV,QAAM;AACN,OAAK;AACL,SAAO;AACP,UAAQ;AACR,cAAY;AACZ,aAAW,UAAU,IAAI,EAAE;AAC3B,WAAS;AACZ;AAEA,CAAC;AACE,YAAU;AACV,QAAM;AACN,OAAK;AACL,SAAO,IAAI;AACX,UAAQ,IAAI;AACZ,mBAAiB;AACjB,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,uBAAqB;AACrB,cAAY;AACf;","names":[]}
|
package/dist/index.d.mts
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
|
|
3
|
-
type ObjProps = {
|
|
4
|
-
width?: string | number;
|
|
5
|
-
height?: string | number;
|
|
6
|
-
depth?: string | number;
|
|
7
|
-
perspective?: string | number;
|
|
8
|
-
perspectiveOrigin?: string;
|
|
9
|
-
rotation?: string;
|
|
10
|
-
className?: string;
|
|
11
|
-
style?: React.CSSProperties;
|
|
12
|
-
global?: {
|
|
13
|
-
css?: string;
|
|
14
|
-
body?: string;
|
|
15
|
-
};
|
|
16
|
-
children?: React.ReactNode;
|
|
17
|
-
};
|
|
18
|
-
declare const Obj: React.FC<ObjProps>;
|
|
19
|
-
|
|
20
|
-
export { Obj, type ObjProps };
|
package/dist/index.d.ts
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
|
|
3
|
-
type ObjProps = {
|
|
4
|
-
width?: string | number;
|
|
5
|
-
height?: string | number;
|
|
6
|
-
depth?: string | number;
|
|
7
|
-
perspective?: string | number;
|
|
8
|
-
perspectiveOrigin?: string;
|
|
9
|
-
rotation?: string;
|
|
10
|
-
className?: string;
|
|
11
|
-
style?: React.CSSProperties;
|
|
12
|
-
global?: {
|
|
13
|
-
css?: string;
|
|
14
|
-
body?: string;
|
|
15
|
-
};
|
|
16
|
-
children?: React.ReactNode;
|
|
17
|
-
};
|
|
18
|
-
declare const Obj: React.FC<ObjProps>;
|
|
19
|
-
|
|
20
|
-
export { Obj, type ObjProps };
|
package/dist/index.js
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
|
|
3
|
-
// src/components/Obj.tsx
|
|
4
|
-
var Obj = ({
|
|
5
|
-
width = "160px",
|
|
6
|
-
height = "160px",
|
|
7
|
-
depth = "150px",
|
|
8
|
-
perspective = 500,
|
|
9
|
-
perspectiveOrigin = "50% 50%",
|
|
10
|
-
rotation,
|
|
11
|
-
className,
|
|
12
|
-
style,
|
|
13
|
-
global,
|
|
14
|
-
children
|
|
15
|
-
}) => {
|
|
16
|
-
return /* @__PURE__ */ jsx(
|
|
17
|
-
"div",
|
|
18
|
-
{
|
|
19
|
-
className,
|
|
20
|
-
style: {
|
|
21
|
-
perspective,
|
|
22
|
-
perspectiveOrigin,
|
|
23
|
-
...style
|
|
24
|
-
},
|
|
25
|
-
"data-anim-3d-obj": true,
|
|
26
|
-
children
|
|
27
|
-
}
|
|
28
|
-
);
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
export { Obj };
|
|
32
|
-
//# sourceMappingURL=index.js.map
|
|
33
|
-
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Obj.tsx"],"names":[],"mappings":";;;AAmBO,IAAM,MAA0B,CAAC;AAAA,EACrC,KAAA,GAAQ,OAAA;AAAA,EACR,MAAA,GAAS,OAAA;AAAA,EACT,KAAA,GAAQ,OAAA;AAAA,EACR,WAAA,GAAc,GAAA;AAAA,EACd,iBAAA,GAAoB,SAAA;AAAA,EACpB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA;AACH,CAAA,KAAM;AAEH,EAAA,uBACG,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,SAAA;AAAA,MACA,KAAA,EAAO;AAAA,QACJ,WAAA;AAAA,QACA,iBAAA;AAAA,QACA,GAAG;AAAA,OACN;AAAA,MACA,kBAAA,EAAgB,IAAA;AAAA,MAGf;AAAA;AAAA,GACJ;AAEN","file":"index.js","sourcesContent":["import * as React from \"react\";\nimport \"./../styles/obj.css\";\n\nexport type ObjProps = {\n width?: string | number;\n height?: string | number;\n depth?: string | number;\n perspective?: string | number;\n perspectiveOrigin?: string;\n rotation?: string; // e.g., \"x 1s linear infinite\"\n className?: string;\n style?: React.CSSProperties;\n global?: {\n css?: string;\n body?: string;\n };\n children?: React.ReactNode;\n};\n\nexport const Obj: React.FC<ObjProps> = ({\n width = \"160px\",\n height = \"160px\",\n depth = \"150px\",\n perspective = 500,\n perspectiveOrigin = \"50% 50%\",\n rotation,\n className,\n style,\n global,\n children,\n}) => {\n // … your existing DOM/CSS 3D layout & animations\n return (\n <div\n className={className}\n style={{\n perspective,\n perspectiveOrigin,\n ...style,\n }}\n data-anim-3d-obj\n >\n {/* faces, wrappers, animations… */}\n {children}\n </div>\n );\n};\n"]}
|