DOCSEARCHbyAlgolia
Submit Docs

MotorCortex JS

website·Indexed 31 days ago

https://motorcortexjs.com

An SDK for creating animations and audio-visual experiences using Clips and Incidents. It features a built-in Template Engine for HTML and CSS properties, a plugin development system with donkeyclip-cli, and capabilities for managing audio playback and effects.

Tokens
23.1K
Snippets
89
Records
147
Agent score
58%

What's inside MotorCortex

  1. Overview of MotorCortex dynamic video framework

    MotorCortex is an object-oriented JavaScript framework designed for the Web that enables the creation of dynamic, portable clip components with real-time rendering and editing. It provides CSS animation capabilities and supports a plugin system to extend functionality with features such as 3D effects, morphing, combo animations, and video playback. Official plugins are quality-controlled and code-reviewed to ensure safety.

  2. Overview of DCode UI

    DCode is a web-based tool for developing, testing, and publishing MotorCortex clips. Its layout consists of:

    • Left Panel: A local preview of the clip with a player for playback, pausing, and seeking.
    • Right Panel: Tools for naming the clip, testing dynamic parameters, and adjusting player styles.
    • Top Right: Connection options to publish the clip to donkeyclip.

  3. Understand the Clip concept in MotorCortex

    A Clip is a core entity in MotorCortex characterized by owning a context (elements accessible via selectors) and a timeline. It is responsible for managing the addition, editing, and removal of Incidents and Groups on its timeline.

  4. Understand MotorCortex Effects

    Effects are a type of Incident in MotorCortex used to animate the attribute values of selected elements within a context. All Effects follow a consistent initialization syntax, taking exactly two arguments: an attributes object (which defines what to animate) and a properties object (which defines how the animation behaves).

  5. Develop custom Player plugins for Clips

    Player plugins are used to implement custom playback behavior for MotorCortex Clips. Detailed implementation guidance for Players is located in the 'Execution' chapter of the documentation.

  7. Understand MotorCortex plugin and Incident types

    MotorCortex allows developers to create reusable, parametric Incidents and distribute them as plugins. Incidents are used on Clips to define behavior, content, or transformations. The primary types of Incidents and plugins include:

    • Animations: Full Clips that can function as standalone Clips or as Incidents on other Clips. They accept parameters during construction and adjust content/action dynamically at runtime.
    • Effects: Incidents without a body (context) that tween attribute values of selected elements within the Clip they belong to.
    • Custom Clips: Clips that manipulate non-DOM contexts (e.g., WebGL, Canvas) by extending the BrowserClip class. They only accept Incidents explicitly developed for them.
    • Exotic Clips: Domain-agnostic Clips (e.g., for audio synthesis, IoT, robotics) created by extending ExtendableClip and ExtendableContextHandler. They provide full timeline functionality (seek, flash, export, conflict checking) without browser-specific assumptions.
    • Audio Plugins: Can be integrated into Animations and Custom Clips, or developed as pure audio plugins using audio: "custom" mode with an Exotic Clip.
    • Media Incidents: Used for media playback (e.g., video, YouTube) by extending the MediaIncident class.
    • Players: A unique plugin type that does not expose Incidents; instead, they provide control over the execution of a Clip using the MotorCortex API.

  8. Understand the MotorCortex audio routing graph

    MotorCortex implements audio capabilities based on the Web Audio API. Every Clip and AudioClip within an Incident tree possesses an Audio Node Set. These sets are interconnected to form an audio routing graph that targets the user's speakers. Each Audio Node Set consists of a chain: a Gain Node, a Pan Node, and a Master Node. The output of one set connects to the input of another, mirroring the hierarchy of the Incidents tree. The root Clip's setVolume(level) method controls the master gain of the entire routing graph.

  9. Understand the MotorCortex Clip concept

    A Clip in MotorCortex is a container defined by a specific context (such as HTML or CSS). It serves as a timeline where developers can position Incidents. An Incident is a generic term for anything that can be added to a Clip's timeline, including Effects, Animations, or other nested Clips.

    MotorCortex Clips possess the following characteristics:

    • Playable: They support play, pause, and seek operations.
    • Dynamic: They are designed to change during runtime.
    • Parametric: They accept properties that modify their appearance and behavior.
    • Isolated: They are completely sealed from their external environment.
    • Portable: They can be saved and transferred as JSON files.

  10. Understand MotorCortex core concepts: Clips, Contexts, and Groups

    MotorCortex uses a timeline-based approach to manage events (Incidents).

    • Context: Represents the material part or scene of an animation (e.g., the environment and objects involved). In MotorCortex, a context always belongs to a Clip.
    • Clip: The primary container that holds the context and the timeline of events.
    • Incidents: Specific events with a defined position and duration on the timeline.
    • Groups: Used to group multiple Incidents together for organized management of the timeline.

  11. Understand the MotorCortex 'flash' mechanism when adding Incidents

    Whenever addIncident is called, MotorCortex performs a flash: it replays the entire Clip's state from millisecond 0 up to the current playhead position. This ensures all Incidents (old and new) remain in perfect synchronization. While this is the default and safest behavior, it can be computationally expensive if many Incidents are added in quick succession during live playback.

  12. MotorCortex Template Engine Overview

    MotorCortex provides a built-in Template Engine for the html and css props of Clips. It is designed to be safe from code injection as it does not use eval or new Function.

    For HTML templates, the engine requires a single root element. Templates with multiple top-level elements will fail to render correctly.

    <!-- Correct: Single root element -->
<div>
  <div class="alpha"><span>Item 1</span></div>
  <div class="alpha"><span>Item 2</span></div>
</div>

<!-- Incorrect: Multiple root elements -->
<div class="alpha"><span>Item 1</span></div>
<div class="alpha"><span>Item 2</span></div>