Build dynamic HTML and static PDF presentations using typst from a single source.

The short tour of Animo gives a quick impression of its capabilities.

A minimal deck with one slide and one animation looks like this:

#import "@preview/animo:0.2.0": *
#show: animo.with(width: 16cm, height: 9cm, margin: 1cm)

#slide(animation: {
  import anim: *
  sub(reveal("punchline"))
})[
  What makes a good punchline?

  #tag("punchline")[Timing.]
]

The body of a slide defines the contents and tags the parts an animation may address. The animation argument says when and how tagged parts move or change.

Key features:

• One source file compiles to an animated HTML deck, a presentation PDF and a handout PDF.
• The HTML presentation comes with a runtime that supports visual effects, such as moving, scaling, fading, replacing, resetting, hiding, revealing and morphing content.
• Slides are drawn on a canvas that can be larger than the slide, so the deck can pan over it.
• Plain typst inside a slide: no template machinery and no theme to learn.
• Every position in a deck is a URL, so a deep link lands on a subslide.
• Content and animation stay separate, so a slide body reads as a document.
• Extensive validation of HTML outputs against different browser engines with playwright.

Demos

Each demo deck shows, slide by slide, features that the Presentation Author Guide explains. Most demo decks accompany one page of the guide, and their title slide links to that page.

A deck opens in a new tab. Step through the HTML version with the arrow keys or a click. Most decks import the colors, the title slide, the styles and the slide wrapper they share from the auxiliary file _common.typ, so a copy of such a deck needs _common.typ in the same directory.

The Animo Logo

Animo exports its logo in two forms. animo-logo draws the logo alone, as an image in any color. made-with-animo draws a badge that places the logo beside the words “made with Animo”. Both take the color of the surrounding text, unless their fill: argument names a color.

If Animo helped you make a presentation, you are welcome to show the badge on your deck. Showing it is optional, and a corner of the title slide is a good place for it:

#slide[
  = A Talk About Something
  #place(bottom + right, made-with-animo(height: 1cm))
]

The title slide of each demo deck that links to the guide shows the badge in white.

Status

Animo is currently a proof of concept. API stability is not strictly guaranteed before a 1.0 release, but no major breaking changes are planned. Despite the version number, it already has enough features to make a complete presentation, with a unique approach to animations.

Where to Go Next

• Presentation Author Guide, which covers everything from writing a slide up to what a deck costs to compile
• Reference, every public name and its arguments
• Animo Development Guide, for changing Animo itself
• planning/design.md, the specification, including the reasoning behind every decision, and planning/findings.md, the verified typst and browser behaviour it rests on
• CONTRIBUTING.md

License

Apache-2.0. See LICENSES/Apache-2.0.txt.