**Tesserax** comes with a powerful procedural animation system that renders animated GIF or MP4 videos. To enable it, you need to install it with the `tesserax[export]` to download the appropriate dependencies.

::: {.callout-note}
You can use the animation framework without the `export` extra to build the animations, and export a sequence of SVG files to stitch them on your own.
:::

The first step to create an animation is to construct a `Scene` object attached to your `Canvas`. With that, you can manually capture snapshots of the whole canvas, and render the final sequence proceduraly.

```{python}
import math
from tesserax import Canvas, Rect, deg
from tesserax.animation import Scene

# 1. Build
with Canvas() as canvas:
    back = Rect(100, 100, fill="white")
    rect = Rect(50, 50, fill="orange")

# 2. Animate
scene = Scene(canvas, fps=30)
for i in range(30):
    rect.rotated(deg(3))
    canvas.align().fit()
    scene.capture()

# 3. View inline
scene.display()
```

<br>

## The Animation Engine

Building animations by hand is powerful, but suboptimal for large scale diagrams. For complex animations that require, e.g., interpolating vectors, Tesserax provides an `Animation` class that abstracts the process of procedural animation.

On top of this abstraction, Tesserax provides a number of builtin animations for most common patterns. `Scene.play(...)` allows to automatically run animations and capture the corresponding steps. The easiest way to do this is to use the `Shape.animate` helper, which contains several methods to create animations on the fly for a given shape.

```{python}
import math
from tesserax import Canvas, Rect, deg
from tesserax.animation import Scene

# 1. Build
with Canvas() as canvas:
    back = Rect(100, 100, fill="white")
    rect = Rect(50, 50, fill="orange")

canvas.align().fit()

# 2. Animate
scene = Scene(canvas, fps=30)
scene.play(rect.animate.rotate(deg(90)), duration=1)

# 3. View inline
scene.display()
```
