anim-3d-obj 2.0.9 → 2.0.11

package/README.md

@@ -1,3 +1,10 @@
+# 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.  
@@ -25,6 +32,7 @@ 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)
@@ -35,6 +43,7 @@ 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)
@@ -44,8 +53,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
+
 ### 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.
@@ -66,42 +75,122 @@ 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
+-  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.