Motion

Vector animation that looks the same on every platform.

Animate with Motion Reference

Written by a model, first try

Live dot

Progress ring

Typing

Heartbeat

Equalizer

Error

Sun

Wi-Fi

Lottie → dialect → compile

“A success checkmark that draws itself inside a circle, then stays, 64×64.”

Lottie

Dialect

Compiled

{
  "v": "5.12.0",
  "fr": 60,
  "ip": 0,
  "op": 90,
  "w": 64,
  "h": 64,
  "layers": [
    {
      "ty": 4,
      "ind": 1,
      "nm": "check",
      "ip": 0,
      "op": 90,
      "st": 0,
      "ks": {
        "a": {
          "a": 0,
          "k": [
            0,
            0
          ]
        },
        "p": {
          "a": 0,
          "k": [
            0,
            0
          ]
        },
        "s": {
          "a": 0,
          "k": [
            100,
            100
          ]
        },
        "r": {
          "a": 0,
          "k": 0
        },
        "o": {
          "a": 0,
          "k": 100
        }
      },
      "shapes": [
        {
          "ty": "gr",
          "it": [
            {
              "ty": "sh",
              "ks": {
                "a": 0,
                "k": {
                  "c": false,
                  "v": [
                    [
                      19,
                      33
                    ],
                    [
                      28,
                      42
                    ],
                    [
                      45,
                      23
                    ]
                  ],
                  "i": [
                    [
                      0,
                      0
                    ],
                    [
                      0,
                      0
                    ],
                    [
                      0,
                      0
                    ]
                  ],
                  "o": [
                    [
                      0,
                      0
                    ],
                    [
                      0,
                      0
                    ],
                    [
                      0,
                      0
                    ]
                  ]
                }
              }
            },
            {
              "ty": "st",
              "c": {
                "a": 0,
                "k": [
                  1,
                  1,
                  1,
                  1
                ]
              },
              "o": {
                "a": 0,
                "k": 100
              },
              "w": {
                "a": 0,
                "k": 5
              },
              "lc": 2,
              "lj": 2
            },
            {
              "ty": "tm",
              "s": {
                "a": 0,
                "k": 0
              },
              "e": {
                "a": 1,
                "k": [
                  {
                    "t": 0,
                    "s": [
                      0
                    ],
                    "o": {
                      "x": [
                        0.42
                      ],
                      "y": [
                        0
                      ]
                    },
                    "i": {
                      "x": [
                        0.58
                      ],
                      "y": [
                        1
                      ]
                    }
                  },
                  {
                    "t": 20,
                    "s": [
                      0
                    ],
                    "o": {
                      "x": [
                        0.42
                      ],
                      "y": [
                        0
                      ]
                    },
                    "i": {
                      "x": [
                        0.58
                      ],
                      "y": [
                        1
                      ]
                    }
                  },
                  {
                    "t": 55,
                    "s": [
                      100
                    ]
                  }
                ]
              },
              "o": {
                "a": 0,
                "k": 0
              },
              "m": 1
            },
            {
              "ty": "tr",
              "a": {
                "a": 0,
                "k": [
                  0,
                  0
                ]
              },
              "p": {
                "a": 0,
                "k": [
                  0,
                  0
                ]
              },
              "s": {
                "a": 0,
                "k": [
                  100,
                  100
                ]
              },
              "r": {
                "a": 0,
                "k": 0
              },
              "o": {
                "a": 0,
                "k": 100
              }
            }
          ]
        }
      ]
    },
    {
      "ty": 4,
      "ind": 2,
      "nm": "circle",
      "ip": 0,
      "op": 90,
      "st": 0,
      "ks": {
        "a": {
          "a": 0,
          "k": [
            0,
            0
          ]
        },
        "p": {
          "a": 0,
          "k": [
            32,
            32
          ]
        },
        "s": {
          "a": 0,
          "k": [
            100,
            100
          ]
        },
        "r": {
          "a": 0,
          "k": -90
        },
        "o": {
          "a": 0,
          "k": 100
        }
      },
      "shapes": [
        {
          "ty": "gr",
          "it": [
            {
              "ty": "el",
              "p": {
                "a": 0,
                "k": [
                  0,
                  0
                ]
              },
              "s": {
                "a": 0,
                "k": [
                  56,
                  56
                ]
              }
            },
            {
              "ty": "fl",
              "c": {
                "a": 0,
                "k": [
                  0.133,
                  0.69,
                  0.4,
                  1
                ]
              },
              "o": {
                "a": 1,
                "k": [
                  {
                    "t": 0,
                    "s": [
                      0
                    ],
                    "o": {
                      "x": [
                        0.42
                      ],
                      "y": [
                        0
                      ]
                    },
                    "i": {
                      "x": [
                        0.58
                      ],
                      "y": [
                        1
                      ]
                    }
                  },
                  {
                    "t": 30,
                    "s": [
                      100
                    ]
                  }
                ]
              }
            },
            {
              "ty": "tm",
              "s": {
                "a": 0,
                "k": 0
              },
              "e": {
                "a": 1,
                "k": [
                  {
                    "t": 0,
                    "s": [
                      0
                    ],
                    "o": {
                      "x": [
                        0.42
                      ],
                      "y": [
                        0
                      ]
                    },
                    "i": {
                      "x": [
                        0.58
                      ],
                      "y": [
                        1
                      ]
                    }
                  },
                  {
                    "t": 30,
                    "s": [
                      100
                    ]
                  }
                ]
              },
              "o": {
                "a": 0,
                "k": 0
              },
              "m": 1
            },
            {
              "ty": "tr",
              "a": {
                "a": 0,
                "k": [
                  0,
                  0
                ]
              },
              "p": {
                "a": 0,
                "k": [
                  0,
                  0
                ]
              },
              "s": {
                "a": 0,
                "k": [
                  100,
                  100
                ]
              },
              "r": {
                "a": 0,
                "k": 0
              },
              "o": {
                "a": 0,
                "k": 100
              }
            }
          ]
        }
      ]
    }
  ],
  "assets": []
}

{
  "size": [
    64,
    64
  ],
  "duration": 1400,
  "fps": 60,
  "layers": [
    {
      "type": "shape",
      "id": "check",
      "transform": {},
      "shapes": [
        {
          "type": "path",
          "d": "M20 33 L28 41 L44 24"
        },
        {
          "type": "trim",
          "start": 0,
          "end": {
            "keys": [
              {
                "t": 0,
                "v": 0
              },
              {
                "t": 600,
                "v": 0,
                "ease": "ease-out"
              },
              {
                "t": 1100,
                "v": 100
              }
            ]
          }
        },
        {
          "type": "stroke",
          "color": "$color.success",
          "width": 5,
          "cap": "round",
          "join": "round"
        }
      ]
    },
    {
      "type": "shape",
      "id": "circle",
      "transform": {
        "anchor": [
          32,
          32
        ],
        "position": [
          32,
          32
        ],
        "rotation": -90
      },
      "shapes": [
        {
          "type": "ellipse",
          "position": [
            32,
            32
          ],
          "size": [
            48,
            48
          ]
        },
        {
          "type": "trim",
          "start": 0,
          "end": {
            "keys": [
              {
                "t": 0,
                "v": 0,
                "ease": "ease-in-out"
              },
              {
                "t": 650,
                "v": 100
              }
            ]
          }
        },
        {
          "type": "stroke",
          "color": "$color.success",
          "width": 4,
          "cap": "round",
          "join": "round"
        }
      ]
    }
  ]
}

{
  "assets": [],
  "ddd": 0,
  "fr": 60,
  "h": 64,
  "ip": 0,
  "layers": [
    {
      "ddd": 0,
      "ind": 1,
      "ip": 0,
      "ks": {
        "a": {
          "a": 0,
          "k": [
            0,
            0
          ]
        },
        "o": {
          "a": 0,
          "k": 100
        },
        "p": {
          "a": 0,
          "k": [
            0,
            0
          ]
        },
        "r": {
          "a": 0,
          "k": 0
        },
        "s": {
          "a": 0,
          "k": [
            100,
            100
          ]
        }
      },
      "ln": "check",
      "op": 84,
      "shapes": [
        {
          "ks": {
            "a": 0,
            "k": {
              "c": false,
              "i": [
                [
                  0,
                  0
                ],
                [
                  0,
                  0
                ],
                [
                  0,
                  0
                ]
              ],
              "o": [
                [
                  0,
                  0
                ],
                [
                  0,
                  0
                ],
                [
                  0,
                  0
                ]
              ],
              "v": [
                [
                  20,
                  33
                ],
                [
                  28,
                  41
                ],
                [
                  44,
                  24
                ]
              ]
            }
          },
          "ty": "sh"
        },
        {
          "e": {
            "a": 1,
            "k": [
              {
                "i": {
                  "x": 1,
                  "y": 1
                },
                "o": {
                  "x": 0,
                  "y": 0
                },
                "s": [
                  0
                ],
                "t": 0
              },
              {
                "i": {
                  "x": 0.58,
                  "y": 1
                },
                "o": {
                  "x": 0,
                  "y": 0
                },
                "s": [
                  0
                ],
                "t": 36
              },
              {
                "s": [
                  100
                ],
                "t": 66
              }
            ]
          },
          "m": 1,
          "o": {
            "a": 0,
            "k": 0
          },
          "s": {
            "a": 0,
            "k": 0
          },
          "ty": "tm"
        },
        {
          "c": {
            "a": 0,
            "k": [
              0.5,
              0.5,
              0.5,
              1
            ],
            "sid": "$color.success"
          },
          "lc": 2,
          "lj": 2,
          "o": {
            "a": 0,
            "k": 100
          },
          "ty": "st",
          "w": {
            "a": 0,
            "k": 5
          }
        }
      ],
      "st": 0,
      "ty": 4
    },
    {
      "ddd": 0,
      "ind": 2,
      "ip": 0,
      "ks": {
        "a": {
          "a": 0,
          "k": [
            32,
            32
          ]
        },
        "o": {
          "a": 0,
          "k": 100
        },
        "p": {
          "a": 0,
          "k": [
            32,
            32
          ]
        },
        "r": {
          "a": 0,
          "k": -90
        },
        "s": {
          "a": 0,
          "k": [
            100,
            100
          ]
        }
      },
      "ln": "circle",
      "op": 84,
      "shapes": [
        {
          "d": 1,
          "p": {
            "a": 0,
            "k": [
              32,
              32
            ]
          },
          "s": {
            "a": 0,
            "k": [
              48,
              48
            ]
          },
          "ty": "el"
        },
        {
          "e": {
            "a": 1,
            "k": [
              {
                "i": {
                  "x": 0.58,
                  "y": 1
                },
                "o": {
                  "x": 0.42,
                  "y": 0
                },
                "s": [
                  0
                ],
                "t": 0
              },
              {
                "s": [
                  100
                ],
                "t": 39
              }
            ]
          },
          "m": 1,
          "o": {
            "a": 0,
            "k": 0
          },
          "s": {
            "a": 0,
            "k": 0
          },
          "ty": "tm"
        },
        {
          "c": {
            "a": 0,
            "k": [
              0.5,
              0.5,
              0.5,
              1
            ],
            "sid": "$color.success"
          },
          "lc": 2,
          "lj": 2,
          "o": {
            "a": 0,
            "k": 100
          },
          "ty": "st",
          "w": {
            "a": 0,
            "k": 4
          }
        }
      ],
      "st": 0,
      "ty": 4
    }
  ],
  "meta": {
    "g": "eUI Motion"
  },
  "op": 84,
  "slots": {
    "$color.success": {
      "p": {
        "a": 0,
        "k": [
          0.5,
          0.5,
          0.5,
          1
        ]
      }
    }
  },
  "v": "5.12.0",
  "w": 64
}

Interactive

Level30

Same pixels everywhere

30/30 valid on the first try, 2.8× fewer tokens than Lottie

Docs · eUI