🥮 mooncakes.io

    moon_lottie

    MoonBit 原生高性能 Lottie 动画引擎 | High-performance Lottie animation engine in native MoonBit

    lottie
    animation
    svg
    canvas
    cli
    wasm
    Download zip
    Author
    Version
    0.3.0
    License
    MIT
    Repository
    Last updated
    5 months ago
    Downloads
    175

    #MoonBit Lottie

    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

    Passed Coverage Total Lines Source Lines

    #Project Documentation

    DocumentDescription
    ArchitectureLayered design and rendering strategy for Moon Lottie.
    Completion StatusFulfillment of the original project proposal.
    RoadmapNear-term priorities, develop strategy, and long-term directions.

    #Project Structure

    PathDescription
    lib/The Core: Parsing, modeling, and platform-agnostic rendering.
    cmd/player_runtimeWasm-GC and JS bridge for browser environments.
    cmd/cliUnified CLI for SVG export and console rendering.
    packages/Official wrappers for Vanilla JS, React, and Web Components.
    demo/The project site (Preview, Playground, and features).
    packages/examples/Standalone integration examples to verify SDK behavior.

    #Quick Start

    #Development Environment

    #Installation & Test

    moon update
npm install
moon test

    #Local Development

    1. Preparation:
      moon update
npm install
    2. Start development server:
      # Automatically builds MoonBit core and syncs products
npm run dev

    #Build & Deploy

    # 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/

    #Usage Guide

    #MoonBit Package

    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

    #Web SDK (Alpha)

    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"
    />
  )
}

    #Moon Lottie CLI

    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

    #Features & Roadmap

    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

    Powered by MoonBit

    Site sourceReport issueModulesSkillsBuild queueStatistics

    © 2026 mooncakes.io