Hello MC

MotorCortex is available as an npm package.

To install and save in your package.json dependencies, run:

npm
yarn

npm install @donkeyclip/motorcortex
npm install @donkeyclip/motorcortex-player

yarn add @donkeyclip/motorcortex
yarn add @donkeyclip/motorcortex-player

Let's create our first Clip.

import { HTMLClip, CSSEffect } from "@donkeyclip/motorcortex";

import Player from "@donkeyclip/motorcortex-player";

const myClip = new HTMLClip({
  host: document.getElementById("clip"),
  html: `
    <div class="root">
      <div class="section">
        <div class="letter" mc-for="key,item" mc-of="initParams.toptxt">{{ item }}</div>
      </div>
      <div class="section">
        <div class="letter" mc-for="key,item" mc-of="initParams.maintxt">{{ item }}</div>
      </div>
    </div>`,
  css: `
    .root{
      background:black;
      color: {{initParams.fontColor}};
      width:100%;
      height:100%;
      font-family: 'Raleway', sans-serif;
      position: relative;
      font-weight: bold;
    }
    .section{
      width: 100%;
      margin: 55px 0;
    }
    .letter{
      display: inline-block;
      width: 66px;
      height: 58px;
      text-align: center;
      font-size: 40px;
      margin: 3px;
      padding-top: 8px;
      text-shadow: 0px 2px 2px #000000;
      opacity: 0;
      background: black;
      border-radius: 10px;
    }
  `,
  fonts: [
    {
      type: `google-font`,
      src: `https://fonts.googleapis.com/css2?family=Raleway:wght@800&display=swap`,
    },
  ],
  containerParams: {
    width: "800px",
    height: "600px",
  },
  initParams: {
    toptxt: "Hello",
    maintxt: "MotorCortex",
    color: "#a1032d",
    fontColor: "white",
  },
});

const effect = new CSSEffect(
  {
    animatedAttrs: {
      transform: {
        rotate: "@expression(index*360)deg",
      },
      opacity: 1,
    },
  },
  {
    selector: ".letter",
    duration: "@stagger(400, 2500, 0, easeOutCubic)",
    delay: "@stagger(0, 400, 0, easeOutCubic)",
    easing: "easeOutCirc",
  }
);

const bgEffect = new CSSEffect(
  {
    animatedAttrs: {
      background: "@initParams.color",
    },
  },
  {
    selector: ".letter",
    duration: 1200,
    easing: "easeInSine",
  }
);

myClip.addIncident(effect, 0);
myClip.addIncident(bgEffect, 1900);

new Player({ clip: myClip });

On this example we've created a Clip by providing HTML, CSS, fonts, containerParams and initParams.

initParams are used to provide dynamic parameters to your clip (open codesandbox and play with it), while containerParams define the width and height of the clip itself.

We've added a couple of CSS Effects and we've used the Player to play our Clip.

CSS Effects are supported out of the box via the CSSEffect Incident but that's only the beginning. There are dozens of other Effects (or even ready to use Animations) exposed by plugins.

Result (codesandbox)​

Result (codesandbox)