@moon-lottie/core

High-performance Lottie animation player powered by MoonBit.

Features

• Blazing Fast: Core logic written in MoonBit, compiled to Wasm-GC for native-like performance.
• Lightweight: Zero external dependencies in the core runtime.
• Cross-Platform: Seamlessly switches between Wasm-GC and Pure JS runtimes.
• Ready to Use: Includes imperative API and Web Component support.

Installation

npm install @moon-lottie/core

Runtime Assets

@moon-lottie/core needs the runtime files generated by this repo build output:

• moon-lottie-runtime.wasm
• moon-lottie-runtime.js

In this repository they are synced into packages/moon-lottie/runtime/. In your own app, copy them to a public path and pass that path into the player when needed.

Imperative Usage

import { loadAnimation } from '@moon-lottie/core'

const player = loadAnimation({
  container: document.getElementById('lottie-container'),
  path: '/path/to/animation.json',
  autoplay: true,
  loop: true,
  wasmPath: '/runtime/moon-lottie-runtime.wasm',
  jsRuntimePath: '/runtime/moon-lottie-runtime.js',
})

await player.whenReady()
player.play()

Common methods:

• loadAnimation(options) / load(options)
• play() / pause() / stop() / toggle()
• seek(frame) / goToAndPlay(value, isFrame) / goToAndStop(value, isFrame)
• playSegments(segments, forceFlag)
• switchRuntime('auto' | 'wasm' | 'js')
• addEventListener(type, listener)

Web Component Usage

import '@moon-lottie/core/web-component'

<moon-lottie
  src="/animation.json"
  autoplay="true"
  loop="true">
</moon-lottie>

Supported attributes:

• src
• autoplay
• loop
• speed
• direction
• background

The custom element also exposes player-style methods such as loadAnimation, play, pause, stop, seek, switchRuntime, and whenReady().

Events

The player emits these commonly used events:

• load
• error
• runtimechange
• enterframe
• play
• pause
• complete
• loopComplete
• destroy

Notes

• The current public renderer is canvas.
• Runtime preference defaults to auto, which tries Wasm first and falls back to JS.
• For React users, use @moon-lottie/react.