Code.Movie

Integrations

@codemovie/code-movie is just a JavaScript library that turns strings into other stings, but several plugins for more high-level tasks do exist.

UI Wrapper Web Component: @codemovie/code-movie-runtime

Wraps a Code.Movie animation in a web component that provides a basic UI and implements high-level JS APIs that make building custom controls for animations easy.

Loading the module registers the component as the HTML tag <code-movie-runtime>, which you can than use to wrap the animation HTML. The controls attribute enabled basics buttons to step through the animation, while keyframes lists the available keyframes:

<script type="module" src="dist/index.js"></script>

<!-- Supports switching through 4 keyframes using
     the built-in controls UI -->
<code-movie-runtime controls keyframes="0 1 2 3">
  <!-- Animation HTML goes here -->
</code-movie-runtime>

<script type="module" src="dist/index.js"></script>

<!-- Supports switching through 4 keyframes using
     the built-in controls UI -->
<code-movie-runtime controls keyframes="0 1 2 3">
  <!-- Animation HTML goes here -->
</code-movie-runtime>

You can either customize the controls by providing a custom template or just wrap the element and use the JS API.

Markdown support: @codemovie/code-movie-marked-plugin

Plugin for Marked that extends markdown with a wrapper syntax for fenced code blocks, which then get turned into animations:

!!!json

```
[]
```

```
["World"]
```

```
["Hello", "World"]
```

```
[
  "Hello",
  "World"
]
```

!!!

!!!json

```
[]
```

```
["World"]
```

```
["Hello", "World"]
```

```
[
  "Hello",
  "World"
]
```

!!!

With a moderate amount of plugin configuration the above turns into the animation you would expect:

[]

["World"]

["Hello", "World"]

[
  "Hello",
  "World"
]

The plugin supports decorations and passing metadata to frames and animations.

Animations from HTML: @codemovie/code-movie-html

Turns DOM elements into frame objects. If you write HTML or something that works with HTML and you want to turn DOM into animations, this is the library for you:

// Turns the contents of <pre class="frame"> elements  into frame
// objects.
import { framesFromDom } from "@codemovie/code-movie-html";
const frameElements = document.querySelectorAll("pre.frame");
const frames = framesFromDom(frameElements);
// "frames" is ready for use with the core library

// Turns the contents of <pre class="frame"> elements  into frame
// objects.
import { framesFromDom } from "@codemovie/code-movie-html";
const frameElements = document.querySelectorAll("pre.frame");
const frames = framesFromDom(frameElements);
// "frames" is ready for use with the core library