vue-motion

The next generation animation engine for Vue ecosystem.

📒 Introduction

vue-motion is a modern animation engine like Python's Manim for Vuejs ecosystem, it provide lots of widget to help users produce animation and video rapidly. And it has a high scalability, which means you can easily create you own animation style.

vue-motion's predecessor was the Newcar animation engine, but later the development was stopped for some special reasons. If you are an old user of Newcar, you are welcome to migrate to vue-motion.

🎥 Demos

🗺 Roadmap

• Basic Widget
  • Arc
  • Group
  • Line
  • Polygon
  • Rect
  • Text
  • Image
  • Mask
  • Video
• Animations
  • move
  • rotate
  • scale
  • create
  • destroy
  • stroke
  • stroke-fill
  • zoom-in
  • zoom-out
  • focusOn
  • circle-indicate
  • flash
  • rippleOut
  • show-creation-then-destruction-around
  • show-circle-creation-then-destruction-around
  • show-passing-circle-flash-around
  • show-passing-flash-around
  • wiggle
  • number-change
  • write
  • transform
• Extensions
  • Chart
    • BarChart
    • LineChart
    • ScatterChart
    • BubbleChart
    • MixedChart
    • ...
  • Codeblock (Shikijs)
  • Geometry
    • Angle
    • Dot
    • Difference
    • Intersection
    • Union
    • Brace
  • Layout
    • Row
    • Column
  • Markdown
  • Math
    • MathFunction
    • NumberPlane
    • NumberAxis
    • PolarPlane
    • Text
  • Mindmap
  • Social-Platform
    • ContentCard
      • Twitter
      • Youtube
      • Facebook
      • ...
    • AccountCard
      • ...
    • Infomation (e.g. Follower, Following, Stars)
  • Table
  • Typst
  • ThreeJs
  • UI
    • Window
    • Button
    • ProgressBar
    • ...
  • Lights
• Functions
  • Animation
  • Event
  • Resources Preload
  • Visual App
  • Export