Integrations

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:

<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.

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

Turns DOM elements into frame objects. If you write HTML or something that works with HTML (like markdown) 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