first commit

.babelrc

@@ -0,0 +1,25 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": "> 0.25%, not dead",
+        "useBuiltIns": "usage",
+        "corejs": "3.18",
+      }
+    ]
+  ],
+  "exclude": [
+    "node_modules/**"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-syntax-jsx",
+    [
+      "@babel/plugin-transform-react-jsx",
+      {
+        "pragma": "MotorCortex.utils.createDOMElement"
+      }
+    ]
+  ]
+}

.browserlistrc

@@ -0,0 +1,6 @@
+{
+"browserslist": [
+    ">0.2%",
+    "not ie <= 11"
+  ]
+}

.eslintignore

@@ -0,0 +1 @@
+bundle.js

.eslintrc

@@ -0,0 +1,60 @@
+{
+  "parser": "@babel/eslint-parser",
+  "extends": [
+    "eslint:recommended",
+    "prettier"
+  ],
+  "plugins": [
+    "babel",
+    "prettier"
+  ],
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "globals": {
+    "document": false,
+    "escape": false,
+    "navigator": false,
+    "unescape": false,
+    "window": false,
+    "describe": true,
+    "before": true,
+    "it": true,
+    "expect": true,
+    "sinon": true
+  },
+  "rules": {
+    "prettier/prettier": [
+      "error"
+    ],
+    "linebreak-style": [
+      "error",
+      "unix"
+    ],
+    "semi": [
+      "error",
+      "always"
+    ],
+    "no-console": [
+      "error",
+      {
+        "allow": [
+          "warn",
+          "error",
+          "info"
+        ]
+      }
+    ],
+    "prefer-promise-reject-errors": "error",
+    "prefer-const": [
+      "error",
+      {
+        "destructuring": "any",
+        "ignoreReadBeforeAssign": false
+      }
+    ],
+    "no-var": "error",
+    "no-unused-vars": "error"
+  }
+}

.gitignore

@@ -0,0 +1,73 @@
+# Node modules
+node_modules
+demo/bundle.js
+demo/bundle.js.LICENSE.txt
+
+#Package JSON Lock
+package-lock.json
+
+# Coverage
+coverage
+
+# Output folders
+build
+compiled
+.nyc_output
+
+# Cachses
+.awcache
+.rpt2_cache
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+# VSCode
+.vscode
+
+# Cloud9
+.c9revisions
+.c9
+
+# Intelij
+.idea
+cmake-build-*/
+
+# Sublime text
+*.iws
+*.tmlanguage.cache
+*.tmPreferences.cache
+*.stTheme.cache
+*.sublime-workspace
+
+# OSX
+.DS_Store
+.AppleDouble
+.LSOverride
+._*
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+# Windows
+*.lnk
+Thumbs.db
+ehthumbs.db
+ehthumbs_vista.db
+$RECYCLE.BIN/
+[Dd]esktop.ini
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp

README.md

@@ -0,0 +1,34 @@
+# motorcortex-clip-starter
+
+## Purpose
+
+This repository is a starter boilerplate for creating MotorCortex Clips with DCode. Do not use this repo directly. Instead, use it from the **[Donkeyclip CLI](https://github.com/donkeyclip/cli)**
+
+## Structure and Contents
+
+It includes:
+
+- a pre-configured webpack so you don't have to care about setting up your project
+- pre-configured eslint and babel
+- a "clip" folder in order for you to use to define your Clip and Incidents. The folder
+  contains the `clip.js` file which is just a starting point for your Clip.
+- a "demo" folder that is there just for the needs of viewing, debugging and creating
+  your Clip through DCode.
+
+## How to use
+
+Once you've created your new Clip you have the ability to publish it through the [donkeyclip](https://donkeyclip.com) page. You can then embed your clip in any site you want!.
+
+## Commands
+
+- `npm run build`: builds the demo
+- `npm start`: builds and starts the demo
+- `npm render`: render the demo to mp4 video see [@donkeyclip/video-renderer](https://github.com/donkeyclip/video-renderer) from more
+
+## Have fun!!!
+
+## License
+
+[MIT License](https://opensource.org/licenses/MIT)
+
+[<img src="https://presskit.donkeyclip.com/logos/donkey%20clip%20logo.svg" width=250></img>](https://donkeyclip.com)

clip/clip.css

@@ -0,0 +1,69 @@
+* {
+  --color: {{ initParams.color }};
+}
+
+.root {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  background-color: #121212;
+}
+
+
+.blob-wrapper {
+  filter: url("#goo");
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.blob {
+  position: absolute;
+  left: -20%;
+  top: 50%;
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+  text-align: center;
+  color: white;
+  font-size: 40px;
+  border-radius: 100%;
+  margin-top: -50px;
+  margin-left: -50px;
+  background-color: rgba(147,92,255,1) ;
+
+}
+
+.br{
+  background-image: linear-gradient(90deg, rgba(52,200,255,1) 0%,  rgba(52,200,255,1) 100%);
+  left: 120%;
+}
+
+.logo{
+  position: absolute;
+  left: 50.5%;
+  top: 49%;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+}
+
+.logo-path{
+  stroke-dasharray: 200;
+  stroke-dashoffset: 200;
+  stroke-width:12;
+  stroke:#121212
+}
+
+
+.logo-text{
+  position: absolute;
+  width: 0px;
+  transform: translate(-50%, -50%);
+  top: 50%;
+  left: 52%;
+}
+

clip/clip.html

@@ -0,0 +1,30 @@
+<div class="root">
+  <div class="blob-wrapper">
+    <div class="blob bl"></div>
+    <div class="blob br"></div>
+  </div>
+  <svg class="logo" xmlns="http://www.w3.org/2000/svg" width="132.6" height="132.6" xml:space="preserve">
+
+    <path id="svg_1" d="m91.708,32.915l0,34.947l-11.04,0c-2.207,-7.766 -9.44,-13.477 -17.892,-13.477c-10.278,0 -18.653,8.375 -18.653,18.654s8.375,18.654 18.653,18.654c8.528,0 15.685,-5.71 17.893,-13.477l10.583,0c-2.437,13.477 -14.238,23.831 -28.476,23.831c-15.912,0 -28.932,-12.943 -28.932,-28.932c0,-15.913 12.943,-28.932 28.932,-28.932a28.822,28.822 0 0 1 18.654,6.852l0,-24.288l10.278,6.168z" fill="#ffffff" stroke="#fff"/>
+    </svg>
+  <svg version="1.1" id="Layer_1"
+    class="logo-text"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="427.33" height="80.2"  xml:space="preserve">
+
+    <g aria-label="donkey clip" transform="translate(-2.504 62.503)" id="text15" style="font-size:86.3296px;font-family:NiveauGroteskBold;fill:#fff"><path d="M36.086 0v-5.525Q31.25.95 22.877.95 13.9.95 8.201-5.44q-5.697-6.474-5.697-16.057 0-9.583 5.697-15.971 5.698-6.388 14.763-6.388 8.374 0 13.122 6.388v-22.1h11.74V0Zm-3.108-13.813q3.108-3.194 3.108-7.683 0-4.49-3.108-7.597-3.022-3.194-7.597-3.194-4.576 0-7.683 3.194-3.108 3.108-3.108 7.597 0 4.49 3.108 7.683 3.107 3.194 7.683 3.194 4.575 0 7.597-3.194z" style="font-size:86.3296px;font-family:NiveauGroteskBold;fill:#fff" id="path1405"/><path d="M55.164-21.496q0-9.41 6.475-15.885 6.475-6.474 15.885-6.474t15.884 6.474q6.475 6.475 6.475 15.885 0 9.496-6.475 15.97Q86.934.95 77.524.95T61.639-5.525Q55.164-12 55.164-21.496zM70.1-29.18q-3.021 3.194-3.021 7.683 0 4.49 3.021 7.77 3.022 3.194 7.425 3.194 4.489 0 7.424-3.194 2.935-3.195 2.935-7.77 0-4.576-2.935-7.683-2.935-3.195-7.424-3.195-4.403 0-7.425 3.195z" style="font-size:86.3296px;font-family:NiveauGroteskBold;fill:#fff" id="path1407"/><path d="M118.962-42.992v5.439q3.971-6.302 11.31-6.302 6.82 0 10.963 4.575 4.23 4.576 4.23 11.568V0h-11.827v-24.431q0-3.54-1.986-5.698-1.985-2.245-5.352-2.245-3.194 0-5.18 1.986-1.985 1.986-2.158 5.439V0h-11.74v-42.992z" style="font-size:86.3296px;font-family:NiveauGroteskBold;fill:#fff" id="path1409"/><path d="M154.875 0v-59.567h11.74v32.805l11.742-16.23h13.812L179.22-25.64 192.17 0h-13.64l-8.115-17.266-3.798 5.18V0Z" style="font-size:86.3296px;font-family:NiveauGroteskBold;fill:#fff" id="path1411"/><path d="M234.73-17.784h-29.18q.777 3.712 3.799 5.957 3.108 2.158 7.597 2.158 8.287 0 14.59-4.057v11.309Q225.06.95 215.995.95q-9.669 0-15.97-6.216-6.217-6.302-6.217-16.23 0-9.496 6.13-15.885 6.13-6.474 15.366-6.474 9.065 0 14.59 5.956 5.525 5.87 5.525 14.504 0 2.849-.69 5.611zm-13.21-14.244q-2.503-2.072-6.302-2.072-3.798 0-6.56 2.158-2.677 2.158-3.109 5.266h18.561q-.086-3.28-2.59-5.352z" style="font-size:86.3296px;font-family:NiveauGroteskBold;fill:#fff" id="path1413"/><path d="M242.758 17.698 252.6-3.281l-15.8-39.711h13.209l9.064 24.863 9.583-24.863h13.295l-25.554 60.69z" style="font-size:86.3296px;font-family:NiveauGroteskBold;fill:#fff" id="path1415"/><path d="M332.8-13.554v12.432Q328.915.95 323.303.95q-10.1 0-16.402-6.389-6.302-6.474-6.302-16.057 0-9.669 6.302-15.971 6.302-6.388 16.402-6.388 5.526 0 9.497 1.985v12.432q-4.23-2.936-9.497-2.936-4.661 0-7.77 3.195-3.02 3.107-3.02 7.683 0 4.575 3.02 7.77 3.109 3.194 7.77 3.194 5.526 0 9.497-3.022z" style="font-size:86.3296px;font-family:NiveauGroteskBold;fill:#fff" id="path1417"/><path d="M353-59.567V0h-11.826v-59.567z" style="font-size:86.3296px;font-family:NiveauGroteskBold;fill:#fff" id="path1419"/><path d="M374.583-42.992V0h-11.74v-42.992zm-10.791-7.597q-1.986-1.986-1.986-4.92 0-2.936 1.986-4.922 1.986-2.072 4.92-2.072 3.022 0 4.922 2.072 1.985 1.986 1.985 4.921 0 2.935-1.985 4.92-1.9 1.986-4.921 1.986-2.936 0-4.921-1.985z" style="font-size:86.3296px;font-family:NiveauGroteskBold;fill:#fff" id="path1421"/><path d="M396.165-42.992v6.216q4.403-7.08 13.209-7.08 8.892 0 14.676 6.389 5.784 6.388 5.784 15.97 0 9.584-5.784 16.058Q418.266.95 409.287.95q-8.46 0-13.122-6.475v23.223h-11.74v-60.69Zm3.108 13.899q-3.108 3.108-3.108 7.597 0 4.49 3.108 7.683 3.108 3.194 7.684 3.194 4.489 0 7.51-3.194 3.108-3.194 3.108-7.683 0-4.49-3.021-7.597-3.022-3.194-7.597-3.194-4.576 0-7.684 3.194z" style="font-size:86.3296px;font-family:NiveauGroteskBold;fill:#fff" id="path1423"/></g>
+  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+    <defs>
+      <filter id="goo">
+        <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
+        <feColorMatrix values="
+        1 0 0 0 0
+        0 1 0 0 0
+        0 0 1 0 0
+        0 0 0 20 -10                       
+        " />
+      </filter>
+    </defs>
+  </svg>
+</div>

clip/clip.js

@@ -0,0 +1,36 @@
+import { HTMLClip } from "@donkeyclip/motorcortex";
+import html from "./clip.html";
+import css from "!!raw-loader!./clip.css";
+import { comboBr,comboBl,opacity ,left,width,color} from "./incidents";
+import { initParamsValidationRules, initParams } from "./initParams";
+
+export const clip = new HTMLClip({
+  html,
+  css,
+  host: document.getElementById("clip"),
+  initParamsValidationRules,
+  initParams: initParams[1].value,
+  containerParams: {
+    width: "800px",
+    height: "450px",
+  },
+});
+
+
+
+
+clip.addIncident(left("45%",".bl", 500), 0);
+clip.addIncident(left("55%",".br", 500), 0);
+clip.addIncident(comboBr(".br"), 500);
+clip.addIncident(comboBl(".bl"), 500);
+clip.addIncident(comboBl(".br"), 900);
+clip.addIncident(comboBr(".bl"), 900);
+clip.addIncident(left("50%",".br,.bl", 200), 1300);
+clip.addIncident(opacity(1,".logo", 1000,"easeOutQuart"), 1500);
+clip.addIncident(width("430px",".logo-text", 1000,"easeOutQuart"), 2500);
+clip.addIncident(left("60%",".logo-text", 850,"easeOutQuart"), 2500);
+clip.addIncident(left("25%",".br,.bl", 850,"easeOutQuart"), 2500);
+clip.addIncident(left("25.5%",".logo", 850,"easeOutQuart"), 2500);
+clip.addIncident(color("linear-gradient(90deg, rgba(52,200,255,1) 0%,  rgba(147,92,255,1) 100%)",".br", 200,"easeOutQuart"), 1500);
+
+