1

package-lock.json

 {
-    "name": "webpack base",
+    "name": "mojs",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
-            "name": "webpack base",
+            "name": "mojs",
             "dependencies": {
+                "@mojs/core": "^1.3.0",
                 "@spark/share": "^2.0.276",
                 "@spark/svgaplayer": "^2.0.5",
                 "@spark/ui": "^2.1.8",
@@ -18,8 +19,8 @@
                 "mobx-react": "^7.1.0",
                 "postcss-loader": "^3.0.0",
                 "prettier": "^2.0.5",
-                "react": "^16.4.1",
-                "react-dom": "^16.4.1",
+                "react": "^16.14.0",
+                "react-dom": "^16.14.0",
                 "react-router-dom": "^5.2.0",
                 "spark-wrapper-fyge": "^1.1.21",
                 "style-loader": "^1.2.1"
@@ -2115,6 +2116,15 @@
                 "@jridgewell/sourcemap-codec": "^1.4.10"
             }
         },
+        "node_modules/@mojs/core": {
+            "version": "1.3.0",
+            "resolved": "http://npm.dui88.com:80/@mojs%2fcore/-/core-1.3.0.tgz",
+            "integrity": "sha512-qBb3kYZH9itoLtIW7GQOJPTCNsfmNhHGdo1l9/Y1o+4vvWJzWyqets45elQHToyfqMMi2jxmrBL0PgvfZspx0A==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/runtime": "^7.16.7"
+            }
+        },
         "node_modules/@polka/url": {
             "version": "1.0.0-next.21",
             "resolved": "http://npm.dui88.com:80/@polka%2furl/-/url-1.0.0-next.21.tgz",
@@ -17876,6 +17886,14 @@
                 "@jridgewell/sourcemap-codec": "^1.4.10"
             }
         },
+        "@mojs/core": {
+            "version": "1.3.0",
+            "resolved": "http://npm.dui88.com:80/@mojs%2fcore/-/core-1.3.0.tgz",
+            "integrity": "sha512-qBb3kYZH9itoLtIW7GQOJPTCNsfmNhHGdo1l9/Y1o+4vvWJzWyqets45elQHToyfqMMi2jxmrBL0PgvfZspx0A==",
+            "requires": {
+                "@babel/runtime": "^7.16.7"
+            }
+        },
         "@polka/url": {
             "version": "1.0.0-next.21",
             "resolved": "http://npm.dui88.com:80/@polka%2furl/-/url-1.0.0-next.21.tgz",

package.json

 {
-    "name": "webpack base",
+    "name": "mojs",
     "private": true,
     "scripts": {
         "dev": "npm run assets && cross-env PAGE=index node ./config/webpack.dev.config.js 8089",
@@ -14,6 +14,7 @@
         "imgminup": "node ./config/scripts/assets/index.js imgmin imgup"
     },
     "dependencies": {
+        "@mojs/core": "^1.3.0",
         "@spark/share": "^2.0.276",
         "@spark/svgaplayer": "^2.0.5",
         "@spark/ui": "^2.1.8",
@@ -26,8 +27,8 @@
         "mobx-react": "^7.1.0",
         "postcss-loader": "^3.0.0",
         "prettier": "^2.0.5",
-        "react": "^16.4.1",
-        "react-dom": "^16.4.1",
+        "react": "^16.14.0",
+        "react-dom": "^16.14.0",
         "react-router-dom": "^5.2.0",
         "spark-wrapper-fyge": "^1.1.21",
         "style-loader": "^1.2.1"

src/components/mojs/index.jsx

+import React, { useRef, useEffect, useState, useCallback } from "react";
+import mojs from "@mojs/core";
+import "./index.less"
+
+/**
+ * Usage:
+ * import MojsExample from './MojsExample';
+ *
+ * <MojsExample duration={1000}/>
+ */
+
+const MojsExample = ({ duration }) => {
+  const animDom = useRef();
+  const bouncyCircle = useRef();
+  const [isOpen, setIsOpen] = useState(false);
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  useEffect(() => {
+    // Prevent multiple instansiations on hot reloads
+    if (bouncyCircle.current) return;
+
+    // Assign a Shape animation to a ref
+    bouncyCircle.current = new mojs.Shape({
+      parent: animDom.current,
+      shape: "circle",
+      fill: { "#FC46AD": "#F64040" },
+      radius: { 50: 200 },
+      duration: duration,
+      isShowStart: true,
+      easing: "elastic.inout",
+      onStart() {
+        setIsAnimating(true);
+      },
+      onComplete() {
+        setIsAnimating(false);
+      },
+    });
+  });
+
+  // Update the animation values when the prop changes
+  useEffect(() => {
+    if (!bouncyCircle.current) return;
+    bouncyCircle.current.tune({ duration: duration });
+    isOpen
+      ? bouncyCircle.current.replayBackward()
+      : bouncyCircle.current.replay();
+    setIsOpen(!isOpen);
+  }, [duration]);
+
+  const clickHandler = useCallback(() => {
+    // If the "modal" is open, play the animation backwards, else play it forwards
+    isOpen ? bouncyCircle.current.playBackward() : bouncyCircle.current.play();
+    setIsOpen(!isOpen);
+  }, [isOpen]);
+
+  return (
+    <div ref={animDom} className="MojsExample">
+      <div className="content">
+        <h1>MoJS React Example</h1>
+        <p>Using hooks</p>
+        <button className="button" onClick={clickHandler}>
+          {isAnimating && isOpen ? "Animating" : isOpen ? "Close" : "Open"}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default MojsExample;
\ No newline at end of file

src/components/mojs/index.less

+@import "../../res.less";
+
+.MojsExample {
+  
+}
\ No newline at end of file

src/pages/homePage/homePage.jsx

 import React, { Component } from 'react';
 import './homePage.less'
-
+import Mo from "@src/components/mojs"
 export default class homePage extends Component {
 	render() {
 		return (
 			<div>
-				homePage
+				<Mo/>
 			</div>
 		)
 	}