English | 简体中文 | MoonBit Package

Moon Lottie is a Lottie animation rendering engine developed in MoonBit. It provides a complete, cross-platform animation solution—from low-level JSON parsing to high-performance Wasm and JS rendering in the browser.

🎬 Live Demo

• MoonBit toolchain
• Node.js 20+

moon update
npm install
moon test

1. Preparation:

   moon update
   npm install

2. Start development server:

   # Automatically builds MoonBit core and syncs products
   npm run dev

# Full build process (core compilation, package sync, site, and examples)
npm run build:deploy

Build artifacts will be generated in deploy-dist/ with the following structure:

• Site (Preview & Features): /
• Core SDK Example: /examples/moon-lottie-core/
• React SDK Example: /examples/moon-lottie-react/
• Unified Runtimes: /runtime/js/ and /runtime/wasm/

Moon Lottie is now published on Mooncakes. Install it in a MoonBit project with:

moon add cg-zhou/moon_lottie

See the official package docs on Mooncakes: https://mooncakes.io/docs/cg-zhou/moon_lottie

SDKs are located in packages/*.

React Integration:

import { MoonLottiePlayer } from '@moon-lottie/react'

function App() {
  return (
    <MoonLottiePlayer
      src="/animation.json"
      autoplay
      wasmPath="/runtime/wasm/moon-lottie-runtime.wasm"
    />
  )
}

Export animations to SVG frames or render them directly in the terminal:

# Print basic animation info
moon run cmd/cli -- ./samples/5_fireworks.json

# Play the animation in the terminal
moon run cmd/cli -- play ./samples/5_fireworks.json

# Export frames as SVG files
moon run cmd/cli -- svg ./samples/5_fireworks.json -o ./output_frames

Moon-lottie currently supports the following features:

• ✅ Shapes: Ellipse, Rect, Polystar, Path (with Trim Path & Rounding support).
• ✅ Compositing: Layer masks, track mattes, and nested pre-compositions.
• ✅ Assets: Full image layer support.
• ✅ Expressions: JS-hosted expression evaluation.
• ✅ Strokes: Line caps, line joins, and dashed strokes across renderers.

For detail coverage, please refer to our Feature Matrix.

MIT