@kissmybutton/mc-code

MotorCortex plugin for displaying syntax-highlighted code with line-level animation.

Installation

npm install @kissmybutton/mc-code

Peer dependency: @donkeyclip/motorcortex >= 9.24.0

Supported languages

JavaScript, TypeScript, Python, Bash, JSON, YAML, HTML, CSS. Each with language-specific keyword coloring, comment styles, and structural highlighting.

Quick start

import { HTMLClip, loadPlugin } from "@donkeyclip/motorcortex";
import Player from "@donkeyclip/motorcortex-player";
import codeDef from "@kissmybutton/mc-code";

const McCode = loadPlugin(codeDef);

const clip = new HTMLClip({
  html: '<div id="scene" style="width:100%;height:100%;"></div>',
  host: document.getElementById("clip"),
  containerParams: { width: "900px", height: "600px" },
});

const codeClip = new McCode.Clip(
  {
    code: 'function hello() {\n  return "world";\n}',
    language: "javascript",
    theme: "dark",
    fontSize: 15,
  },
  {
    selector: "#scene",
    containerParams: { width: "900px", height: "600px" },
  },
);

// Progressive write-in
codeClip.addIncident(
  new McCode.WriteCode(
    { animatedAttrs: { writeCode: 1 } },
    { selector: "!#code", duration: 2000 },
  ),
  500,
);

// Highlight line 1
codeClip.addIncident(
  new McCode.CodeHighlight(
    { animatedAttrs: { highlightLine_1: 1 }, color: "rgba(99,102,241,0.35)" },
    { selector: "!#code", duration: 800 },
  ),
  3000,
);

clip.addIncident(codeClip, 0);
new Player({ clip });

Clip attrs

| Attr | Type | Default | Description | | ---------- | ------ | -------------- | ------------------------------------ | | code | string | "" | The source code to display | | language | string | "javascript" | Language for syntax coloring | | theme | string | "dark" | Color theme: "dark" or "light" | | fontSize | number | 14 | Font size in pixels |

Incidents

WriteCode (Effect)

Progressively reveals code lines with a typewriter-style animation.

new McCode.WriteCode(
  { animatedAttrs: { writeCode: 1 } },  // 0 = hidden, 1 = fully visible
  { selector: "!#code", duration: 3000 },
);

CodeHighlight (Effect)

Pulses a line's background color with a double-pump effect. Each line needs a unique attr key highlightLine_N where N is the 0-based line index.

// Highlight line 5 (green)
new McCode.CodeHighlight(
  { animatedAttrs: { highlightLine_5: 1 }, color: "rgba(46,160,67,0.3)" },
  { selector: "!#code", duration: 800 },
);

// Multiple lines don't conflict because each has a unique key
new McCode.CodeHighlight(
  { animatedAttrs: { highlightLine_8: 1 }, color: "rgba(231,111,81,0.3)" },
  { selector: "!#code", duration: 800 },
);

Line IDs

Each line in the rendered code gets an id: line_0, line_1, line_2, etc. (0-based).

Themes

Dark (default)

Dark background (#1e1e2e) with Catppuccin-inspired token colors.

Light

Light background (#fafafa) with One Light-inspired token colors.

License

MIT