Designing an Animation Format for AI: How .fmtion Enables LLM-Generated Animations

Every animation tool has a file format. After Effects has .aep. Lottie has .json. We built .fmtion — and we designed it from day one for a world where AI generates your animations.

This isn't a retrospective justification. When we started building Faster's animation runtime in 2024, we made a bet: within two years, most web animations would be generated or modified by AI. That bet shaped every design decision in the format.

Here's what we learned building an animation format that AI can actually work with.

The Problem with Existing Formats

Try asking an LLM to generate a Lottie animation. You'll get something that looks like this:

{
  "v": "5.5.2",
  "fr": 30,
  "ip": 0,
  "op": 90,
  "w": 1920,
  "h": 1080,
  "layers": [{
    "ty": 4,
    "ks": {
      "o": { "a": 1, "k": [{ "t": 0, "s": [0], "e": [100] }] },
      "p": { "a": 0, "k": [960, 540, 0] }
    }
  }]
}

Every property is abbreviated. "ty": 4 means "shape layer." "ks" means "transform." "o" means "opacity." The format was designed for After Effects export — a machine writing for a machine. There's no semantic meaning, no self-documentation, no way for an AI to reason about what the animation does.

Binary formats are opaque. GSAP is imperative JavaScript. CSS animations are scattered across stylesheets. None of these were designed for the workflow we needed: an AI reads a prompt, generates an animation file, and it plays on any website with zero code.

Design Principles for an AI-Native Format

We started with three constraints:

The Parameter System: Animation's API Layer

The most important design decision in .fmtion was the parameter system. Instead of hardcoding animation values, every interactive behavior flows through named parameters with hierarchical paths:

{
  "parameters": {
    "hero/hovered": { "type": "bool", "default": false },
    "hero/scrollProgress": { "type": "float", "default": 0, "min": 0, "max": 1 },
    "menu/open": { "type": "bool", "default": false },
    "theme/accentColor": { "type": "color", "default": "#6366f1" }
  }
}

Parameters are the animation's public API. An AI generating a hero animation doesn't need to know about tweening math or easing curves — it declares parameters like hero/scrollProgress and binds animations to them. The runtime handles the rest.

Seven parameter types cover every use case: bool, float, int, trigger, string, enum, and color. The forward-slash hierarchy (hero/hovered, menu/items/count) gives AI models a natural way to organize animation state — similar to Godot's parameter paths, but designed for web.

Unified Inputs: One System for Mouse, Scroll, Time, and Distance

Most animation libraries handle scroll, mouse tracking, and time-based animations as completely separate systems. In .fmtion, they're all "inputs" — sources that drive parameters:

{
  "inputs": [
    {
      "type": "scroll",
      "parameterId": "hero/scrollProgress",
      "trigger": ".hero-section",
      "start": "top bottom",
      "end": "bottom top"
    },
    {
      "type": "mouse",
      "parameterId": "cursor/x",
      "axis": "x",
      "normalize": "viewport",
      "smooth": 0.1
    },
    {
      "type": "distance",
      "parameterId": "button/proximity",
      "shape": { "type": "circle", "radius": 100 },
      "maxDistance": 300,
      "falloff": "quadratic"
    }
  ]
}

This matters for AI because the mental model is consistent: inputs drive parameters, parameters drive animations. An AI doesn't need to learn three different APIs — it learns one pattern and applies it everywhere.

DOM + Canvas in One File

This is where .fmtion diverges most from other formats. A single file can animate both HTML elements (via CSS transforms) and GPU-rendered canvas scenes:

{
  "dom": [
    {
      "selector": ".hero-title",
      "driver": "hero/scrollProgress",
      "from": { "opacity": 0, "y": 50 },
      "to": { "opacity": 1, "y": 0 },
      "ease": "easeOutCubic"
    }
  ],
  "canvas": [
    {
      "mountSelector": "#hero-canvas",
      "width": 1920,
      "height": 1080,
      "objects": [
        {
          "type": "circle",
          "x": 960, "y": 540,
          "properties": { "radius": 100, "fill": "#6366f1" }
        }
      ],
      "tracks": []
    }
  ]
}

Both the DOM animations and the canvas scene share the same parameter store. When hero/scrollProgress changes, both the HTML title fade and the canvas particle effect respond simultaneously. One parameter, two rendering surfaces, zero glue code.

Interaction Listeners: Events as Data

Traditional animation libraries require JavaScript event handlers. In .fmtion, interactions are declarative:

{
  "listeners": [
    {
      "target": ".hero-card",
      "event": "mouseenter",
      "actions": [{ "set": "hero/hovered", "value": true }]
    },
    {
      "target": ".hero-card",
      "event": "mouseleave",
      "actions": [{ "set": "hero/hovered", "value": false }]
    },
    {
      "target": ".menu-toggle",
      "event": "click",
      "actions": [{ "set": "menu/open", "value": "toggle" }]
    }
  ]
}

An AI can wire up complex interactions without writing a single line of JavaScript. Click toggles, hover states, keyboard triggers — all expressed as JSON. The runtime handles debouncing, throttling, and cleanup.

Data Tables: Typed Contracts for Dynamic Content

For AI-generated templates that need to be customized with real data, .fmtion includes a data table system:

{
  "dataTables": [{
    "id": "team-cards",
    "fields": [
      { "name": "name", "type": "string" },
      { "name": "role", "type": "string" },
      { "name": "color", "type": "color" }
    ],
    "records": [
      { "values": { "name": "Alice", "role": "Engineer", "color": "#6366f1" } },
      { "values": { "name": "Bob", "role": "Designer", "color": "#EC4899" } }
    ]
  }]
}

Data tables let an AI generate the animation structure once, then bind it to dynamic content. A marketing team can swap names, colors, and images without touching the animation logic. The schema acts as a contract between the AI that generates the animation and the humans who customize it.

State Machines for Complex Logic

Simple parameter-driven animations handle 80% of use cases. For the other 20% — multi-step interactions, character animation, game-like UI — .fmtion includes a full state machine system:

{
  "stateMachine": {
    "states": [
      { "id": "idle", "animationId": "idle-clip", "loop": true },
      { "id": "hover", "animationId": "hover-clip" },
      { "id": "active", "animationId": "active-clip" }
    ],
    "transitions": [
      {
        "from": "idle", "to": "hover",
        "conditions": [{ "parameterId": "hovered", "operator": "==", "value": true }],
        "duration": 200
      }
    ]
  }
}

State machines use the same parameter system as everything else. An AI can compose complex interactive behaviors by defining states, transitions, and conditions — all in JSON, all declarative.

Why This Matters for AI

The .fmtion format isn't just "JSON for animations." It's a deliberate API design for a specific consumer: large language models.

Every design decision optimizes for AI readability:

• Semantic naming — "type": "circle" not "ty": 4
• Explicit defaults — every value stated, nothing implicit
• Hierarchical parameters — hero/scrollProgress is self-documenting
• Typed fields — "type": "float", "min": 0, "max": 1 tells the AI the valid range
• One pattern for everything — inputs → parameters → animations. Learn once, apply everywhere.

One Script Tag. Done.

The end result: an AI generates a .fmtion file. You add it to your website with one script tag and a file reference. No build step, no framework dependency, no JavaScript to write.

<script src="https://static.fasterhq.com/js/faster-motion/1.0.5/faster-motion.1.0.5.umd.js"></script>
<script>
  FasterMotion.load('/animations/hero.fmtion');
</script>

The runtime loads the file, creates the parameter store, binds inputs and listeners, renders canvas scenes, animates DOM elements — all from a single declarative JSON file that an AI can read, write, and modify.

We're shipping 1,000+ animation presets in this format. Our AI agents generate new ones from text prompts. And because the format is open and self-describing, any AI model can learn to produce valid .fmtion files by reading the schema.

The best file format for AI isn't the one with the smallest payload or the most features. It's the one where the AI can reason about the animation's intent — and that's what .fmtion was built for.

Sunny Arora is the founder of FasterHQ. Follow our engineering blog for more deep dives into animation engines, WebAssembly, and the tech behind Faster Creative Cloud.