anima

Author and render TypeScript mathematical animations with the Anima engine.

4|Updated Dec 26, 2025
One-click install
npx skills add https://github.com/RedWilly/Anima --skill anima
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: anima
Source: https://github.com/RedWilly/Anima/tree/main/skills
Command: npx skills add https://github.com/RedWilly/Anima --skill anima

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Anima centralizes the knowledge needed to author, compose, and render programmatic mathematical animations in TypeScript, removing guesswork about scene lifecycle, animation composition, camera control, and rendering details. It helps authors avoid common pitfalls like using transformative animations on unregistered objects, mismanaging camera framing, or producing inefficient long-video renders.

Core Features & Use Cases

  • Fluent and Pro animation APIs for concise chaining or explicit, reusable Animation objects.
  • Geometry and Mobject primitives (Circle, Rectangle, Line, Polygon, VMobject) with styling, grouping, and layout via VGroup and Graph utilities.
  • Camera system and CameraFrame animations (zoom, centerOn, fitTo, shake, follow) for cinematic control.
  • Easing function catalog and guidance for choosing rate functions, including Manim-style defaults and factory easings.
  • KeyframeAnimation and KeyframeTrack for frame-accurate, multi-property motion paths.
  • Rendering and CLI guidance for mp4/webp/gif/sprite outputs, resolution presets, and segment-level caching to speed iterative renders.
  • Use case examples: short educational clips, complex choreography for long-form videos, data-driven graph visualizations, and production-quality exports with caching.

Quick Start

Render the Scene MyScene defined in myfile.ts to output.mp4 using the anima CLI and explain which scene flag, format, and quality options to use.

Frequently Asked Questions about anima

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create programmatic mathematical animations in TypeScript?

Programmatic mathematical animations in TypeScript are authored by composing scenes with mobjects, cameras, and keyframes. You use fluent or Pro APIs to define geometry and motion, then render outputs via CLI commands in Bun or Canvas projects.

What is the difference between fluent and Pro animation APIs for scene composition?

Fluent APIs allow concise method chaining for quick scene composition, while Pro APIs use explicit, reusable Animation objects. Choosing between them depends on whether you need rapid prototyping or complex, reusable choreography for long-form videos.

How do I configure camera moves and zoom for mathematical animation scenes?

Camera moves and zoom are configured using the CameraFrame animation system. You can apply actions like centerOn, fitTo, zoom, shake, and follow to achieve cinematic control over scene framing during rendering.

Can I render mathematical animations to different video formats using Bun and Canvas?

Yes, you can render mathematical animations to mp4, webp, gif, or sprite outputs using the CLI. The engine supports resolution presets and segment-level caching to speed up iterative rendering workflows in Bun and Canvas projects.

How do keyframe animations and easing functions work for mobjects?

Keyframe animations use KeyframeAnimation and KeyframeTrack for frame-accurate, multi-property motion paths. Easing functions, selected from a catalog including Manim-style defaults and factory easings, control the rate of movement for mobjects.

Why do transformative animations fail on unregistered objects in a scene?

Transformative animations fail on unregistered objects because the scene lifecycle requires mobjects to be properly added before manipulation. Managing the Scene and Mobject lifecycle correctly avoids common pitfalls like mismanaging camera framing or object state.