anim-3d-obj 1.1.16 → 1.1.18

package/README.md

@@ -3,105 +3,152 @@
 This project allows a user to create Cuboids of any size simply by entering a set of parameters.  
 The program does the leg work with regard to calculating translationZ depth and config on the fly.
 
-## Deployment
-
-Install sequence
-
-```
-git clone https://github.com/mdnelles/anim-3d-objs.git
-npm i
-npm run start
-```
+- [GIT HOME](https://github.com/mdnelles/anim-3d-objs-launcher)
+- [NPM HOME](https://www.npmjs.com/package/anim-3d-obj) npm i anim-3d-obj
 
 ## Examples
 
-All sided simple https://codesandbox.io/s/anim-3d-obj-all-sides-simple-sdy1q0
-
-Two sided simple https://codesandbox.io/s/anim-3d-obj-2-sides-simple-9wognm
-
-90 degree wobble on X axis https://codesandbox.io/s/anim-3d-obj-wobblex-08mxqe
-
-speed wobble(y) 3 sides https://codesandbox.io/s/anim-3d-obj-3-sides-wobble-y-axis-dceqdp
-
-## Authors
+- [6 sided Cuboid - animate X360 Y360](https://codesandbox.io/s/anim-3d-obj-all-sides-simple-bf67yg)
+- [3 sided Object - animate y-axis](https://codesandbox.io/s/anim-3d-obj-3-sides-wobble-y-axis-wglkms)
+- [Double box spin](https://codesandbox.io/s/react-anim-3d-double-box-spin-vbdhg2)
+- [2 sided object with animation wobble](https://codesandbox.io/s/anim-3d-obj-wobblex-mmidkg)
+- [Parallel divs animated x and y axis in tandem](https://codesandbox.io/s/anim-3d-obj-2-sides-simple-4057y7)
+- [Spinning Slab](https://codesandbox.io/s/react-anim-3d-pulse-kc8g0f)
+
+## Config
+
+Animations are optional. Either or both of `anim1Specs` or `anim2Specs` can be applied to the object.
+
+```typescript
+const anim1Specs: object = {
+  border: '', // while testing reveal the animation wrapper
+  degreesHi: -45, // degrees if spin
+  degreesLow: 45, // degrees if spin
+  delay: 0, // start delay in seconds
+  direction: 'normal', //normal alternating reverse
+  duration: 8, // seconds
+  fillMode: 'forward', // node forward backward both
+  iterationCount: 'infinite', // number or infinte
+  name: 'Y360', // ** ANIMATIONS
+  timing: 'ease-in-out', // linear ease ease-in-out
+}
+```
 
--  [@mdnelles](https://github.com/mdnelles)
+`** ANIMATIONS`
+
+- X360: rotate 360 degrees on the x-axis
+- Y360: rotate 360 degrees on the y-axis
+- fadeInkf: fade object in from 0 to 1 Opacity
+- wobY: wobble on y-axis (degreesHi <-> degreesLow)
+- wobX: wobble on x-axis (degreesHi <-> degreesLow)
+- fwdx018: spin object on x-axis from 0 degrees to 180 degrees
+- fwdx1836: spin object on x-axis from 180 degrees to 360 degrees
+- fwdx09: spin object on x-axis from 0 degrees to 90 degrees
+- fwdx918: spin object on x-axis from 90 degrees to 180 degrees
+- fwdx1827: spin object on x-axis from 180 degrees to 270 degrees
+- fwdx2736: spin object on x-axis from 270 degrees to 360 degrees
+- fwdy018: spin object on y-axis from 0 degrees to 180 degrees
+- fwdy1836: spin object on y-axis from 180 degrees to 360 degrees
+- fwdy09: spin object on y-axis from 0 degrees to 90 degrees
+- fwdy918: spin object on y-axis from 90 degrees to 180 degrees
+- fwdy1827: spin object on y-axis from 180 degrees to 270 degrees
+- fwdy2736: spin object on y-axis from 270 degrees to 360 degrees
+- floatX: float object so is not stationary
+- floatShadow: float object + add shadow
+- pulseSM: pulse object Small
+- pulseMD: pulse object Medium
+- pulseLG: pulse object Large
+- noAnim: no animation place holder
+
+<>
+
+GLOBAL CONFIG
+
+```typescript
+// EXAMPLE GLOBAL FACE CONFIG
+// This will be applied to all Faces that do not have their own custom config
+const global: object = {
+  // // face individual styles (over rides global)
+  css: `
+         border: 1px solid #fff;
+         background: rgb(2,0,36);
+         background: linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(141,191,249,.7) 100%);
+         color:white;
+         text-align:center;
+         line-height:10;
+         backface-visibility: visible;
+         font-family: Arial, Helvetica, sans-serif;
+         border-radius:5px;
+         `,
+  body: ' ',
+}
+```
 
-## Demo
+<>
 
-The following code
+CUSTOM CONFIG FOR INDIVIDUAL FACES
 
-```
-const indivStyles: object = {
+```typescript
+const custom: object = {
       // // face individual styles (over rides global)
-      bottom: {
-         bfv: "visible",
-         fontFamily: "Helvetica",
-      },
       front: {
-         border: "1px solid #f00",
-         bgc: "#f00",
-         bfv: "visible",
-         fontFamily: "Arial, Sans",
+         css: ``,
+         body: <Login />,
       },
       left: {
-         bgc: "yellow",
-      },
-      top: {
-         bgc: "pink",
+         css: `
+         border: 1px solid #fff;
+         background: rgb(2,0,36);
+         color:white;
+         text-align: center;
+         line-height:8;`
+         body: " ",
       },
       right: {
-         bgc: "purple",
+         css: ``,
+         body: " ",
       },
       back: {
-         border: "1px solid #f00",
-         bgc: "#0f0",
-         bfv: "visible",
-         fontFamily: "Arial, Sans",
+         css: ``,
+         body: <Logout />,
+      },
+      bottom: {
+         css: `
+         background-color:rgba(141,191,249,1);
+         -webkit-box-shadow: 0px 0px 23px 18px #858585;
+         box-shadow: 0px 0px 23px 18px #858585;
+         `,
       },
-   };
 ```
 
+## Render
+
 and
 
-```
-         <Cuboid
-            width={260}
-            depth={260}
-            height={92}
-            perspectiveOrigin='50% 50%'
-            zIndex={10}
-            animSpecs={animSpecs}
-            indivStyles={indivStyles}
-            faces={faceprops}
-            globalStyles={globalStyles}
-         >
-            {}
-         </Cuboid>
+```typescript
+<Cuboid
+  width={250}
+  height={300}
+  depth={250}
+  perspective={800}
+  perspectiveOrigin='50% 50%'
+  zIndex={10}
+  anim1Specs={anim1Specs}
+  anim2Specs={anim2Specs}
+  custom={custom}
+  faces={faceprops}
+  global={global}
+/>
 ```
 
 will produce the following
 
 ![Logo](https://raw.githubusercontent.com/mdnelles/objs-local/main/img.png?token=GHSAT0AAAAAABQVNJ4VATWQM4SI3LXSTDZWYVDOL7Q)
 
-##Face Format
-for things like `background-image: url("myImg.png");` they can be done in `moreStyles` argument.
+## Authors
 
-```
-   const Specs: any = styled.div`
-      opacity: ${opac ? opac : globalStyles.opac};
-      position: ${position};
-      left: ${left};
-      margin: ${margin};
-      padding: ${padding};
-      width: ${width}px;
-      font-family: ${fontFamily};
-      height: ${height}px;
-      background-color: ${bgc ? bgc : globalStyles.bgc};
-      border: ${border ? border : globalStyles.border};
-      backface-visibility: ${bfv ? bfv : globalStyles.bfv};
-      ${transform}
-      top: ${top};
-      ${moreStyles}
-   `;
-```
+- [@mdnelles](https://github.com/mdnelles)
+
+## License
+
+[MIT](https://choosealicense.com/licenses/mit/)

package/dist/cjs/components/Card.d.ts

@@ -0,0 +1,2 @@
+import { ObjProps } from './Faces/FaceInter';
+export declare const Card: (props: ObjProps) => any;

package/dist/cjs/components/Cuboid.d.ts

@@ -0,0 +1,2 @@
+import { ObjProps } from './Faces/FaceInter';
+export declare const Cuboid: (props: ObjProps) => any;

package/dist/cjs/components/Faces/Face.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { FaceProps } from './FaceInter';
+declare const Face: (props: FaceProps) => JSX.Element;
+export default Face;

package/dist/cjs/components/Ribbon.d.ts

@@ -0,0 +1,2 @@
+import { ObjProps } from './Faces/FaceInter';
+export declare const Ribbon: (props: ObjProps) => any;

package/dist/cjs/components/styles/AnimWrap.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { AnimStylesProps } from './Anim';
+export declare const AnimWrap: (props: AnimStylesProps) => JSX.Element;

package/dist/cjs/components/styles/Anims.d.ts

@@ -0,0 +1,30 @@
+interface AllAnimsProps {
+    degreesLow?: number;
+    degreesHi?: number;
+}
+export declare const allAnims: (props: AllAnimsProps) => {
+    X360: any;
+    Y360: any;
+    fadeInkf: any;
+    wobY: any;
+    wobX: any;
+    fwdx018: any;
+    fwdx1836: any;
+    fwdx09: any;
+    fwdx918: any;
+    fwdx1827: any;
+    fwdx2736: any;
+    fwdy018: any;
+    fwdy1836: any;
+    fwdy09: any;
+    fwdy918: any;
+    fwdy1827: any;
+    fwdy2736: any;
+    floatX: any;
+    floatShadow: any;
+    pulseSM: any;
+    pulseMD: any;
+    pulseLG: any;
+    noAnim: any;
+};
+export {};

package/dist/cjs/components/styles/Global.d.ts

@@ -0,0 +1 @@
+export declare const ObjWrapper: any;

package/dist/cjs/components/styles/Scene.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+interface SceneStyleProps {
+    width?: number | string;
+    height?: number | string;
+    perspective?: number | string | undefined;
+    perspectiveOrigin?: string | undefined;
+    zIndex?: number | undefined;
+    children: any;
+}
+export declare const SceneStyle: (props: SceneStyleProps) => JSX.Element;
+export {};

package/dist/cjs/index.d.ts

@@ -0,0 +1,5 @@
+import Face from './components/Faces/Face';
+import { Cuboid } from './components/Cuboid';
+import { Ribbon } from './components/Ribbon';
+import { Card } from './components/Card';
+export { Face, Cuboid, Ribbon, Card };