How-to guides

Task-focused recipes for solving production problems with the Anim language and CLI.

---

Table of Contents

1. How to Import Adobe After Effects / Lottie Animations
2. How to Build and Animate 2D Deformable Meshes (mesh2d & deform2d)
3. How to Render Frame Sequences and Video Outputs
4. How to Generate Parametric Layouts with Collection Functions
5. How to Model Custom Pure Functions and 3D Transformations

---

1. How to Import Adobe After Effects / Lottie Animations

Anim includes a built-in fail-closed converter for supported Lottie JSON files (anim import-lottie).

Step 1: Convert Lottie JSON to .anim Source

Run the import-lottie subcommand, passing your input JSON file and specifying an output file with an .anim extension:

anim import-lottie skater-girl.json -o skater_girl.anim --force

Step 2: Inspect the Output

The converter generates clean, fully editable .anim source code representing shapes, keyframes, signals, and compositions:

// Generated by anim import-lottie
let layer_0_pos_x = tween(from: 100px, to: 450px, start: 0s, end: 2s);
let layer_0_pos_y = tween(from: 200px, to: 200px, start: 0s, end: 2s);

export let main = composition(
  width: 1920px,
  height: 1080px,
  duration: 5s,
  fps: 60fps,
  scene: stack(children: [ ... ])
);

Step 3: Validate and Render

anim check skater_girl.anim
anim render skater_girl.anim --frame 30 -o skater_frame_30.png

NOTE

The Lottie importer enforces a strict fail-closed profile. Unsupported features such as bitmap image layers, gradients, text, and effects return a structured JSON path such as $.assets[0].

---

2. How to Build and Animate 2D Deformable Meshes (mesh2d & deform2d)

Anim supports mass-spring skeletal mesh physics with mesh2d and deform2d for realistic rubber-hose character animation and bending surfaces. Scrub the live physics render below to observe 120 Hz spring-mass solver results:

Rendered SVG2D Skeletal Physics Mesh Deformation (120 Hz Solver)

Loading rendered frames…

Step 1: Define the Rest Mesh Topology

Specify 2D vertices (with mobility coefficients Q16 Q0..1) and triangle indices:

let character_mesh = mesh2d(
  vertices: [
    {x: 100px, y: 100px, mobility: 0.2},
    {x: 200px, y: 100px, mobility: 0.8},
    {x: 150px, y: 250px, mobility: 1.0}
  ],
  triangles: [
    {a: 0, b: 1, c: 2, fill: #e11d48}
  ]
);

Step 2: Define Animated Target Control Points

Create dynamic target positions for the root and bone tips using signals:

let sway = tween(from: -30px, to: 30px, start: 0s, end: 1.5s);

let root_pos = target2d(x: 150px, y: 100px);
let tip_pos  = target2d(x: 150px + sway, y: 250px);

Step 3: Solve the Deformable Physics Simulation

Invoke deform2d to bind mesh vertices to control targets using deterministic spring constraints:

let deformed_character = deform2d(
  mesh: character_mesh,
  skeleton: rig,
  root: root_pos,
  tips: [tip_pos],
  tick: 1s / 120,
  iterations: 4,
  edge_stiffness: 0.35,
  area_stiffness: 0.15,
  tether_stiffness: 0.20,
  soft_damping: 0.12
);

---

3. How to Render Frame Sequences and Video Outputs

Anim supports CPU raster rendering, single-frame SVG output, PNG sequences, and streaming video via FFmpeg integration.

Scenario A: Exporting High-Resolution PNG Sequence

To export a range of frames (e.g. frames 0 to 120) with padded frame numbers:

mkdir -p output
anim render my_scene.anim --range 0..120 -o output/frame_%04d.png --force

Scenario B: Exporting Vector SVG Output

To export a specific frame as standalone SVG:

anim render my_scene.anim --frame 45 -o output/frame_45.svg

Scenario C: Exporting MP4 / WebM Video

To export video directly using installed FFmpeg:

anim render my_scene.anim --range 0..300 -o animation.mp4 \
  --video raster \
  --video-codec libx264 \
  --background "#ffffff"

---

4. How to Generate Parametric Layouts with Collection Functions

Anim supports pure functional operations (map, filter, fold, scan, zip, range) to construct repetitive graphics programmatically without imperative loops. Here range and map line up a whole parade of hopping penguins from a single template:

Live canvasPenguin Parade with map & range

400 × 30060 fps

Animated preview for Penguin Parade with map & range.

Loading renderer…

0.00s · 1 / 1

Rendered SVGPenguin Parade with map & range

Loading rendered frames…

// range and map line up a whole parade of penguins hopping in the snow.
let base_scene = stack(children: [
  rect(x: 0px, y: 0px, width: 600px, height: 400px, fill: #a5d8f0),
  ellipse(x: 54px, y: 48px, width: 74px, height: 74px, fill: #fef9c3),
  rect(x: 0px, y: 300px, width: 600px, height: 100px, fill: #f8fafc),
  ellipse(x: 200px, y: 120px, width: 5px, height: 5px, fill: #ffffff),
  ellipse(x: 420px, y: 90px, width: 4px, height: 4px, fill: #ffffff)
]);
let base = step(before: base_scene, after: base_scene, at: 0s);
let hop_up = tween(from: 0px, to: -34px, start: 0s, end: 0.5s, easing: cubic_bezier(x1: 0.2, y1: 0.8, x2: 0.4, y2: 1));
let hop_down = tween(from: -34px, to: 0px, start: 0s, end: 0.5s, easing: cubic_bezier(x1: 0.6, y1: 0, x2: 0.8, y2: 1));
let hop = repeat(signal: sequence(first: hop_up, second: hop_down, at: 0.5s), every: 1s);
let indices = range(from: 0, to: 7);
let make_penguin(i) = translate(
  x: 78px + i * 74px,
  y: 300px + hop * (0.5 + i * 0.1),
  scene: stack(children: [
    ellipse(x: -22px, y: -78px, width: 44px, height: 78px, fill: #1f2937),
    ellipse(x: -15px, y: -60px, width: 30px, height: 56px, fill: #f8fafc),
    ellipse(x: -16px, y: -94px, width: 32px, height: 32px, fill: #1f2937),
    ellipse(x: -10px, y: -88px, width: 8px, height: 10px, fill: #f8fafc),
    ellipse(x: 2px, y: -88px, width: 8px, height: 10px, fill: #f8fafc),
    ellipse(x: -8px, y: -86px, width: 4px, height: 5px, fill: #1f2937),
    ellipse(x: 4px, y: -86px, width: 4px, height: 5px, fill: #1f2937),
    triangle(x1: -6px, y1: -80px, x2: 6px, y2: -80px, x3: 0px, y3: -72px, fill: #f97316),
    triangle(x1: -22px, y1: -48px, x2: -34px, y2: -42px, x3: -22px, y3: -34px, fill: #1f2937),
    triangle(x1: 22px, y1: -48px, x2: 34px, y2: -42px, x3: 22px, y3: -34px, fill: #1f2937),
    ellipse(x: -14px, y: -6px, width: 14px, height: 8px, fill: #f97316),
    ellipse(x: 0px, y: -6px, width: 14px, height: 8px, fill: #f97316)
  ])
);
let penguins = map(items: indices, transform: make_penguin);
export let main = composition(width: 600px, height: 400px, duration: 3s, fps: 60fps, scene: stack(children: [base, stack(children: penguins)]));

TerminalAfter saving the source as example.anim

anim render example.anim --range 0..120 -o frame_%04d.png

---

5. How to Project Source-Defined 3D Data

Anim's renderer is 2D, but pure records and functions can model points and project them into 2D geometry. This is how the gallery's cube example creates an isometric scene without implying a depth buffer or general 3D renderer.

Step 1: Define Pure Vector Helper Functions

let vector(x, y, z) = {x: x, y: y, z: z};

let project_3d(v) = {
  x: 400px + (v.x - v.z) * 87px,
  y: 300px + (v.x + v.z) * 50px - v.y * 100px
};

Step 2: Map 3D Vertices to 2D Primitives

let point_3d = vector(x: 1, y: 1 / 2, z: 2);
let projected = project_3d(v: point_3d);

let point_node = ellipse(
  x: projected.x - 5px,
  y: projected.y - 5px,
  width: 10px,
  height: 10px,
  fill: #f59e0b
);

---

Use the reference manual for the implemented syntax, constructors, diagnostic codes, and CLI flags.