Code.Movie

Quick start

Code.Movie is a JavaScript library that turns code snippets into animations built from HTML and CSS. Think git diffs meets syntax highlighting meets CSS transitions. To get to a bit of basic animated JSON like this...

[]

["World"]

["Hello", "World"]

[
  "Hello",
  "World"
]

...your first declare your keyframes as a list of strings...

let keyframes = [
  { code: `[]` }, // animate from this...
  { code: `["World"]` }, // ... to this ...
  { code: `["Hello", "World"]` }, //  ... to this ...
  { code: `[\n  "Hello",\n  "World"\n]` }, // ... and end with this
];

let keyframes = [
  { code: `[]` }, // animate from this...
  { code: `["World"]` }, // ... to this ...
  { code: `["Hello", "World"]` }, //  ... to this ...
  { code: `[\n  "Hello",\n  "World"\n]` }, // ... and end with this
];

... then load the core library, a theme and the language module, then pass the keyframes to a function:

let keyframes = [
  /* keyframes go here */
];

import { animateHTML, monokaiDark } from "@codemovie/code-movie";
import json from "@codemovie/code-movie/languages/json";

// HTML = string of bog-standard HTML and CSS
let html = animateHTML(keyframes, {
  tabSize: 2,
  language: json(),
  theme: monokaiDark,
});

let keyframes = [
  /* keyframes go here */
];

import { animateHTML, monokaiDark } from "@codemovie/code-movie";
import json from "@codemovie/code-movie/languages/json";

// HTML = string of bog-standard HTML and CSS
let html = animateHTML(keyframes, {
  tabSize: 2,
  language: json(),
  theme: monokaiDark,
});

The end result is animated, syntax highlighted code ready for your next slide deck, coding tutorial, or other project needing to visualize code changes. If you want to get ambitious, you can also add a wide variety of decoration to highlight important snippets or direct your audiences attention:

[]

["World"]

["Hello", "World"]

[
  "Hello",
  "World"
]

Things to note:

• The currently visible code can be selected and copied easily.
• Because this library inputs and outputs plain strings, you can generate the animation in browsers as well as server-side or at compile-time.
• Animations, once generated, require no runtime JavaScript and work entirely by switching classes to trigger different css states. Integrations like <code-movie-runtime> turn even this last step into a no-brainer.
• The animation's look can be customized with a ton of CSS variables. Several built-in themes are at your disposal.
• Animations can be generated from markdown... just like on this page!
• Even though the animations are rendered using HTML and CSS, turning them into HQ video is just a matter of running a simple script.
• You can augment your animations with decorations to underline, highlight or obscure select sections of code

This obviously skipped over a ton of details, but captures the gist of Code Movie. Check out the full tutorial for a more in-depth explanation of the above steps!

Apart from going through the tutorial, you might want to read up on the many CSS variables that you can change to tweak your animations. If you want to discuss something or want to report a bug, head over to the CodeMovie meta repository on Github.