anim-3d-obj 2.0.2 → 2.0.9

package/README.md

@@ -1,10 +1,3 @@
-# anim-3d-obj
-
-A lightweight React component for rendering and animating 3D-like objects using only HTML & CSS.  
-No WebGL or heavy 3D libraries required.
-
----
-
 # React Typescript Cuboid Builder
 
 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
 -  `noAnim`: no animation place holder
 
 `X-AXIS Animations`
-
 -  `X360`: rotate 360 degrees on the x-axis: [demo](https://codesandbox.io/s/anim-3d-obj-x360-7kiuhw)
 -  `wobX`: wobble on x-axis (degreesHi <-> degreesLow): [demo](https://codesandbox.io/s/anim-3d-obj-wobx-ldwek7)
 -  `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
 -  `fwdx2736`: spin object on x-axis from 270 degrees to 360 degrees: [demo](https://codesandbox.io/s/anim-3d-obj-fwdx2736-e6c6wg)
 
 `Y-AXIS Animations`
-
 -  `Y360`: rotate 360 degrees on the y-axis: [demo](https://codesandbox.io/s/anim-3d-obj-y360-16lzeb)
 -  `wobY`: wobble on y-axis (degreesHi <-> degreesLow): [demo](https://codesandbox.io/s/anim-3d-obj-woby-tkoxms)
 -  `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
 -  `fwdy1827`: spin object on y-axis from 180 degrees to 270 degrees: [demo](https://codesandbox.io/s/anim-3d-obj-fwdy1827-osskgx)
 -  `fwdy2736`: spin object on y-axis from 270 degrees to 360 degrees: [demo](https://codesandbox.io/s/anim-3d-obj-fwdy2736-rnbs2q)
 
-## Config
 
+## Config
 ### Animations:
 
 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 = {
 ```
 
 ### Faces:
-
 This is an array of objects containing the face used for a given component
-
 ```javascript
-export interface FaceType {
-   name?: string; // front,back,left,right,top,top_rear,top_front,bottom,bottom_rear,bottom_front
-   css?: string | undefined;
-   body?: any; // can be JSX Component | string | number
-}
-
-const faces: FaceType[] = [
-   {
-      name: "back",
-      body: "BACK",
-      css: `background:rgba(22,22,22,.5)`,
-   },
-   {
-      name: "right",
-      body: "RIGHT",
-      css: `background:rgba(220,220,220,.5); 
+   export interface FaceType {
+      name?: string; // front,back,left,right,top,top_rear,top_front,bottom,bottom_rear,bottom_front
+      css?: string | undefined;
+      body?: any; // can be JSX Component | string | number
+   }
+
+   const faces: FaceType[] = [
+      {
+         name: "back",
+         body: "BACK",
+         css: `background:rgba(22,22,22,.5)`,
+      },
+      {
+         name: "right",
+         body: "RIGHT",
+         css: `background:rgba(220,220,220,.5); 
                border:1px solid #ddd`,
-   },
-];
+      },
+   ];
 ```
 
 ### Global (face):
-
-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.
-
+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.
 ```javascript
-interface GlobalType {
-   css?: string;
-   body?: string;
-}
-const global: GlobalType = {
-   body: "BODY FOR FACE WHICH DOES NOT CONTAIN BODY",
-   css: "color:red",
-};
+   interface GlobalType {
+      css?: string;
+      body?: string;
+   }
+   const global: GlobalType = {
+      body: "BODY FOR FACE WHICH DOES NOT CONTAIN BODY",
+      css: 'color:red'
+   };
 ```
 
 ![all sides](https://github.com/mdnelles/anim-3d-obj-npm-publisher/blob/4a9769a6386a3b5425ede9a04b346d5461051ae0/ang1.png?raw=true)
 
--  https://www.npmjs.com/package/anim-3d-obj
-
----
-
-## Features
-
--  🎨 Pure CSS-based 3D object rendering
--  ⚡ Zero dependencies (other than React)
--  🛠 Fully customizable width, height, depth, and colors
--  🌀 Built-in animation support
--  🌍 SSR-safe (works with Next.js, Remix, etc.)
-
----
-
-## Peer requirements
-
-React 18+. Works in Vite, CRA, Next.js (SSR-safe), Remix, etc.
-
----
-
-## Installation
-
-```bash
-npm install anim-3d-obj
-# or
-yarn add anim-3d-obj
-# or
-pnpm add anim-3d-obj
-
-import React from "react";
-import { Obj } from "anim-3d-obj";
-```
-
-## Full Example
-
-```bash
-function App() {
-  const global = {
-    css: "border: 1px solid #00f; color:#00f; backface-visibility: visible; text-align:center; line-height: 120px; font-size: 14px;",
-    body: "height: 120px; width: 120px;",
-  };
-
-  return (
-    <Obj
-      depth="120px"
-      height="120px"
-      width="120px"
-      perspective="800px"
-      rotation="x 1s linear infinite"
-      global={global}
-    >
-      Hello 3D
-    </Obj>
-  );
-}
-
-export default App;
-```
-
-# Props
-
-The `<Obj />` component accepts the following props:
-
-| Prop        | Type   | Default   | Description                                                                    |
-| ----------- | ------ | --------- | ------------------------------------------------------------------------------ |
-| width       | string | "100px"   | Width of the object.                                                           |
-| height      | string | "100px"   | Height of the object.                                                          |
-| depth       | string | "100px"   | Depth of the object (3rd dimension).                                           |
-| perspective | string | "600px"   | Perspective distance for 3D rendering.                                         |
-| rotation    | string | undefined | CSS animation shorthand for rotating the object (e.g. "x 1s linear infinite"). |
-| global      | object | {}        | Global styles for all faces (css for shared CSS, body for dimensions).         |
-
-## Tips
-
--  You can pass any React children inside `<Obj> ... </Obj>` to render content on the front face.
--  Combine with CSS variables or Tailwind utilities for theming.
--  Works with server-side rendering (SSR) — no window dependency.
+ - https://www.npmjs.com/package/anim-3d-obj

package/package.json

@@ -1,43 +1,50 @@
 {
    "name": "anim-3d-obj",
-   "version": "2.0.2",
-   "description": "Configurable 3D object with animated rotations and face content",
-   "license": "MIT",
-   "author": "mdnelles",
-   "sideEffects": [
-      "dist/**/*.css",
-      "src/styles/obj.css"
-   ],
-   "main": "dist/index.cjs",
-   "module": "dist/index.js",
-   "types": "dist/index.d.ts",
-   "exports": {
-      ".": {
-         "types": "./dist/index.d.ts",
-         "import": "./dist/index.js",
-         "require": "./dist/index.cjs",
-         "default": "./dist/index.js"
-      }
+   "version": "2.0.9",
+   "repository": {
+      "type": "git",
+      "url": "https://github.com/mdnelles/anim-3d-obj-npm-publisher.git"
    },
+   "homepage": "https://mdnelles.github.io/a3o-playground/",
+   "description": "React library for creating 3D objects quickly.  Also these objects can be animated",
+   "mainOLD": "dist/cjs/index.js",
+   "main": "dist/cjs/components/Obj.js",
+   "module": "dist/esm/components/Obj.js",
    "files": [
-      "dist",
-      "README.md",
-      "LICENSE"
+      "dist"
    ],
-   "peerDependencies": {
-      "react": ">=17 || >=18 || >=19",
-      "react-dom": ">=17 || >=18 || >=19"
+   "scripts": {
+      "build": "rm -rf dist/ && prettier --write src/ && npm run build:esm && npm run build:cjs",
+      "build:esm": "tsc",
+      "build:cjs": "tsc --module CommonJS --outDir dist/cjs"
    },
+   "author": "mdnelles",
+   "license": "MIT",
    "devDependencies": {
-      "@types/react": "^19.0.0",
-      "@types/react-dom": "^19.0.0",
-      "tsup": "^8.5.0",
-      "typescript": "^5.4.0"
+      "@types/node": "^18.11.9",
+      "@types/react": "^18.0.25",
+      "@types/react-dom": "^18.0.8",
+      "@types/styled-components": "^5.1.26",
+      "prettier": "^3.0.0",
+      "react": "^18.2.0",
+      "react-dom": "^18.2.0",
+      "typescript": "^4.8.4"
    },
-   "scripts": {
-      "clean": "rm -rf dist",
-      "build": "tsup",
-      "dev": "tsup --watch",
-      "prepublishOnly": "npm run clean && npm run build"
-   }
+   "peerDependencies": {
+      "react": "^18.2.0",
+      "react-dom": "^18.2.0"
+   },
+   "dependencies": {
+      "styled-components": "^5.3.6"
+   },
+   "keywords": [
+      "React",
+      "CSS",
+      "style",
+      "animation",
+      "cube",
+      "cuboid",
+      "3d",
+      "webGL"
+   ]
 }

package/dist/index.cjs

@@ -1,35 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-
-// src/components/Obj.tsx
-var Obj = ({
-  width = "160px",
-  height = "160px",
-  depth = "150px",
-  perspective = 500,
-  perspectiveOrigin = "50% 50%",
-  rotation,
-  className,
-  style,
-  global,
-  children
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className,
-      style: {
-        perspective,
-        perspectiveOrigin,
-        ...style
-      },
-      "data-anim-3d-obj": true,
-      children
-    }
-  );
-};
-
-exports.Obj = Obj;
-//# sourceMappingURL=index.cjs.map
-//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +0,0 @@
-{"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

@@ -1,38 +0,0 @@
-/* src/styles/obj.css */
-.anim3d-stage {
-  position: relative;
-  width: max-content;
-  height: max-content;
-  perspective: 600px;
-  perspective-origin: 50% 50%;
-}
-.anim3d-wrapper {
-  position: relative;
-  transform-style: preserve-3d;
-  width: var(--obj-w);
-  height: var(--obj-h);
-}
-.anim3d-center {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  width: 2px;
-  height: 2px;
-  background: #f00;
-  transform: translate(-50%, -50%);
-  z-index: 10;
-}
-.anim3d-face {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  width: var(--obj-w);
-  height: var(--obj-h);
-  transform-style: preserve-3d;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  backface-visibility: visible;
-  box-sizing: border-box;
-}
-/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +0,0 @@
-{"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

@@ -1,20 +0,0 @@
-import * as React from 'react';
-
-type ObjProps = {
-    width?: string | number;
-    height?: string | number;
-    depth?: string | number;
-    perspective?: string | number;
-    perspectiveOrigin?: string;
-    rotation?: string;
-    className?: string;
-    style?: React.CSSProperties;
-    global?: {
-        css?: string;
-        body?: string;
-    };
-    children?: React.ReactNode;
-};
-declare const Obj: React.FC<ObjProps>;
-
-export { Obj, type ObjProps };

package/dist/index.d.ts

@@ -1,20 +0,0 @@
-import * as React from 'react';
-
-type ObjProps = {
-    width?: string | number;
-    height?: string | number;
-    depth?: string | number;
-    perspective?: string | number;
-    perspectiveOrigin?: string;
-    rotation?: string;
-    className?: string;
-    style?: React.CSSProperties;
-    global?: {
-        css?: string;
-        body?: string;
-    };
-    children?: React.ReactNode;
-};
-declare const Obj: React.FC<ObjProps>;
-
-export { Obj, type ObjProps };

package/dist/index.js

@@ -1,33 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-
-// src/components/Obj.tsx
-var Obj = ({
-  width = "160px",
-  height = "160px",
-  depth = "150px",
-  perspective = 500,
-  perspectiveOrigin = "50% 50%",
-  rotation,
-  className,
-  style,
-  global,
-  children
-}) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className,
-      style: {
-        perspective,
-        perspectiveOrigin,
-        ...style
-      },
-      "data-anim-3d-obj": true,
-      children
-    }
-  );
-};
-
-export { Obj };
-//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +0,0 @@
-{"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"]}