index.js

import { HTMLClip, loadPlugin } from "@donkeyclip/motorcortex";
import Player from "@donkeyclip/motorcortex-player";
import AbstractsDefinition from "../dist/motorcortex-abstracts.esm";

const Plugin = loadPlugin(AbstractsDefinition);

const clip = new HTMLClip({
  css: `
    .container {
      overflow: hidden;
      width:425px;
      height:240px;
    }
    .wrapper{
      width:1280px;
      height:720px;
      display:flex;
      font-family: 'Poppins', sans-serif;
      display: grid;
      grid-row-gap:50px;
      grid-column-gap:50px;
      grid-template-columns: repeat(3, 1fr);
      justify-items: center;
    }
    .flex{
      display: flex;
      justify-content: center;
      background-color: #bfbfbf;
      height: 100%;
      width: 100%;
    }
  `,
  html: `
    <div class="flex">
      <div class="wrapper">
        <div class="container container1"></div>
        <div class="container container2"></div>
        <div class="container container3"></div>
        <div class="container container4"></div>
        <div class="container container5"></div>
        <div class="container container6"></div>
        <div class="container container7"></div>
        <div class="container container8"></div>
        <div class="container container9"></div>
      </div>
  </div>
  `,
  host: document.getElementById("clip"),
  containerParams: {
    width: "1728px",
    height: "872px",
  },
  id: "root",
  fonts: [
    {
      type: `google-font`,
      src: `https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,400;0,500;0,800;1,700;1,800;1,900&display=swap`,
    },
  ],
});

const CrossMoveRight = new Plugin.CrossMoveRight(
  {
    width: 425,
    height: 240,
    crossSize: 30,
    crossThickness: 5,
    travelDistance: 240,
    items: 3,
    color: "#8300ff",
  },
  {
    selector: ".container1",
  }
);

const CrossMoveRightOutline = new Plugin.CrossMoveRightOutline(
  {
    width: 425,
    height: 240,
    crossSize: 30,
    travelDistance: 240,
    steps: 5,
    color: "#8300ff",
  },
  {
    selector: ".container2",
  }
);

const CrossRandom = new Plugin.CrossRandom(
  {
    width: 425,
    crossSize: 30,
    crossThickness: 5,
    items: 12,
    color: "#8300ff",
    rows: 3,
    timing: 0.5,
  },
  {
    selector: ".container3",
  }
);

const VerticalLinesMove = new Plugin.VerticalLinesMove(
  {
    width: 425,
    height: 240,
    maxLineWidth: 250,
    color: "#8300ff",
  },
  {
    selector: ".container4",
  }
);

const CircleExplosion = new Plugin.CircleExplosion(
  {
    width: 425,
    height: 240,
    maxCirlcleSize: 30,
    travelDistance: 200,
    color: "#8300ff",
    items: 5,
    minR: 0,
    maxR: 180,
    border: true,
  },
  {
    selector: ".container5",
  }
);

const CircleBubbleUp = new Plugin.CircleBubbleUp(
  {
    width: 425,
    height: 240,
    maxCirlcleSize: 30,
    travelDistance: 200,
    color: "#8300ff",
    items: 5,
    border: true,
  },
  {
    selector: ".container6",
  }
);

const HorizontalLinesMove = new Plugin.HorizontalLinesMove(
  {
    width: 425,
    height: 240,
    maxLineHeight: 50,
    color: "#8300ff",
  },
  {
    selector: ".container7",
  }
);

const Dots = new Plugin.Dots(
  {
    width: 425,
    dotSize: 10,
    items: 28,
    color: "#8300ff",
    rowGap: 30,
    columnGap: 50,
    rows: 7,
    timing: 1.5,
    repeats: 3,
  },
  {
    selector: ".container8",
  }
);

const CrossRowReveal = new Plugin.CrossRowReveal(
  {
    width: 425,
    crossSize: 30,
    crossThickness: 5,
    items: 8,
    color: "#8300ff",
    reverse: false,
    timing: 1,
  },
  {
    selector: ".container9",
  }
);

clip.addIncident(CrossMoveRight, 0);
clip.addIncident(CrossMoveRightOutline, 0);
clip.addIncident(CrossRandom, 0);
clip.addIncident(VerticalLinesMove, 0);
clip.addIncident(CircleExplosion, 0);
clip.addIncident(CircleBubbleUp, 0);
clip.addIncident(HorizontalLinesMove, 0);
clip.addIncident(Dots, 0);
clip.addIncident(CrossRowReveal, 0);

new Player({ clip });