Quick start

Code.Movie is a JavaScript library that turns code snippets into animations built from HTML and CSS. Think code diffs meets syntax highlighting meets CSS transitions. 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
];

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

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

import { animateHTML } 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(),
});

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

import { animateHTML } 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(),
});

... and you get animated, syntax highlighted code ready for your next slide deck or coding tutorial:

[]

["World"]

["Hello", "World"]

[
  "Hello",
  "World"
]

Things to note:

• The currently visible code can be selected and copied easily.
• Because this library works with 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.
• 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

Check out the full tutorial for a more in-depth explanation of these steps or 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.